mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-12 19:03:47 +00:00
Feat/62 logger (#79)
* feat/62-logger request log data in app * feat/62-logger refact osc integration * feat/62-logger feedback on osc * feat/62-logger refact broadcast on triggers * feat/62-logger log triggers * feat/62-logger add link to studio * feat/62-logger replace toasts with logger context * feat/62-logger style improvements * feat/62-logger refactor code duplications * feat/62-logger cleanup and version bump
This commit is contained in:
+3
-1
@@ -5,6 +5,8 @@
|
||||
],
|
||||
"plugins": ["react", "testing-library", "jest"],
|
||||
"rules": {
|
||||
"jest/no-mocks-import": "warn"
|
||||
"jest/no-mocks-import": "warn",
|
||||
"no-useless-concat": "warn",
|
||||
"prefer-template": "warn"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
$ontime-accent: #4bffabcc;
|
||||
$ontime-pink: #ff7597;
|
||||
$ontime-roll: #2b6cb0;
|
||||
|
||||
$notes-color: #d69e2e;
|
||||
|
||||
$header-gray: #ccc;
|
||||
$label-gray: #aaa;
|
||||
|
||||
@mixin container-bg {
|
||||
background-color: rgba(0, 0, 0, 0.13);
|
||||
border-radius: 2px;
|
||||
padding: 0 0.5em;
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
@@ -75,28 +75,26 @@ export const ontimeVars = [
|
||||
];
|
||||
|
||||
export const getInfo = async () => {
|
||||
const res = await axios.get(ontimeURL + '/info');
|
||||
const res = await axios.get(`${ontimeURL}/info`);
|
||||
return res.data;
|
||||
};
|
||||
|
||||
export const postInfo = async (data) => {
|
||||
const res = await axios.post(ontimeURL + '/info', data);
|
||||
return res;
|
||||
return await axios.post(`${ontimeURL}/info`, data);
|
||||
};
|
||||
|
||||
export const getOSC = async () => {
|
||||
const res = await axios.get(ontimeURL + '/osc');
|
||||
const res = await axios.get(`${ontimeURL}/osc`);
|
||||
return res.data;
|
||||
};
|
||||
|
||||
export const postOSC = async (data) => {
|
||||
const res = await axios.post(ontimeURL + '/osc', data);
|
||||
return res;
|
||||
return await axios.post(`${ontimeURL}/osc`, data);
|
||||
};
|
||||
|
||||
export const downloadEvents = async () => {
|
||||
await axios({
|
||||
url: ontimeURL + '/db',
|
||||
url: `${ontimeURL}/db`,
|
||||
method: 'GET',
|
||||
responseType: 'blob', // important
|
||||
}).then((response) => {
|
||||
@@ -123,15 +121,13 @@ export const uploadEvents = async (file) => {
|
||||
const formData = new FormData();
|
||||
formData.append('userFile', file); // appending file
|
||||
await axios
|
||||
.post(ontimeURL + '/db', formData, {
|
||||
.post(`${ontimeURL}/db`, formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
})
|
||||
.then((res) => console.log(res.data))
|
||||
.catch((err) => console.error(err));
|
||||
});
|
||||
};
|
||||
|
||||
export const uploadEventsWithPath = async (filepath) => {
|
||||
await axios.post(ontimeURL + '/dbpath', { path: filepath });
|
||||
await axios.post(`${ontimeURL}/dbpath`, { path: filepath });
|
||||
};
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
import { useSocket } from './socketContext';
|
||||
import { createContext, useCallback, useEffect, useState } from 'react';
|
||||
import { generateId } from 'ontime-server/utils/generate_id';
|
||||
import { nowInMillis, stringFromMillis } from 'ontime-server/utils/time';
|
||||
|
||||
export const LoggingContext = createContext({
|
||||
logData: [],
|
||||
emitInfo: () => undefined,
|
||||
emitWarning: () => undefined,
|
||||
emitError: () => undefined,
|
||||
clearLog: () => undefined
|
||||
});
|
||||
|
||||
export const LoggingProvider = (props) => {
|
||||
const MAX_MESSAGES = 100;
|
||||
const socket = useSocket();
|
||||
const [logData, setLogData] = useState([]);
|
||||
const origin = 'USER';
|
||||
|
||||
// handle incoming messages
|
||||
useEffect(() => {
|
||||
if (socket == null) return;
|
||||
|
||||
// Ask for log data
|
||||
socket.emit('get-logger');
|
||||
|
||||
socket.on('logger', (data) => {
|
||||
setLogData((l) => [data, ...l]);
|
||||
});
|
||||
|
||||
// Clear listener
|
||||
return () => {
|
||||
socket.off('logger');
|
||||
};
|
||||
}, [socket]);
|
||||
|
||||
/**
|
||||
* Utility function sends message over socket
|
||||
* @param text
|
||||
* @param level
|
||||
* @private
|
||||
*/
|
||||
const _send = useCallback((text, level) => {
|
||||
if (socket != null) {
|
||||
const m = {
|
||||
id: generateId(),
|
||||
origin,
|
||||
time: stringFromMillis(nowInMillis()),
|
||||
level,
|
||||
text
|
||||
}
|
||||
setLogData((l) => [m, ...l]);
|
||||
socket.emit('logger', m);
|
||||
}
|
||||
if (logData.length > MAX_MESSAGES) {
|
||||
setLogData((l) => l.pop());
|
||||
}
|
||||
},[logData, socket]);
|
||||
|
||||
/**
|
||||
* Sends a message with level INFO
|
||||
* @param text
|
||||
*/
|
||||
const emitInfo = useCallback((text) => {
|
||||
_send(text, 'INFO');
|
||||
}, [_send]);
|
||||
|
||||
/**
|
||||
* Sends a message with level WARN
|
||||
* @param text
|
||||
*/
|
||||
const emitWarning = useCallback((text) => {
|
||||
_send(text, 'WARN');
|
||||
}, [_send]);
|
||||
|
||||
/**
|
||||
* Sends a message with level ERROR
|
||||
* @param text
|
||||
*/
|
||||
const emitError = useCallback((text) => {
|
||||
_send(text, 'ERROR');
|
||||
}, [_send]);
|
||||
|
||||
/**
|
||||
* Clears running log
|
||||
*/
|
||||
const clearLog = useCallback(() => {
|
||||
setLogData([])
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<LoggingContext.Provider value = {{ emitInfo, logData, emitWarning, emitError, clearLog }}>
|
||||
{props.children}
|
||||
</LoggingContext.Provider>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import PropTypes from "prop-types";
|
||||
import style from "../../../features/info/Info.module.scss";
|
||||
import {Icon} from "@chakra-ui/react";
|
||||
import {FiChevronUp} from "react-icons/fi";
|
||||
|
||||
export default function CollapseBar(props) {
|
||||
const {title = 'Collapse bar', isCollapsed = false, onClick}= props;
|
||||
|
||||
return(
|
||||
<div className={style.header}>
|
||||
{title}
|
||||
<Icon
|
||||
className={isCollapsed ? style.moreCollapsed : style.moreExpanded}
|
||||
as={FiChevronUp}
|
||||
onClick={onClick}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
CollapseBar.propTypes = {
|
||||
title: PropTypes.string,
|
||||
isCollapsed: PropTypes.bool,
|
||||
onClick: PropTypes.func,
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
.header,
|
||||
.header__roll {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 0.9em;
|
||||
color: #ccc;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.header {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.header__roll {
|
||||
color: #2b6cb0;
|
||||
}
|
||||
@@ -1,6 +1,9 @@
|
||||
import React from 'react';
|
||||
import { LoggingContext } from '../../../app/context/LoggingContext';
|
||||
|
||||
class ErrorBoundary extends React.Component {
|
||||
static contextType = LoggingContext;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { error: null, errorInfo: null };
|
||||
@@ -17,15 +20,11 @@ class ErrorBoundary extends React.Component {
|
||||
errorInfo: info,
|
||||
});
|
||||
// TODO: Log the error to an error reporting service
|
||||
this.logErrorToServices(error.toString(), info.componentStack);
|
||||
this.context.emitError(error.toString());
|
||||
}
|
||||
|
||||
// A fake logging service.
|
||||
logErrorToServices = console.log;
|
||||
|
||||
render() {
|
||||
if (this.state.errorMessage) {
|
||||
// You can render any custom fallback UI
|
||||
return <p>:/</p>;
|
||||
}
|
||||
return this.props.children;
|
||||
|
||||
@@ -1,23 +1,26 @@
|
||||
import EditableTimer from 'common/input/EditableTimer';
|
||||
import { showWarningToast } from 'common/helpers/toastManager';
|
||||
import { useContext } from 'react';
|
||||
import { LoggingContext } from '../../../app/context/LoggingContext';
|
||||
|
||||
export default function EventTimes(props) {
|
||||
const { actionHandler, delay, timeStart, timeEnd } = props;
|
||||
const { emitWarning } = useContext(LoggingContext);
|
||||
|
||||
const handleValidate = (entry, v) => {
|
||||
// we dont inforce validation here
|
||||
// we dont enforce validation here
|
||||
|
||||
if (v == null || timeStart == null || timeEnd == null) return true;
|
||||
if (timeStart === 0) return true;
|
||||
|
||||
let validate = { value: true, catch: '' };
|
||||
if (entry === 'timeStart' && v > timeEnd)
|
||||
if (entry === 'timeStart' && v > timeEnd) {
|
||||
validate.catch = 'Start time later than end time';
|
||||
else if (entry === 'timeEnd' && v < timeStart)
|
||||
} else if (entry === 'timeEnd' && v < timeStart) {
|
||||
validate.catch = 'End time earlier than start time';
|
||||
}
|
||||
|
||||
if (validate.catch !== '')
|
||||
showWarningToast('Time Input Warning', validate.catch);
|
||||
emitWarning(`Time Input Warning: ${validate.catch}`);
|
||||
return validate.value;
|
||||
};
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import EditableTimer from 'common/input/EditableTimer';
|
||||
import { showWarningToast } from 'common/helpers/toastManager';
|
||||
import { stringFromMillis } from 'common/utils/dateConfig';
|
||||
import { stringFromMillis } from 'ontime-server/utils/time';
|
||||
import { useContext } from 'react';
|
||||
import { LoggingContext } from '../../../app/context/LoggingContext';
|
||||
|
||||
const label = {
|
||||
fontSize: '0.75em',
|
||||
@@ -83,6 +84,8 @@ const Times = (props) => {
|
||||
|
||||
export default function EventTimesVertical(props) {
|
||||
const { delay, timeStart, timeEnd, duration } = props;
|
||||
const { emitWarning } = useContext(LoggingContext);
|
||||
|
||||
const handleValidate = (entry, v) => {
|
||||
// we dont enforce validation here
|
||||
|
||||
@@ -90,32 +93,36 @@ export default function EventTimesVertical(props) {
|
||||
if (timeStart === 0) return true;
|
||||
|
||||
let validate = { value: true, catch: '' };
|
||||
if (entry === 'timeStart' && v > timeEnd)
|
||||
if (entry === 'timeStart' && v > timeEnd) {
|
||||
validate.catch = 'Start time later than end time';
|
||||
else if (entry === 'timeEnd' && v < timeStart)
|
||||
} else if (entry === 'timeEnd' && v < timeStart) {
|
||||
validate.catch = 'End time earlier than start time';
|
||||
}
|
||||
|
||||
if (validate.catch !== '')
|
||||
showWarningToast('Time Input Warning', validate.catch);
|
||||
if (validate.catch !== '') {
|
||||
emitWarning(`Time Input Warning: ${validate.catch}`);
|
||||
}
|
||||
return validate.value;
|
||||
};
|
||||
|
||||
return (delay != null) & (delay > 0) ? (
|
||||
<TimesDelayed
|
||||
handleValidate={handleValidate}
|
||||
actionHandler={props.actionHandler}
|
||||
delay={delay}
|
||||
timeStart={timeStart}
|
||||
timeEnd={timeEnd}
|
||||
duration={duration}
|
||||
/>
|
||||
) : (
|
||||
<Times
|
||||
handleValidate={handleValidate}
|
||||
actionHandler={props.actionHandler}
|
||||
timeStart={timeStart}
|
||||
timeEnd={timeEnd}
|
||||
duration={duration}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
(delay != null) && (delay > 0) ? (
|
||||
<TimesDelayed
|
||||
handleValidate={handleValidate}
|
||||
actionHandler={props.actionHandler}
|
||||
delay={delay}
|
||||
timeStart={timeStart}
|
||||
timeEnd={timeEnd}
|
||||
duration={duration}
|
||||
/>
|
||||
) : (
|
||||
<Times
|
||||
handleValidate={handleValidate}
|
||||
actionHandler={props.actionHandler}
|
||||
timeStart={timeStart}
|
||||
timeEnd={timeEnd}
|
||||
duration={duration}
|
||||
/>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { stringFromMillis } from 'common/utils/dateConfig';
|
||||
import { stringFromMillis } from 'ontime-server/utils/time';
|
||||
import style from './Paginator.module.css';
|
||||
export default function TodayItem(props) {
|
||||
const { selected, timeStart, timeEnd, title, backstageEvent } = props;
|
||||
@@ -19,7 +19,7 @@ export default function TodayItem(props) {
|
||||
}`}
|
||||
>{`${start} · ${end}`}</div>
|
||||
<div className={style.entryTitle}>{title}</div>
|
||||
{backstageEvent && <div className={style.backstageInd}></div>}
|
||||
{backstageEvent && <div className={style.backstageInd}/>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
import { createStandaloneToast } from '@chakra-ui/react';
|
||||
|
||||
const toast = createStandaloneToast();
|
||||
// const customToast = createStandaloneToast({ theme: yourCustomTheme })
|
||||
|
||||
// error toast
|
||||
export const showErrorToast = (title, description) => {
|
||||
toast({
|
||||
title: title,
|
||||
description: description,
|
||||
position: 'top-left',
|
||||
variant: 'subtle',
|
||||
status: 'error',
|
||||
isClosable: true,
|
||||
});
|
||||
};
|
||||
|
||||
// warning toast
|
||||
export const showWarningToast = (title, description) => {
|
||||
toast({
|
||||
title: title,
|
||||
description: description,
|
||||
position: 'top-left',
|
||||
variant: 'subtle',
|
||||
status: 'warning',
|
||||
isClosable: true,
|
||||
});
|
||||
};
|
||||
@@ -1,15 +1,16 @@
|
||||
import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useContext, useEffect, useState } from 'react';
|
||||
import {
|
||||
isTimeString,
|
||||
stringFromMillis,
|
||||
timeStringToMillis,
|
||||
} from '../utils/dateConfig';
|
||||
import { showErrorToast } from '../helpers/toastManager';
|
||||
import { stringFromMillis } from 'ontime-server/utils/time';
|
||||
import style from './EditableTimer.module.css';
|
||||
import { LoggingContext } from '../../app/context/LoggingContext';
|
||||
|
||||
export default function EditableTimer(props) {
|
||||
const { name, actionHandler, time, delay, validate } = props;
|
||||
const { emitError } = useContext(LoggingContext);
|
||||
const [value, setValue] = useState('');
|
||||
|
||||
// prepare time fields
|
||||
@@ -18,9 +19,9 @@ export default function EditableTimer(props) {
|
||||
try {
|
||||
setValue(stringFromMillis(time + delay));
|
||||
} catch (error) {
|
||||
showErrorToast('Error parsing date', error.text);
|
||||
emitError(`Unable to parse date: ${error.text}`);
|
||||
}
|
||||
}, [time, delay]);
|
||||
}, [time, delay, emitError]);
|
||||
|
||||
const validateValue = (value) => {
|
||||
const success = handleSubmit(value);
|
||||
|
||||
@@ -4,37 +4,7 @@ export const timeFormatSeconds = 'HH:mm:ss';
|
||||
const mts = 1000; // millis to seconds
|
||||
const mtm = 1000 * 60; // millis to minutes
|
||||
const mth = 1000 * 60 * 60; // millis to hours
|
||||
const mtd = 1000 * 60 * 60 * 24; // millis to days
|
||||
|
||||
/**
|
||||
* @description Converts milliseconds to string representing time
|
||||
* @param {number} ms - time in milliseconds
|
||||
* @param {boolean} showSeconds - wether to show the seconds
|
||||
* @param {string} delim - character between HH MM SS
|
||||
* @param {string} ifNull - what to return if value is null
|
||||
* @returns {string} String representing time 00:12:02
|
||||
*/
|
||||
|
||||
// This is shared and tested in backend in time.js
|
||||
export const stringFromMillis = (
|
||||
ms,
|
||||
showSeconds = true,
|
||||
delim = ':',
|
||||
ifNull = '...'
|
||||
) => {
|
||||
if (ms === null || isNaN(ms)) return ifNull;
|
||||
const isNegative = ms < 0 ? '-' : '';
|
||||
const showWith0 = (value) => (value < 10 ? `0${value}` : value);
|
||||
const hours = showWith0(Math.floor(((ms / mth) % 60) % 24));
|
||||
const minutes = showWith0(Math.floor((ms / mtm) % 60));
|
||||
const seconds = showWith0(Math.floor((ms / mts) % 60));
|
||||
|
||||
return showSeconds
|
||||
? `${isNegative}${
|
||||
parseInt(hours) ? `${hours}${delim}` : `00${delim}`
|
||||
}${minutes}${delim}${seconds}`
|
||||
: `${isNegative}${parseInt(hours) ? `${hours}` : '00'}${delim}${minutes}`;
|
||||
};
|
||||
|
||||
/**
|
||||
* another go at simpler string formatting (counters)
|
||||
@@ -79,7 +49,7 @@ export const millisToMinutes = (millis) => {
|
||||
};
|
||||
|
||||
/**
|
||||
* @description Converts timestring to milliseconds
|
||||
* @description Converts timestring to milliseconds
|
||||
* @param {string} string - time string "23:00:12"
|
||||
* @returns {number} Amount in milliseconds
|
||||
*/
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { stringFromMillis } from 'ontime-server/utils/time';
|
||||
|
||||
/**
|
||||
* @description From a list of events, returns only events of type event with calculated delays
|
||||
* @param {Object[]} events - given events
|
||||
* @returns {Object[]} Filtered events with calculated delays
|
||||
*/
|
||||
import {stringFromMillis} from "./dateConfig";
|
||||
|
||||
export const getEventsWithDelay = (events) => {
|
||||
|
||||
if (events == null) return [];
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import style from './PlaybackControl.module.scss';
|
||||
import Countdown from 'common/components/countdown/Countdown';
|
||||
import {stringFromMillis} from 'common/utils/dateConfig';
|
||||
import { stringFromMillis } from 'ontime-server/utils/time';
|
||||
import {Tooltip} from '@chakra-ui/react';
|
||||
import {Button} from '@chakra-ui/button';
|
||||
import {memo} from 'react';
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import { lazy, useEffect } from 'react';
|
||||
import { Box } from '@chakra-ui/layout';
|
||||
import { useDisclosure } from '@chakra-ui/hooks';
|
||||
import styles from './Editor.module.css';
|
||||
import styles from './Editor.module.scss';
|
||||
import MenuBar from 'features/menu/MenuBar';
|
||||
import ModalManager from 'features/modals/ModalManager';
|
||||
import ErrorBoundary from 'common/components/errorBoundary/ErrorBoundary';
|
||||
import { LoggingProvider } from '../../app/context/LoggingContext';
|
||||
|
||||
const EventListWrapper = lazy(() =>
|
||||
import('features/editors/list/EventListWrapper')
|
||||
@@ -22,7 +23,7 @@ export default function Editor() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<LoggingProvider>
|
||||
<ModalManager isOpen={isOpen} onClose={onClose} />
|
||||
|
||||
<div className={styles.mainContainer}>
|
||||
@@ -68,6 +69,6 @@ export default function Editor() {
|
||||
</div>
|
||||
</Box>
|
||||
</div>
|
||||
</>
|
||||
</LoggingProvider>
|
||||
);
|
||||
}
|
||||
|
||||
+13
-2
@@ -8,7 +8,7 @@
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: 40px 48em auto auto;
|
||||
grid-template-columns: 40px 48em 31em auto;
|
||||
grid-template-areas:
|
||||
'sett even play info'
|
||||
'sett even mess info';
|
||||
@@ -110,12 +110,23 @@ h1 {
|
||||
|
||||
.editor {
|
||||
grid-area: even;
|
||||
|
||||
.content {
|
||||
height: calc(100% - 3em);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
grid-area: info;
|
||||
min-width: 17em;
|
||||
max-width: 32em;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% - 3em);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.messages {
|
||||
@@ -1,4 +1,4 @@
|
||||
import style from './List.module.css';
|
||||
import style from './List.module.scss';
|
||||
import { createRef, useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { useSocket } from 'app/context/socketContext';
|
||||
import Empty from 'common/state/Empty';
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import DelayBlock from './DelayBlock';
|
||||
import BlockBlock from './BlockBlock';
|
||||
import EventBlock from './EventBlock';
|
||||
import { showErrorToast } from 'common/helpers/toastManager';
|
||||
import { memo } from 'react';
|
||||
import { memo, useContext } from 'react';
|
||||
import { LoggingContext } from '../../../app/context/LoggingContext';
|
||||
|
||||
const areEqual = (prevProps, nextProps) => {
|
||||
return (
|
||||
@@ -26,6 +26,7 @@ const EventListItem = (props) => {
|
||||
delay,
|
||||
...rest
|
||||
} = props;
|
||||
const { emitError } = useContext(LoggingContext);
|
||||
|
||||
// Create / delete new events
|
||||
const actionHandler = (action, payload) => {
|
||||
@@ -59,7 +60,7 @@ const EventListItem = (props) => {
|
||||
// request update in parent
|
||||
eventsHandler('patch', newData);
|
||||
} else {
|
||||
showErrorToast('Field Error: ' + field);
|
||||
emitError(`Unknown field: ${field}`);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useMutation, useQueryClient } from 'react-query';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { useCallback, useContext, useEffect, useState } from 'react';
|
||||
import {
|
||||
fetchAllEvents,
|
||||
requestPatch,
|
||||
@@ -12,16 +12,17 @@ import {
|
||||
} from 'app/api/eventsApi.js';
|
||||
import EventList from './EventList';
|
||||
import EventListMenu from 'features/menu/EventListMenu.jsx';
|
||||
import { showErrorToast } from 'common/helpers/toastManager';
|
||||
import { useFetch } from 'app/hooks/useFetch.js';
|
||||
import Empty from 'common/state/Empty';
|
||||
import { EVENTS_TABLE } from 'app/api/apiConstants';
|
||||
import { BatchOperation } from 'app/context/collapseAtom';
|
||||
import { useAtom } from 'jotai';
|
||||
import { LoggingContext } from '../../../app/context/LoggingContext';
|
||||
|
||||
export default function EventListWrapper() {
|
||||
const [, setCollapsed] = useAtom(BatchOperation);
|
||||
const queryClient = useQueryClient();
|
||||
const { emitError } = useContext(LoggingContext);
|
||||
const { data, status, isError, refetch } = useFetch(
|
||||
EVENTS_TABLE,
|
||||
fetchAllEvents
|
||||
@@ -230,9 +231,9 @@ export default function EventListWrapper() {
|
||||
// Show toasts on errors
|
||||
useEffect(() => {
|
||||
if (isError) {
|
||||
showErrorToast('Error fetching data');
|
||||
emitError('Error fetching data');
|
||||
}
|
||||
}, [isError]);
|
||||
}, [emitError, isError]);
|
||||
|
||||
// Events API
|
||||
const eventsHandler = useCallback(
|
||||
@@ -242,35 +243,35 @@ export default function EventListWrapper() {
|
||||
try {
|
||||
await addEvent.mutateAsync(payload);
|
||||
} catch (error) {
|
||||
showErrorToast('Error creating event', error.message);
|
||||
emitError(`Error fetching data: ${error.message}`);
|
||||
}
|
||||
break;
|
||||
case 'update':
|
||||
try {
|
||||
await updateEvent.mutateAsync(payload);
|
||||
} catch (error) {
|
||||
showErrorToast('Error updating event', error.message);
|
||||
emitError(`Error updating event: ${error.message}`);
|
||||
}
|
||||
break;
|
||||
case 'patch':
|
||||
try {
|
||||
await patchEvent.mutateAsync(payload);
|
||||
} catch (error) {
|
||||
showErrorToast('Error updating event', error.message);
|
||||
emitError(`Error updating event: ${error.message}`);
|
||||
}
|
||||
break;
|
||||
case 'delete':
|
||||
try {
|
||||
await deleteEvent.mutateAsync(payload);
|
||||
} catch (error) {
|
||||
showErrorToast('Error deleting event', error.message);
|
||||
emitError(`Error deleting event: ${error.message}`);
|
||||
}
|
||||
break;
|
||||
case 'reorder':
|
||||
try {
|
||||
await reorderEvent.mutateAsync(payload);
|
||||
} catch (error) {
|
||||
showErrorToast('Error reordering event', error.message);
|
||||
emitError(`Error re-ordering event: ${error.message}`);
|
||||
}
|
||||
break;
|
||||
case 'applyDelay':
|
||||
@@ -293,13 +294,13 @@ export default function EventListWrapper() {
|
||||
// delete block after, if any
|
||||
if (blockAfter) await deleteEvent.mutateAsync(blockAfter);
|
||||
} catch (error) {
|
||||
showErrorToast('Error applying delay', error.message);
|
||||
emitError(`Error applying delay: ${error.message}`);
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
await applyDelay.mutateAsync(payload.id);
|
||||
} catch (error) {
|
||||
showErrorToast('Error applying delay', error.message);
|
||||
emitError(`Error applying delay: ${error.message}`);
|
||||
}
|
||||
}
|
||||
break;
|
||||
@@ -317,11 +318,11 @@ export default function EventListWrapper() {
|
||||
try {
|
||||
await deleteAllEvents.mutateAsync();
|
||||
} catch (error) {
|
||||
showErrorToast('Error deleting events', error.message);
|
||||
emitError(`Error deleting events: ${error.message}`);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
showErrorToast('Unrecognised request', action);
|
||||
emitError(`Unhandled request: ${action}`);
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
+1
-1
@@ -7,7 +7,7 @@
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
overflow-y: scroll;
|
||||
height: 73vh;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.list {
|
||||
@@ -15,11 +15,10 @@ export default function Info() {
|
||||
titleNext: '',
|
||||
subtitleNext: '',
|
||||
presenterNext: '',
|
||||
noteNext: '',
|
||||
noteNext: ''
|
||||
});
|
||||
const [selected, setSelected] = useState('No events');
|
||||
const [playback, setPlayback] = useState(null);
|
||||
const logData = [];
|
||||
|
||||
// handle incoming messages
|
||||
useEffect(() => {
|
||||
@@ -61,20 +60,19 @@ export default function Info() {
|
||||
};
|
||||
}, [socket]);
|
||||
|
||||
// TODO: Put this in use effect
|
||||
// prepare data
|
||||
const titlesNow = {
|
||||
title: titles.titleNow,
|
||||
subtitle: titles.subtitleNow,
|
||||
presenter: titles.presenterNow,
|
||||
note: titles.noteNow,
|
||||
note: titles.noteNow
|
||||
};
|
||||
|
||||
const titlesNext = {
|
||||
title: titles.titleNext,
|
||||
subtitle: titles.subtitleNext,
|
||||
presenter: titles.presenterNext,
|
||||
note: titles.noteNext,
|
||||
note: titles.noteNext
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -83,10 +81,10 @@ export default function Info() {
|
||||
<span>{`Running on port 4001`}</span>
|
||||
<span>{selected}</span>
|
||||
</div>
|
||||
{/* <InfoLogger logData={logData} /> */}
|
||||
<InfoNif />
|
||||
<InfoTitle title={'Now'} data={titlesNow} roll={playback === 'roll'} />
|
||||
<InfoTitle title={'Next'} data={titlesNext} roll={playback === 'roll'} />
|
||||
<InfoLogger />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
.container {
|
||||
@use '../../main' as *;
|
||||
|
||||
@mixin container {
|
||||
margin-top: 1em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -8,9 +10,13 @@
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.container {
|
||||
@include container;
|
||||
}
|
||||
|
||||
.main {
|
||||
font-size: 0.9em;
|
||||
color: #ff7597;
|
||||
color: $ontime-pink;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@@ -20,17 +26,17 @@
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 0.9em;
|
||||
color: #ccc;
|
||||
color: $header-gray;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.header {
|
||||
color: #ccc;
|
||||
color: $header-gray;
|
||||
}
|
||||
|
||||
.headerRoll {
|
||||
color: #2b6cb0;
|
||||
color: $ontime-roll;
|
||||
}
|
||||
|
||||
.collapsedTitle {
|
||||
@@ -57,7 +63,7 @@
|
||||
|
||||
.label {
|
||||
font-size: 0.9em;
|
||||
color: #aaa;
|
||||
color: $label-gray;
|
||||
}
|
||||
|
||||
.label::after {
|
||||
@@ -70,43 +76,22 @@
|
||||
}
|
||||
|
||||
.notes {
|
||||
color: #d69e2e;
|
||||
color: $notes-color;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.if {
|
||||
font-size: 0.8em;
|
||||
color: #4bffabcc;
|
||||
background-color: rgba(0, 0, 0, 0.13);
|
||||
border-radius: 2px;
|
||||
padding: 0 0.5em;
|
||||
margin: 0 0.5em;
|
||||
color: $ontime-accent;
|
||||
@include container-bg;
|
||||
}
|
||||
|
||||
.log {
|
||||
overflow-y: scroll;
|
||||
height: 30vh;
|
||||
|
||||
ul > li {
|
||||
font-size: 0.9em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.info {
|
||||
ul > li {
|
||||
font-size: 0.9em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.client {
|
||||
color: lightblue;
|
||||
}
|
||||
|
||||
.moreExpanded,
|
||||
.moreCollapsed {
|
||||
cursor: pointer;
|
||||
|
||||
@@ -1,34 +1,117 @@
|
||||
import { Icon } from '@chakra-ui/react';
|
||||
import { useState } from 'react';
|
||||
import { FiChevronUp } from 'react-icons/fi';
|
||||
import style from './Info.module.scss';
|
||||
import { useContext, useEffect, useState } from 'react';
|
||||
import style from './InfoLogger.module.scss';
|
||||
import CollapseBar from "../../common/components/collapseBar/CollapseBar";
|
||||
import { LoggingContext } from '../../app/context/LoggingContext';
|
||||
|
||||
export default function InfoLogger(props) {
|
||||
export default function InfoLogger() {
|
||||
const { logData, clearLog } = useContext(LoggingContext);
|
||||
const [data, setData] = useState([]);
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
// Todo: save in local storage
|
||||
const [showClient, setShowClient] = useState(true);
|
||||
const [showServer, setShowServer] = useState(true);
|
||||
const [showRx, setShowRx] = useState(true);
|
||||
const [showTx, setShowTx] = useState(true);
|
||||
const [showPlayback, setShowPlayback] = useState(true);
|
||||
const [showUser, setShowUser] = useState(true);
|
||||
|
||||
const { logData } = props;
|
||||
useEffect(() => {
|
||||
const matchers = [];
|
||||
if (showUser) {
|
||||
matchers.push('USER');
|
||||
}
|
||||
if (showClient) {
|
||||
matchers.push('CLIENT');
|
||||
}
|
||||
if (showServer) {
|
||||
matchers.push('SERVER');
|
||||
}
|
||||
if (showRx) {
|
||||
matchers.push('RX');
|
||||
}
|
||||
if (showTx) {
|
||||
matchers.push('TX');
|
||||
}
|
||||
if (showPlayback) {
|
||||
matchers.push('PLAYBACK');
|
||||
}
|
||||
|
||||
const d = logData.filter((d) => (
|
||||
matchers.some((m) => d.origin === m)
|
||||
))
|
||||
|
||||
setData(d);
|
||||
},[logData, showUser, showClient, showServer, showPlayback, showRx, showTx])
|
||||
|
||||
const disableOthers = (toEnable) => {
|
||||
toEnable === 'USER' ? setShowUser(true) : setShowUser(false);
|
||||
toEnable === 'CLIENT' ? setShowClient(true) : setShowClient(false);
|
||||
toEnable === 'SERVER' ? setShowServer(true) : setShowServer(false);
|
||||
toEnable === 'RX' ? setShowRx(true) : setShowRx(false);
|
||||
toEnable === 'TX' ? setShowTx(true) : setShowTx(false);
|
||||
toEnable === 'PLAYBACK' ? setShowPlayback(true) : setShowPlayback(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={style.container}>
|
||||
<div className={style.header}>
|
||||
Log
|
||||
<Icon
|
||||
className={collapsed ? style.moreCollapsed : style.moreExpanded}
|
||||
as={FiChevronUp}
|
||||
onClick={() => setCollapsed((c) => !c)}
|
||||
/>
|
||||
</div>
|
||||
<div className={collapsed ? style.container : style.container__expanded}>
|
||||
<CollapseBar title={'Log'} isCollapsed={collapsed} onClick={() => setCollapsed((c) => !c)}/>
|
||||
{!collapsed && (
|
||||
<ul className={style.log}>
|
||||
<li className={style.info}>10:35:23 [PLAYBACK] Next</li>
|
||||
<li className={style.client}>
|
||||
10:32:10 [CLIENT] New socket client (total: 3)
|
||||
</li>
|
||||
<li className={style.info}>10:28:23 [PLAYBACK] Next</li>
|
||||
<li className={style.info}>10:25:23 [PLAYBACK] Play</li>
|
||||
<li className={style.info}>10:23:13 [SERVER] Server Reconnected</li>
|
||||
<li className={style.error}>10:23:10 [SERVER] Server Disconnected</li>
|
||||
</ul>
|
||||
<>
|
||||
<div className={style.toggleBar}>
|
||||
<div
|
||||
onClick={() => setShowUser((s) => !s)}
|
||||
onAuxClick={() => disableOthers('USER')}
|
||||
className={(showUser) ? style.active : null}>
|
||||
USER
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setShowClient((s) => !s)}
|
||||
onAuxClick={() => disableOthers('CLIENT')}
|
||||
className={(showClient) ? style.active : null}>
|
||||
CLIENT
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setShowServer((s) => !s)}
|
||||
onAuxClick={() => disableOthers('SERVER')}
|
||||
className={(showServer) ? style.active : null}>
|
||||
SERVER
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setShowPlayback((s) => !s)}
|
||||
onAuxClick={() => disableOthers('PLAYBACK')}
|
||||
className={(showPlayback) ? style.active : null}>
|
||||
Playback
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setShowRx((s) => !s)}
|
||||
onAuxClick={() => disableOthers('RX')}
|
||||
className={(showRx) ? style.active : null}>
|
||||
RX
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setShowTx((s) => !s)}
|
||||
onAuxClick={() => disableOthers('TX')}
|
||||
className={(showTx) ? style.active : null}>
|
||||
TX
|
||||
</div>
|
||||
<div
|
||||
onClick={clearLog}
|
||||
className={style.clear}>
|
||||
Clear
|
||||
</div>
|
||||
</div>
|
||||
<ul className={style.log}>
|
||||
{data.map((d) => (
|
||||
<li key={d.id} className={d.level === 'INFO' ? style.info : d.level === 'WARN' ? style.warn : d.level === 'ERROR' ? style.error : ''}>
|
||||
<div
|
||||
className={style.time}
|
||||
>{d.time}</div>
|
||||
<div className={style.origin}>{d.origin}</div>
|
||||
<div className={style.msg}>{d.text}</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
@use 'Info.module' as *;
|
||||
@use '../../main' as *;
|
||||
|
||||
.container,
|
||||
.container__expanded{
|
||||
@include container;
|
||||
max-height: 80%;
|
||||
}
|
||||
|
||||
.container__expanded {
|
||||
min-height: 50%;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.log {
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
font-size: 0.8em;
|
||||
user-select:text;
|
||||
@include container-bg;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
margin-bottom: 2px;
|
||||
|
||||
.time {
|
||||
width: 13%;
|
||||
}
|
||||
.origin {
|
||||
width: 18%;
|
||||
}
|
||||
.msg {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
li.info {
|
||||
color: #aaa;
|
||||
}
|
||||
li.warn {
|
||||
color: #dd6b20;
|
||||
}
|
||||
li.error {
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
.entry:hover {
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.info {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.client {
|
||||
color: lightblue;
|
||||
}
|
||||
|
||||
.toggleBar {
|
||||
display: flex;
|
||||
font-size: 0.7em;
|
||||
justify-content: flex-start;
|
||||
gap: 1em;
|
||||
padding: 0.5em 0;
|
||||
font-weight: 600;
|
||||
|
||||
div {
|
||||
padding: 2px 8px;
|
||||
background: #0002;
|
||||
border: 1px solid #fff1;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.active {
|
||||
background: $ontime-accent;
|
||||
color: darken($ontime-accent, 70%);
|
||||
}
|
||||
|
||||
.clear {
|
||||
border: 1px solid rgba($ontime-pink, 0.5);
|
||||
}
|
||||
}
|
||||
@@ -1,10 +1,9 @@
|
||||
import { Icon } from '@chakra-ui/react';
|
||||
import { useState } from 'react';
|
||||
import { FiChevronUp } from 'react-icons/fi';
|
||||
import { APP_TABLE } from 'app/api/apiConstants';
|
||||
import { getInfo, ontimePlaceholderInfo } from 'app/api/ontimeApi';
|
||||
import { useFetch } from 'app/hooks/useFetch';
|
||||
import style from './Info.module.scss';
|
||||
import CollapseBar from '../../common/components/collapseBar/CollapseBar';
|
||||
|
||||
export default function InfoNif() {
|
||||
const { data, status } = useFetch(APP_TABLE, getInfo, {
|
||||
@@ -22,16 +21,8 @@ export default function InfoNif() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={style.container}>
|
||||
<div className={style.header}>
|
||||
Network Info
|
||||
<Icon
|
||||
className={collapsed ? style.moreCollapsed : style.moreExpanded}
|
||||
as={FiChevronUp}
|
||||
onClick={() => setCollapsed((c) => !c)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={style.container}>
|
||||
<CollapseBar title={'Network Info'} isCollapsed={collapsed} onClick={() => setCollapsed((c) => !c)}/>
|
||||
{!collapsed && (
|
||||
<div>
|
||||
{status === 'success' && (
|
||||
|
||||
@@ -9,10 +9,12 @@ import QuitIconBtn from './buttons/QuitIconBtn';
|
||||
import style from './MenuBar.module.css';
|
||||
import HelpIconBtn from './buttons/HelpIconBtn';
|
||||
import UploadIconBtn from './buttons/UploadIconBtn';
|
||||
import { useRef } from 'react';
|
||||
import { useContext, useRef } from 'react';
|
||||
import { LoggingContext } from '../../app/context/LoggingContext';
|
||||
|
||||
export default function MenuBar(props) {
|
||||
const { onOpen } = props;
|
||||
const { emitError } = useContext(LoggingContext);
|
||||
const hiddenFileInput = useRef(null);
|
||||
const queryClient = useQueryClient();
|
||||
const uploaddb = useMutation(uploadEvents, {
|
||||
@@ -34,28 +36,24 @@ export default function MenuBar(props) {
|
||||
const handleUpload = (event) => {
|
||||
const fileUploaded = event.target.files[0];
|
||||
if (fileUploaded == null) return;
|
||||
console.log(fileUploaded);
|
||||
|
||||
// Limit file size to 1MB
|
||||
if (fileUploaded.size > 1000000) {
|
||||
console.log('Error: File size limit (1MB) exceeded');
|
||||
emitError('Error: File size limit (1MB) exceeded')
|
||||
return;
|
||||
}
|
||||
|
||||
// Check file extension
|
||||
if (fileUploaded.name.endsWith('.xlsx')) {
|
||||
console.log('excel file');
|
||||
} else if (fileUploaded.name.endsWith('.json')) {
|
||||
console.log('json file');
|
||||
} else {
|
||||
console.log('Error: File type unknown');
|
||||
if (! fileUploaded.name.endsWith('.xlsx')
|
||||
|| !fileUploaded.name.endsWith('.json')) {
|
||||
emitError('Error: File type unknown')
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
uploaddb.mutate(fileUploaded);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
emitError(`Failed uploading file: ${error}`)
|
||||
}
|
||||
|
||||
// reset input value
|
||||
|
||||
@@ -23,6 +23,7 @@ export default function AliasesModal() {
|
||||
const smLink = 'http://localhost:4001/sm';
|
||||
const publicLink = 'http://localhost:4001/public';
|
||||
const pipLink = 'http://localhost:4001/pip';
|
||||
const studioLink = 'http://localhost:4001/studio';
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -81,6 +82,17 @@ export default function AliasesModal() {
|
||||
{pipLink}
|
||||
</a>
|
||||
</p>
|
||||
<p className={style.flexNote}>
|
||||
Studio Clock<br />
|
||||
<a
|
||||
href={studioLink}
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
className={style.label}
|
||||
>
|
||||
{studioLink}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<span>Manage custom aliases</span>
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
import { ModalBody } from '@chakra-ui/modal';
|
||||
import { FormLabel, FormControl, Input, Button } from '@chakra-ui/react';
|
||||
import { getOSC, oscPlaceholderSettings, postOSC } from 'app/api/ontimeApi';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useContext, useEffect, useState } from 'react';
|
||||
import { useFetch } from 'app/hooks/useFetch';
|
||||
import { OSC_SETTINGS } from 'app/api/apiConstants';
|
||||
import { showErrorToast } from 'common/helpers/toastManager';
|
||||
import style from './Modals.module.scss';
|
||||
import { LoggingContext } from '../../app/context/LoggingContext';
|
||||
|
||||
export default function AppSettingsModal() {
|
||||
const { data, status } = useFetch(OSC_SETTINGS, getOSC);
|
||||
const { emitError } = useContext(LoggingContext);
|
||||
const [formData, setFormData] = useState(oscPlaceholderSettings);
|
||||
const [changed, setChanged] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
@@ -41,7 +42,7 @@ export default function AppSettingsModal() {
|
||||
|
||||
// set fields with error
|
||||
if (e.status) {
|
||||
showErrorToast('Invalid Input', e.message);
|
||||
emitError(`Invalid Input: ${e.message}`);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -12,14 +12,15 @@ import {
|
||||
ontimeVars,
|
||||
postInfo,
|
||||
} from 'app/api/ontimeApi';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useContext, useEffect, useState } from 'react';
|
||||
import { useFetch } from 'app/hooks/useFetch';
|
||||
import { APP_TABLE } from 'app/api/apiConstants';
|
||||
import { showErrorToast } from 'common/helpers/toastManager';
|
||||
import style from './Modals.module.scss';
|
||||
import { LoggingContext } from '../../app/context/LoggingContext';
|
||||
|
||||
export default function IntegrationSettingsModal() {
|
||||
const { data, status } = useFetch(APP_TABLE, getInfo);
|
||||
const { emitError } = useContext(LoggingContext);
|
||||
const [formData, setFormData] = useState(httpPlaceholder);
|
||||
const [changed, setChanged] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
@@ -51,7 +52,7 @@ export default function IntegrationSettingsModal() {
|
||||
|
||||
// set fields with error
|
||||
if (e.status) {
|
||||
showErrorToast('Invalid Input', e.message);
|
||||
emitError(`Invalid Input: ${e.message}`);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
|
||||
import { fetchAllEvents } from 'app/api/eventsApi';
|
||||
import { fetchEvent } from 'app/api/eventApi';
|
||||
import { useSocket } from 'app/context/socketContext';
|
||||
import { stringFromMillis } from 'common/utils/dateConfig';
|
||||
import { stringFromMillis } from 'ontime-server/utils/time';
|
||||
import { useFetch } from 'app/hooks/useFetch';
|
||||
import { EVENTS_TABLE, EVENT_TABLE } from 'app/api/apiConstants';
|
||||
|
||||
|
||||
+1
-1
@@ -119,7 +119,7 @@ app.whenReady().then(() => {
|
||||
createWindow();
|
||||
|
||||
// register global shortcuts
|
||||
// (available regardless of wheter app is in focus)
|
||||
// (available regardless of whether app is in focus)
|
||||
// bring focus to window
|
||||
globalShortcut.register('Alt+1', () => {
|
||||
win.show();
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "ontime",
|
||||
"version": "0.4.7",
|
||||
"version": "0.4.8",
|
||||
"author": "Carlos Valente",
|
||||
"description": "Time keeping for live events",
|
||||
"repository": "https://github.com/cpvalente/ontime",
|
||||
|
||||
+1
-1
@@ -153,7 +153,7 @@ export const startServer = async (overrideConfig = null) => {
|
||||
const port = 4001;
|
||||
|
||||
// Start server
|
||||
const returnMessage = `HTTP Server is listening on port ${port}`;
|
||||
const returnMessage = `Ontime is listening on port ${port}`;
|
||||
server.listen(port, '0.0.0.0', () => console.log(returnMessage));
|
||||
|
||||
// OSC Config
|
||||
|
||||
+326
-264
File diff suppressed because it is too large
Load Diff
+18
-30
@@ -7,22 +7,11 @@
|
||||
import { stringFromMillis } from '../utils/time.js';
|
||||
|
||||
export class Timer {
|
||||
clock = null;
|
||||
duration = null;
|
||||
current = null;
|
||||
timeTag = null;
|
||||
secondaryTimer = null;
|
||||
_secondaryTarget = null;
|
||||
_finishAt = null;
|
||||
_finishedAt = null;
|
||||
_finishedFlag = false;
|
||||
_startedAt = null;
|
||||
_pausedAt = null;
|
||||
_pausedInterval = null;
|
||||
_pausedTotal = null;
|
||||
state = 'stop';
|
||||
|
||||
constructor() {}
|
||||
constructor() {
|
||||
this.clock = null;
|
||||
this._resetTimers(true);
|
||||
this.state = 'stop';
|
||||
}
|
||||
|
||||
// call setup separately
|
||||
setupWithSeconds(seconds, autoStart = false) {
|
||||
@@ -74,11 +63,11 @@ export class Timer {
|
||||
if (this._startedAt != null) {
|
||||
// update current timer
|
||||
this.current =
|
||||
this._startedAt
|
||||
+ this.duration
|
||||
+ this._pausedTotal
|
||||
+ this._pausedInterval
|
||||
- now;
|
||||
this._startedAt +
|
||||
this.duration +
|
||||
this._pausedTotal +
|
||||
this._pausedInterval -
|
||||
now;
|
||||
}
|
||||
|
||||
// enable flag
|
||||
@@ -92,13 +81,14 @@ export class Timer {
|
||||
if (checkFinish) {
|
||||
// is event finished?
|
||||
const isTimeOver = this.current <= 0;
|
||||
const isUpdating = (this.state !== 'pause');
|
||||
const isUpdating = this.state !== 'pause';
|
||||
|
||||
if (isTimeOver && isUpdating && this._finishedAt == null) {
|
||||
if (this._finishedAt === null) this._finishedAt = now;
|
||||
this._finishedFlag = true;
|
||||
}
|
||||
}
|
||||
this.timeTag = stringFromMillis(this.current);
|
||||
}
|
||||
|
||||
// helpers
|
||||
@@ -136,6 +126,7 @@ export class Timer {
|
||||
_resetTimers(total = false) {
|
||||
if (total) this.duration = null;
|
||||
this.current = this.duration;
|
||||
this.timeTag = null;
|
||||
this.running = null;
|
||||
this.secondaryTimer = null;
|
||||
this._secondaryTarget = null;
|
||||
@@ -153,14 +144,11 @@ export class Timer {
|
||||
return this.duration - this.current;
|
||||
}
|
||||
|
||||
// get time object
|
||||
getTimes(update = true) {
|
||||
// update timer
|
||||
if (update) this.update();
|
||||
|
||||
// update timetag
|
||||
this.timeTag = stringFromMillis(this.current);
|
||||
|
||||
/**
|
||||
* Builds time object
|
||||
* @returns {{running: number, secondary: number, expectedFinish: number, durationSeconds: number, startedAt: null, clock: null}}
|
||||
*/
|
||||
getTimeObject() {
|
||||
return {
|
||||
clock: this.clock,
|
||||
running: Timer.toSeconds(this.current),
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
/**
|
||||
* Utility variable: 24 hour in milliseconds .
|
||||
* @type {number}
|
||||
@@ -11,7 +10,8 @@ export const DAY_TO_MS = 86400000;
|
||||
* @param {number} end - When does the event end
|
||||
* @returns {number} normalised time
|
||||
*/
|
||||
export const normaliseEndTime = (start, end) => (end < start ? end + DAY_TO_MS : end);
|
||||
export const normaliseEndTime = (start, end) =>
|
||||
end < start ? end + DAY_TO_MS : end;
|
||||
|
||||
/**
|
||||
* @description Sorts an array of objects by given property
|
||||
@@ -36,7 +36,6 @@ export const sortArrayByProperty = (arr, property) => {
|
||||
export const replacePlaceholder = (str, values) => {
|
||||
for (let [k, v] of Object.entries(values)) {
|
||||
str = str.replace(k, v);
|
||||
console.log(k, v);
|
||||
}
|
||||
return str;
|
||||
};
|
||||
@@ -72,7 +71,10 @@ export const getSelectionByRoll = (arr, now) => {
|
||||
|
||||
// exit early if we are past the events
|
||||
const lastEvent = orderedEvents[orderedEvents.length - 1];
|
||||
const lastNormalEnd = normaliseEndTime(lastEvent.timeStart, lastEvent.timeEnd);
|
||||
const lastNormalEnd = normaliseEndTime(
|
||||
lastEvent.timeStart,
|
||||
lastEvent.timeEnd
|
||||
);
|
||||
if (now > lastNormalEnd) {
|
||||
return {
|
||||
nowIndex,
|
||||
@@ -128,7 +130,7 @@ export const getSelectionByRoll = (arr, now) => {
|
||||
// check how far the start is from now
|
||||
const wait = e.timeStart - now;
|
||||
|
||||
if (nextIndex === null || wait < timeToNext) {
|
||||
if (nextIndex == null || wait < timeToNext) {
|
||||
timeToNext = wait;
|
||||
nextIndex = arr.findIndex((a) => a.id === e.id);
|
||||
}
|
||||
@@ -161,8 +163,14 @@ export const getSelectionByRoll = (arr, now) => {
|
||||
* @returns {object} object with selection variables
|
||||
*/
|
||||
export const updateRoll = (currentTimers) => {
|
||||
|
||||
const {selectedEventId,current,_finishAt,clock,secondaryTimer,_secondaryTarget} = currentTimers;
|
||||
const {
|
||||
selectedEventId,
|
||||
current,
|
||||
_finishAt,
|
||||
clock,
|
||||
secondaryTimer,
|
||||
_secondaryTarget,
|
||||
} = currentTimers;
|
||||
|
||||
// timers
|
||||
let updatedTimer = current;
|
||||
@@ -181,8 +189,6 @@ export const updateRoll = (currentTimers) => {
|
||||
if (updatedTimer < 0) {
|
||||
isFinished = true;
|
||||
}
|
||||
console.log(updatedTimer, isFinished, _finishAt)
|
||||
|
||||
} else if (secondaryTimer >= 0) {
|
||||
// if secondaryTimer is running we are in waiting to roll
|
||||
|
||||
@@ -202,6 +208,5 @@ export const updateRoll = (currentTimers) => {
|
||||
doRollLoad = true;
|
||||
}
|
||||
|
||||
return {updatedTimer, updatedSecondaryTimer, doRollLoad, isFinished};
|
||||
}
|
||||
|
||||
return { updatedTimer, updatedSecondaryTimer, doRollLoad, isFinished };
|
||||
};
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
/** Class contains logic towards outgoing OSC communications. */
|
||||
import {Client, Message} from 'node-osc';
|
||||
import { Client, Message } from 'node-osc';
|
||||
|
||||
export class OSCIntegration {
|
||||
|
||||
ADDRESS = '/ontime';
|
||||
|
||||
constructor() {
|
||||
// OSC Client
|
||||
this.ADDRESS = '/ontime';
|
||||
this.oscClient = null;
|
||||
}
|
||||
|
||||
@@ -26,8 +24,8 @@ export class OSCIntegration {
|
||||
time: 'time',
|
||||
overtime: 'overtime',
|
||||
title: 'title',
|
||||
presenter:'presenter',
|
||||
}
|
||||
presenter: 'presenter',
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -37,13 +35,19 @@ export class OSCIntegration {
|
||||
* @param {number} oscConfig.port - OSC Destination Port
|
||||
*/
|
||||
init(oscConfig) {
|
||||
const {ip, port} = oscConfig;
|
||||
const { ip, port } = oscConfig;
|
||||
try {
|
||||
this.oscClient = new Client(ip, port);
|
||||
console.log(`Initialised OSC Client at ${ip}:${port}`);
|
||||
return {
|
||||
success: true,
|
||||
message: `Initialised OSC Client at ${ip}:${port}`,
|
||||
};
|
||||
} catch (error) {
|
||||
this.oscClient = null;
|
||||
console.log(`Failed initialising OSC Client: ${error}`);
|
||||
return {
|
||||
success: true,
|
||||
message: `Failed initialising OSC Client: ${error}`,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -53,14 +57,21 @@ export class OSCIntegration {
|
||||
* @param {string} [payload] - optional payload required in some message types
|
||||
*/
|
||||
async send(messageType, payload) {
|
||||
const reply = {
|
||||
success: true,
|
||||
message: 'OSC Message sent',
|
||||
};
|
||||
|
||||
if (this.oscClient == null) {
|
||||
console.log('OSC ERROR: Client not initialised');
|
||||
return;
|
||||
reply.success = false;
|
||||
reply.message = 'Client not initialised';
|
||||
return reply;
|
||||
}
|
||||
|
||||
if (messageType == null) {
|
||||
console.log('OSC ERROR: Message undefined');
|
||||
return;
|
||||
reply.success = false;
|
||||
reply.message = 'Message undefined';
|
||||
return reply;
|
||||
}
|
||||
|
||||
// only specify special cases
|
||||
@@ -68,35 +79,58 @@ export class OSCIntegration {
|
||||
case 'overtime':
|
||||
// Whether timer is negative
|
||||
this.oscClient.send(`${this.ADDRESS}/overtime`, payload, (err) => {
|
||||
if (err) console.error(err);
|
||||
if (err) {
|
||||
reply.success = false;
|
||||
reply.message = err;
|
||||
}
|
||||
});
|
||||
break;
|
||||
|
||||
case 'title':
|
||||
if (payload != null && payload !== "") {
|
||||
if (payload != null && payload !== '') {
|
||||
// Send Title of current event
|
||||
this.oscClient.send(`${this.ADDRESS}/title`, payload, (err) => {
|
||||
if (err) console.error(err);
|
||||
if (err) {
|
||||
reply.success = false;
|
||||
reply.message = err;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
reply.success = false;
|
||||
reply.message = 'Missing message data';
|
||||
}
|
||||
break;
|
||||
|
||||
case 'presenter':
|
||||
if (payload != null && payload !== "") {
|
||||
if (payload != null && payload !== '') {
|
||||
// Send presenter data on current event
|
||||
this.oscClient.send(`${this.ADDRESS}/presenter`, payload, (err) => {
|
||||
if (err) console.error(err);
|
||||
if (err) {
|
||||
reply.success = false;
|
||||
reply.message = err;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
reply.success = false;
|
||||
reply.message = 'Missing message data';
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
// catch all for messages, allows to add new messages
|
||||
// but should be used with the integrations definition
|
||||
const message = new Message(`${this.ADDRESS}/${messageType}`)
|
||||
if (payload != null) message.append(payload)
|
||||
// eslint-disable-next-line no-case-declarations
|
||||
const message = new Message(`${this.ADDRESS}/${messageType}`);
|
||||
if (payload != null) message.append(payload);
|
||||
this.oscClient.send(message, (err) => {
|
||||
if (err) console.error(err);
|
||||
if (err) {
|
||||
reply.success = false;
|
||||
reply.message = err;
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
return reply;
|
||||
}
|
||||
|
||||
shutdown() {
|
||||
@@ -104,4 +138,4 @@ export class OSCIntegration {
|
||||
this.oscClient.close();
|
||||
this.oscClient = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,9 +7,7 @@ export const shutdownOSCServer = () => {
|
||||
};
|
||||
|
||||
export const initiateOSC = (config) => {
|
||||
oscServer = new Server(config.port, '0.0.0.0', () => {
|
||||
console.log(`OSC Server is listening on port ${config.port}`);
|
||||
});
|
||||
oscServer = new Server(config.port, '0.0.0.0');
|
||||
|
||||
// error
|
||||
oscServer.on('error', console.error);
|
||||
@@ -19,7 +17,6 @@ export const initiateOSC = (config) => {
|
||||
// ontime: fixed message for app
|
||||
// path: command to be called
|
||||
// args: extra data, only used on some of the API entries (delay, goto)
|
||||
console.log('OSC received', msg);
|
||||
|
||||
// split message
|
||||
const [, address, path] = msg[0].split('/');
|
||||
@@ -46,40 +43,35 @@ export const initiateOSC = (config) => {
|
||||
break;
|
||||
case 'start':
|
||||
case 'play':
|
||||
console.log('calling play');
|
||||
global.timer.trigger('start');
|
||||
break;
|
||||
case 'pause':
|
||||
console.log('calling pause');
|
||||
global.timer.trigger('pause');
|
||||
break;
|
||||
case 'prev':
|
||||
console.log('calling prev');
|
||||
global.timer.trigger('previous');
|
||||
break;
|
||||
case 'next':
|
||||
console.log('calling next');
|
||||
global.timer.trigger('next');
|
||||
break;
|
||||
case 'unload':
|
||||
case 'stop':
|
||||
console.log('calling unload');
|
||||
global.timer.trigger('unload');
|
||||
break;
|
||||
case 'reload':
|
||||
console.log('calling reload');
|
||||
global.timer.trigger('reload');
|
||||
break;
|
||||
case 'roll':
|
||||
console.log('calling roll');
|
||||
global.timer.trigger('roll');
|
||||
break;
|
||||
case 'delay':
|
||||
console.log('calling delay with', args);
|
||||
try {
|
||||
const t = parseInt(args);
|
||||
if (isNaN(t)) {
|
||||
console.error(`OSC IN: delay time not recognised ${args}`);
|
||||
global.timer.error(
|
||||
'RX',
|
||||
`OSC IN: delay time not recognised ${args}`
|
||||
);
|
||||
return;
|
||||
}
|
||||
global.timer.increment(t * 1000 * 60);
|
||||
@@ -88,36 +80,37 @@ export const initiateOSC = (config) => {
|
||||
}
|
||||
break;
|
||||
case 'goto':
|
||||
console.log('calling goto with', args);
|
||||
try {
|
||||
const eventIndex = parseInt(args);
|
||||
if (isNaN(eventIndex) || eventIndex <= 0 || eventIndex == null) {
|
||||
console.error(
|
||||
global.timer.error(
|
||||
'RX',
|
||||
`OSC IN: event index not recognised or out of range ${eventIndex}`
|
||||
);
|
||||
}
|
||||
global.timer.loadEventByIndex(eventIndex - 1);
|
||||
} catch (error) {
|
||||
console.log('error calling goto: ', error);
|
||||
global.timer.error('RX', `OSC IN: error calling goto ${error}`);
|
||||
}
|
||||
break;
|
||||
case 'gotoid':
|
||||
console.log('calling gotoid with', args);
|
||||
if (args == null) {
|
||||
console.error(
|
||||
`OSC IN: event id not recognised or out of range ${args}`
|
||||
global.timer.error(
|
||||
'RX',
|
||||
`OSC IN: event id not recognised or out of range ${args}}`
|
||||
);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
global.timer.loadEventById(args.toString().toLowerCase());
|
||||
} catch (error) {
|
||||
console.log('error calling goto: ', error);
|
||||
global.timer.error('RX', `OSC IN: error calling goto ${error}`);
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
console.log(`Error: unhandled message ${path}`);
|
||||
global.timer.warning('RX', `OSC IN: unhandled message ${path}`);
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
@@ -21,6 +21,5 @@ export const postEvent = async (req, res) => {
|
||||
res.sendStatus(200);
|
||||
} catch (error) {
|
||||
res.status(400).send(error);
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -130,7 +130,6 @@ export const postInfo = async (req, res) => {
|
||||
res.sendStatus(200);
|
||||
} catch (error) {
|
||||
res.status(400).send(error);
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -7,69 +7,59 @@ export const pbGet = async (req, res) => {
|
||||
// Create controller for GET request to '/playback/onAir'
|
||||
// Turns onAir flag to true
|
||||
export const onAir = async (req, res) => {
|
||||
console.log('Setting onAir to true');
|
||||
global.timer.trigger('onAir') ? res.sendStatus(200) : res.sendStatus(400);
|
||||
};
|
||||
|
||||
// Create controller for GET request to '/playback/onAir'
|
||||
// Turns onAir flag to true
|
||||
export const offAir = async (req, res) => {
|
||||
console.log('Setting onAir to false');
|
||||
global.timer.trigger('offAir') ? res.sendStatus(200) : res.sendStatus(400);
|
||||
};
|
||||
|
||||
// Create controller for GET request to '/playback/start'
|
||||
// Starts timer object
|
||||
export const pbStart = async (req, res) => {
|
||||
console.log('Calling start');
|
||||
global.timer.trigger('start') ? res.sendStatus(200) : res.sendStatus(400);
|
||||
};
|
||||
|
||||
// Create controller for GET request to '/playback/pause'
|
||||
// Pauses timer object
|
||||
export const pbPause = async (req, res) => {
|
||||
console.log('Calling pause');
|
||||
global.timer.trigger('pause') ? res.sendStatus(200) : res.sendStatus(400);
|
||||
};
|
||||
|
||||
// Create controller for GET request to '/playback/stop'
|
||||
// Stops timer object
|
||||
export const pbStop = async (req, res) => {
|
||||
console.log('Calling stop');
|
||||
global.timer.trigger('stop') ? res.sendStatus(200) : res.sendStatus(400);
|
||||
};
|
||||
|
||||
// Create controller for GET request to '/playback/roll'
|
||||
// Sets timer object to roll mode
|
||||
export const pbRoll = async (req, res) => {
|
||||
console.log('Calling roll');
|
||||
global.timer.trigger('roll') ? res.sendStatus(200) : res.sendStatus(400);
|
||||
};
|
||||
|
||||
// Create controller for GET request to '/playback/previous'
|
||||
// Sets timer object to roll mode
|
||||
export const pbPrevious = async (req, res) => {
|
||||
console.log('Calling previous');
|
||||
global.timer.trigger('previous') ? res.sendStatus(200) : res.sendStatus(400);
|
||||
};
|
||||
|
||||
// Create controller for GET request to '/playback/next'
|
||||
// Sets timer object to roll mode
|
||||
export const pbNext = async (req, res) => {
|
||||
console.log('Calling next');
|
||||
global.timer.trigger('next') ? res.sendStatus(200) : res.sendStatus(400);
|
||||
};
|
||||
|
||||
// Create controller for GET request to '/playback/unload'
|
||||
// Unloads any events
|
||||
export const pbUnload = async (req, res) => {
|
||||
console.log('Calling unload');
|
||||
global.timer.trigger('unload') ? res.sendStatus(200) : res.sendStatus(400);
|
||||
};
|
||||
|
||||
// Create controller for GET request to '/playback/reload'
|
||||
// Reloads current event
|
||||
export const pbReload = async (req, res) => {
|
||||
console.log('Calling reload');
|
||||
global.timer.trigger('reload') ? res.sendStatus(200) : res.sendStatus(400);
|
||||
};
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
{
|
||||
"name": "ontime-server",
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"body-parser": "~1.19.0",
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
import getRandomName from '../getRandomName.js';
|
||||
|
||||
test('generates 500 unique names', () => {
|
||||
let names = [];
|
||||
for (let i = 0; i < 500; i++) {
|
||||
names.push(getRandomName());
|
||||
}
|
||||
|
||||
const unique = [...new Set(names)];
|
||||
expect(names.length).toBe(unique.length);
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
@@ -2,10 +2,26 @@ const mts = 1000; // millis to seconds
|
||||
const mtm = 1000 * 60; // millis to minutes
|
||||
const mth = 1000 * 60 * 60; // millis to hours
|
||||
|
||||
/**
|
||||
* Returns current time in milliseconds
|
||||
* @returns {number}
|
||||
*/
|
||||
export const nowInMillis = () => {
|
||||
const now = new Date();
|
||||
|
||||
// extract milliseconds since midnight
|
||||
let elapsed = now.getHours() * 3600000;
|
||||
elapsed += now.getMinutes() * 60000;
|
||||
elapsed += now.getSeconds() * 1000;
|
||||
elapsed += now.getMilliseconds();
|
||||
|
||||
return elapsed;
|
||||
};
|
||||
|
||||
/**
|
||||
* @description Converts milliseconds to string representing time
|
||||
* @param {number} ms - time in milliseconds
|
||||
* @param {boolean} showSeconds - wether to show the seconds
|
||||
* @param {boolean} showSeconds - weather to show the seconds
|
||||
* @param {string} delim - character between HH MM SS
|
||||
* @param {string} ifNull - what to return if value is null
|
||||
* @returns {string} String representing time 00:12:02
|
||||
@@ -17,7 +33,7 @@ export const stringFromMillis = (
|
||||
delim = ':',
|
||||
ifNull = '...'
|
||||
) => {
|
||||
if (ms === null || isNaN(ms)) return ifNull;
|
||||
if (ms == null || isNaN(ms)) return ifNull;
|
||||
const isNegative = ms < 0 ? '-' : '';
|
||||
const millis = Math.abs(ms);
|
||||
|
||||
@@ -36,7 +52,7 @@ export const stringFromMillis = (
|
||||
/**
|
||||
* @description Converts an excel date to milliseconds
|
||||
* @argument {string} excelDate - excel string date
|
||||
* @returns {number} - time in millisenconds
|
||||
* @returns {number} - time in milliseconds
|
||||
*/
|
||||
export const excelDateStringToMillis = (excelDate) => {
|
||||
const date = new Date(excelDate);
|
||||
@@ -47,5 +63,5 @@ export const excelDateStringToMillis = (excelDate) => {
|
||||
|
||||
return h * mth + m * mtm + s * mts;
|
||||
}
|
||||
return null;
|
||||
return 0;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user