mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-19 22:24:11 +00:00
Refactor: ms for api calls (#1593)
* use ms for api calls * change it in UI * update comment * rename variables * refactor: addtime api logic
This commit is contained in:
committed by
arc-alex
parent
5c47a834b5
commit
8e994fb0df
@@ -2,7 +2,7 @@ import { IoAdd, IoRemove } from 'react-icons/io5';
|
|||||||
import { Tooltip } from '@chakra-ui/react';
|
import { Tooltip } from '@chakra-ui/react';
|
||||||
import { useLocalStorage } from '@mantine/hooks';
|
import { useLocalStorage } from '@mantine/hooks';
|
||||||
import { Playback } from 'ontime-types';
|
import { Playback } from 'ontime-types';
|
||||||
import { MILLIS_PER_HOUR, MILLIS_PER_SECOND, parseUserTime } from 'ontime-utils';
|
import { MILLIS_PER_HOUR, parseUserTime } from 'ontime-utils';
|
||||||
|
|
||||||
import TimeInput from '../../../../common/components/input/time-input/TimeInput';
|
import TimeInput from '../../../../common/components/input/time-input/TimeInput';
|
||||||
import { setPlayback } from '../../../../common/hooks/useSocket';
|
import { setPlayback } from '../../../../common/hooks/useSocket';
|
||||||
@@ -17,29 +17,29 @@ interface AddTimeProps {
|
|||||||
|
|
||||||
export default function AddTime(props: AddTimeProps) {
|
export default function AddTime(props: AddTimeProps) {
|
||||||
const { playback } = props;
|
const { playback } = props;
|
||||||
const [time, setTime] = useLocalStorage({ key: 'add-time', defaultValue: 300_000 }); // 5 minutes
|
const [timeInMs, setTime] = useLocalStorage({ key: 'add-time', defaultValue: 300_000 }); // 5 minutes
|
||||||
|
|
||||||
const handleTimeChange = (_field: string, value: string) => {
|
const handleTimeChange = (_field: string, value: string) => {
|
||||||
const newTime = parseUserTime(value);
|
const newTimeInMs = parseUserTime(value);
|
||||||
// cap add time to 1 hour
|
// cap add time to 1 hour
|
||||||
setTime(Math.min(newTime, MILLIS_PER_HOUR));
|
setTime(Math.min(newTimeInMs, MILLIS_PER_HOUR));
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleAddTime = (direction: 'add' | 'remove') => {
|
const handleAddTime = (direction: 'add' | 'remove') => {
|
||||||
// API expects input in seconds
|
// API expects input in milliseconds
|
||||||
if (direction === 'add') {
|
if (direction === 'add') {
|
||||||
setPlayback.addTime(time / MILLIS_PER_SECOND);
|
setPlayback.addTime(timeInMs);
|
||||||
} else {
|
} else {
|
||||||
setPlayback.addTime((-1 * time) / MILLIS_PER_SECOND);
|
setPlayback.addTime(-1 * timeInMs);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const canAddTime = playback === Playback.Play || playback === Playback.Pause;
|
const canAddTime = playback === Playback.Play || playback === Playback.Pause;
|
||||||
const doDisableButtons = !canAddTime || time === 0;
|
const doDisableButtons = !canAddTime || timeInMs === 0;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={style.addTime}>
|
<div className={style.addTime}>
|
||||||
<TimeInput name='addtime' submitHandler={handleTimeChange} time={time} placeholder='Add time' />
|
<TimeInput name='addtime' submitHandler={handleTimeChange} time={timeInMs} placeholder='Add time' />
|
||||||
<div className={style.addButtons}>
|
<div className={style.addButtons}>
|
||||||
<Tooltip label='Remove time' openDelay={tooltipDelayMid} shouldWrapChildren>
|
<Tooltip label='Remove time' openDelay={tooltipDelayMid} shouldWrapChildren>
|
||||||
<TapButton onClick={() => handleAddTime('remove')} disabled={doDisableButtons} className={style.tallButtons}>
|
<TapButton onClick={() => handleAddTime('remove')} disabled={doDisableButtons} className={style.tallButtons}>
|
||||||
|
|||||||
@@ -59,15 +59,20 @@ export function AuxTimer() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function AuxTimerInput() {
|
function AuxTimerInput() {
|
||||||
const time = useAuxTimerTime();
|
const newTimeInMs = useAuxTimerTime();
|
||||||
const { setDuration } = setAuxTimer;
|
const { setDuration } = setAuxTimer;
|
||||||
|
|
||||||
const handleTimeUpdate = (_field: string, value: string) => {
|
const handleTimeUpdate = (_field: string, value: string) => {
|
||||||
const newTime = parseUserTime(value);
|
const newTimeInMs = parseUserTime(value);
|
||||||
setDuration(newTime / 1000); // frontend api is seconds based
|
setDuration(newTimeInMs);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TimeInput<'auxTimer'> submitHandler={handleTimeUpdate} name='auxTimer' time={time} placeholder='Aux Timer 1' />
|
<TimeInput<'auxTimer'>
|
||||||
|
submitHandler={handleTimeUpdate}
|
||||||
|
name='auxTimer'
|
||||||
|
time={newTimeInMs}
|
||||||
|
placeholder='Aux Timer 1'
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { MessageState, OffsetMode, OntimeEvent, SimpleDirection, SimplePlayback } from 'ontime-types';
|
import { MessageState, OffsetMode, OntimeEvent, SimpleDirection, SimplePlayback } from 'ontime-types';
|
||||||
import { MILLIS_PER_HOUR, MILLIS_PER_SECOND } from 'ontime-utils';
|
import { MILLIS_PER_HOUR } from 'ontime-utils';
|
||||||
|
|
||||||
import { DeepPartial } from 'ts-essentials';
|
import { DeepPartial } from 'ts-essentials';
|
||||||
|
|
||||||
@@ -187,27 +187,24 @@ const actionHandlers: Record<string, ActionHandler> = {
|
|||||||
throw new Error('No matching method provided');
|
throw new Error('No matching method provided');
|
||||||
},
|
},
|
||||||
addtime: (payload) => {
|
addtime: (payload) => {
|
||||||
let time = 0;
|
const time = (() => {
|
||||||
if (payload && typeof payload === 'object') {
|
if (payload && typeof payload === 'object') {
|
||||||
if ('add' in payload) {
|
if ('add' in payload) return numberOrError(payload.add);
|
||||||
time = numberOrError(payload.add);
|
if ('remove' in payload) return numberOrError(payload.remove) * -1;
|
||||||
} else if ('remove' in payload) {
|
|
||||||
time = numberOrError(payload.remove) * -1;
|
|
||||||
}
|
}
|
||||||
} else {
|
return numberOrError(payload);
|
||||||
time = numberOrError(payload);
|
})();
|
||||||
}
|
|
||||||
assert.isNumber(time);
|
assert.isNumber(time);
|
||||||
if (time === 0) {
|
if (time === 0) {
|
||||||
return { payload: 'success' };
|
return { payload: 'success' };
|
||||||
}
|
}
|
||||||
|
|
||||||
const timeToAdd = time * MILLIS_PER_SECOND; // frontend is seconds based
|
if (Math.abs(time) > MILLIS_PER_HOUR) {
|
||||||
if (Math.abs(timeToAdd) > MILLIS_PER_HOUR) {
|
|
||||||
throw new Error(`Payload too large: ${time}`);
|
throw new Error(`Payload too large: ${time}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
runtimeService.addTime(timeToAdd);
|
runtimeService.addTime(time);
|
||||||
return { payload: 'success' };
|
return { payload: 'success' };
|
||||||
},
|
},
|
||||||
/* Extra timers */
|
/* Extra timers */
|
||||||
@@ -233,13 +230,11 @@ const actionHandlers: Record<string, ActionHandler> = {
|
|||||||
} else if (command && typeof command === 'object') {
|
} else if (command && typeof command === 'object') {
|
||||||
const reply = { payload: {} };
|
const reply = { payload: {} };
|
||||||
if ('duration' in command) {
|
if ('duration' in command) {
|
||||||
// convert duration in seconds to ms
|
const timeInMs = numberOrError(command.duration);
|
||||||
const timeInMs = numberOrError(command.duration) * 1000;
|
|
||||||
reply.payload = auxTimerService.setTime(timeInMs);
|
reply.payload = auxTimerService.setTime(timeInMs);
|
||||||
}
|
}
|
||||||
if ('addtime' in command) {
|
if ('addtime' in command) {
|
||||||
// convert addTime in seconds to ms
|
const timeInMs = numberOrError(command.addtime);
|
||||||
const timeInMs = numberOrError(command.addtime) * 1000;
|
|
||||||
reply.payload = auxTimerService.addTime(timeInMs);
|
reply.payload = auxTimerService.addTime(timeInMs);
|
||||||
}
|
}
|
||||||
if ('direction' in command) {
|
if ('direction' in command) {
|
||||||
|
|||||||
Reference in New Issue
Block a user