cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-16 12:53:32 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

refactor: migrate related components

Browse Source
This commit is contained in:
Carlos Valente
2025-07-03 09:00:00 +02:00
committed by Carlos Valente
parent cd8e014f08
commit 84b73fc02a
23 changed files with 346 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/app-settings/panel-content/PanelContent.tsx
+5 -6
View File
@@ -1,6 +1,7 @@
import { PropsWithChildren } from 'react';
import { IoClose } from 'react-icons/io5';
import { Button } from '@chakra-ui/react';
import Button from '../../../common/components/buttons/Button';
import style from './PanelContent.module.scss';
@@ -8,14 +9,12 @@ interface PanelContentProps {
onClose: () => void;
}
export default function PanelContent(props: PropsWithChildren<PanelContentProps>) {
const { onClose, children } = props;
export default function PanelContent({ onClose, children }: PropsWithChildren<PanelContentProps>) {
return (
<div className={style.contentWrapper}>
<div className={style.corner}>
<Button onClick={onClose} aria-label='close' rightIcon={<IoClose />} variant='ontime-subtle'>
Close settings
<Button size='large' onClick={onClose}>
Close settings <IoClose />
</Button>
</div>
<div className={style.content}>{children}</div>
apps/client/src/features/app-settings/panel/network-panel/GenerateLinkForm.tsx
+44 -37
View File
@@ -1,11 +1,13 @@
import { useState } from 'react';
import { useMemo, useState } from 'react';
import { useForm } from 'react-hook-form';
import QRCode from 'react-qr-code';
import { Button, Select, Switch } from '@chakra-ui/react';
import { generateUrl } from '../../../../common/api/session';
import { maybeAxiosError } from '../../../../common/api/utils';
import Button from '../../../../common/components/buttons/Button';
import Info from '../../../../common/components/info/Info';
import Select from '../../../../common/components/select/Select';
import Switch from '../../../../common/components/switch/Switch';
import useInfo from '../../../../common/hooks-query/useInfo';
import useUrlPresets from '../../../../common/hooks-query/useUrlPresets';
import copyToClipboard from '../../../../common/utils/copyToClipboard';
@@ -33,14 +35,15 @@ export default function GenerateLinkForm() {
const {
handleSubmit,
register,
setError,
watch,
setValue,
formState: { errors },
} = useForm<GenerateLinkFormOptions>({
mode: 'onChange',
defaultValues: {
baseUrl: currentHostName,
path: '',
path: 'timer',
lock: false,
authenticate: false,
},
@@ -67,6 +70,29 @@ export default function GenerateLinkForm() {
}
};
const hostOptions = useMemo(
() =>
infoData.networkInterfaces.map((nif) => ({
value: nif.address,
label: `${nif.name} - ${nif.address}`,
})),
[infoData.networkInterfaces],
);
const pathOptions = useMemo(
() => [
{ value: 'timer', label: 'Timer' },
{ value: 'cuesheet', label: 'Cuesheet' },
{ value: 'op', label: 'Operator' },
{ value: '', label: 'Companion' },
...urlPresetData.map((preset) => ({
value: preset.alias,
label: `Preset: ${preset.alias}`,
})),
],
[urlPresetData],
);
return (
<Panel.Section as='form' onSubmit={handleSubmit(onSubmit)} onKeyDown={(event) => preventEscape(event)}>
{errors.root && <Panel.Error>{errors.root.message}</Panel.Error>}
@@ -81,59 +107,40 @@ export default function GenerateLinkForm() {
title='Host IP'
description={`Which IP address will be used${isOntimeCloud ? ' (not applicable in Ontime Cloud)' : ''}`}
/>
<Select variant='ontime' isDisabled={isOntimeCloud} size='sm' {...register('baseUrl')}>
{infoData.networkInterfaces.map((nif) => {
return (
<option key={nif.name} value={nif.address}>
{`${nif.name} - ${nif.address}`}
</option>
);
})}
</Select>
<Select
disabled={isOntimeCloud}
options={hostOptions}
value={watch('baseUrl')}
onValueChange={(value) => setValue('baseUrl', value)}
/>
</Panel.ListItem>
<Panel.ListItem>
<Panel.Field
title='URL Preset'
description='Which preset will the link point to (will default to /timer if none is given)'
/>
<Select variant='ontime' size='sm' {...register('path')}>
<option key='timer' value='timer'>
Timer
</option>
<option key='companion' value=''>
Companion
</option>
{urlPresetData.map((preset) => {
return (
<option key={preset.alias} value={preset.alias}>
{`Preset: ${preset.alias}`}
</option>
);
})}
</Select>
<Select options={pathOptions} value={watch('path')} onValueChange={(value) => setValue('path', value)} />
</Panel.ListItem>
<Panel.ListItem>
<Panel.Field
title='Lock navigation'
description='Prevent showing navigation (will only work for non production URLs)'
/>
<Switch variant='ontime' size='lg' {...register('lock')} />
<Switch name='lock' checked={watch('lock')} onCheckedChange={(checked) => setValue('lock', checked)} />
</Panel.ListItem>
<Panel.ListItem>
<Panel.Field title='Authenticate' description='Whether the URL should be pre-authenticated' />
<Switch variant='ontime' size='lg' {...register('authenticate')} />
<Switch
name='authenticate'
checked={watch('authenticate')}
onCheckedChange={(checked) => setValue('authenticate', checked)}
/>
</Panel.ListItem>
</Panel.ListGroup>
<Panel.ListGroup>
<Panel.ListItem>
<Panel.Field title='Generate link' description='Fill form and generate link and QR code' />
<Button
variant='ontime-filled'
size='sm'
isLoading={formState === 'loading'}
type='submit'
style={{ alignSelf: 'end' }}
>
<Button variant='primary' loading={formState === 'loading'} type='submit' style={{ alignSelf: 'end' }}>
{formState === 'success' ? 'Link copied to clipboard!' : 'Update share link'}
</Button>
<div className={style.column}>
apps/client/src/features/app-settings/panel/network-panel/NetworkLogExport.tsx
+3 -8
View File
@@ -1,7 +1,7 @@
import { MouseEvent } from 'react';
import { IoArrowUp } from 'react-icons/io5';
import { Button } from '@chakra-ui/react';
import Button from '../../../../common/components/buttons/Button';
import { handleLinks } from '../../../../common/utils/linkUtils';
import Log from '../../../log/Log';
import * as Panel from '../../panel-utils/PanelUtils';
@@ -18,13 +18,8 @@ export default function LogExport() {
<Panel.Card>
<Panel.SubHeader>
Event log
<Button
variant='ontime-subtle'
size='sm'
rightIcon={<IoArrowUp className={style.iconRotate} />}
onClick={extract}
>
Extract
<Button onClick={extract}>
Extract <IoArrowUp className={style.iconRotate} />
</Button>
</Panel.SubHeader>
<Panel.Divider />
apps/client/src/features/app-settings/panel/project-panel/ManageProjects.tsx
+6 -14
View File
@@ -1,10 +1,10 @@
import { ChangeEvent, useRef, useState } from 'react';
import { IoAdd } from 'react-icons/io5';
import { useSearchParams } from 'react-router-dom';
import { Button, Input } from '@chakra-ui/react';
import { uploadProjectFile } from '../../../../common/api/db';
import { invalidateAllCaches, maybeAxiosError } from '../../../../common/api/utils';
import Button from '../../../../common/components/buttons/Button';
import { validateProjectFile } from '../../../../common/utils/uploadUtils';
import * as Panel from '../../panel-utils/PanelUtils';
@@ -57,7 +57,7 @@ export default function ManageProjects() {
return (
<Panel.Section>
<Input
<input
ref={fileInputRef}
style={{ display: 'none' }}
type='file'
@@ -70,22 +70,14 @@ export default function ManageProjects() {
Manage projects
<Panel.InlineElements>
<Button
variant='ontime-subtle'
onClick={handleSelectFile}
size='sm'
isDisabled={Boolean(loading) || isCreatingProject}
isLoading={loading === 'import'}
disabled={Boolean(loading) || isCreatingProject}
loading={loading === 'import'}
>
Import
</Button>
<Button
variant='ontime-subtle'
onClick={handleToggleCreate}
size='sm'
isDisabled={Boolean(loading) || isCreatingProject}
rightIcon={<IoAdd />}
>
New
<Button onClick={handleToggleCreate} disabled={Boolean(loading) || isCreatingProject}>
New <IoAdd />
</Button>
</Panel.InlineElements>
</Panel.SubHeader>
apps/client/src/features/app-settings/panel/project-panel/ProjectCreateForm.tsx
+16 -48
View File
@@ -1,12 +1,14 @@
import { useEffect, useState } from 'react';
import { useFieldArray, useForm } from 'react-hook-form';
import { IoTrash } from 'react-icons/io5';
import { Button, Input, Textarea } from '@chakra-ui/react';
import { IoAdd, IoTrash } from 'react-icons/io5';
import { useQueryClient } from '@tanstack/react-query';
import { PROJECT_LIST } from '../../../../common/api/constants';
import { createProject } from '../../../../common/api/db';
import { maybeAxiosError } from '../../../../common/api/utils';
import Button from '../../../../common/components/buttons/Button';
import Input from '../../../../common/components/input/input/Input';
import Textarea from '../../../../common/components/input/textarea/Textarea';
import { preventEscape } from '../../../../common/utils/keyEvent';
import { documentationUrl } from '../../../../externals';
import * as Panel from '../../panel-utils/PanelUtils';
@@ -86,10 +88,10 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
<Panel.Title>
Create new project
<Panel.InlineElements>
<Button onClick={onClose} variant='ontime-ghosted' size='sm' isDisabled={isSubmitting}>
<Button onClick={onClose} variant='ghosted' disabled={isSubmitting}>
Cancel
</Button>
<Button isDisabled={!isValid} type='submit' isLoading={isSubmitting} variant='ontime-filled' size='sm'>
<Button disabled={!isValid} type='submit' loading={isSubmitting} variant='primary'>
Create project
</Button>
</Panel.InlineElements>
@@ -98,53 +100,31 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
<Panel.Section className={style.innerColumn}>
<label>
Project title
<Input
variant='ontime-filled'
size='sm'
maxLength={50}
placeholder='Your project name'
autoComplete='off'
{...register('title')}
/>
<Input fluid maxLength={50} placeholder='Your project name' {...register('title')} />
</label>
<label>
Project description
<Input
variant='ontime-filled'
size='sm'
maxLength={100}
placeholder='Euro Love, Malmö 2024'
autoComplete='off'
{...register('description')}
/>
<Input fluid maxLength={100} placeholder='Euro Love, Malmö 2024' {...register('description')} />
</label>
<label>
Backstage info
<Textarea
variant='ontime-filled'
size='sm'
fluid
maxLength={150}
placeholder='Wi-Fi password: 1234'
autoComplete='off'
resize='none'
resize='vertical'
{...register('backstageInfo')}
/>
</label>
<label>
Backstage QR code Url
<Input
variant='ontime-filled'
size='sm'
placeholder={documentationUrl}
autoComplete='off'
{...register('backstageUrl')}
/>
<Input fluid placeholder={documentationUrl} {...register('backstageUrl')} />
</label>
<Panel.Section>
<Panel.ListItem>
<Panel.Field title='Custom data' description='Add custom data for your project' />
<Button variant='ontime-subtle' onClick={handleAddCustom}>
+
<Button onClick={handleAddCustom}>
Add <IoAdd />
</Button>
</Panel.ListItem>
{fields.map((field, idx) => (
@@ -152,25 +132,13 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
<Panel.Paragraph>{idx + 1}.</Panel.Paragraph>
<label>
Title
<Input
variant='ontime-filled'
size='sm'
placeholder={field.title}
autoComplete='off'
{...register(`custom.${idx}.title` as const)}
/>
<Input placeholder={field.title} {...register(`custom.${idx}.title` as const)} />
</label>
<label>
Value
<Input
variant='ontime-filled'
size='sm'
placeholder={field.value}
autoComplete='off'
{...register(`custom.${idx}.value` as const)}
/>
<Input placeholder={field.value} autoComplete='off' {...register(`custom.${idx}.value` as const)} />
</label>
<Button variant='ontime-ghosted' onClick={() => remove(idx)}>
<Button variant='ghosted' onClick={() => remove(idx)}>
<IoTrash />
</Button>
</div>
apps/client/src/features/app-settings/panel/project-panel/ProjectData.tsx
+39 -79
View File
@@ -1,12 +1,14 @@
import { ChangeEvent, useEffect, useRef } from 'react';
import { useFieldArray, useForm } from 'react-hook-form';
import { IoAdd, IoDownloadOutline, IoTrash } from 'react-icons/io5';
import { Button, Input, Textarea } from '@chakra-ui/react';
import { type ProjectData } from 'ontime-types';
import { projectLogoPath } from '../../../../common/api/constants';
import { postProjectData, uploadProjectLogo } from '../../../../common/api/project';
import { maybeAxiosError } from '../../../../common/api/utils';
import Button from '../../../../common/components/buttons/Button';
import Input from '../../../../common/components/input/input/Input';
import Textarea from '../../../../common/components/input/textarea/Textarea';
import useProjectData from '../../../../common/hooks-query/useProjectData';
import { preventEscape } from '../../../../common/utils/keyEvent';
import { validateLogo } from '../../../../common/utils/uploadUtils';
@@ -112,16 +114,10 @@ export default function ProjectData() {
<Panel.SubHeader>
Project data
<Panel.InlineElements>
<Button variant='ontime-ghosted' size='sm' onClick={onReset} isDisabled={isSubmitting || !isDirty}>
<Button onClick={onReset} disabled={isSubmitting || !isDirty}>
Revert to saved
</Button>
<Button
variant='ontime-filled'
size='sm'
type='submit'
isDisabled={!isDirty || !isValid}
isLoading={isSubmitting}
>
<Button variant='primary' type='submit' disabled={!isDirty || !isValid} loading={isSubmitting}>
Save
</Button>
</Panel.InlineElements>
@@ -132,20 +128,16 @@ export default function ProjectData() {
<label>
Project title
<Input
variant='ontime-filled'
size='sm'
fluid
maxLength={50}
placeholder='Project title is shown in production views'
autoComplete='off'
{...register('title')}
/>
</label>
<Panel.Section style={{ marginTop: 0 }}>
<label>
Project logo
<Input
variant='ontime-filled'
size='sm'
<input
type='file'
style={{ display: 'none' }}
accept='image/*'
@@ -161,25 +153,17 @@ export default function ProjectData() {
<>
<img src={`${projectLogoPath}/${watch('projectLogo')}`} />
<Button
size='sm'
variant='ontime-filled'
isDisabled={isSubmitting || !watch('projectLogo')}
leftIcon={<IoTrash />}
variant='subtle-destructive'
disabled={isSubmitting || !watch('projectLogo')}
onClick={handleDeleteLogo}
type='button'
>
<IoTrash />
Delete
</Button>
</>
) : (
<Button
variant='ontime-filled'
size='sm'
isDisabled={isSubmitting}
leftIcon={<IoDownloadOutline />}
onClick={handleClickUpload}
type='button'
>
<Button disabled={isSubmitting} onClick={handleClickUpload} type='button'>
<IoDownloadOutline />
Upload logo
</Button>
)}
@@ -187,44 +171,30 @@ export default function ProjectData() {
</Panel.Card>
</label>
</Panel.Section>
<label>
Project description
<Input
variant='ontime-filled'
size='sm'
maxLength={100}
placeholder='Euro Love, Malmö 2024'
autoComplete='off'
{...register('description')}
/>
<Input fluid maxLength={100} placeholder='Euro Love, Malmö 2024' {...register('description')} />
</label>
<label>
Backstage info
<Textarea
variant='ontime-filled'
size='sm'
fluid
maxLength={150}
placeholder='Wi-Fi password: 1234'
autoComplete='off'
resize='none'
resize='vertical'
{...register('backstageInfo')}
/>
</label>
<label>
Backstage QR code URL
<Input
variant='ontime-filled'
size='sm'
placeholder={documentationUrl}
autoComplete='off'
{...register('backstageUrl')}
/>
<Input fluid placeholder={documentationUrl} {...register('backstageUrl')} />
</label>
<Panel.Section style={{ marginTop: 0 }}>
<Panel.ListItem>
<Panel.Field title='Custom data' description='' />
<Button leftIcon={<IoAdd />} size='sm' variant='ontime-subtle' onClick={handleAddCustom}>
Add
<Button onClick={handleAddCustom}>
Add <IoAdd />
</Button>
</Panel.ListItem>
{fields.length > 0 &&
@@ -237,41 +207,31 @@ export default function ProjectData() {
| undefined;
return (
<div key={field.id} className={style.customDataItem}>
<div>
<div className={style.titleRow}>
<label>
Title
<Input
variant='ontime-filled'
size='sm'
defaultValue={field.title}
placeholder='Title of your custom data'
autoComplete='off'
{...register(`custom.${idx}.title`, {
required: { value: true, message: 'Field cannot be empty' },
})}
/>
</label>
<Button
size='sm'
variant='ontime-subtle'
color='#FA5656' // $red-500
onClick={() => remove(idx)}
leftIcon={<IoTrash />}
>
Delete Entry
</Button>
</div>
{rowErrors?.title?.message && <Panel.Error>{rowErrors.title.message}</Panel.Error>}
<div className={style.titleRow}>
<label>
Title
<Input
fluid
defaultValue={field.title}
placeholder='Title of your custom data'
{...register(`custom.${idx}.title`, {
required: { value: true, message: 'Field cannot be empty' },
})}
/>
</label>
<Button variant='subtle-destructive' onClick={() => remove(idx)}>
<IoTrash />
Delete Entry
</Button>
</div>
{rowErrors?.title?.message && <Panel.Error>{rowErrors.title.message}</Panel.Error>}
<label>
Value
<Textarea
variant='ontime-filled'
resize='none'
size='sm'
fluid
rows={3}
resize='vertical'
defaultValue={field.value}
autoComplete='off'
placeholder='Text of your custom data'
{...register(`custom.${idx}.value`, {
required: { value: true, message: 'Field cannot be empty' },
apps/client/src/features/control/message/TimerViewControl.tsx
+7 -9
View File
@@ -61,14 +61,6 @@ function SecondarySourceControl() {
}
};
const changeValue = (newValue: SecondarySource) => {
// we can only update the remote if it is enabled
if (secondarySource !== null) {
setMessage.timerSecondarySource(newValue);
}
setValue(newValue);
};
return (
<>
<Select
@@ -79,7 +71,13 @@ function SecondarySourceControl() {
{ value: 'aux3', label: 'Aux 3' },
{ value: 'secondary', label: 'Secondary message' },
]}
onChange={changeValue}
onValueChange={(value) => {
// we can only update the remote if it is enabled
if (secondarySource !== null) {
setMessage.timerSecondarySource(value as SecondarySource);
}
setValue(value as SecondarySource);
}}
/>
<Button
variant={secondarySource !== null ? 'primary' : 'subtle'}
apps/client/src/features/log/Log.tsx
+14 -14
View File
@@ -1,7 +1,7 @@
import { useCallback, useState } from 'react';
import { Button } from '@chakra-ui/react';
import { LogOrigin } from 'ontime-types';
import Button from '../../common/components/buttons/Button';
import { clearLogs, useLogData } from '../../common/stores/logger';
import * as Panel from '../app-settings/panel-utils/PanelUtils';
@@ -52,8 +52,8 @@ export default function Log() {
<>
<Panel.InlineElements className={style.buttonBar}>
<Button
variant={showUser ? 'ontime-filled' : 'ontime-outlined'}
size='xs'
variant={showUser ? 'primary' : 'subtle'}
size='small'
onClick={() => setShowUser((s) => !s)}
onAuxClick={() => disableOthers(LogOrigin.User)}
onContextMenu={(e) => e.preventDefault()}
@@ -61,8 +61,8 @@ export default function Log() {
{LogOrigin.User}
</Button>
<Button
variant={showClient ? 'ontime-filled' : 'ontime-outlined'}
size='xs'
variant={showClient ? 'primary' : 'subtle'}
size='small'
onClick={() => setShowClient((s) => !s)}
onAuxClick={() => disableOthers(LogOrigin.Client)}
onContextMenu={(e) => e.preventDefault()}
@@ -70,8 +70,8 @@ export default function Log() {
{LogOrigin.Client}
</Button>
<Button
variant={showServer ? 'ontime-filled' : 'ontime-outlined'}
size='xs'
variant={showServer ? 'primary' : 'subtle'}
size='small'
onClick={() => setShowServer((s) => !s)}
onAuxClick={() => disableOthers(LogOrigin.Server)}
onContextMenu={(e) => e.preventDefault()}
@@ -79,8 +79,8 @@ export default function Log() {
{LogOrigin.Server}
</Button>
<Button
variant={showPlayback ? 'ontime-filled' : 'ontime-outlined'}
size='xs'
variant={showPlayback ? 'primary' : 'subtle'}
size='small'
onClick={() => setShowPlayback((s) => !s)}
onAuxClick={() => disableOthers(LogOrigin.Playback)}
onContextMenu={(e) => e.preventDefault()}
@@ -88,8 +88,8 @@ export default function Log() {
{LogOrigin.Playback}
</Button>
<Button
variant={showRx ? 'ontime-filled' : 'ontime-outlined'}
size='xs'
variant={showRx ? 'primary' : 'subtle'}
size='small'
onClick={() => setShowRx((s) => !s)}
onAuxClick={() => disableOthers(LogOrigin.Rx)}
onContextMenu={(e) => e.preventDefault()}
@@ -97,15 +97,15 @@ export default function Log() {
{LogOrigin.Rx}
</Button>
<Button
variant={showTx ? 'ontime-filled' : 'ontime-outlined'}
size='xs'
variant={showTx ? 'primary' : 'subtle'}
size='small'
onClick={() => setShowTx((s) => !s)}
onAuxClick={() => disableOthers(LogOrigin.Tx)}
onContextMenu={(e) => e.preventDefault()}
>
{LogOrigin.Tx}
</Button>
<Button variant='ontime-subtle' size='xs' onClick={clearLogs}>
<Button variant='subtle-destructive' size='small' onClick={clearLogs}>
Clear
</Button>
</Panel.InlineElements>
apps/client/src/features/overview/composite/OverviewWrapper.tsx
+4 -4
View File
@@ -1,7 +1,6 @@
import { PropsWithChildren, ReactNode } from 'react';
import { ErrorBoundary } from '@sentry/react';
import { Playback } from 'ontime-types';
import { millisToString } from 'ontime-utils';
import { isPlaybackActive, millisToString } from 'ontime-utils';
import { useIsOnline, useRuntimePlaybackOverview, useTimer } from '../../../common/hooks/useSocket';
import useProjectData from '../../../common/hooks-query/useProjectData';
@@ -72,8 +71,9 @@ export function ProgressOverview() {
export function RuntimeOverview() {
const { clock, offset, playback } = useRuntimePlaybackOverview();
const offsetText = getOffsetText(offset);
const offsetClasses = cx([style.offset, playback !== Playback.Stop && (offset < 0 ? style.behind : style.ahead)]);
const isPlaying = isPlaybackActive(playback);
const offsetText = getOffsetText(isPlaying ? offset : null);
const offsetClasses = cx([style.offset, isPlaying && (offset < 0 ? style.behind : style.ahead)]);
return (
<>
apps/client/src/features/rundown/entry-editor/composite/EventEditorTimes.tsx
+2 -2
View File
@@ -102,7 +102,7 @@ function EventEditorTimes({
<Editor.Label htmlFor='endAction'>End Action</Editor.Label>
<Select
value={endAction}
onChange={(value) => handleSubmit('endAction', value)}
onValueChange={(value) => handleSubmit('endAction', value)}
options={[
{ value: EndAction.None, label: 'None' },
{ value: EndAction.LoadNext, label: 'Load next event' },
@@ -138,7 +138,7 @@ function EventEditorTimes({
<Editor.Label htmlFor='timerType'>Timer Type</Editor.Label>
<Select
value={timerType}
onChange={(value) => handleSubmit('timerType', value)}
onValueChange={(value) => handleSubmit('timerType', value)}
options={[
{ value: TimerType.CountDown, label: 'Count down' },
{ value: TimerType.CountUp, label: 'Count up' },
apps/client/src/features/rundown/entry-editor/composite/EventEditorTriggers.tsx
+26 -6
View File
@@ -1,4 +1,4 @@
import { Fragment, useCallback, useState } from 'react';
import { Fragment, useCallback, useMemo, useState } from 'react';
import { IoAlertCircle, IoCheckmarkCircle, IoTrash } from 'react-icons/io5';
import { Tooltip } from '@chakra-ui/react';
import { TimerLifeCycle, timerLifecycleValues, Trigger } from 'ontime-types';
@@ -66,18 +66,38 @@ function EventTriggerForm({ eventId, triggers }: EventTriggerFormProps) {
const validationError = getValidationError(cycleValue, automationId);
const triggerOptions = useMemo(
() => [
{ value: null, label: 'Select Trigger' },
...eventTriggerOptions.map((cycle) => ({ value: cycle, label: cycle })),
],
[], // eventTriggerOptions is a constant, no need for dependency
);
const automationOptions = useMemo(
() => [
{ value: null, label: 'Select Automation' },
...Object.values(automationSettings.automations).map(({ id, title }) => ({ value: id, label: title })),
],
[automationSettings.automations], // This needs to be a dependency as it can change
);
return (
<div className={style.triggerForm}>
<Select
value={cycleValue}
onChange={(value) => setCycleValue(value)}
options={eventTriggerOptions.map((cycle) => ({ value: cycle, label: cycle }))}
onValueChange={(value) => {
if (value !== null) setCycleValue(value);
}}
options={triggerOptions}
/>
<Select
value={automationId}
onChange={(value) => setAutomationId(value)}
options={Object.values(automationSettings.automations).map(({ id, title }) => ({ value: id, label: title }))}
value={automationId ?? null}
onValueChange={(value) => {
if (value !== null) setAutomationId(value);
}}
options={automationOptions}
/>
<Button