refactor: enable timer type and end action default settings

apps/client/src/common/hooks/useEventAction.ts

@@ -9,6 +9,8 @@ import {
   parseUserTime,
   reorderArray,
   swapEventData,
+  validateEndAction,
+  validateTimerType,
 } from 'ontime-utils';
 
 import { RUNDOWN } from '../api/constants';
@@ -32,7 +34,15 @@ import { useEditorSettings } from '../stores/editorSettings';
  */
 export const useEventAction = () => {
   const queryClient = useQueryClient();
-  const { defaultPublic, linkPrevious, defaultDuration, defaultWarnTime, defaultDangerTime } = useEditorSettings();
+  const {
+    defaultPublic,
+    linkPrevious,
+    defaultDuration,
+    defaultWarnTime,
+    defaultDangerTime,
+    defaultTimerType,
+    defaultEndAction,
+  } = useEditorSettings();
 
   /**
    * Calls mutation to add new event
@@ -46,17 +56,17 @@ export const useEventAction = () => {
     networkMode: 'always',
   });
 
+  // options to any new block (event / delay / block)
   type BaseOptions = {
     after?: string;
   };
 
+  // options to blocks of type OntimeEvent
   type EventOptions = BaseOptions &
     Partial<{
       defaultPublic: boolean;
       linkPrevious: boolean;
       lastEventId: string;
-      defaultWarnTime: number;
-      defaultDangerTime: number;
     }>;
 
   /**
@@ -68,13 +78,12 @@ export const useEventAction = () => {
 
       // ************* CHECK OPTIONS specific to events
       if (isOntimeEvent(newEvent)) {
+        // merge creation time options with event settings
         const applicationOptions = {
           after: options?.after,
           defaultPublic: options?.defaultPublic ?? defaultPublic,
           lastEventId: options?.lastEventId,
           linkPrevious: options?.linkPrevious ?? linkPrevious,
-          defaultWarnTime,
-          defaultDangerTime,
         };
 
         if (applicationOptions.linkPrevious && applicationOptions?.lastEventId) {
@@ -89,6 +98,7 @@ export const useEventAction = () => {
           }
         }
 
+        // Override event with options from editor settings
         if (applicationOptions.defaultPublic) {
           newEvent.isPublic = true;
         }
@@ -104,6 +114,14 @@ export const useEventAction = () => {
         if (newEvent.timeWarning === undefined) {
           newEvent.timeWarning = parseUserTime(defaultWarnTime);
         }
+
+        if (newEvent.timerType === undefined) {
+          newEvent.timerType = validateTimerType(defaultTimerType);
+        }
+
+        if (newEvent.endAction === undefined) {
+          newEvent.endAction = validateEndAction(defaultEndAction);
+        }
       }
 
       // handle adding options that concern all event type
@@ -117,7 +135,17 @@ export const useEventAction = () => {
         logAxiosError('Failed adding event', error);
       }
     },
-    [_addEventMutation, defaultDangerTime, defaultDuration, defaultPublic, defaultWarnTime, linkPrevious, queryClient],
+    [
+      _addEventMutation,
+      defaultDangerTime,
+      defaultDuration,
+      defaultEndAction,
+      defaultPublic,
+      defaultTimerType,
+      defaultWarnTime,
+      linkPrevious,
+      queryClient,
+    ],
   );
 
   /**

apps/client/src/common/stores/editorSettings.ts

@@ -1,3 +1,5 @@
+import { EndAction, TimerType } from 'ontime-types';
+import { validateEndAction, validateTimerType } from 'ontime-utils';
 import { create } from 'zustand';
 
 import { booleanFromLocalStorage } from '../utils/localStorage';
@@ -8,11 +10,15 @@ type EditorSettingsStore = {
   defaultWarnTime: string;
   defaultDangerTime: string;
   defaultPublic: boolean;
+  defaultTimerType: TimerType;
+  defaultEndAction: EndAction;
   setDefaultDuration: (defaultDuration: string) => void;
   setLinkPrevious: (linkPrevious: boolean) => void;
   setWarnTime: (warnTime: string) => void;
   setDangerTime: (dangerTime: string) => void;
   setDefaultPublic: (defaultPublic: boolean) => void;
+  setDefaultTimerType: (defaultTimerType: TimerType) => void;
+  setDefaultEndAction: (defaultEndAction: EndAction) => void;
 };
 
 export const editorSettingsDefaults = {
@@ -21,6 +27,8 @@ export const editorSettingsDefaults = {
   warnTime: '00:02:00', // 120000 same as backend
   dangerTime: '00:01:00', // 60000 same as backend
   isPublic: true,
+  timerType: TimerType.CountDown,
+  endAction: EndAction.None,
 };
 
 enum EditorSettingsKeys {
@@ -29,6 +37,8 @@ enum EditorSettingsKeys {
   DefaultWarnTime = 'ontime-default-warn-time',
   DefaultDangerTime = 'ontime-default-danger-time',
   DefaultPublic = 'ontime-default-public',
+  DefaultTimerType = 'ontime-default-timer-type',
+  DefaultEndAction = 'ontime-default-end-action',
 }
 
 export const useEditorSettings = create<EditorSettingsStore>((set) => {
@@ -38,6 +48,14 @@ export const useEditorSettings = create<EditorSettingsStore>((set) => {
     defaultWarnTime: localStorage.getItem(EditorSettingsKeys.DefaultWarnTime) ?? editorSettingsDefaults.warnTime,
     defaultDangerTime: localStorage.getItem(EditorSettingsKeys.DefaultDangerTime) ?? editorSettingsDefaults.dangerTime,
     defaultPublic: booleanFromLocalStorage(EditorSettingsKeys.DefaultPublic, editorSettingsDefaults.isPublic),
+    defaultTimerType: validateTimerType(
+      localStorage.getItem(EditorSettingsKeys.DefaultTimerType),
+      editorSettingsDefaults.timerType,
+    ),
+    defaultEndAction: validateEndAction(
+      localStorage.getItem(EditorSettingsKeys.DefaultEndAction),
+      editorSettingsDefaults.endAction,
+    ),
 
     setDefaultDuration: (defaultDuration) =>
       set(() => {
@@ -65,5 +83,15 @@ export const useEditorSettings = create<EditorSettingsStore>((set) => {
         localStorage.setItem(EditorSettingsKeys.DefaultPublic, String(defaultPublic));
         return { defaultPublic };
       }),
+    setDefaultTimerType: (defaultTimerType) =>
+      set(() => {
+        localStorage.setItem(EditorSettingsKeys.DefaultTimerType, String(defaultTimerType));
+        return { defaultTimerType };
+      }),
+    setDefaultEndAction: (defaultEndAction) =>
+      set(() => {
+        localStorage.setItem(EditorSettingsKeys.DefaultEndAction, String(defaultEndAction));
+        return { defaultEndAction };
+      }),
   };
 });

apps/client/src/features/app-settings/panel/interface-panel/EditorSettingsForm.tsx

@@ -7,17 +7,26 @@ import { editorSettingsDefaults, useEditorSettings } from '../../../../common/st
 import * as Panel from '../PanelUtils';
 
 export default function EditorSettingsForm() {
-  const eventSettings = useEditorSettings((state) => state);
+  const {
+    defaultDuration,
+    linkPrevious,
+    defaultWarnTime,
+    defaultDangerTime,
+    defaultPublic,
+    defaultTimerType,
+    defaultEndAction,
+    setDefaultDuration,
+    setLinkPrevious,
+    setWarnTime,
+    setDangerTime,
+    setDefaultPublic,
+    setDefaultTimerType,
+    setDefaultEndAction,
+  } = useEditorSettings((state) => state);
 
-  const setDefaultDuration = eventSettings.setDefaultDuration;
-  const setLinkPrevious = eventSettings.setLinkPrevious;
-  const setWarnTime = eventSettings.setWarnTime;
-  const setDangerTime = eventSettings.setDangerTime;
-  const setDefaultPublic = eventSettings.setDefaultPublic;
-
-  const durationInMs = parseUserTime(eventSettings.defaultDuration);
-  const warnTimeInMs = parseUserTime(eventSettings.defaultWarnTime);
-  const dangerTimeInMs = parseUserTime(eventSettings.defaultDangerTime);
+  const durationInMs = parseUserTime(defaultDuration);
+  const warnTimeInMs = parseUserTime(defaultWarnTime);
+  const dangerTimeInMs = parseUserTime(defaultDangerTime);
 
   return (
     <Panel.Section>
@@ -44,13 +53,19 @@ export default function EditorSettingsForm() {
               <Switch
                 variant='ontime'
                 size='lg'
-                defaultChecked={eventSettings.linkPrevious}
+                defaultChecked={linkPrevious}
                 onChange={(event) => setLinkPrevious(event.target.checked)}
               />
             </Panel.ListItem>
             <Panel.ListItem>
               <Panel.Field title='Timer type' description='Default type of timer for new events' />
-              <Select variant='ontime' size='sm' width='auto' isDisabled>
+              <Select
+                variant='ontime'
+                size='sm'
+                width='auto'
+                value={defaultTimerType}
+                onChange={(event) => setDefaultTimerType(event.target.value as TimerType)}
+              >
                 <option value={TimerType.CountDown}>Count down</option>
                 <option value={TimerType.CountUp}>Count up</option>
                 <option value={TimerType.TimeToEnd}>Time to end</option>
@@ -59,7 +74,13 @@ export default function EditorSettingsForm() {
             </Panel.ListItem>
             <Panel.ListItem>
               <Panel.Field title='End Action' description='Default end action for new events' />
-              <Select variant='ontime' size='sm' width='auto' isDisabled>
+              <Select
+                variant='ontime'
+                size='sm'
+                width='auto'
+                value={defaultEndAction}
+                onChange={(event) => setDefaultEndAction(event.target.value as EndAction)}
+              >
                 <option value={EndAction.None}>None</option>
                 <option value={EndAction.Stop}>Stop</option>
                 <option value={EndAction.LoadNext}>Load next</option>
@@ -93,7 +114,7 @@ export default function EditorSettingsForm() {
               <Switch
                 variant='ontime'
                 size='lg'
-                defaultChecked={eventSettings.defaultPublic}
+                defaultChecked={defaultPublic}
                 onChange={(event) => setDefaultPublic(event.target.checked)}
               />
             </Panel.ListItem>