wip form

webui/src/dialogs/ColorDialog.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useContext, useState} from "react";
+import React, {useCallback, useContext, useEffect, useState} from "react";
 import {ColorPreset} from "../models/Colors";
 import DialogContext from "../contexts/DialogContext";
 import {DialogType} from "../models/Dialog";
@@ -10,6 +10,18 @@ interface ColorDialogProps {
   data?: ColorPreset
 }
 
+enum ColorType {
+  HueSat,
+  Kelvin,
+  HueSatKelvin,
+}
+
+const COLOR_TYPE_OPTIONS = [
+  {value: ColorType.HueSat, name: "Bare Nyanse (H) og metning (S)"},
+  {value: ColorType.Kelvin, name: "Bare temperatur (K)"},
+  {value: ColorType.HueSatKelvin, name: "Nyanse (H), metning (K) og kelvin (S)"},
+];
+
 export default function ColorDialog({data}: ColorDialogProps) {
   const {setDialog, clearDialog} = useContext(DialogContext);
 
@@ -18,21 +30,42 @@ export default function ColorDialog({data}: ColorDialogProps) {
   const [sat, setSat] = useState(data?.value?.s || 0);
   const [kelvin, setKelvin] = useState(data?.value?.kelvin || 0);
 
-  const onClose = useCallback(() => {
+  const [colorType, setColorType] = useState(COLOR_TYPE_OPTIONS[0].value);
+  const [isInit, setIsInit] = useState(false);
+
+  const onSave = useCallback(() => {
     setDialog({type: DialogType.None});
   }, [setDialog]);
 
+  useEffect(() => {
+    if (!isInit && data) {
+      const v = data.value;
+
+      if (v.kelvin !== undefined && v.kelvin > 0) {
+        setColorType((v.h || v.s) ? ColorType.HueSatKelvin : ColorType.Kelvin);
+      }
+    }
+
+    if (!isInit) {
+      setIsInit(true);
+    }
+  }, [isInit, data, colorType]);
+
   return (
     <Dialog title={data ? "Endre farge" : "Ny farge"} buttons={[
-      {icon: LuciferIcon.Check, text: "Lagre"},
+      {icon: LuciferIcon.Check, text: "Lagre", onClick: onSave},
       {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}/>
+      {colorType !== ColorType.Kelvin && (
+        <HSColorPicker h={hue} s={sat} onChange={(h, s) => {
+          setHue(h);
+          setSat(s);
+        }}/>
+      )}
+      {colorType !== ColorType.HueSat && (
+        <KelvinColorPicker kelvin={kelvin} onChange={setKelvin}/>
+      )}
     </Dialog>
   );
 }