mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-20 06:29:07 +00:00
feat: add flag property
This commit is contained in:
@@ -72,6 +72,13 @@
|
||||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
.splitThree {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
column-gap: 1rem;
|
||||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
.tooltipIcon {
|
||||
color: $blue-500;
|
||||
display: inline-block;
|
||||
|
||||
@@ -59,10 +59,10 @@ export default function EventEditor({ event }: EventEditorProps) {
|
||||
key={`${event.id}-titles`}
|
||||
eventId={event.id}
|
||||
cue={event.cue}
|
||||
flag={event.flag}
|
||||
title={event.title}
|
||||
note={event.note}
|
||||
colour={event.colour}
|
||||
handleSubmit={handleSubmit}
|
||||
/>
|
||||
<div className={style.column}>
|
||||
<Editor.Title>
|
||||
|
||||
@@ -7,7 +7,7 @@ interface EventEditorImageProps {
|
||||
export default function EventEditorImage({ src }: EventEditorImageProps) {
|
||||
return (
|
||||
<div className={style.imageContainer}>
|
||||
<img loading='lazy' src={src} />
|
||||
{Boolean(src) && <img loading='lazy' src={src} />}
|
||||
<div className={style.imageOverlay} />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -4,7 +4,8 @@ import { sanitiseCue } from 'ontime-utils';
|
||||
import * as Editor from '../../../../common/components/editor-utils/EditorUtils';
|
||||
import SwatchSelect from '../../../../common/components/input/colour-input/SwatchSelect';
|
||||
import Input from '../../../../common/components/input/input/Input';
|
||||
import { type EventEditorUpdateFields } from '../EventEditor';
|
||||
import Switch from '../../../../common/components/switch/Switch';
|
||||
import { useEntryActions } from '../../../../common/hooks/useEntryAction';
|
||||
|
||||
import EventTextArea from './EventTextArea';
|
||||
import EntryEditorTextInput from './EventTextInput';
|
||||
@@ -14,22 +15,32 @@ import style from '../EntryEditor.module.scss';
|
||||
interface EventEditorTitlesProps {
|
||||
eventId: string;
|
||||
cue: string;
|
||||
flag: boolean;
|
||||
title: string;
|
||||
note: string;
|
||||
colour: string;
|
||||
handleSubmit: (field: EventEditorUpdateFields, value: string) => void;
|
||||
}
|
||||
|
||||
export default memo(EventEditorTitles);
|
||||
function EventEditorTitles({ eventId, cue, title, note, colour, handleSubmit }: EventEditorTitlesProps) {
|
||||
function EventEditorTitles({ eventId, cue, flag, title, note, colour }: EventEditorTitlesProps) {
|
||||
const { updateEntry } = useEntryActions();
|
||||
|
||||
const cueSubmitHandler = (_field: string, newValue: string) => {
|
||||
handleSubmit('cue', sanitiseCue(newValue));
|
||||
updateEntry({ id: eventId, cue: sanitiseCue(newValue) });
|
||||
};
|
||||
|
||||
const flagSubmitHandler = (newValue: boolean) => {
|
||||
updateEntry({ id: eventId, flag: newValue });
|
||||
};
|
||||
|
||||
const textSubmitHandler = (field: string, newValue: string) => {
|
||||
updateEntry({ id: eventId, [field]: newValue });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={style.column}>
|
||||
<Editor.Title>Event Data</Editor.Title>
|
||||
<div className={style.splitTwo}>
|
||||
<div className={style.splitThree}>
|
||||
<div>
|
||||
<Editor.Label htmlFor='eventId'>Event ID (read only)</Editor.Label>
|
||||
<Input id='eventId' data-testid='input-textfield' value={eventId} readOnly fluid />
|
||||
@@ -41,13 +52,20 @@ function EventEditorTitles({ eventId, cue, title, note, colour, handleSubmit }:
|
||||
submitHandler={cueSubmitHandler}
|
||||
maxLength={10}
|
||||
/>
|
||||
<div>
|
||||
<Editor.Label htmlFor='flag'>Flag</Editor.Label>
|
||||
<Editor.Label className={style.switchLabel}>
|
||||
<Switch id='flag' checked={flag} onCheckedChange={flagSubmitHandler} />
|
||||
{flag ? 'On' : 'Off'}
|
||||
</Editor.Label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Editor.Label>Colour</Editor.Label>
|
||||
<SwatchSelect name='colour' value={colour} handleChange={handleSubmit} />
|
||||
<SwatchSelect name='colour' value={colour} handleChange={textSubmitHandler} />
|
||||
</div>
|
||||
<EntryEditorTextInput field='title' label='Title' initialValue={title} submitHandler={handleSubmit} />
|
||||
<EventTextArea field='note' label='Note' initialValue={note} submitHandler={handleSubmit} />
|
||||
<EntryEditorTextInput field='title' label='Title' initialValue={title} submitHandler={textSubmitHandler} />
|
||||
<EventTextArea field='note' label='Note' initialValue={note} submitHandler={textSubmitHandler} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user