V3 (#657)

* refactor: cleanup routes * style: smaller base font * chore: upgrade dependencies * chore: lock node version to electron * refactor: pass HTTP to integration controller (#652) * refactor: deprecate onair control * refactor: remove playback router * Several project files user folder (#617) * chore: automated screenshots (#667) * feat: app settings (#658) * refactor: remove deprecated event data (#674) * Studio clock (#663) --------- Co-authored-by: Carlos Valente <carlosvalente@pm.me> * Feat: reorder events with alt+ctrl + arrow up/down (#645) * Warning and danger per event (#677) --------- Co-authored-by: Fabian Posenau <fabian@fphome.de> * refactor: stabilise actionHandler (#683) Co-authored-by: Fabian Posenau <fabian@fphome.de> * improvement: hide seconds (#675) * wip: overview (#688) * fix: focus cursor (#695) * refactor: update lower third (#665) * Refactor/time formatting (#696) --------- Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com> Co-authored-by: Carlos Valente <carlosvalente@pm.me> * feat: multiple selection (#703) --------- Co-authored-by: asharonbaltazar <asharonbaltazar@outlook.com> Co-authored-by: Alex <ac@omnivox.dk> * fix: test - go to `Edit mode` befor tying to click `Event options` button (#708) * refactor: runtime service (#715) * fix: issue with loosing cursor position on message (#719) * remove info panel (#721) * Event editor continue (#722) * update API - part (#709) --------- Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com> Co-authored-by: Carlos Valente <carlosvalente@pm.me> * refactor: update timers (#729) * feat: many timers (#706) --------- Co-authored-by: arc-alex <ac@omnivox.dk> * refactor: excel cleanup (#734) * refactor: allow import of blocks and skip import (#735) * Project manager (#697) * refactor: UI for linking events (#763) * upgraded pipeline actions (#777) * Over under (#771) * custom fields (#744) --------- Co-authored-by: Carlos Valente <carlosvalente@pm.me> * Sheets settings (#774) --------- Co-authored-by: arc-alex <ac@omnivox.dk> * style: tweaks to lower thirds (#785) * refactor: delays account for gaps (#784) * refactor: partial state updates (#780) * feat: generate crash report (#787) * Sheet use limited input device auth flow (#782) --------- Co-authored-by: cv <34649812+cpvalente@users.noreply.github.com> Co-authored-by: Carlos Valente <carlosvalente@pm.me> * Custom fields views (#789) * refactor: deprecate presenter and subtitle (#795) * refactor: organise API around resources (#798) --------- Co-authored-by: Bianca Procopio <biancahprocopio@gmail.com> * Time to end (#804) * Skip fixes (#805) * fix: onair derives from playback * Param nav (#822) --------- Co-authored-by: Alex Christoffer Rasmussen <ac@omnivox.dk> * refactor: download files from interface (#831) * Quick options (#814) * End pause (#832) * chore: bump node version in docker (#834) * refactor: follow in run mode (#840) * fix: uncaught error in http integration (#837) * Apply project (#843) Co-authored-by: Matteo Gheza <matteo.gheza07@gmail.com> Co-authored-by: Ary <arylmoraesn@gmail.com> Co-authored-by: Alex Christoffer Rasmussen <ac@omnivox.dk> Co-authored-by: Fabian Posenau <19673098+kellhogs@users.noreply.github.com> Co-authored-by: Fabian Posenau <fabian@fphome.de> Co-authored-by: Alex Rohleder <alexrohleder96@gmail.com> Co-authored-by: asharonbaltazar <asharonbaltazar@outlook.com> Co-authored-by: Bianca Procopio <biancahprocopio@gmail.com> Co-authored-by: Fabian Posenau <fabianpos99+github@gmail.com>
2026-08-21 06:59:09 +00:00 · 2024-04-13 10:06:46 +02:00
parent debdbd1c5a
commit 55d1aca9b6
640 changed files with 26702 additions and 21623 deletions
@@ -0,0 +1,71 @@
+import { useState } from 'react';
+import { IconButton } from '@chakra-ui/react';
+import { IoPencil } from '@react-icons/all-files/io5/IoPencil';
+import { IoTrash } from '@react-icons/all-files/io5/IoTrash';
+import { CustomField, CustomFieldLabel } from 'ontime-types';
+
+import Swatch from '../../../../../common/components/input/colour-input/Swatch';
+
+import CustomFieldForm from './CustomFieldForm';
+
+import style from '../FeatureSettings.module.scss';
+
+interface CustomFieldEntryProps {
+  field: string;
+  colour: string;
+  label: string;
+  onEdit: (label: CustomFieldLabel, patch: CustomField) => Promise<void>;
+  onDelete: (label: CustomFieldLabel) => Promise<void>;
+}
+
+export default function CustomFieldEntry(props: CustomFieldEntryProps) {
+  const { colour, label, onEdit, onDelete, field } = props;
+  const [isEditing, setIsEditing] = useState(false);
+
+  const handleEdit = async (patch: CustomField) => {
+    await onEdit(field, patch);
+    setIsEditing(false);
+  };
+
+  if (isEditing) {
+    return (
+      <tr>
+        <td colSpan={99}>
+          <CustomFieldForm
+            onCancel={() => setIsEditing(false)}
+            onSubmit={handleEdit}
+            initialColour={colour}
+            initialLabel={label}
+          />
+        </td>
+      </tr>
+    );
+  }
+
+  return (
+    <tr>
+      <td>
+        <Swatch color={colour} />
+      </td>
+      <td className={style.fullWidth}>{label}</td>
+      <td className={style.actions}>
+        <IconButton
+          size='sm'
+          variant='ontime-ghosted'
+          color='#e2e2e2' // $gray-200
+          icon={<IoPencil />}
+          aria-label='Edit entry'
+          onClick={() => setIsEditing(true)}
+        />
+        <IconButton
+          size='sm'
+          variant='ontime-ghosted'
+          color='#FA5656' // $red-500
+          icon={<IoTrash />}
+          aria-label='Delete entry'
+          onClick={() => onDelete(field)}
+        />
+      </td>
+    </tr>
+  );
+}
@@ -0,0 +1,102 @@
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { Button, Input } from '@chakra-ui/react';
+import { CustomField } from 'ontime-types';
+import { isAlphanumeric } from 'ontime-utils';
+
+import { maybeAxiosError } from '../../../../../common/api/utils';
+import SwatchSelect from '../../../../../common/components/input/colour-input/SwatchSelect';
+import * as Panel from '../../PanelUtils';
+
+import style from '../FeatureSettings.module.scss';
+
+interface CustomFieldsFormProps {
+  onSubmit: (field: CustomField) => Promise<void>;
+  onCancel: () => void;
+  initialColour?: string;
+  initialLabel?: string;
+}
+
+export default function CustomFieldForm(props: CustomFieldsFormProps) {
+  const { onSubmit, onCancel, initialColour, initialLabel } = props;
+  // we use this to force an update
+  const [_, setColour] = useState(initialColour || '');
+
+  const {
+    handleSubmit,
+    register,
+    setFocus,
+    setError,
+    setValue,
+    getValues,
+    formState: { errors, isSubmitting, isValid, isDirty },
+  } = useForm({
+    defaultValues: { label: initialLabel || '', colour: initialColour || '' },
+    resetOptions: {
+      keepDirtyValues: true,
+    },
+  });
+
+  const setupSubmit = async (values: { label: string; colour: string }) => {
+    const { label, colour } = values;
+    const newField: CustomField = {
+      type: 'string', // type is not user definable yet
+      colour,
+      label,
+    };
+    try {
+      await onSubmit(newField);
+    } catch (error) {
+      setError('root', { type: 'custom', message: maybeAxiosError(error) });
+    }
+  };
+
+  // give initial focus to the label
+  useEffect(() => {
+    setFocus('label');
+  }, [setFocus]);
+
+  const handleSelectColour = (colour: string) => {
+    setColour(colour);
+    setValue('colour', colour, { shouldDirty: true });
+  };
+
+  const colour = getValues('colour');
+  const canSubmit = isDirty && isValid;
+
+  return (
+    <form onSubmit={handleSubmit(setupSubmit)} className={style.fieldForm}>
+      <div className={style.column}>
+        <Panel.Description>Label</Panel.Description>
+        {errors.label && <Panel.Error>{errors.label.message}</Panel.Error>}
+        <Input
+          {...register('label', {
+            required: { value: true, message: 'Required field' },
+            validate: (value) => {
+              if (value.trim().length === 0) return 'Required field';
+              if (!isAlphanumeric(value)) return 'Only alphanumeric characters are allowed';
+              return true;
+            },
+          })}
+          size='sm'
+          variant='ontime-filled'
+          autoComplete='off'
+        />
+      </div>
+
+      <div>
+        <Panel.Description>Colour</Panel.Description>
+        <SwatchSelect name='colour' value={colour} handleChange={(_field, value) => handleSelectColour(value)} />
+      </div>
+      {errors.root && <Panel.Error>{errors.root.message}</Panel.Error>}
+      <div className={style.buttonRow}>
+        <Button size='sm' variant='ontime-ghosted' onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button size='sm' type='submit' variant='ontime-filled' isDisabled={!canSubmit} isLoading={isSubmitting}>
+          Save
+        </Button>
+      </div>
+    </form>
+  );
+}
@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import { Alert, AlertDescription, AlertIcon, Button } from '@chakra-ui/react';
+import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
+import { CustomField, CustomFieldLabel } from 'ontime-types';
+
+import { deleteCustomField, editCustomField, postCustomField } from '../../../../../common/api/customFields';
+import ExternalLink from '../../../../../common/components/external-link/ExternalLink';
+import useCustomFields from '../../../../../common/hooks-query/useCustomFields';
+import * as Panel from '../../PanelUtils';
+
+import CustomFieldEntry from './CustomFieldEntry';
+import CustomFieldForm from './CustomFieldForm';
+
+const customFieldsDocsUrl = 'https://docs.getontime.no/features/custom-fields/';
+
+export default function CustomFields() {
+  const { data, refetch } = useCustomFields();
+  const [isAdding, setIsAdding] = useState(false);
+
+  const handleInitiateCreate = () => {
+    setIsAdding(true);
+  };
+
+  const handleCancel = () => {
+    setIsAdding(false);
+  };
+
+  const handleCreate = async (customField: CustomField) => {
+    await postCustomField(customField);
+    refetch();
+    setIsAdding(false);
+  };
+
+  const handleEditField = async (label: CustomFieldLabel, customField: CustomField) => {
+    await editCustomField(label, customField);
+    refetch();
+  };
+
+  const handleDelete = async (label: string) => {
+    try {
+      await deleteCustomField(label);
+      refetch();
+    } catch (_error) {
+      /** we do not handle errors here */
+    }
+  };
+
+  return (
+    <Panel.Section>
+      <Panel.Card>
+        <Panel.SubHeader>
+          Custom fields
+          <Button variant='ontime-subtle' rightIcon={<IoAdd />} size='sm' onClick={handleInitiateCreate}>
+            New
+          </Button>
+        </Panel.SubHeader>
+        <Panel.Divider />
+        <Panel.Section>
+          <Alert status='info' variant='ontime-on-dark-info'>
+            <AlertIcon />
+            <AlertDescription>
+              Custom fields allow for additional information to be added to an event (eg. light, sound, camera). <br />
+              <br />
+              This data is not used by Ontime.
+              <ExternalLink href={customFieldsDocsUrl}>See the docs</ExternalLink>
+            </AlertDescription>
+          </Alert>
+        </Panel.Section>
+        <Panel.Section>
+          {isAdding && <CustomFieldForm onSubmit={handleCreate} onCancel={handleCancel} />}
+          <Panel.Table>
+            <thead>
+              <tr>
+                <th>Colour</th>
+                <th>Name</th>
+                <th />
+              </tr>
+            </thead>
+            <tbody>
+              {Object.entries(data).map(([key, { colour, label }]) => {
+                return (
+                  <CustomFieldEntry
+                    key={key}
+                    field={key}
+                    colour={colour}
+                    label={label}
+                    onEdit={handleEditField}
+                    onDelete={handleDelete}
+                  />
+                );
+              })}
+            </tbody>
+          </Panel.Table>
+        </Panel.Section>
+      </Panel.Card>
+    </Panel.Section>
+  );
+}