v2 beta5 modals

README.md

@@ -15,7 +15,7 @@
 Ontime is an application for managing event rundowns and running stage timers.
 
 A single, locally hosted central application distributes your event information over the local network.
-This enables the distribution of the data to a series of viewers and allows integration into video and control workflows, including OBS and d3.
+This enables the distribution of the data to a series of views and allows integration into video and control workflows, including OBS and d3.
 
 ![App Window](https://github.com/cpvalente/ontime/blob/master/.github/aux-images/app.jpg)
 

apps/client/src/common/api/ontimeApi.ts

@@ -45,7 +45,7 @@ export async function getView(): Promise<ViewSettings> {
  * @description HTTP request to mutate view settings
  * @return {Promise}
  */
-export async function postView(data: ViewSettings) {
+export async function postViewSettings(data: ViewSettings) {
   return axios.post(`${ontimeURL}/views`, data);
 }
 

apps/client/src/common/components/buttons/TooltipActionBtn.tsx

@@ -1,7 +1,8 @@
+import { MouseEvent } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@chakra-ui/react';
 
 interface TooltipActionBtnProps extends IconButtonProps {
-  clickHandler: () => void;
+  clickHandler: (event?: MouseEvent) => void;
   tooltip: string;
   openDelay?: number;
 }

apps/client/src/common/components/input/popover-picker/PopoverPicker.module.scss

@@ -2,10 +2,11 @@
 @use "../../../../theme/_v2Styles" as *;
 
 .swatch {
-  width: 32px;
-  height: 32px;
-  border-radius: 16px;
-  border: 1px solid $gray-300;
+  width: 24px;
+  height: 24px;
+  border-radius: 12px;
+  border: 1px solid white;
+  box-shadow: 0 0 0 1px $gray-300;
   cursor: pointer;
 
   transition-property: box-shadow;

apps/client/src/common/components/input/popover-picker/PopoverPicker.tsx

@@ -1,8 +1,19 @@
 import { HexAlphaColorPicker } from 'react-colorful';
+import { useController, UseControllerProps } from 'react-hook-form';
 import { Popover, PopoverContent, PopoverTrigger } from '@chakra-ui/react';
+import { ViewSettings } from 'ontime-types';
 
 import style from './PopoverPicker.module.scss';
 
+export function PopoverPickerRHF(props: UseControllerProps<ViewSettings>) {
+  const { name, control } = props;
+  const {
+    field: { onChange, value },
+  } = useController({ control, name });
+
+  return <PopoverPicker color={value as string} onChange={onChange} />;
+}
+
 interface PopoverPickerProps {
   color: string;
   onChange: (color: string) => void;

apps/client/src/common/models/OntimeSettings.ts

@@ -4,7 +4,8 @@ export const ontimePlaceholderSettings: Settings = {
   app: 'ontime',
   version: 2,
   serverPort: 4001,
-  lock: null,
-  pinCode: null,
+  editorKey: null,
+  operatorKey: null,
   timeFormat: '24',
+  language: 'en',
 };

apps/client/src/common/utils/dateConfig.ts

@@ -42,7 +42,7 @@ export const millisToSeconds = (millis: number | null): number => {
 
 /**
  * @description Converts milliseconds to seconds
- * @param {number} millis - time in seconds
+ * @param {number} millis - time in milliseconds
  * @returns {number} Amount in seconds
  */
 export const millisToMinutes = (millis: number): number => {

apps/client/src/features/editors/Editor.tsx

@@ -6,8 +6,8 @@ import UploadModal from '../../common/components/upload-modal/UploadModal';
 import MenuBar from '../menu/MenuBar';
 import AboutModal from '../modals/about-modal/AboutModal';
 import IntegrationModal from '../modals/integration-modal/IntegrationModal';
-import ModalManager from '../modals/ModalManager';
 import QuickStart from '../modals/quick-start/QuickStart';
+import SettingsModal from '../modals/settings-modal/SettingsModal';
 
 import styles from './Editor.module.scss';
 
@@ -40,7 +40,7 @@ export default function Editor() {
         <UploadModal onClose={onUploadModalClose} isOpen={isUploadModalOpen} />
         <IntegrationModal onClose={onIntegrationModalClose} isOpen={isIntegrationModalOpen} />
         <AboutModal onClose={onAboutModalClose} isOpen={isAboutModalOpen} />
-        <ModalManager isOpen={isSettingsOpen} onClose={onSettingsClose} />
+        <SettingsModal isOpen={isSettingsOpen} onClose={onSettingsClose} />
       </ErrorBoundary>
       <div className={styles.mainContainer} data-testid='event-editor'>
         <Box id='settings' className={styles.settings}>