Browse Source

Merge branch 'asmodeus' of git.aiterp.net:lucifer/new-server into asmodeus

pull/1/head
Gisle Aune 3 years ago
parent
commit
4e734c86a5
  1. 14
      app/api/presets.go
  2. 10
      webui/src/actions/ColorPresets.ts
  3. 13
      webui/src/contexts/DialogContext.tsx
  4. 54
      webui/src/dialogs/ColorDialog.tsx
  5. 5
      webui/src/pages/SettingsPage.tsx
  6. 20
      webui/src/primitives/Forms.sass
  7. 111
      webui/src/primitives/Forms.tsx
  8. 4
      webui/src/primitives/Layout.tsx

14
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
}))
}

10
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}`);
}

13
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/>;
}
}

54
webui/src/dialogs/ColorDialog.tsx

@ -1,23 +1,71 @@
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";
import {Dialog} from "../primitives/Layout";
import {LuciferIcon} from "../models/Icons";
import {HSColorPicker, Input, KelvinColorPicker} from "../primitives/Forms";
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} = useContext(DialogContext);
const {setDialog, clearDialog} = useContext(DialogContext);
const [name, setName] = useState(data?.name || "");
const [hue, setHue] = useState(data?.value?.h || 0);
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", onClick: onSave},
{icon: LuciferIcon.Cross, text: "Avbryt", onClick: clearDialog},
]}>
<Input label="Navn" value={name} onChange={setName}/>
{colorType !== ColorType.Kelvin && (
<HSColorPicker h={hue} s={sat} onChange={(h, s) => {
setHue(h);
setSat(s);
}}/>
)}
{colorType !== ColorType.HueSat && (
<KelvinColorPicker kelvin={kelvin} onChange={setKelvin}/>
)}
</Dialog>
);
}

5
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>
);
};

20
webui/src/primitives/Forms.sass

@ -0,0 +1,20 @@
@import "../res/colors"
.FormLine
padding: 0.5em 1ch
width: 100%
&:first-of-type
margin-top: 0
input, select
display: block
width: 100%
font: inherit
background-color: $color-background-elevated
color: $color-foreground
border: none
padding: 0.25em 0.5ch
&:focus, &:active
outline: 1px solid $color-foreground-elevated

111
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(Math.floor(color.kelvin));
});
return () => {
const elem = document.getElementById(myId);
if (elem === null) {
return;
}
elem.innerHTML = "";
};
}, [kelvin, onChange, myId]);
return (
<FormLine label={label || "KV-farge"}>
<div title={`${kelvin}K`} id={myId} style={{margin: "0 auto"}}/>
</FormLine>
);
}

4
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}

Loading…
Cancel
Save