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

v2:feat (#231)

Browse Source 
* style: element relationship
* feat: utility to add first element
* refactor: organise dir
* ux: deleting element closes drawer
* fix: issue with escaped characters
* fix: issue with overflow in events list
* fix: prevent event timer from receiving non event
* style: prevent small shift on class change
* style: visually detach event editor
* fix: entry block knows last event
* fix: skip event timer updates on non events
* fix: prevent electron OPENGL error
* style: cleanup text styles
* style: unify input styles
* refactor: simplify style and composition
* refactor: tweaks on style + ts
* refactor: add validation to events post
* fix: handle non events in event timer
* refactor: cleanup unused
This commit is contained in:
Carlos Valente
2022-10-23 19:21:49 +02:00
committed by GitHub
parent d8ee0d4f82
commit 1b1aced296
30 changed files with 233 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/common/components/buttons/QuitIconBtn.jsx → client/src/common/components/buttons/QuitIconBtn.tsx
+12 -10
View File
@@ -6,19 +6,25 @@ import {
AlertDialogFooter,
AlertDialogHeader,
AlertDialogOverlay,
Button, IconButton, Tooltip,
Button,
IconButton,
Tooltip,
} from '@chakra-ui/react';
import { FiPower } from '@react-icons/all-files/fi/FiPower';
import PropTypes from 'prop-types';
import { LoggingContext } from '../../context/LoggingContext';
import { Size } from '../../models/UtilTypes';
export default function QuitIconBtn(props) {
interface QuitIconBtnProps {
clickHandler: () => void;
size?: Size;
}
export default function QuitIconBtn(props: QuitIconBtnProps) {
const { clickHandler, size = 'lg', ...rest } = props;
const [isOpen, setIsOpen] = useState(false);
const { emitInfo } = useContext(LoggingContext);
const onClose = () => setIsOpen(false);
const cancelRef = useRef();
const cancelRef = useRef<HTMLButtonElement | null>(null);
useEffect(() => {
if (window.process?.type === 'renderer') {
@@ -38,6 +44,7 @@ export default function QuitIconBtn(props) {
<>
<Tooltip label='Quit Application'>
<IconButton
aria-label='Quit Application'
size={size}
icon={<FiPower />}
colorScheme='red'
@@ -58,7 +65,7 @@ export default function QuitIconBtn(props) {
This will shutdown the program and all running servers. Are you sure?
</AlertDialogBody>
<AlertDialogFooter>
<Button ref={cancelRef} onClick={onClose}>
<Button ref={cancelRef} onClick={onClose} variant='ghost'>
Cancel
</Button>
<Button colorScheme='red' onClick={handleShutdown} ml={3}>
@@ -71,8 +78,3 @@ export default function QuitIconBtn(props) {
</>
);
}
QuitIconBtn.propTypes = {
clickHandler: PropTypes.func,
size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
};
client/src/common/components/input/TimeInput.jsx
+2 -1
View File
@@ -133,9 +133,10 @@ export default function TimeInput(props) {
size='sm'
icon={<IoLink style={{ transform: 'rotate(-45deg)' }} />}
aria-label='automate'
colorScheme='whiteAlpha'
colorScheme='blue'
style={{ borderRadius: '2px', width: 'min-content' }}
tabIndex={-1}
variant='ghost'
/>
</InputLeftElement>
<Input
client/src/common/context/useSubscription.tsx → client/src/common/hooks/useSubscription.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { useEffect, useState } from 'react';
import { useSocket } from './socketContext';
import { useSocket } from '../context/socketContext';
export default function useSubscription<T>(topic: string, initialState: T, requestString?: string) {
const socket = useSocket();
client/src/declarations/declaration.d.ts
Vendored
+3
View File
@@ -3,10 +3,13 @@ declare module '*.scss' {
export default content;
}
type ListenerType = (event: 'string', args: unknown[]) => void;
declare global {
interface Window {
ipcRenderer: {
send: (channel: string, args?: string | object) => void;
on: (channel: string, listener: ListenerType) => void;
};
process: {
type: string;
client/src/features/control/message/InputRow.tsx
+18 -30
View File
@@ -1,7 +1,7 @@
import { useEffect, useState } from 'react';
import { Editable, EditableInput, EditablePreview, IconButton, Tooltip } from '@chakra-ui/react';
import { Input } from '@chakra-ui/react';
import { IoSunny } from '@react-icons/all-files/io5/IoSunny';
import TooltipActionBtn from '../../../common/components/buttons/TooltipActionBtn';
import { tooltipDelayMid } from '../../../ontimeConfig';
import style from './MessageControl.module.scss';
@@ -17,44 +17,32 @@ interface InputRowProps {
export default function InputRow(props: InputRowProps) {
const { label, placeholder, text, visible, actionHandler, changeHandler } = props;
const [inputText, setInputText] = useState<string>(text || '');
const handleInputChange = (newValue: string) => {
setInputText(newValue);
changeHandler(newValue);
};
useEffect(() => {
if (text) {
setInputText(text);
}
}, [text]);
return (
<div className={`${visible ? style.inputRowActive : ''}`}>
<span className={style.label}>{label}</span>
<div className={style.inputItems}>
<Editable
onChange={(newValue) => handleInputChange(newValue)}
value={inputText}
<Input
size='sm'
variant='filled'
value={text}
onChange={(event) => handleInputChange(event.target.value)}
placeholder={placeholder}
className={style.inline}
color={text === '' ? '#505050' : 'inherit'}
>
<EditablePreview className={`${style.padleft} ${style.fullWidth}`} />
<EditableInput className={style.padleft} />
</Editable>
<Tooltip label={visible ? 'Make invisible' : 'Make visible'} openDelay={tooltipDelayMid}>
<IconButton
aria-label='Toggle visibility'
size='sm'
icon={<IoSunny size='18px' />}
colorScheme='blue'
variant={visible ? 'solid' : 'outline'}
onClick={() => actionHandler('update', { field: 'isPublic', value: !visible })}
/>
</Tooltip>
/>
<TooltipActionBtn
clickHandler={() => actionHandler('update', { field: 'isPublic', value: !visible })}
tooltip={visible ? 'Make invisible' : 'Make visible'}
aria-label='Toggle tooltip visibility'
openDelay={tooltipDelayMid}
icon={<IoSunny size='18px' />}
colorScheme='blue'
variant={visible ? 'solid' : 'outline'}
size='sm'
/>
</div>
</div>
);
client/src/features/control/message/MessageControl.module.scss
-20
View File
@@ -24,30 +24,10 @@
color: $label-gray;
}
.inline {
border-radius: 4px;
background-color: $input-bg;
border: $input-border;
overflow-x: hidden;
}
.padleft {
padding-left: 0.5em;
border-radius: 2px;
}
.fullWidth {
width: 100%;
}
.inputRowActive {
.label {
color: $action-blue;
}
.inline {
border-color: $action-blue;
}
}
}
client/src/features/editors/Editor.module.scss
+4 -4
View File
@@ -132,7 +132,7 @@
.eventEditor {
border-radius: 3px 3px 0 0;
background-color: $bg-container-l1;
border-top: $border-l1;
border-top: 1px solid $bg-gray-900;
position: absolute;
bottom: 0;
width: 100vw;
@@ -160,10 +160,10 @@
.editor {
grid-area: even;
height: calc(100% - 3em);
height: calc(100% - 24px);
.content {
height: calc(100% - 3em);
height: calc(100% - 24px);
overflow: hidden;
}
}
@@ -175,7 +175,7 @@
.content {
display: flex;
flex-direction: column;
height: calc(100% - 3em);
height: calc(100% - 24px);
overflow: hidden;
}
}
client/src/features/editors/_blockMixins.scss
-1
View File
@@ -5,7 +5,6 @@ $clearance: 8px;
$block-border-radius: 3px;
@mixin block-spacing() {
margin: 4px 1px;
padding: 4px 10px 4px 2px;
gap: 2px;
}
client/src/features/editors/entry-block/EntryBlock.module.scss
+34 -50
View File
@@ -1,24 +1,14 @@
@use '../../../theme/main' as *;
@mixin when-visible() {
opacity: 1;
height: calc(2.5em + 20px);
.create {
background-color: $bg-container-l2;
display: flex;
align-items: center;
justify-content: center;
gap: 5%;
margin: 2px 0;
}
.create {
box-sizing: border-box;
width: 100%;
margin: 4px 2px 2px;
font-size: 12px;
position: relative;
display: none;
.createEvent,
.createDelay,
.createBlock {
@@ -32,69 +22,63 @@
border-radius: 2px;
opacity: 0.6;
cursor: pointer;
.keyboard {
margin-left: 4px;
padding: 0 4px;
color: #ccc;
border-radius: 2px;
font-family: Monospaced, sans-serif;
background-color: rgba(0, 0, 0, 0.24);
}
}
.createEvent {
border: 1px solid #2b6cb0;
color: lighten(#2b6cb0, 30%);
border: 1px solid $light-bg;
color: lighten($light-bg, 30%);
&:hover {
background-color: #2b6cb0;
background-color: $light-bg;
opacity: 1;
}
}
.createDelay {
border: 1px solid #ecc94b;;
color: lighten(#ecc94b, 30%);
border: 1px solid $block-delay-color;
color: lighten($block-delay-color, 30%);
&:hover {
background-color: #ecc94b;
background-color: $block-delay-color;
opacity: 1;
}
}
.createBlock {
border: 1px solid #805ad5;
color: lighten(#805ad5, 30%);
border: 1px solid $block-block-color;
color: lighten($block-block-color, 30%);
&:hover {
background-color: #805ad5;
background-color: $block-block-color;
opacity: 1;
}
}
}
.options {
display: flex;
flex-direction: column;
.keyboard {
margin-left: 4px;
padding: 0 4px;
color: $label-gray;
border-radius: 2px;
background-color: rgba(0, 0, 0, 0.24);
}
label {
opacity: 0.65;
transition: opacity 0.15s;
.options {
display: flex;
flex-direction: column;
&:hover {
opacity: 1;
}
label {
opacity: 0.65;
transition: opacity 0.15s;
&:hover {
opacity: 1;
}
}
.disabled {
border-color: $text-gray-disabled;
color: $text-gray-disabled;
pointer-events: none;
}
}
.create.visible {
@include when-visible;
}
.disabled {
border-color: $text-gray-disabled;
color: $text-gray-disabled;
pointer-events: none;
}
client/src/features/editors/entry-block/EntryBlock.tsx
+16 -21
View File
@@ -1,4 +1,4 @@
import { useCallback, useContext, useEffect, useState } from 'react';
import { useCallback, useContext, useRef } from 'react';
import { Checkbox, Tooltip } from '@chakra-ui/react';
import { defaultPublicAtom, startTimeIsLastEndAtom } from 'common/atoms/LocalEventSettings';
import { LoggingContext } from 'common/context/LoggingContext';
@@ -13,7 +13,7 @@ import style from './EntryBlock.module.scss';
interface EntryBlockProps {
showKbd: boolean;
previousId?: string;
visible?: boolean;
previousEventId: string | null;
disableAddDelay?: boolean;
disableAddBlock: boolean;
}
@@ -22,7 +22,7 @@ export default function EntryBlock(props: EntryBlockProps) {
const {
showKbd,
previousId,
visible = true,
previousEventId,
disableAddDelay = true,
disableAddBlock,
} = props;
@@ -30,14 +30,17 @@ export default function EntryBlock(props: EntryBlockProps) {
const { emitError } = useContext(LoggingContext);
const startTimeIsLastEnd = useAtomValue(startTimeIsLastEndAtom);
const defaultPublic = useAtomValue(defaultPublicAtom);
const [doStartTime, setStartTime] = useState(startTimeIsLastEnd);
const [doPublic, setPublic] = useState(defaultPublic);
const doStartTime = useRef<HTMLInputElement | null>(null);
const doPublic = useRef<HTMLInputElement | null>(null)
const handleCreateEvent = useCallback((eventType: EventTypes) => {
switch (eventType) {
case 'event': {
const newEvent = { type: 'event', after: previousId, isPublic: doPublic };
const options = { startIsLastEnd: doStartTime ? previousId : undefined };
const isPublicOption = doPublic?.current?.checked || defaultPublic;
const startTimeIsLastEndOption = doStartTime?.current?.checked || doStartTime;
const newEvent = { type: 'event', after: previousId, isPublic: isPublicOption };
const options = { startIsLastEnd: startTimeIsLastEndOption ? previousEventId : undefined };
addEvent(newEvent, options);
break;
}
@@ -55,18 +58,10 @@ export default function EntryBlock(props: EntryBlockProps) {
}
}
}, [addEvent, doPublic, doStartTime, emitError, previousId]);
useEffect(() => {
setStartTime(startTimeIsLastEnd);
}, [startTimeIsLastEnd]);
useEffect(() => {
setPublic(defaultPublic);
}, [defaultPublic]);
}, [addEvent, doPublic, doStartTime, emitError, previousId, previousEventId]);
return (
<div className={`${style.create} ${visible ? style.visible : ''}`}>
<div className={style.create}>
<Tooltip label='Add Event' openDelay={tooltipDelayMid}>
<span
className={style.createEvent}
@@ -96,18 +91,18 @@ export default function EntryBlock(props: EntryBlockProps) {
</Tooltip>
<div className={style.options}>
<Checkbox
ref={doStartTime}
size='sm'
colorScheme='blue'
isChecked={doStartTime}
onChange={(e) => setStartTime(e.target.checked)}
defaultChecked={startTimeIsLastEnd}
>
Start time is last end
</Checkbox>
<Checkbox
ref={doPublic}
size='sm'
colorScheme='blue'
isChecked={doPublic}
onChange={(e) => setPublic(e.target.checked)}
defaultChecked={defaultPublic}
>
Event is public
</Checkbox>
client/src/features/editors/event-block/EventBlock.module.scss
+1 -1
View File
@@ -12,7 +12,7 @@
grid-template-columns: $binder-width auto 1fr auto;
grid-template-rows: 36px 36px 36px $element-spacing;
align-items: center;
margin: 2px 1px;
margin: 2px 2px;
padding-right: $clearance;
// style - general
client/src/features/editors/event-block/composite/EventBlockTimers.jsx
-1
View File
@@ -34,7 +34,6 @@ export default function EventBlockTimers(props) {
const handleSubmit = useCallback(
(field, value) => {
console.log('called update', field, value)
actionHandler('update', { field, value });
},
[actionHandler]
client/src/features/editors/list/EventList.jsx
+11 -2
View File
@@ -14,7 +14,7 @@ import { duplicateEvent } from 'common/utils/eventsManager';
import { useAtomValue } from 'jotai';
import PropTypes from 'prop-types';
import useSubscription from '../../../common/context/useSubscription';
import useSubscription from '../../../common/hooks/useSubscription';
import EntryBlock from '../entry-block/EntryBlock';
import EventListItem from './EventListItem';
@@ -170,7 +170,13 @@ export default function EventList(props) {
return (
<div className={style.alignCenter}>
<Empty text='No Events' style={{ marginTop: '7vh' }} />
<Button variant='solid' colorScheme='blue'>Create Event</Button>
<Button
onClick={() => insertAtCursor('event', cursor)}
variant='solid'
colorScheme='blue'
>
Create Event
</Button>
</div>
);
}
@@ -178,6 +184,7 @@ export default function EventList(props) {
let eventIndex = -1;
let previousEnd = 0;
let thisEnd = 0;
let previousEventId = null;
return (
<div className={style.eventContainer}>
@@ -198,6 +205,7 @@ export default function EventList(props) {
eventIndex++;
previousEnd = thisEnd;
thisEnd = e.timeEnd;
previousEventId = e.id;
}
const isLast = index === events.length - 1;
return (
@@ -226,6 +234,7 @@ export default function EventList(props) {
<EntryBlock
showKbd={index === cursor}
previousId={e.id}
previousEventId={previousEventId}
disableAddDelay={e.type === 'delay'}
disableAddBlock={e.type === 'block'}
/>
client/src/features/editors/list/EventListItem.tsx
+10 -2
View File
@@ -1,12 +1,16 @@
import { useCallback, useContext } from 'react';
import { defaultPublicAtom, startTimeIsLastEndAtom } from 'common/atoms/LocalEventSettings';
import {
defaultPublicAtom,
editorEventId,
startTimeIsLastEndAtom,
} from 'common/atoms/LocalEventSettings';
import { LoggingContext } from 'common/context/LoggingContext';
import { useEventAction } from 'common/hooks/useEventAction';
import { OntimeEvent, OntimeEventEntry } from 'common/models/EventTypes';
import { Playstate } from 'common/models/OntimeTypes';
import { duplicateEvent } from 'common/utils/eventsManager';
import { calculateDuration } from 'common/utils/timesManager';
import { useAtomValue } from 'jotai';
import { useAtom, useAtomValue } from 'jotai';
import { CursorContext } from '../../../common/context/CursorContext';
import BlockBlock from '../block-block/BlockBlock';
@@ -40,6 +44,7 @@ export default function EventListItem(props: EventListItemProps) {
const defaultPublic = useAtomValue(defaultPublicAtom);
const { addEvent, updateEvent, deleteEvent } = useEventAction();
const { moveCursorTo } = useContext(CursorContext);
const [openId, setOpenId] = useAtom(editorEventId);
// Create / delete new events
type FieldValue = {
@@ -75,6 +80,9 @@ export default function EventListItem(props: EventListItemProps) {
}
case 'delete': {
deleteEvent(data.id);
if (openId === data.id) {
setOpenId(null);
}
break;
}
case 'clone': {
client/src/features/editors/list/EventListWrapper.tsx
+9 -7
View File
@@ -20,13 +20,15 @@ export default function EventListWrapper() {
}, [emitError, isError]);
return (
<div className={styles.content}>
<>
<EventListMenu />
{status === 'success' && data ? (
<EventList events={data} />
) : (
<Empty text='Connecting to server' />
)}
</div>
<div className={styles.content}>
{status === 'success' && data ? (
<EventList events={data} />
) : (
<Empty text='Connecting to server' />
)}
</div>
</>
);
}
client/src/features/event-editor/EventEditor.jsx
+5 -5
View File
@@ -145,10 +145,6 @@ export default function EventEditor() {
<label className={style.inputLabel}>Title</label>
<TextInput field='title' initialText={event.title} submitHandler={handleSubmit} />
</div>
<div className={style.column}>
<label className={style.inputLabel}>Subtitle</label>
<TextInput field='subtitle' initialText={event.subtitle} submitHandler={handleSubmit} />
</div>
<div className={style.column}>
<label className={style.inputLabel}>Presenter</label>
<TextInput
@@ -157,6 +153,10 @@ export default function EventEditor() {
submitHandler={handleSubmit}
/>
</div>
<div className={style.column}>
<label className={style.inputLabel}>Subtitle</label>
<TextInput field='subtitle' initialText={event.subtitle} submitHandler={handleSubmit} />
</div>
<div className={style.padTop}>
<Button
leftIcon={<FiUsers />}
@@ -190,7 +190,7 @@ export default function EventEditor() {
</div>
</div>
<div className={style.column}>
<label className={style.inputLabel}>Notes</label>
<label className={style.inputLabel}>Note</label>
<TextInput
field='note'
initialText={event.note}
client/src/features/info/Info.jsx
+2 -2
View File
@@ -25,14 +25,14 @@ export default function Info() {
const selected = !data.numEvents
? 'No events'
: `Event ${data.selectedEventIndex != null ? data.selectedEventIndex + 1 : '-'}/${
: `Event ${data.selectedEventIndex != null ? data.selectedEventIndex + 1 : '-'} / ${
data.numEvents ? data.numEvents : '-'
}`;
return (
<>
<div className={style.main}>
<span>Running on port 4001</span>
<span>Ontime running on port 4001</span>
<span>{selected}</span>
</div>
<InfoNif />
client/src/features/info/Info.module.scss
+1 -2
View File
@@ -9,13 +9,12 @@
.container {
@include container;
border: 1px solid transparent;
}
.main {
font-size: 0.9em;
color: $ontime-pink;
color: $label-gray;
display: flex;
justify-content: space-between;
}
client/src/features/menu/EventListMenu.module.scss
+1
View File
@@ -2,4 +2,5 @@
align-content: center;
justify-content: space-between;
gap: 8px;
padding-top: 24px;
}
client/src/features/viewers/ViewWrapper.jsx
+1 -1
View File
@@ -2,7 +2,7 @@
import { useEffect, useMemo, useState } from 'react';
import { useSocket } from '../../common/context/socketContext';
import useSubscription from '../../common/context/useSubscription';
import useSubscription from '../../common/hooks/useSubscription';
import useEvent from '../../common/hooks-query/useEvent';
import useEventsList from '../../common/hooks-query/useEventsList';
import useViewSettings from '../../common/hooks-query/useViewSettings';
client/src/features/viewers/public/Public.scss
+7
View File
@@ -110,6 +110,13 @@
transition: 0.5s;
transition-property: opacity;
}
.message {
font-size: 1.5vw;
line-height: 2vw;
white-space: pre-line;
overflow: hidden;
}
}
.clock-container {
server/main.js
+2
View File
@@ -60,6 +60,7 @@ let tray = null;
// Ensure there isn't another instance of the app running already
const lock = app.requestSingleInstanceLock();
if (!lock) {
dialog.showErrorBox('Multiple instances', 'An instance if the App is already running.');
app.quit();
@@ -111,6 +112,7 @@ function createWindow() {
win.setMenu(null);
}
app.disableHardwareAcceleration();
app.whenReady().then(() => {
// Set app title in windows
if (process.platform === 'win32') {
server/src/app.js
+1 -1
View File
@@ -141,7 +141,7 @@ export const startServer = async (overrideConfig = null) => {
// init timer
global.timer = new EventTimer(socket, config.timer, oscConfig, http);
global.timer.setupWithEventList(events);
global.timer.setupWithEventList(events.filter((entry) => entry.type === 'event'));
socket.info('SERVER', returnMessage);
socket.startListener();
server/src/classes/data-provider/DataProvider.js
+3 -1
View File
@@ -95,7 +95,9 @@ export class DataProvider {
*/
static async insertEventAfterId(entry, id) {
const index = [...data.events].findIndex((event) => event.id === id);
await DataProvider.insertEventAt(entry, index + 1);
// eslint-disable-next-line no-unused-vars
const { _after, ...sanitisedEvent } = entry;
await DataProvider.insertEventAt(sanitisedEvent, index + 1);
}
static getSettings() {
server/src/classes/timer/EventTimer.js
+34 -44
View File
@@ -772,40 +772,45 @@ export class EventTimer extends Timer {
* @param previousId
*/
insertEventAfterId(event, previousId) {
// find object in events
const previousIndex = this._eventlist.findIndex((e) => e.id === previousId);
if (previousIndex === -1) {
throw 'Event not found';
}
if (previousIndex + 1 >= this._eventlist.length) {
this._eventlist.push(event);
if (typeof previousId === 'undefined') {
// Insert at beginning
this._eventlist.unshift(event);
} else {
this._eventlist.splice(previousIndex + 1, 0, event);
}
// find object in events
const previousIndex = this._eventlist.findIndex((e) => e.id === previousId);
if (previousIndex === -1) {
throw 'Event not found';
}
try {
// check if entry is running
if (event.id === this.selectedEventId) {
// handle reload selected
// Reload data if running
const type =
this.selectedEventId === event.id && this._startedAt != null ? 'reload' : 'load';
this.loadEvent(this.selectedEventIndex, type);
} else if (event.id === this.nextEventId) {
// roll needs to recalculate
if (this.state === 'roll') {
this.rollLoad();
if (previousIndex + 1 >= this._eventlist.length) {
this._eventlist.push(event);
} else {
this._eventlist.splice(previousIndex + 1, 0, event);
}
try {
// check if entry is running
if (event.id === this.selectedEventId) {
// handle reload selected
// Reload data if running
const type =
this.selectedEventId === event.id && this._startedAt != null ? 'reload' : 'load';
this.loadEvent(this.selectedEventIndex, type);
} else if (event.id === this.nextEventId) {
// roll needs to recalculate
if (this.state === 'roll') {
this.rollLoad();
}
}
}
// load titles
if ('title' in event || 'subtitle' in event || 'presenter' in event) {
this._loadTitlesNext();
this._loadTitlesNow();
// load titles
if ('title' in event || 'subtitle' in event || 'presenter' in event) {
this._loadTitlesNext();
this._loadTitlesNow();
}
} catch (error) {
this.socket.error('SERVER', error);
}
} catch (error) {
this.socket.error('SERVER', error);
}
// update clients
@@ -815,21 +820,6 @@ export class EventTimer extends Timer {
this.runCycle();
}
/**
* @description inserts an event in the first position of the list
* @param event
*/
insertEventAtStart(event) {
// Insert at beginning
this._eventlist.unshift(event);
// update clients
this.broadcastState();
// run cycle
this.runCycle();
}
/**
* Deleted an event from the list by its id
* @param {string} eventId
server/src/controllers/eventController.validate.js
+5 -5
View File
@@ -1,11 +1,11 @@
import { body, validationResult } from 'express-validator';
export const eventSanitizer = [
body('title').optional().isString().trim().escape(),
body('url').optional().isString().trim().escape(),
body('publicInfo').optional().isString().trim().escape(),
body('backstageInfo').optional().isString().trim().escape(),
body('endMessage').optional().isString().trim().escape(),
body('title').optional().isString().trim(),
body('url').optional().isString().trim(),
body('publicInfo').optional().isString().trim(),
body('backstageInfo').optional().isString().trim(),
body('endMessage').optional().isString().trim(),
(req, res, next) => {
const errors = validationResult(req);
if (!errors.isEmpty()) return res.status(422).json({ errors: errors.array() });
server/src/controllers/eventsController.js
+32 -32
View File
@@ -14,17 +14,20 @@ import { socketProvider } from '../classes/socket/SocketController.js';
const socket = socketProvider;
async function _insertAndSync(newEvent) {
if (newEvent.order) {
const events = DataProvider.getEvents();
await DataProvider.insertEventAt(newEvent, newEvent.order);
const previousId = events?.[newEvent.order - 1]?.id;
_insertEventInTimerAfterId(newEvent, previousId);
} else if (newEvent.after) {
await DataProvider.insertEventAfterId(newEvent, newEvent.after);
_insertEventInTimerAfterId(newEvent, newEvent.after);
} else {
const afterId = newEvent?.after;
if (typeof afterId === 'undefined') {
await DataProvider.insertEventAt(newEvent, 0);
_insertEventInTimerAfterId(newEvent);
if (newEvent.type === 'event') {
_insertEventInTimerAfterId(newEvent);
}
} else {
delete newEvent.after;
await DataProvider.insertEventAfterId(newEvent, afterId);
if (newEvent.type === 'event') {
const events = DataProvider.getEvents();
const { id } = getPreviousPlayable(events, newEvent.id);
_insertEventInTimerAfterId(newEvent, id);
}
}
}
@@ -51,14 +54,10 @@ function _updateTimers() {
* @private
*/
function _insertEventInTimerAfterId(event, previousId) {
if (typeof previousId === 'undefined') {
global.timer.insertEventAtStart(event);
} else {
try {
global.timer.insertEventAfterId(event, previousId);
} catch (error) {
socket.error('SERVER', `Unable to update object: ${error}`);
}
try {
global.timer.insertEventAfterId(event, previousId);
} catch (error) {
socket.error('SERVER', `Unable to update object: ${error}`);
}
}
@@ -147,28 +146,29 @@ export const eventsPut = async (req, res) => {
const eventDataFromRequest = req.body;
const eventId = eventDataFromRequest.id;
const event = DataProvider.getEventById(eventId);
const eventInMemory = DataProvider.getEventById(eventId);
if (typeof event === 'undefined') {
if (typeof eventInMemory === 'undefined') {
res.status(400).send(`No event with ID found`);
return;
}
try {
const newData = await DataProvider.updateEventById(eventId, eventDataFromRequest);
const patchedObject = await DataProvider.updateEventById(eventId, eventDataFromRequest);
if (newData.skip) {
_deleteTimerId(eventId);
// if it is a skip, make sure it is deleted from timer
// event id might already not exist
} else {
try {
_updateTimersSingle(newData.id, eventDataFromRequest);
} catch (error) {
if (error === 'Event not found') {
if (patchedObject.type === 'event') {
if (patchedObject.skip) {
// if it is a skip, make sure it is deleted from timer
_deleteTimerId(patchedObject.id);
} else {
if (eventInMemory.skip) {
// if it was skipped before we add it to the timer
const events = DataProvider.getEvents();
const { id: previousId } = getPreviousPlayable(events, newData.id);
_insertEventInTimerAfterId(newData, previousId);
const { id } = getPreviousPlayable(events, patchedObject.id);
_insertEventInTimerAfterId(patchedObject, id);
} else {
// otherwise update as normal
_updateTimersSingle(patchedObject.id, patchedObject);
}
}
}
server/src/controllers/eventsController.validate.js
+9
View File
@@ -1,5 +1,14 @@
import { body, param, validationResult } from 'express-validator';
export const eventsPostValidator = [
body('type').isString().exists().isIn(['event', 'delay', 'block']),
(req, res, next) => {
const errors = validationResult(req);
if (!errors.isEmpty()) return res.status(422).json({ errors: errors.array() });
next();
},
];
export const eventsPutValidator = [
body('id').isString().exists(),
(req, res, next) => {
server/src/controllers/ontimeController.js
+1 -1
View File
@@ -56,7 +56,7 @@ const uploadAndParse = async (file, req, res, options) => {
} else {
await DataProvider.mergeIntoData(result.data);
}
global.timer.setupWithEventList(newEvents);
global.timer.setupWithEventList(newEvents.filter((entry) => entry.type === 'event'));
}
res.sendStatus(200);
} else {
server/src/routes/eventsRouter.js
+8 -7
View File
@@ -1,23 +1,24 @@
import express from 'express';
export const router = express.Router();
// import events controller
import {
eventsApplyDelay,
eventsDelete,
eventsDeleteAll,
eventsGetAll,
eventsGetById,
eventsPatch,
eventsPost,
eventsPut,
eventsPatch,
eventsReorder,
eventsApplyDelay,
eventsDeleteAll,
eventsDelete,
} from '../controllers/eventsController.js';
import {
eventsPostValidator,
eventsPutValidator,
paramsMustHaveEventId,
} from '../controllers/eventsController.validate.js';
export const router = express.Router();
// create route between controller and '/events/' endpoint
router.get('/', eventsGetAll);
@@ -25,7 +26,7 @@ router.get('/', eventsGetAll);
router.get('/:eventId', eventsGetById);
// create route between controller and '/events/' endpoint
router.post('/', eventsPost);
router.post('/', eventsPostValidator, eventsPost);
// create route between controller and '/events/' endpoint
router.put('/', eventsPutValidator, eventsPut);