refactor: restructure settings

refactor: migrate react components
2026-08-17 05:13:32 +00:00 · 2025-07-04 12:13:06 +02:00
parent a8ea1080f3
commit 5600235ba1
93 changed files with 711 additions and 906 deletions
@@ -0,0 +1,45 @@
+import { PropsWithChildren, useState } from 'react';
+import { UseFormRegister } from 'react-hook-form';
+import { IoEyeOutline } from 'react-icons/io5';
+import { IconButton, Input, InputGroup, InputRightElement } from '@chakra-ui/react';
+import { Settings } from 'ontime-types';
+
+import { isAlphanumeric } from '../../../../../common/utils/regex';
+
+interface GeneralPinInputProps {
+  register: UseFormRegister<Settings>;
+  formName: keyof Settings;
+  isDisabled?: boolean;
+}
+
+export default function GeneralPinInput(props: PropsWithChildren<GeneralPinInputProps>) {
+  const { register, formName, isDisabled } = props;
+  const [isVisible, setVisible] = useState(false);
+  return (
+    <InputGroup size='sm' width='100px'>
+      <Input
+        variant='ontime-filled'
+        type={isVisible ? 'text' : 'password'}
+        maxLength={4}
+        {...register(formName, {
+          pattern: {
+            value: isAlphanumeric,
+            message: 'Only alphanumeric characters are allowed',
+          },
+        })}
+        placeholder='-'
+        isDisabled={isDisabled}
+      />
+      <InputRightElement>
+        <IconButton
+          onMouseDown={() => setVisible(true)}
+          onMouseUp={() => setVisible(false)}
+          size='sm'
+          variant='ontime-ghosted'
+          icon={<IoEyeOutline />}
+          aria-label='Show pin code'
+        />
+      </InputRightElement>
+    </InputGroup>
+  );
+}
@@ -0,0 +1,4 @@
+.wrapper {
+  max-height: 500px;
+  overflow-y: auto;
+}
@@ -0,0 +1,72 @@
+import { forwardRef, memo, useEffect, useImperativeHandle, useState } from 'react';
+import Editor from 'react-simple-code-editor';
+import Prism from 'prismjs/components/prism-core';
+
+import 'prismjs/components/prism-css';
+import 'prismjs/themes/prism-tomorrow.min.css';
+import style from './StyleEditor.module.scss';
+
+interface CodeEditorProps {
+  language: string;
+  initialValue: string;
+  isDirty: boolean;
+  setIsDirty: (value: boolean) => void;
+}
+
+const CodeEditor = forwardRef((props: CodeEditorProps, cssRef) => {
+  const { language, initialValue, isDirty, setIsDirty } = props;
+
+  const [code, setCode] = useState(initialValue);
+
+  const highlight = (code: string) => {
+    const grammar = Prism.languages[language];
+    return grammar ? Prism.highlight(code, grammar, language) : code;
+  };
+
+  const handleChange = (newCode: string) => {
+    setCode(newCode);
+  };
+
+  useImperativeHandle(cssRef, () => {
+    return {
+      getCss: () => code,
+    };
+  });
+
+  // add contents to editor on mount and any change in initialValue
+  useEffect(() => {
+    setCode(initialValue);
+  }, [initialValue]);
+
+  // handle dirty state on change
+  useEffect(() => {
+    if (initialValue.trim() !== code.trim() && !isDirty && code.length !== 0) {
+      setIsDirty(true);
+    }
+
+    if (initialValue.trim() === code.trim() && isDirty) {
+      setIsDirty(false);
+    }
+  }, [initialValue, code, isDirty, setIsDirty]);
+
+  return (
+    <div className={style.wrapper}>
+      <Editor
+        value={code}
+        padding={15}
+        onValueChange={handleChange}
+        highlight={highlight}
+        style={{
+          fontFamily: 'monospace',
+          fontSize: 12,
+          minHeight: 500,
+          background: '#2d2d2d', // Background of tomorrow theme
+        }}
+      />
+    </div>
+  );
+});
+
+CodeEditor.displayName = 'StyleEditor';
+
+export default memo(CodeEditor);
@@ -0,0 +1,15 @@
+.editorActions {
+  width: 100%;
+}
+
+.right {
+  align-self: end;
+  text-align: right
+}
+
+.column {
+  width: 100%;
+  display: flex;
+  gap: 1rem;
+  flex-direction: column;
+}
@@ -0,0 +1,116 @@
+import { lazy, useEffect, useRef, useState } from 'react';
+
+import { getCSSContents, postCSSContents, restoreCSSContents } from '../../../../../common/api/assets';
+import Button from '../../../../../common/components/buttons/Button';
+import Info from '../../../../../common/components/info/Info';
+import Modal from '../../../../../common/components/modal/Modal';
+import * as Panel from '../../../panel-utils/PanelUtils';
+
+import style from './StyleEditorModal.module.scss';
+
+const CodeEditor = lazy(() => import('./StyleEditor'));
+
+interface CodeEditorModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+interface CSSRef {
+  getCss: () => string;
+}
+
+export default function CodeEditorModal({ isOpen, onClose }: CodeEditorModalProps) {
+  const [css, setCSS] = useState('');
+  const [isDirty, setIsDirty] = useState(false);
+  const [saveLoading, setSaveLoading] = useState(false);
+  const [resetLoading, setResetLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const cssRef = useRef<CSSRef>(null);
+
+  const handleRestore = async () => {
+    try {
+      setResetLoading(true);
+      const defaultCss = await restoreCSSContents();
+      setCSS(defaultCss);
+    } catch (_error) {
+      /** no error handling for now */
+    } finally {
+      setResetLoading(false);
+    }
+  };
+
+  const handleSave = async () => {
+    try {
+      setSaveLoading(true);
+      if (cssRef.current) {
+        await postCSSContents(cssRef.current.getCss());
+        setCSS(cssRef.current.getCss());
+        setIsDirty(false);
+      }
+    } catch (_error) {
+      /** no error handling for now */
+    } finally {
+      setSaveLoading(false);
+    }
+  };
+
+  const clear = () => setCSS('');
+
+  useEffect(() => {
+    async function fetchServerCSS() {
+      // check for isOpen to fetch recent css
+      if (isOpen) {
+        try {
+          const css = await getCSSContents();
+          setCSS(css);
+        } catch (_error) {
+          setError('Failed to load CSS from server');
+          /** no error handling for now */
+        }
+      }
+    }
+    fetchServerCSS();
+  }, [isOpen]);
+
+  return (
+    <Modal
+      title='Edit CSS override'
+      isOpen={isOpen}
+      onClose={onClose}
+      showCloseButton
+      showBackdrop
+      bodyElements={
+        <CodeEditor ref={cssRef} initialValue={css} language='css' isDirty={isDirty} setIsDirty={setIsDirty} />
+      }
+      footerElements={
+        <div className={style.column}>
+          <Info>Invalid CSS will be refused by the browser</Info>
+          {error && <Panel.Error className={style.right}>{`Error: ${error}`}</Panel.Error>}
+          <Panel.InlineElements align='apart' className={style.editorActions}>
+            <Button variant='ghosted' size='large' onClick={handleRestore} disabled={saveLoading || resetLoading}>
+              Reset to example
+            </Button>
+            <Panel.InlineElements>
+              <Button variant='ghosted' size='large' onClick={clear}>
+                Clear
+              </Button>
+              <Button size='large' onClick={onClose}>
+                Cancel
+              </Button>
+              <Button
+                variant='primary'
+                size='large'
+                onClick={handleSave}
+                disabled={saveLoading || resetLoading || !isDirty}
+                loading={saveLoading}
+              >
+                Save changes
+              </Button>
+            </Panel.InlineElements>
+          </Panel.InlineElements>
+        </div>
+      }
+    />
+  );
+}
@@ -0,0 +1,5 @@
+declare module 'prismjs/components/prism-core' {
+  export * from 'prismjs';
+}
+
+declare module 'prismjs/components/prism-css';