mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-16 21:03:29 +00:00
V3 (#657)
* refactor: cleanup routes * style: smaller base font * chore: upgrade dependencies * chore: lock node version to electron * refactor: pass HTTP to integration controller (#652) * refactor: deprecate onair control * refactor: remove playback router * Several project files user folder (#617) * chore: automated screenshots (#667) * feat: app settings (#658) * refactor: remove deprecated event data (#674) * Studio clock (#663) --------- Co-authored-by: Carlos Valente <carlosvalente@pm.me> * Feat: reorder events with alt+ctrl + arrow up/down (#645) * Warning and danger per event (#677) --------- Co-authored-by: Fabian Posenau <fabian@fphome.de> * refactor: stabilise actionHandler (#683) Co-authored-by: Fabian Posenau <fabian@fphome.de> * improvement: hide seconds (#675) * wip: overview (#688) * fix: focus cursor (#695) * refactor: update lower third (#665) * Refactor/time formatting (#696) --------- Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com> Co-authored-by: Carlos Valente <carlosvalente@pm.me> * feat: multiple selection (#703) --------- Co-authored-by: asharonbaltazar <asharonbaltazar@outlook.com> Co-authored-by: Alex <ac@omnivox.dk> * fix: test - go to `Edit mode` befor tying to click `Event options` button (#708) * refactor: runtime service (#715) * fix: issue with loosing cursor position on message (#719) * remove info panel (#721) * Event editor continue (#722) * update API - part (#709) --------- Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com> Co-authored-by: Carlos Valente <carlosvalente@pm.me> * refactor: update timers (#729) * feat: many timers (#706) --------- Co-authored-by: arc-alex <ac@omnivox.dk> * refactor: excel cleanup (#734) * refactor: allow import of blocks and skip import (#735) * Project manager (#697) * refactor: UI for linking events (#763) * upgraded pipeline actions (#777) * Over under (#771) * custom fields (#744) --------- Co-authored-by: Carlos Valente <carlosvalente@pm.me> * Sheets settings (#774) --------- Co-authored-by: arc-alex <ac@omnivox.dk> * style: tweaks to lower thirds (#785) * refactor: delays account for gaps (#784) * refactor: partial state updates (#780) * feat: generate crash report (#787) * Sheet use limited input device auth flow (#782) --------- Co-authored-by: cv <34649812+cpvalente@users.noreply.github.com> Co-authored-by: Carlos Valente <carlosvalente@pm.me> * Custom fields views (#789) * refactor: deprecate presenter and subtitle (#795) * refactor: organise API around resources (#798) --------- Co-authored-by: Bianca Procopio <biancahprocopio@gmail.com> * Time to end (#804) * Skip fixes (#805) * fix: onair derives from playback * Param nav (#822) --------- Co-authored-by: Alex Christoffer Rasmussen <ac@omnivox.dk> * refactor: download files from interface (#831) * Quick options (#814) * End pause (#832) * chore: bump node version in docker (#834) * refactor: follow in run mode (#840) * fix: uncaught error in http integration (#837) * Apply project (#843) Co-authored-by: Matteo Gheza <matteo.gheza07@gmail.com> Co-authored-by: Ary <arylmoraesn@gmail.com> Co-authored-by: Alex Christoffer Rasmussen <ac@omnivox.dk> Co-authored-by: Fabian Posenau <19673098+kellhogs@users.noreply.github.com> Co-authored-by: Fabian Posenau <fabian@fphome.de> Co-authored-by: Alex Rohleder <alexrohleder96@gmail.com> Co-authored-by: asharonbaltazar <asharonbaltazar@outlook.com> Co-authored-by: Bianca Procopio <biancahprocopio@gmail.com> Co-authored-by: Fabian Posenau <fabianpos99+github@gmail.com>
This commit is contained in:
Carlos Valente
GitHub
@@ -1,15 +1,6 @@
|
||||
@use '../../theme/ontimeColours' as *;
|
||||
@use '../../theme/v2Styles' as *;
|
||||
|
||||
$table-font-size: calc(1rem - 2px);
|
||||
$table-header-font-size: calc(1rem - 3px);
|
||||
|
||||
@mixin ellipsis-overflow() {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.cuesheetContainer {
|
||||
grid-area: table;
|
||||
display: flex;
|
||||
@@ -28,7 +19,8 @@ $table-header-font-size: calc(1rem - 3px);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
th, td {
|
||||
th,
|
||||
td {
|
||||
margin: 1px;
|
||||
font-weight: inherit;
|
||||
font-size: inherit;
|
||||
@@ -105,6 +97,9 @@ $table-header-font-size: calc(1rem - 3px);
|
||||
position: sticky;
|
||||
left: 47.5%; // center of the screen, ish
|
||||
padding: 0.5rem 0;
|
||||
&:first-letter {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,24 +1,14 @@
|
||||
@use '../../theme/v2Styles' as *;
|
||||
@use '../../theme/ontimeColours' as *;
|
||||
|
||||
.tableWrapper {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
padding: 1rem;
|
||||
padding: 1rem 0.5rem;
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
grid-template-rows: 3rem auto 1fr;
|
||||
grid-template-areas:
|
||||
'header'
|
||||
'overview'
|
||||
'settings'
|
||||
'table';
|
||||
gap: 1rem;
|
||||
|
||||
background-color: $gray-1300;
|
||||
color: white;
|
||||
|
||||
& > * {
|
||||
border: 1px solid $white-10;
|
||||
border-radius: 3px;
|
||||
}
|
||||
color: $ui-white;
|
||||
}
|
||||
|
||||
@@ -1,38 +1,45 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { OntimeRundownEntry, ProjectData } from 'ontime-types';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import { IconButton, useDisclosure } from '@chakra-ui/react';
|
||||
import { IoApps } from '@react-icons/all-files/io5/IoApps';
|
||||
import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';
|
||||
import { CustomFieldLabel, isOntimeEvent } from 'ontime-types';
|
||||
|
||||
import ProductionNavigationMenu from '../../common/components/navigation-menu/ProductionNavigationMenu';
|
||||
import Empty from '../../common/components/state/Empty';
|
||||
import { useEventAction } from '../../common/hooks/useEventAction';
|
||||
import { useCuesheet } from '../../common/hooks/useSocket';
|
||||
import useRundown from '../../common/hooks-query/useRundown';
|
||||
import useUserFields from '../../common/hooks-query/useUserFields';
|
||||
import ExportModal, { ExportType } from '../modals/export-modal/ExportModal';
|
||||
import { useWindowTitle } from '../../common/hooks/useWindowTitle';
|
||||
import useCustomFields from '../../common/hooks-query/useCustomFields';
|
||||
import { useFlatRundown } from '../../common/hooks-query/useRundown';
|
||||
import { CuesheetOverview } from '../overview/Overview';
|
||||
|
||||
import CuesheetProgress from './cuesheet-progress/CuesheetProgress';
|
||||
import CuesheetTableHeader from './cuesheet-table-header/CuesheetTableHeader';
|
||||
import { useCuesheetSettings } from './store/CuesheetSettings';
|
||||
import Cuesheet from './Cuesheet';
|
||||
import { makeCuesheetColumns } from './cuesheetCols';
|
||||
import { makeCSV, makeTable } from './cuesheetUtils';
|
||||
|
||||
import styles from './CuesheetWrapper.module.scss';
|
||||
|
||||
export default function CuesheetWrapper() {
|
||||
const { data: rundown } = useRundown();
|
||||
const { data: userFields } = useUserFields();
|
||||
const { updateEvent } = useEventAction();
|
||||
// TODO: can we use the normalised rundown for the table?
|
||||
const { data: flatRundown, status: rundownStatus } = useFlatRundown();
|
||||
const { data: customFields } = useCustomFields();
|
||||
const { isOpen: isMenuOpen, onOpen, onClose } = useDisclosure();
|
||||
|
||||
const { updateCustomField } = useEventAction();
|
||||
const featureData = useCuesheet();
|
||||
const columns = useMemo(() => makeCuesheetColumns(userFields), [userFields]);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [headerData, setheaderData] = useState<ProjectData | null>(null);
|
||||
const columns = useMemo(() => makeCuesheetColumns(customFields), [customFields]);
|
||||
const toggleSettings = useCuesheetSettings((state) => state.toggleSettings);
|
||||
|
||||
// Set window title
|
||||
useEffect(() => {
|
||||
document.title = 'ontime - Cuesheet';
|
||||
}, []);
|
||||
useWindowTitle('Cuesheet');
|
||||
|
||||
/**
|
||||
* Handles updating a field
|
||||
* Currently, only custom fields can be updated from the cuesheet
|
||||
*/
|
||||
const handleUpdate = useCallback(
|
||||
async (rowIndex: number, accessor: keyof OntimeRundownEntry, payload: unknown) => {
|
||||
if (!rundown) {
|
||||
async (rowIndex: number, accessor: CustomFieldLabel, payload: unknown) => {
|
||||
if (!flatRundown || rundownStatus !== 'success') {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -41,109 +48,66 @@ export default function CuesheetWrapper() {
|
||||
}
|
||||
|
||||
// check if value is the same
|
||||
const event = rundown[rowIndex];
|
||||
if (!event) {
|
||||
const event = flatRundown[rowIndex];
|
||||
if (!event || !isOntimeEvent(event)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event[accessor] === payload) {
|
||||
const previousValue = event.custom[accessor]?.value;
|
||||
|
||||
if (previousValue === payload) {
|
||||
return;
|
||||
}
|
||||
|
||||
// check if value is valid
|
||||
// as of now, the fields do not have any validation
|
||||
// in anticipation to different types of event here
|
||||
if (typeof payload !== 'string') {
|
||||
return;
|
||||
}
|
||||
|
||||
// cleanup
|
||||
const cleanVal = payload.trim();
|
||||
const mutationObject = {
|
||||
id: event.id,
|
||||
[accessor]: cleanVal,
|
||||
};
|
||||
|
||||
// submit
|
||||
try {
|
||||
await updateEvent(mutationObject);
|
||||
await updateCustomField(event.id, accessor, cleanVal);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
[updateEvent, rundown],
|
||||
[flatRundown, rundownStatus, updateCustomField],
|
||||
);
|
||||
|
||||
const exportHandler = useCallback(
|
||||
(headerData: ProjectData, exportType: ExportType) => {
|
||||
if (!headerData || !rundown || !userFields) {
|
||||
return;
|
||||
}
|
||||
|
||||
let fileName = '';
|
||||
let url = '';
|
||||
|
||||
if (exportType === 'json') {
|
||||
const jsonContent = JSON.stringify({
|
||||
headerData,
|
||||
rundown,
|
||||
userFields,
|
||||
});
|
||||
|
||||
fileName = 'ontime export.json';
|
||||
|
||||
const blob = new Blob([jsonContent], { type: 'application/json;charset=utf-8;' });
|
||||
url = URL.createObjectURL(blob);
|
||||
} else if (exportType === 'csv') {
|
||||
const sheetData = makeTable(headerData, rundown, userFields);
|
||||
const csvContent = makeCSV(sheetData);
|
||||
|
||||
fileName = 'ontime export.csv';
|
||||
|
||||
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
||||
url = URL.createObjectURL(blob);
|
||||
} else {
|
||||
console.error('Invalid export type: ', exportType);
|
||||
return;
|
||||
}
|
||||
|
||||
const link = document.createElement('a');
|
||||
link.setAttribute('href', url);
|
||||
link.setAttribute('download', fileName);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
// Clean up the URL.createObjectURL to release resources
|
||||
URL.revokeObjectURL(url);
|
||||
return;
|
||||
},
|
||||
[rundown, userFields],
|
||||
);
|
||||
|
||||
const onModalClose = (exportType?: ExportType) => {
|
||||
setIsModalOpen(false);
|
||||
|
||||
if (!exportType) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (headerData) {
|
||||
exportHandler(headerData, exportType);
|
||||
}
|
||||
};
|
||||
|
||||
const handleOpenModal = (projectData: ProjectData) => {
|
||||
setheaderData(projectData);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
if (!rundown || !userFields) {
|
||||
if (!customFields || !flatRundown || rundownStatus !== 'success') {
|
||||
return <Empty text='Loading...' />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.tableWrapper} data-testid='cuesheet'>
|
||||
<CuesheetTableHeader handleExport={handleOpenModal} featureData={featureData} />
|
||||
<ProductionNavigationMenu isMenuOpen={isMenuOpen} onMenuClose={onClose} />
|
||||
<CuesheetOverview>
|
||||
<IconButton
|
||||
aria-label='Toggle settings'
|
||||
variant='ontime-subtle-white'
|
||||
size='lg'
|
||||
icon={<IoApps />}
|
||||
onClick={onOpen}
|
||||
/>
|
||||
<IconButton
|
||||
aria-label='Toggle navigation'
|
||||
variant='ontime-subtle-white'
|
||||
size='lg'
|
||||
icon={<IoSettingsOutline />}
|
||||
onClick={() => toggleSettings()}
|
||||
/>
|
||||
</CuesheetOverview>
|
||||
<CuesheetProgress />
|
||||
<Cuesheet data={rundown} columns={columns} handleUpdate={handleUpdate} selectedId={featureData.selectedEventId} />
|
||||
<ExportModal isOpen={isModalOpen} onClose={onModalClose} />
|
||||
<Cuesheet
|
||||
data={flatRundown}
|
||||
columns={columns}
|
||||
handleUpdate={handleUpdate}
|
||||
selectedId={featureData.selectedEventId}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,61 +3,39 @@
|
||||
exports[`makeTable() > returns array of arrays with given fields 1`] = `
|
||||
[
|
||||
[
|
||||
"Ontime · Schedule Template",
|
||||
"Ontime · Rundown export",
|
||||
],
|
||||
[
|
||||
"Project Title",
|
||||
"",
|
||||
"Project title: test title",
|
||||
],
|
||||
[
|
||||
"Project Description",
|
||||
"",
|
||||
"Project description: test description",
|
||||
],
|
||||
[
|
||||
"Public URL",
|
||||
"",
|
||||
],
|
||||
[
|
||||
"Backstage URL",
|
||||
"",
|
||||
],
|
||||
[],
|
||||
[
|
||||
"Time Start",
|
||||
"Time End",
|
||||
"Event Title",
|
||||
"Presenter Name",
|
||||
"Event Subtitle",
|
||||
"Is Public? (x)",
|
||||
"Note",
|
||||
"Duration",
|
||||
"ID",
|
||||
"Colour",
|
||||
"End Action",
|
||||
"Timer Type",
|
||||
"Cue",
|
||||
"Title",
|
||||
"Note",
|
||||
"Is Public? (x)",
|
||||
"Skip?",
|
||||
"user0:test",
|
||||
"lighting",
|
||||
],
|
||||
[
|
||||
"00:00:00",
|
||||
"00:00:00",
|
||||
"...",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"test title 1",
|
||||
"",
|
||||
"",
|
||||
"x",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"test",
|
||||
"test",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import { makeCSV, makeTable, parseField } from '../cuesheetUtils';
|
||||
|
||||
describe('parseField()', () => {
|
||||
it('returns a string from given millis on timeStart and TimeEnd', () => {
|
||||
it('returns a string from given millis on timeStart, TimeEnd and duration', () => {
|
||||
const testData1 = 1000;
|
||||
const testData2 = 60000;
|
||||
const testData3 = 600000;
|
||||
expect(parseField('timeStart', testData1)).toBe('00:00:01');
|
||||
expect(parseField('timeEnd', testData2)).toBe('00:01:00');
|
||||
expect(parseField('timeEnd', testData2)).toBe('00:01:00');
|
||||
expect(parseField('duration', testData3)).toBe('00:10:00');
|
||||
});
|
||||
|
||||
describe('returns an x when isPublic is truthy, empty string otherwise', () => {
|
||||
@@ -26,27 +27,15 @@ describe('parseField()', () => {
|
||||
});
|
||||
|
||||
it('returns an empty string on undefined fields', () => {
|
||||
expect(parseField('presenter')).toBe('');
|
||||
expect(parseField('title')).toBe('');
|
||||
});
|
||||
|
||||
describe('simply returns any other value in any other field', () => {
|
||||
const testFields = [
|
||||
{ field: 'nothing', value: 123 },
|
||||
{ field: 'nothing', value: '123' },
|
||||
{ field: 'title', value: 'test' },
|
||||
{ field: 'presenter', value: 'test' },
|
||||
{ field: 'subtitle', value: 'test' },
|
||||
{ field: 'note', value: 'test' },
|
||||
{ field: 'colour', value: 'test' },
|
||||
{ field: 'user0', value: 'test' },
|
||||
{ field: 'user1', value: 'test' },
|
||||
{ field: 'user2', value: 'test' },
|
||||
{ field: 'user3', value: 'test' },
|
||||
{ field: 'user4', value: 'test' },
|
||||
{ field: 'user5', value: 'test' },
|
||||
{ field: 'user6', value: 'test' },
|
||||
{ field: 'user7', value: 'test' },
|
||||
{ field: 'user8', value: 'test' },
|
||||
{ field: 'user9', value: 'test' },
|
||||
];
|
||||
|
||||
testFields.forEach((testCase) => {
|
||||
@@ -59,23 +48,25 @@ describe('parseField()', () => {
|
||||
|
||||
describe('makeTable()', () => {
|
||||
it('returns array of arrays with given fields', () => {
|
||||
const headerData = {};
|
||||
const headerData = {
|
||||
title: 'test title',
|
||||
description: 'test description',
|
||||
};
|
||||
const tableData = [
|
||||
{
|
||||
title: 'test title 1',
|
||||
presenter: '',
|
||||
timeStart: 0,
|
||||
timeEnd: 0,
|
||||
isPublic: 'x',
|
||||
user0: 'test',
|
||||
user1: 'test',
|
||||
lighting: { value: 'test lighting' },
|
||||
sound: { value: 'test sound' },
|
||||
},
|
||||
];
|
||||
const userFields = {
|
||||
user0: 'test',
|
||||
const customFields = {
|
||||
lighting: { label: 'test' },
|
||||
};
|
||||
|
||||
const table = makeTable(headerData, tableData, userFields);
|
||||
const table = makeTable(headerData, tableData, customFields);
|
||||
expect(table).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
import MultiPartProgressBar from '../../../common/components/multi-part-progress-bar/MultiPartProgressBar';
|
||||
import { useTimer } from '../../../common/hooks/useSocket';
|
||||
import { useProgressData } from '../../../common/hooks/useSocket';
|
||||
import useViewSettings from '../../../common/hooks-query/useViewSettings';
|
||||
|
||||
import styles from "./CuesheetProgress.module.scss"
|
||||
import styles from './CuesheetProgress.module.scss';
|
||||
|
||||
export default function CuesheetProgress() {
|
||||
const { data } = useViewSettings();
|
||||
const timer = useTimer();
|
||||
const totalTime = (timer.duration ?? 0) + (timer.addedTime ?? 0);
|
||||
const { addedTime, current, duration, timeWarning, timeDanger } = useProgressData();
|
||||
const totalTime = (duration ?? 0) + (addedTime ?? 0);
|
||||
|
||||
return (
|
||||
<MultiPartProgressBar
|
||||
now={timer.current}
|
||||
now={current}
|
||||
complete={totalTime}
|
||||
normalColor={data!.normalColor}
|
||||
warning={data!.warningThreshold}
|
||||
warning={timeWarning}
|
||||
warningColor={data!.warningColor}
|
||||
danger={data!.dangerThreshold}
|
||||
danger={timeDanger}
|
||||
dangerColor={data!.dangerColor}
|
||||
className={styles.progressOverride}
|
||||
/>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { memo } from 'react';
|
||||
import { memo, useEffect } from 'react';
|
||||
import { Tooltip } from '@chakra-ui/react';
|
||||
import {
|
||||
closestCenter,
|
||||
@@ -15,6 +15,7 @@ import { flexRender, HeaderGroup } from '@tanstack/react-table';
|
||||
import { OntimeRundownEntry } from 'ontime-types';
|
||||
|
||||
import { useLocalStorage } from '../../../common/hooks/useLocalStorage';
|
||||
import { getAccessibleColour } from '../../../common/utils/styleUtils';
|
||||
import { tooltipDelayFast } from '../../../ontimeConfig';
|
||||
import { initialColumnOrder } from '../cuesheetCols';
|
||||
|
||||
@@ -30,6 +31,12 @@ function CuesheetHeader(props: CuesheetHeaderProps) {
|
||||
const { headerGroups } = props;
|
||||
const [columnOrder, saveColumnOrder] = useLocalStorage<string[]>('table-order', initialColumnOrder);
|
||||
|
||||
useEffect(() => {
|
||||
if (!localStorage.getItem('table-order')) {
|
||||
saveColumnOrder(initialColumnOrder);
|
||||
}
|
||||
}, [saveColumnOrder]);
|
||||
|
||||
const handleOnDragEnd = (event: DragEndEvent) => {
|
||||
const { delta, active, over } = event;
|
||||
|
||||
@@ -89,9 +96,17 @@ function CuesheetHeader(props: CuesheetHeaderProps) {
|
||||
<SortableContext key={key} items={headerGroup.headers} strategy={horizontalListSortingStrategy}>
|
||||
{headerGroup.headers.map((header) => {
|
||||
const width = header.getSize();
|
||||
// @ts-expect-error -- we inject this into react-table
|
||||
const customBackground = header.column.columnDef?.meta?.colour;
|
||||
|
||||
let customStyles = {};
|
||||
if (customBackground) {
|
||||
const customColour = getAccessibleColour(customBackground);
|
||||
customStyles = { backgroundColor: customColour.backgroundColor, color: customColour.color };
|
||||
}
|
||||
|
||||
return (
|
||||
<SortableCell key={header.column.columnDef.id} header={header} style={{ width }}>
|
||||
<SortableCell key={header.column.columnDef.id} header={header} style={{ width, ...customStyles }}>
|
||||
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
|
||||
</SortableCell>
|
||||
);
|
||||
|
||||
@@ -10,7 +10,7 @@ interface DelayRowProps {
|
||||
|
||||
function DelayRow(props: DelayRowProps) {
|
||||
const { duration } = props;
|
||||
const delayTime = millisToDelayString(duration);
|
||||
const delayTime = millisToDelayString(duration, 'expanded');
|
||||
|
||||
return (
|
||||
<tr className={style.delayRow}>
|
||||
|
||||
+9
-8
@@ -1,6 +1,3 @@
|
||||
@use '../../../theme/ontimeColours' as *;
|
||||
@use '../../../theme/v2Styles' as *;
|
||||
|
||||
$label-colour: $gray-700;
|
||||
$active-colour: $gray-500;
|
||||
|
||||
@@ -12,7 +9,7 @@ $active-colour: $gray-500;
|
||||
}
|
||||
|
||||
@mixin time {
|
||||
font-family: "Open Sans Light", $ontime-font-family;
|
||||
font-family: 'Open Sans Light', $ontime-font-family;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -25,8 +22,7 @@ $active-colour: $gray-500;
|
||||
height: max-content;
|
||||
column-gap: 2rem;
|
||||
|
||||
grid-template-areas:
|
||||
'event playback timer clock actions';
|
||||
grid-template-areas: 'event playback timer clock actions';
|
||||
grid-template-columns: 1fr auto auto auto auto;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
@@ -94,11 +90,12 @@ $active-colour: $gray-500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 1.125rem;
|
||||
color: $label-colour;
|
||||
height: 100%;
|
||||
font-size: 1rem;
|
||||
|
||||
.actionIcon {
|
||||
.actionIcon,
|
||||
.actionText {
|
||||
cursor: pointer;
|
||||
|
||||
&.enabled {
|
||||
@@ -109,6 +106,10 @@ $active-colour: $gray-500;
|
||||
color: $active-colour;
|
||||
}
|
||||
}
|
||||
|
||||
.actionIcon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
|
||||
@@ -1,13 +1,10 @@
|
||||
import { Tooltip } from '@chakra-ui/react';
|
||||
import { IoContract } from '@react-icons/all-files/io5/IoContract';
|
||||
import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
|
||||
import { IoLocate } from '@react-icons/all-files/io5/IoLocate';
|
||||
import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';
|
||||
import { Playback, ProjectData } from 'ontime-types';
|
||||
|
||||
import PlaybackIcon from '../../../common/components/playback-icon/PlaybackIcon';
|
||||
import useFullscreen from '../../../common/hooks/useFullscreen';
|
||||
import useProjectData from '../../../common/hooks-query/useProjectData';
|
||||
import { cx, enDash } from '../../../common/utils/styleUtils';
|
||||
import { tooltipDelayFast } from '../../../ontimeConfig';
|
||||
import { useCuesheetSettings } from '../store/CuesheetSettings';
|
||||
|
||||
@@ -27,10 +24,7 @@ interface CuesheetTableHeaderProps {
|
||||
|
||||
export default function CuesheetTableHeader({ handleExport, featureData }: CuesheetTableHeaderProps) {
|
||||
const followSelected = useCuesheetSettings((state) => state.followSelected);
|
||||
const showSettings = useCuesheetSettings((state) => state.showSettings);
|
||||
const toggleSettings = useCuesheetSettings((state) => state.toggleSettings);
|
||||
const toggleFollow = useCuesheetSettings((state) => state.toggleFollow);
|
||||
const { isFullScreen, toggleFullScreen } = useFullscreen();
|
||||
const { data: project } = useProjectData();
|
||||
|
||||
const exportProject = () => {
|
||||
@@ -41,15 +35,15 @@ export default function CuesheetTableHeader({ handleExport, featureData }: Cuesh
|
||||
|
||||
const selected = !featureData.numEvents
|
||||
? 'No events'
|
||||
: `Event ${featureData.selectedEventIndex != null ? featureData.selectedEventIndex + 1 : '-'}/${
|
||||
featureData.numEvents ? featureData.numEvents : '-'
|
||||
: `Event ${featureData.selectedEventIndex != null ? featureData.selectedEventIndex + 1 : enDash}/${
|
||||
featureData.numEvents ? featureData.numEvents : enDash
|
||||
}`;
|
||||
|
||||
return (
|
||||
<div className={style.header}>
|
||||
<div className={style.event}>
|
||||
<div className={style.title}>{project?.title || '-'}</div>
|
||||
<div className={style.eventNow}>{featureData?.titleNow || '-'}</div>
|
||||
<div className={style.title}>{project?.title || enDash}</div>
|
||||
<div className={style.eventNow}>{featureData?.titleNow || enDash}</div>
|
||||
</div>
|
||||
<div className={style.playback}>
|
||||
<div className={style.playbackLabel}>{selected}</div>
|
||||
@@ -58,23 +52,16 @@ export default function CuesheetTableHeader({ handleExport, featureData }: Cuesh
|
||||
<CuesheetTableHeaderTimers />
|
||||
<div className={style.headerActions}>
|
||||
<Tooltip openDelay={tooltipDelayFast} label='Toggle follow'>
|
||||
<span onClick={() => toggleFollow()} className={`${style.actionIcon} ${followSelected ? style.enabled : ''}`}>
|
||||
<span
|
||||
onClick={() => toggleFollow()}
|
||||
className={cx([style.actionIcon, followSelected ? style.enabled : null])}
|
||||
>
|
||||
<IoLocate />
|
||||
</span>
|
||||
</Tooltip>
|
||||
<Tooltip openDelay={tooltipDelayFast} label='Toggle settings'>
|
||||
<span onClick={() => toggleSettings()} className={`${style.actionIcon} ${showSettings ? style.enabled : ''}`}>
|
||||
<IoSettingsOutline />
|
||||
</span>
|
||||
</Tooltip>
|
||||
<Tooltip openDelay={tooltipDelayFast} label='Toggle Fullscreen'>
|
||||
<span onClick={() => toggleFullScreen()} className={style.actionIcon}>
|
||||
{isFullScreen ? <IoContract /> : <IoExpand />}
|
||||
</span>
|
||||
</Tooltip>
|
||||
<Tooltip openDelay={tooltipDelayFast} label='Export rundown'>
|
||||
<span className={style.actionIcon} onClick={exportProject}>
|
||||
Export
|
||||
<span className={style.actionText} onClick={exportProject}>
|
||||
Export CSV
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
+7
-15
@@ -1,30 +1,22 @@
|
||||
import { formatDisplay } from 'ontime-utils';
|
||||
|
||||
import { useTimer } from '../../../common/hooks/useSocket';
|
||||
import { formatTime } from '../../../common/utils/time';
|
||||
import { useClock, useTimer } from '../../../common/hooks/useSocket';
|
||||
import ClockTime from '../../viewers/common/clock-time/ClockTime';
|
||||
import RunningTime from '../../viewers/common/running-time/RunningTime';
|
||||
|
||||
import style from './CuesheetTableHeader.module.scss';
|
||||
|
||||
export default function CuesheetTableHeaderTimers() {
|
||||
const timer = useTimer();
|
||||
|
||||
// prepare presentation variables
|
||||
const isOvertime = (timer.current ?? 0) < 0;
|
||||
const timerNow = timer.current == null ? '-' : `${isOvertime ? '-' : ''}${formatDisplay(timer.current)}`;
|
||||
const timeNow = formatTime(timer.clock, {
|
||||
showSeconds: true,
|
||||
format: 'hh:mm:ss a',
|
||||
});
|
||||
const { current } = useTimer();
|
||||
const { clock } = useClock();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={style.timer}>
|
||||
<div className={style.timerLabel}>Running Timer</div>
|
||||
<div className={style.value}>{timerNow}</div>
|
||||
<RunningTime className={style.value} value={current} hideLeadingZero />
|
||||
</div>
|
||||
<div className={style.clock}>
|
||||
<div className={style.clockLabel}>Time Now</div>
|
||||
<div className={style.value}>{timeNow}</div>
|
||||
<ClockTime className={style.value} value={clock} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
-3
@@ -1,6 +1,3 @@
|
||||
@use '../../../theme/v2Styles' as *;
|
||||
@use '../../../theme/ontimeColours' as *;
|
||||
|
||||
.tableSettings {
|
||||
grid-area: settings;
|
||||
padding: 1rem;
|
||||
|
||||
@@ -23,12 +23,14 @@ interface CuesheetTableSettingsProps {
|
||||
function CuesheetTableSettings(props: CuesheetTableSettingsProps) {
|
||||
const { columns, handleResetResizing, handleResetReordering, handleClearToggles } = props;
|
||||
const {
|
||||
followSelected,
|
||||
toggleFollow,
|
||||
showPrevious,
|
||||
toggleDelayVisibility,
|
||||
togglePreviousVisibility,
|
||||
showDelayBlock,
|
||||
showDelayedTimes,
|
||||
toggleDelayedTimes,
|
||||
togglePreviousVisibility,
|
||||
toggleDelayVisibility,
|
||||
} = useCuesheetSettings();
|
||||
|
||||
return (
|
||||
@@ -53,6 +55,10 @@ function CuesheetTableSettings(props: CuesheetTableSettingsProps) {
|
||||
</div>
|
||||
<div className={style.sectionTitle}>Table Options</div>
|
||||
<div className={style.options}>
|
||||
<label className={style.option}>
|
||||
<Switch variant='ontime' size='sm' isChecked={followSelected} onChange={() => toggleFollow()} />
|
||||
Follow selected event
|
||||
</label>
|
||||
<label className={style.option}>
|
||||
<Switch variant='ontime' size='sm' isChecked={showPrevious} onChange={() => togglePreviousVisibility()} />
|
||||
Show past events
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import { useCallback } from 'react';
|
||||
import { IoCheckmark } from '@react-icons/all-files/io5/IoCheckmark';
|
||||
import { CellContext, ColumnDef } from '@tanstack/react-table';
|
||||
import { OntimeEvent, OntimeRundownEntry, UserFields } from 'ontime-types';
|
||||
import { CustomFields, isOntimeEvent, OntimeEvent, OntimeRundownEntry } from 'ontime-types';
|
||||
import { millisToString } from 'ontime-utils';
|
||||
|
||||
import DelayIndicator from '../../common/components/delay-indicator/DelayIndicator';
|
||||
import RunningTime from '../viewers/common/running-time/RunningTime';
|
||||
|
||||
import EditableCell from './cuesheet-table-elements/EditableCell';
|
||||
import { useCuesheetSettings } from './store/CuesheetSettings';
|
||||
@@ -24,30 +25,45 @@ function MakeTimer({ getValue, row: { original } }: CellContext<OntimeRundownEnt
|
||||
return (
|
||||
<span className={style.time}>
|
||||
<DelayIndicator delayValue={delayValue} />
|
||||
{millisToString(cellValue)}
|
||||
<RunningTime value={cellValue} />
|
||||
{delayValue !== 0 && showDelayedTimes && (
|
||||
<span className={style.delayedTime}>{` ${millisToString(cellValue + delayValue)}`}</span>
|
||||
<RunningTime className={style.delayedTime} value={cellValue + delayValue} />
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function MakeUserField({ getValue, row: { index }, column: { id }, table }: CellContext<OntimeRundownEntry, unknown>) {
|
||||
function MakeCustomField({ row, column, table }: CellContext<OntimeRundownEntry, unknown>) {
|
||||
const update = useCallback(
|
||||
(newValue: string) => {
|
||||
// @ts-expect-error -- we inject this into react-table
|
||||
table.options.meta?.handleUpdate(index, id, newValue);
|
||||
table.options.meta?.handleUpdate(row.index, column.id, newValue);
|
||||
},
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- we skip table.options.meta since the reference seems unstable
|
||||
[id, index],
|
||||
[column.id, row.index],
|
||||
);
|
||||
|
||||
const initialValue = getValue() as string;
|
||||
const event = row.original;
|
||||
if (!isOntimeEvent(event)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// events dont necessarily contain all custom fields
|
||||
const initialValue = event.custom[column.id]?.value ?? '';
|
||||
|
||||
return <EditableCell value={initialValue} handleUpdate={update} />;
|
||||
}
|
||||
|
||||
export function makeCuesheetColumns(userFields?: UserFields): ColumnDef<OntimeRundownEntry>[] {
|
||||
export function makeCuesheetColumns(customFields: CustomFields): ColumnDef<OntimeRundownEntry>[] {
|
||||
const dynamicCustomFields = Object.keys(customFields).map((key) => ({
|
||||
accessorKey: key,
|
||||
id: key,
|
||||
header: customFields[key].label,
|
||||
meta: { colour: customFields[key].colour },
|
||||
cell: MakeCustomField,
|
||||
size: 250,
|
||||
}));
|
||||
|
||||
return [
|
||||
{
|
||||
accessorKey: 'cue',
|
||||
@@ -89,86 +105,17 @@ export function makeCuesheetColumns(userFields?: UserFields): ColumnDef<OntimeRu
|
||||
id: 'title',
|
||||
header: 'Title',
|
||||
cell: (row) => row.getValue(),
|
||||
},
|
||||
{
|
||||
accessorKey: 'subtitle',
|
||||
id: 'subtitle',
|
||||
header: 'Subtitle',
|
||||
cell: (row) => row.getValue(),
|
||||
},
|
||||
{
|
||||
accessorKey: 'presenter',
|
||||
id: 'presenter',
|
||||
header: 'Presenter',
|
||||
cell: (row) => row.getValue(),
|
||||
size: 250,
|
||||
},
|
||||
{
|
||||
accessorKey: 'note',
|
||||
id: 'note',
|
||||
header: 'Note',
|
||||
cell: (row) => row.getValue(),
|
||||
size: 250,
|
||||
},
|
||||
{
|
||||
accessorKey: 'user0',
|
||||
id: 'user0',
|
||||
header: userFields?.user0 || 'User 0',
|
||||
cell: MakeUserField,
|
||||
},
|
||||
{
|
||||
accessorKey: 'user1',
|
||||
id: 'user1',
|
||||
header: userFields?.user1 || 'User 1',
|
||||
cell: MakeUserField,
|
||||
},
|
||||
{
|
||||
accessorKey: 'user2',
|
||||
id: 'user2',
|
||||
header: userFields?.user2 || 'User 2',
|
||||
cell: MakeUserField,
|
||||
},
|
||||
{
|
||||
accessorKey: 'user3',
|
||||
id: 'user3',
|
||||
header: userFields?.user3 || 'User 3',
|
||||
cell: MakeUserField,
|
||||
},
|
||||
{
|
||||
accessorKey: 'user4',
|
||||
id: 'user4',
|
||||
header: userFields?.user4 || 'User 4',
|
||||
cell: MakeUserField,
|
||||
},
|
||||
{
|
||||
accessorKey: 'user5',
|
||||
id: 'user5',
|
||||
header: userFields?.user5 || 'User 5',
|
||||
cell: MakeUserField,
|
||||
},
|
||||
{
|
||||
accessorKey: 'user6',
|
||||
id: 'user6',
|
||||
header: userFields?.user6 || 'User 6',
|
||||
cell: MakeUserField,
|
||||
},
|
||||
{
|
||||
accessorKey: 'user7',
|
||||
id: 'user7',
|
||||
header: userFields?.user7 || 'User 7',
|
||||
cell: MakeUserField,
|
||||
},
|
||||
{
|
||||
accessorKey: 'user8',
|
||||
id: 'user8',
|
||||
header: userFields?.user8 || 'User 8',
|
||||
cell: MakeUserField,
|
||||
},
|
||||
{
|
||||
accessorKey: 'user9',
|
||||
id: 'user9',
|
||||
header: userFields?.user9 || 'User 9',
|
||||
cell: MakeUserField,
|
||||
},
|
||||
...dynamicCustomFields,
|
||||
];
|
||||
}
|
||||
|
||||
export const initialColumnOrder: string[] = makeCuesheetColumns().map((column) => column.id as string);
|
||||
export const initialColumnOrder: string[] = makeCuesheetColumns({}).map((column) => column.id as string);
|
||||
|
||||
@@ -1,7 +1,17 @@
|
||||
import { stringify } from 'csv-stringify/browser/esm/sync';
|
||||
import { OntimeEntryCommonKeys, OntimeRundown, ProjectData, UserFields } from 'ontime-types';
|
||||
import {
|
||||
CustomFields,
|
||||
isOntimeDelay,
|
||||
isOntimeEvent,
|
||||
MaybeNumber,
|
||||
OntimeEntryCommonKeys,
|
||||
OntimeRundown,
|
||||
ProjectData,
|
||||
} from 'ontime-types';
|
||||
import { millisToString } from 'ontime-utils';
|
||||
|
||||
type CsvHeaderKey = OntimeEntryCommonKeys | keyof CustomFields;
|
||||
|
||||
/**
|
||||
* @description parses a field for export
|
||||
* @param {string} field
|
||||
@@ -9,95 +19,85 @@ import { millisToString } from 'ontime-utils';
|
||||
* @return {string}
|
||||
*/
|
||||
|
||||
export const parseField = <T extends OntimeEntryCommonKeys>(field: T, data: unknown): string => {
|
||||
let val;
|
||||
switch (field) {
|
||||
case 'timeStart':
|
||||
case 'timeEnd':
|
||||
val = millisToString(data as number | null);
|
||||
break;
|
||||
case 'isPublic':
|
||||
case 'skip':
|
||||
val = data ? 'x' : '';
|
||||
break;
|
||||
default:
|
||||
val = data;
|
||||
break;
|
||||
export const parseField = (field: CsvHeaderKey, data: unknown): string => {
|
||||
if (field === 'timeStart' || field === 'timeEnd' || field === 'duration') {
|
||||
return millisToString(data as MaybeNumber);
|
||||
}
|
||||
if (typeof data === 'undefined') {
|
||||
return '';
|
||||
|
||||
if (field === 'isPublic' || field === 'skip') {
|
||||
return data ? 'x' : '';
|
||||
}
|
||||
// all other values are strings
|
||||
return val as string;
|
||||
|
||||
return String(data ?? '');
|
||||
};
|
||||
|
||||
/**
|
||||
* @description Creates an array of arrays usable by xlsx for export
|
||||
* @param {object} headerData
|
||||
* @param {array} rundown
|
||||
* @param {object} userFields
|
||||
* @param {ProjectData} headerData
|
||||
* @param {OntimeRundown} rundown
|
||||
* @param {CustomFields} customFields
|
||||
* @return {(string[])[]}
|
||||
*/
|
||||
export const makeTable = (headerData: ProjectData, rundown: OntimeRundown, userFields: UserFields): string[][] => {
|
||||
const data = [
|
||||
['Ontime · Schedule Template'],
|
||||
['Project Title', headerData?.title || ''],
|
||||
['Project Description', headerData?.description || ''],
|
||||
['Public URL', headerData?.publicUrl || ''],
|
||||
['Backstage URL', headerData?.backstageUrl || ''],
|
||||
[],
|
||||
];
|
||||
export const makeTable = (headerData: ProjectData, rundown: OntimeRundown, customFields: CustomFields): string[][] => {
|
||||
// create metadata header row
|
||||
const data = [['Ontime · Rundown export']];
|
||||
if (headerData.title) data.push([`Project title: ${headerData.title}`]);
|
||||
if (headerData.description) data.push([`Project description: ${headerData.description}`]);
|
||||
|
||||
const fieldOrder: OntimeEntryCommonKeys[] = [
|
||||
const customFieldKeys = Object.keys(customFields).map((key) => `custom-${key}`);
|
||||
const customFieldLabels = Object.keys(customFields);
|
||||
|
||||
// we chose not to expose internals of the application
|
||||
const fieldOrder: CsvHeaderKey[] = [
|
||||
'timeStart',
|
||||
'timeEnd',
|
||||
'title',
|
||||
'presenter',
|
||||
'subtitle',
|
||||
'isPublic',
|
||||
'note',
|
||||
'duration',
|
||||
'id',
|
||||
'colour',
|
||||
'endAction',
|
||||
'timerType',
|
||||
'cue',
|
||||
'title',
|
||||
'note',
|
||||
'isPublic',
|
||||
'skip',
|
||||
'user0',
|
||||
'user1',
|
||||
'user2',
|
||||
'user3',
|
||||
'user4',
|
||||
'user5',
|
||||
'user6',
|
||||
'user7',
|
||||
'user8',
|
||||
'user9',
|
||||
...customFieldKeys,
|
||||
];
|
||||
|
||||
const fieldTitles = [
|
||||
'Time Start',
|
||||
'Time End',
|
||||
'Event Title',
|
||||
'Presenter Name',
|
||||
'Event Subtitle',
|
||||
'Is Public? (x)',
|
||||
'Note',
|
||||
'Duration',
|
||||
'ID',
|
||||
'Colour',
|
||||
'End Action',
|
||||
'Timer Type',
|
||||
'Cue',
|
||||
'Title',
|
||||
'Note',
|
||||
'Is Public? (x)',
|
||||
'Skip?',
|
||||
...customFieldLabels,
|
||||
];
|
||||
|
||||
for (const field in userFields) {
|
||||
const fieldValue = userFields[field as keyof UserFields];
|
||||
const displayName = `${field}${fieldValue !== field && fieldValue !== '' ? `:${fieldValue}` : ''}`;
|
||||
fieldTitles.push(displayName);
|
||||
}
|
||||
|
||||
// add header row to data
|
||||
data.push(fieldTitles);
|
||||
|
||||
rundown.forEach((entry) => {
|
||||
if (isOntimeDelay(entry)) return;
|
||||
|
||||
const row: string[] = [];
|
||||
// @ts-expect-error -- not sure how to type this
|
||||
fieldOrder.forEach((field) => row.push(parseField(field, entry[field])));
|
||||
fieldOrder.forEach((field) => {
|
||||
if (isOntimeEvent(entry)) {
|
||||
// for custom fields, we need to extract the value from the custom object
|
||||
if (field.startsWith('custom-')) {
|
||||
const fieldLabel = field.split('custom-')[1];
|
||||
const value = entry.custom[fieldLabel]?.value;
|
||||
row.push(parseField(fieldLabel, value));
|
||||
} else {
|
||||
// @ts-expect-error -- it is ok, we will just not have the data for other fields
|
||||
row.push(parseField(field, entry[field]));
|
||||
}
|
||||
return;
|
||||
}
|
||||
// @ts-expect-error -- it is ok, we will just not have the data for other fields
|
||||
row.push(parseField(field, entry[field]));
|
||||
});
|
||||
data.push(row);
|
||||
});
|
||||
|
||||
@@ -106,10 +106,10 @@ export const makeTable = (headerData: ProjectData, rundown: OntimeRundown, userF
|
||||
|
||||
/**
|
||||
* @description Converts an array of arrays to a csv file
|
||||
* @param {array[]} arrayOfArrays
|
||||
* @param {string[][]} arrayOfArrays
|
||||
* @return {string}
|
||||
*/
|
||||
export const makeCSV = (arrayOfArrays: string[][]) => {
|
||||
export const makeCSV = (arrayOfArrays: string[][]): string => {
|
||||
const stringifiedData = stringify(arrayOfArrays);
|
||||
return stringifiedData;
|
||||
};
|
||||
|
||||
@@ -10,33 +10,10 @@ export const defaultColumnOrder: OntimeEntryCommonKeys[] = [
|
||||
'timeEnd',
|
||||
'duration',
|
||||
'title',
|
||||
'subtitle',
|
||||
'presenter',
|
||||
'note',
|
||||
'user0',
|
||||
'user1',
|
||||
'user2',
|
||||
'user3',
|
||||
'user4',
|
||||
'user5',
|
||||
'user6',
|
||||
'user7',
|
||||
'user8',
|
||||
'user9',
|
||||
];
|
||||
|
||||
/**
|
||||
* @description set default hidden columns
|
||||
*/
|
||||
export const defaultHiddenColumns: (keyof OntimeEvent)[] = [
|
||||
'user0',
|
||||
'user1',
|
||||
'user2',
|
||||
'user3',
|
||||
'user4',
|
||||
'user5',
|
||||
'user6',
|
||||
'user7',
|
||||
'user8',
|
||||
'user9',
|
||||
];
|
||||
export const defaultHiddenColumns: (keyof OntimeEvent)[] = [];
|
||||
|
||||
Reference in New Issue
Block a user