wip: colors

app/api/presets.go

@@ -80,4 +80,18 @@ func ColorPresets(r gin.IRoutes) {
 
 		return preset, nil
 	}))
+
+	r.DELETE("/:id", handler(func(c *gin.Context) (interface{}, error) {
+		preset, err := config.ColorPresetRepository().Find(ctxOf(c), intParam(c, "id"))
+		if err != nil {
+			return nil, err
+		}
+
+		err = config.ColorPresetRepository().Delete(ctxOf(c), &preset)
+		if err != nil {
+			return nil, err
+		}
+
+		return preset, nil
+	}))
 }

webui/src/actions/ColorPresets.ts

@@ -1,5 +1,5 @@
 import {ColorPreset} from "../models/Colors";
-import {getRequest, postRequest} from "../helpers/rest";
+import {deleteRequest, getRequest, postRequest, putRequest} from "../helpers/rest";
 
 export function listColorPresets(): Promise<ColorPreset[]> {
   return getRequest("/color-presets");
@@ -8,3 +8,11 @@ export function listColorPresets(): Promise<ColorPreset[]> {
 export function addColorPreset(name: string, colorString: string) {
   return postRequest("/color-presets", {name, colorString});
 }
+
+export function editColorPreset(id: number, name: string, colorString: string) {
+  return putRequest(`/color-presets/${id}`, {name, colorString});
+}
+
+export function deleteColorPreset(id: number) {
+  return deleteRequest(`/color-presets/${id}`);
+}

webui/src/contexts/DialogContext.tsx

@@ -1,22 +1,29 @@
-import React, {createContext, useState} from "react";
+import React, {createContext, useCallback, useState} from "react";
 import {DialogConfig, DialogType} from "../models/Dialog";
 import {unimplemented} from "../helpers/misc";
+import ColorDialog from "../dialogs/ColorDialog";
 
 interface DialogContextValue {
   dialog: DialogConfig,
   setDialog: (dialog: DialogConfig) => void,
+  clearDialog: () => void,
 }
 
 const DialogContext = createContext<DialogContextValue>({
   dialog: {type: DialogType.None},
   setDialog: unimplemented,
+  clearDialog: unimplemented,
 });
 
 export const DialogContextProvider: React.FC = ({children}) => {
   const [dialog, setDialog] = useState<DialogConfig>({type: DialogType.None});
 
+  const clearDialog = useCallback(() => {
+    setDialog({type: DialogType.None});
+  }, []);
+
   return (
-    <DialogContext.Provider value={{dialog, setDialog}}>
+    <DialogContext.Provider value={{dialog, setDialog, clearDialog}}>
       {children}
     </DialogContext.Provider>
   );
@@ -27,7 +34,7 @@ export function makeDialog(dialog: DialogConfig) {
     case DialogType.None:
       return undefined;
     case DialogType.AddColor:
-      return undefined;
+      return <ColorDialog/>;
   }
 }
 

webui/src/dialogs/ColorDialog.tsx

@@ -2,13 +2,16 @@ import React, {useCallback, useContext, useState} from "react";
 import {ColorPreset} from "../models/Colors";
 import DialogContext from "../contexts/DialogContext";
 import {DialogType} from "../models/Dialog";
+import {Dialog} from "../primitives/Layout";
+import {LuciferIcon} from "../models/Icons";
+import {HSColorPicker, Input, KelvinColorPicker} from "../primitives/Forms";
 
 interface ColorDialogProps {
   data?: ColorPreset
 }
 
 export default function ColorDialog({data}: ColorDialogProps) {
-  const {setDialog} = useContext(DialogContext);
+  const {setDialog, clearDialog} = useContext(DialogContext);
 
   const [name, setName] = useState(data?.name || "");
   const [hue, setHue] = useState(data?.value?.h || 0);
@@ -19,5 +22,17 @@ export default function ColorDialog({data}: ColorDialogProps) {
     setDialog({type: DialogType.None});
   }, [setDialog]);
 
-
+  return (
+    <Dialog title={data ? "Endre farge" : "Ny farge"} buttons={[
+      {icon: LuciferIcon.Check, text: "Lagre"},
+      {icon: LuciferIcon.Cross, text: "Avbryt", onClick: clearDialog},
+    ]}>
+      <Input label="Navn" value={name} onChange={setName}/>
+      <HSColorPicker h={hue} s={sat} onChange={(h, s) => {
+        setHue(h);
+        setSat(s);
+      }}/>
+      <KelvinColorPicker kelvin={kelvin} onChange={setKelvin}/>
+    </Dialog>
+  );
 }

webui/src/pages/SettingsPage.tsx

@@ -2,8 +2,11 @@ import React, {useContext, useEffect} from "react";
 import {Page} from "../primitives/Layout";
 import DataContext from "../contexts/DataContext";
 import {IconElement} from "../primitives/Elements";
+import DialogContext from "../contexts/DialogContext";
+import {DialogType} from "../models/Dialog";
 
 const SettingsPage: React.FC = () => {
+  const {setDialog} = useContext(DialogContext);
   const {colorPresets} = useContext(DataContext);
 
   useEffect(() => {
@@ -15,7 +18,7 @@ const SettingsPage: React.FC = () => {
       {colorPresets.map(cp => (
         <IconElement key={cp.id} color={cp.value} caption={cp.name}/>
       ))}
-      <button>Add</button>
+      <button onClick={() => setDialog({type: DialogType.AddColor})}>Add</button>
     </Page>
   );
 };

webui/src/primitives/Forms.sass

@@ -0,0 +1,10 @@
+@import "../res/colors"
+
+.FormLine
+  margin: 0.5em 1ch
+
+  &:first-of-type
+    margin-top: 0
+
+  input
+    display: block

webui/src/primitives/Forms.tsx

@@ -1,21 +1,66 @@
-import React, {useLayoutEffect, useMemo} from 'react';
-// @ts-ignore
+import React, {PropsWithChildren, useCallback, useLayoutEffect, useMemo} from 'react';
 import iro from "@jaames/iro";
 
+import "./Forms.sass";
+
+interface FormLineProps {
+  label: string
+  id?: string
+}
+
+function FormLine({label, id, children}: PropsWithChildren<FormLineProps>) {
+  return (
+    <div className="FormLine">
+      <label htmlFor={id}>{label}:</label>
+      {children}
+    </div>
+  );
+}
+
+interface InputProps {
+  label: string
+  value: string
+  onChange?: (s: string) => void,
+  onChangeNumeric?: (n: number) => void
+  numeric?: boolean
+}
+
+export function Input({label, numeric, onChange, onChangeNumeric, value}: InputProps) {
+  const id = useMemo(() => `input-${randomId()}`, []);
+
+  const actualOnChange = useCallback((newValue: string) => {
+    if (onChangeNumeric) {
+      onChangeNumeric(parseInt(newValue));
+    } else if (onChange) {
+      onChange(newValue);
+    }
+  }, [onChange, onChangeNumeric]);
+
+  return (
+    <FormLine label={label} id={id}>
+      <input id={id} value={value}
+             type={numeric ? "number" : "text"}
+             onChange={i => actualOnChange(i.target.value)}
+      />
+    </FormLine>
+  )
+}
+
 interface ColorPickerProps {
+  label?: string
   h: number
   s: number
-  onChange: (h: number, v: number) => void
+  onChange: (h: number, s: number) => void
 }
 
 const randomId = () => Math.floor(Math.random() * 100000);
 
-export const HSColorPicker: React.FC<ColorPickerProps> = ({h, s, onChange}) => {
-  const random = useMemo(() => `color-picker-${randomId()}`, []);
+export const HSColorPicker: React.FC<ColorPickerProps> = ({h, s, onChange, label}) => {
+  const myId = useMemo(() => `color-picker-${randomId()}`, []);
 
   useLayoutEffect(() => {
     // @ts-ignore
-    const colorPicker = new iro.ColorPicker(`#${random}`, {
+    const colorPicker = new iro.ColorPicker(`#${myId}`, {
       color: {h, s: s * 100, v: 255},
       layout: [
         {
@@ -30,14 +75,62 @@ export const HSColorPicker: React.FC<ColorPickerProps> = ({h, s, onChange}) => {
     });
 
     return () => {
-      const elem = document.getElementById(`color-picker-${random}`);
+      const elem = document.getElementById(myId);
       if (elem === null) {
         return;
       }
 
       elem.innerHTML = "";
     };
-  }, [h, s, onChange, random]);
+  }, [h, s, onChange, myId]);
 
-  return <div id={random} style={{margin: "0 auto"}}/>;
+  return (
+    <FormLine label={label || "HS-farge"}>
+      <div id={myId} style={{margin: "0 auto"}}/>
+    </FormLine>
+  );
 };
+
+interface KelvinColorPickerProps {
+  label?: string
+  kelvin: number
+  onChange: (kelvin: number) => void
+}
+
+export const KelvinColorPicker: React.FC<KelvinColorPickerProps> = ({label, kelvin, onChange}) => {
+  const myId = useMemo(() => `color-picker-${randomId()}`, []);
+
+  useLayoutEffect(() => {
+    // @ts-ignore
+    const colorPicker = new iro.ColorPicker(`#${myId}`, {
+      color: {kelvin},
+      layout: [
+        {
+          component: iro.ui.Slider,
+          options: {
+            sliderType: "kelvin",
+          }
+        }
+      ],
+    });
+
+    colorPicker.on("input:end", (color: iro.Color) => {
+      onChange(color.kelvin);
+    });
+
+    return () => {
+      const elem = document.getElementById(myId);
+      if (elem === null) {
+        return;
+      }
+
+      elem.innerHTML = "";
+    };
+  }, [kelvin, onChange, myId]);
+
+  return (
+    <FormLine label={label || "KV-farge"}>
+      <div id={myId} style={{margin: "0 auto"}}/>
+    </FormLine>
+  );
+}

webui/src/primitives/Layout.tsx

@@ -77,8 +77,6 @@ interface DialogProps {
 }
 
 export function Dialog({title, buttons, children}: PropsWithChildren<DialogProps>) {
-
-
   return (
     <ReactModal isOpen={true}
                 className="Dialog-main"
@@ -91,7 +89,7 @@ export function Dialog({title, buttons, children}: PropsWithChildren<DialogProps
         {children}
         <div className="Dialog-footer">
           {buttons?.map(b => (
-            <button key={b.text}>
+            <button key={b.text} onClick={b.onClick}>
               <IconBlock icon={b.icon}/>
               {" "}
               {b.text}