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

wip: upload review

Browse Source
This commit is contained in:
cv
2023-09-10 19:23:13 +02:00
parent 03cbc8544d
commit e16913cb42
30 changed files with 868 additions and 644 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "ontime-ui",
"version": "2.7.2",
"version": "2.8.1-rc-table",
"private": true,
"dependencies": {
"@chakra-ui/react": "^2.7.0",
apps/client/src/common/api/ontimeApi.ts
+29 -13
View File
@@ -1,5 +1,14 @@
import axios from 'axios';
import { Alias, OSCSettings, OscSubscription, ProjectData, Settings, UserFields, ViewSettings } from 'ontime-types';
import axios, { AxiosResponse } from 'axios';
import {
Alias,
OntimeRundown,
OSCSettings,
OscSubscription,
ProjectData,
Settings,
UserFields,
ViewSettings,
} from 'ontime-types';
import { apiRepoLatest } from '../../externals';
import { InfoType } from '../models/Info';
@@ -161,20 +170,27 @@ export const uploadData = async (file: File, setProgress: (value: number) => voi
.then((response) => response.data.id);
};
type Backend = {
rundown: OntimeRundown;
project: ProjectData;
userFields: UserFields;
};
export async function postPreviewExcel(file: File, setProgress: (value: number) => void, options?: UploadDataOptions) {
const formData = new FormData();
formData.append('userFile', file);
const response = await axios
.post(`${ontimeURL}/previewExcel`, formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
onUploadProgress: (progressEvent) => {
const complete = progressEvent?.total ? Math.round((progressEvent.loaded * 100) / progressEvent.total) : 0;
setProgress(complete);
},
})
.then((response) => response);
formData.append('options', JSON.stringify(options));
console.log('appending options', options);
const response: AxiosResponse<Backend> = await axios.post(`${ontimeURL}/previewExcel`, formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
onUploadProgress: (progressEvent) => {
const complete = progressEvent?.total ? Math.round((progressEvent.loaded * 100) / progressEvent.total) : 0;
setProgress(complete);
},
});
return response;
}
apps/client/src/common/components/import-preview/PreviewColumn.module.scss
+1 -3
View File
@@ -9,16 +9,14 @@
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: repeat(6, auto);
gap: 1px;
font-size: calc(1rem - 2px);
}
.field {
font-weight: 200;
@include pad-item;
background-color: $gray-100;
}
.value {
@include pad-item;
background-color: $gray-50;
}
apps/client/src/common/components/import-preview/PreviewRundown.tsx
+52 -18
View File
@@ -1,4 +1,5 @@
import { isOntimeEvent, OntimeRundown } from 'ontime-types';
import { ReactNode } from 'react';
import { isOntimeEvent, OntimeRundown, UserFields } from 'ontime-types';
import { millisToString } from 'ontime-utils';
import { getAccessibleColour } from '../../utils/styleUtils';
@@ -7,13 +8,14 @@ import style from './PreviewTable.module.scss';
interface PreviewRundownProps {
rundown: OntimeRundown;
userFields: UserFields;
}
function booleanToText(value?: boolean) {
return value ? 'Yes' : '';
return value ? 'Yes' : undefined;
}
export default function PreviewRundown({ rundown }: PreviewRundownProps) {
export default function PreviewRundown({ rundown, userFields }: PreviewRundownProps) {
return (
<div className={style.container}>
<div className={style.scrollContainer}>
@@ -35,16 +37,36 @@ export default function PreviewRundown({ rundown }: PreviewRundownProps) {
<th>Colour</th>
<th>Timer Type</th>
<th>End Action</th>
<th>user0</th>
<th>user1</th>
<th>user2</th>
<th>user3</th>
<th>user4</th>
<th>user5</th>
<th>user6</th>
<th>user7</th>
<th>user8</th>
<th>user9</th>
<th>
user0 <Tag>{userFields.user0}</Tag>
</th>
<th>
user1 <Tag>{userFields.user1}</Tag>
</th>
<th>
user2 <Tag>{userFields.user2}</Tag>
</th>
<th>
user3 <Tag>{userFields.user3}</Tag>
</th>
<th>
user4 <Tag>{userFields.user4}</Tag>
</th>
<th>
user5 <Tag>{userFields.user5}</Tag>
</th>
<th>
user6 <Tag>{userFields.user6}</Tag>
</th>
<th>
user7 <Tag>{userFields.user7}</Tag>
</th>
<th>
user8 <Tag>{userFields.user8}</Tag>
</th>
<th>
user9 <Tag>{userFields.user9}</Tag>
</th>
</tr>
</thead>
<tbody className={style.body}>
@@ -52,9 +74,13 @@ export default function PreviewRundown({ rundown }: PreviewRundownProps) {
const key = event.id;
if (isOntimeEvent(event)) {
const colour = event.colour ? getAccessibleColour(event.colour) : {};
const isPublic = booleanToText(event.isPublic);
const skip = booleanToText(event.skip);
return (
<tr key={key}>
<th>{index + 1}</th>
<th>
<Tag>{index + 1}</Tag>
</th>
<th>Event</th>
<th>{event.cue}</th>
<th>{event.title}</th>
@@ -64,11 +90,15 @@ export default function PreviewRundown({ rundown }: PreviewRundownProps) {
<th>{millisToString(event.timeStart)}</th>
<th>{millisToString(event.timeEnd)}</th>
<th>{millisToString(event.duration)}</th>
<th>{booleanToText(event.isPublic)}</th>
<th>{booleanToText(event.skip)}</th>
<th>{isPublic && <Tag>{isPublic}</Tag>}</th>
<th>{skip && <Tag>{skip}</Tag>}</th>
<th style={{ ...colour }}>{event.colour}</th>
<th>{event.timerType}</th>
<th>{event.endAction}</th>
<th>
<Tag>{event.timerType}</Tag>
</th>
<th>
<Tag>{event.endAction}</Tag>
</th>
<th>{event.user0}</th>
<th>{event.user1}</th>
<th>{event.user2}</th>
@@ -90,3 +120,7 @@ export default function PreviewRundown({ rundown }: PreviewRundownProps) {
</div>
);
}
function Tag({ children }: { children: ReactNode }) {
return <span className={style.tag}>{children}</span>;
}
apps/client/src/common/components/import-preview/PreviewTable.module.scss
+26 -5
View File
@@ -2,7 +2,8 @@
.container {
max-width: 100%;
max-height: 40vh;
max-height: max(300px, 30vh);
overflow: scroll;
}
.scrollContainer {
@@ -11,6 +12,7 @@
.rundownPreview {
font-size: calc(1rem - 2px);
border-collapse: separate;
}
.header,
@@ -19,16 +21,35 @@
font-weight: 400;
height: unset;
line-height: calc(1rem - 2px);
text-align: left;
white-space: nowrap;
padding-left: 0.25rem;
padding-right: 1rem;
}
}
.header {
background-color: $gray-100;
th {
font-weight: 200;
text-align: left;
}
tr {
word-wrap: unset;
}
}
.body {
tr:nth-child(even) {
tr:nth-child(odd) {
background-color: $gray-50;
}
}
}
.tag {
font-size: 10px;
background-color: $blue-500;
color: $pure-white;
border-radius: 2px;
padding: 0 0.25rem;
white-space: nowrap;
}
apps/client/src/features/modals/Modal.module.scss
+2 -2
View File
@@ -41,8 +41,8 @@ $el-padding-with-compensation: 24px; // 16 + 8
.title {
font-size: $inner-section-text-size;
color: $gray-500;
padding-left: 8px;
margin: 8px 0;
padding-left: 0.5rem;
margin: 0.5rem 0;
text-transform: uppercase;
}
apps/client/src/features/modals/upload-modal/CollapsableSection.module.scss
+22
View File
@@ -0,0 +1,22 @@
@use '../../../theme/v2Styles' as *;
@use '../../../theme/ontimeColours' as *;
.header {
font-size: $inner-section-text-size;
color: $gray-500;
padding-left: 0.5rem;
margin: 0.5rem 0;
text-transform: uppercase;
display: flex;
}
.moreExpanded {
transform: scaleY(-1);
transition: transform $transition-time-feedback;
}
.moreCollapsed {
transform: scaleY(1);
transition: transform $transition-time-feedback;
}
apps/client/src/features/modals/upload-modal/CollapsableSection.tsx
+23
View File
@@ -0,0 +1,23 @@
import { PropsWithChildren, useState } from 'react';
import { IoChevronUp } from '@react-icons/all-files/io5/IoChevronUp';
import style from './CollapsableSection.module.scss';
interface CollapsableSectionProps {
title: string;
}
export default function CollapsableSection(props: PropsWithChildren<CollapsableSectionProps>) {
const { title, children } = props;
const [collapsed, setCollapsed] = useState(false);
return (
<>
<div className={style.title} onClick={() => setCollapsed((prev) => !prev)}>
{title}
<IoChevronUp className={collapsed ? style.moreCollapsed : style.moreExpanded} />
</div>
{!collapsed && children}
</>
);
}
apps/client/src/features/modals/upload-modal/ReviewExcel.tsx
+25
View File
@@ -0,0 +1,25 @@
import { OntimeRundown, ProjectData, UserFields } from 'ontime-types';
import PreviewProjectData from '../../../common/components/import-preview/PreviewProjectData';
import PreviewRundown from '../../../common/components/import-preview/PreviewRundown';
import style from '../Modal.module.scss';
interface ReviewFileProps {
rundown: OntimeRundown;
project: ProjectData;
userFields: UserFields;
}
export default function ReviewFile(props: ReviewFileProps) {
const { rundown, project, userFields } = props;
return (
<div className={style.columnSection}>
<div className={style.title}>Review Project Data</div>
<PreviewProjectData project={project} />
<div className={style.title}>Review Rundown</div>
<PreviewRundown rundown={rundown} userFields={userFields} />
</div>
);
}
apps/client/src/features/modals/upload-modal/UploadFile.tsx
+58
View File
@@ -0,0 +1,58 @@
import { ChangeEvent, useRef, useState } from 'react';
import { Input } from '@chakra-ui/react';
import UploadEntry from './upload-entry/UploadEntry';
import { useUploadModalContextStore } from './uploadModalContext';
import { validateFile } from './uploadUtils';
import style from './UploadModal.module.scss';
export default function UploadFile() {
const fileInputRef = useRef<HTMLInputElement>(null);
const { file, setFile, progress } = useUploadModalContextStore();
const [errors, setErrors] = useState<string | undefined>();
const success = false;
const clearFile = () => {
setFile(null);
};
const handleFile = (event: ChangeEvent<HTMLInputElement>) => {
const fileSelected = event?.target?.files?.[0];
if (!fileSelected) return;
const validate = validateFile(fileSelected);
setErrors(validate.errors?.[0]);
if (validate.isValid) {
setFile(fileSelected);
} else {
setFile(null);
}
};
const handleClick = () => {
fileInputRef.current?.click();
};
return (
<>
<Input
ref={fileInputRef}
style={{ display: 'none' }}
type='file'
onChange={handleFile}
accept='.json, .xlsx'
data-testid='file-input'
/>
<div className={style.uploadArea} onClick={handleClick}>
Click to upload Ontime project or xlsx file
</div>
{(file || errors) && (
<UploadEntry file={file} errors={errors} progress={progress} success={success} handleClear={clearFile} />
)}
</>
);
}
apps/client/src/features/modals/upload-modal/UploadModal.module.scss
+15 -57
View File
@@ -5,79 +5,31 @@
.uploadBody {
display: flex;
flex-direction: column;
gap: 16px;
gap: 1rem;
}
.uploadArea {
margin: 0 auto;
width: 100%;
min-height: 200px;
border: 2px dashed $gray-50;
max-width: 550px;
min-height: 150px;
border: 2px dashed $gray-200;
border-radius: 3px;
display: grid;
place-content: center;
transition-property: background-color;
transition-duration: $transition-time-action;
font-size: calc(1rem - 1px);
&:hover {
border: 2px solid $blue-500;
background-color: $blue-50;
cursor: pointer;
}
&.comment {
color: gray;
}
}
.uploadedItem {
background-color: $gray-50;
padding: 8px;
display: grid;
grid-template-areas:
"icon title close"
"icon info ."
"progress progress progress";
grid-template-columns: auto 1fr auto;
column-gap: 16px;
border-radius: 3px;
.icon {
align-self: center;
grid-area: icon;
font-size: 32px;
color: $gray-700;
}
.fileTitle {
grid-area: title;
font-size: 14px;
color: $gray-1350;
}
.fileInfo {
grid-area: info;
font-size: 12px;
color: $gray-1100;
}
.fileProgress {
grid-area: progress;
}
.cancelUpload {
grid-area: close;
cursor: pointer;
}
&.error {
.icon {
color: $error-red;
}
}
&.success {
.icon {
color: $green-500;
}
color: $modal-note-color;
}
}
@@ -89,3 +41,9 @@
.pad {
margin: 8px;
}
.twoColumn {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
apps/client/src/features/modals/upload-modal/UploadModal.tsx
+120 -511
View File
@@ -1,7 +1,6 @@
import { ChangeEvent, useCallback, useRef, useState } from 'react';
import { useEffect, useRef, useState } from 'react';
import {
Button,
Input,
Modal,
ModalBody,
ModalCloseButton,
@@ -9,433 +8,35 @@ import {
ModalFooter,
ModalHeader,
ModalOverlay,
Progress,
Switch,
} from '@chakra-ui/react';
import { IoClose } from '@react-icons/all-files/io5/IoClose';
import { IoDocumentTextOutline } from '@react-icons/all-files/io5/IoDocumentTextOutline';
import { IoWarningOutline } from '@react-icons/all-files/io5/IoWarningOutline';
import { useQueryClient } from '@tanstack/react-query';
import { OntimeRundown } from 'ontime-types';
import { RUNDOWN_TABLE } from '../../../common/api/apiConstants';
import { postPreviewExcel, uploadData } from '../../../common/api/ontimeApi';
import PreviewProjectData from '../../../common/components/import-preview/PreviewProjectData';
import PreviewRundown from '../../../common/components/import-preview/PreviewRundown';
import PreviewUserField from '../../../common/components/import-preview/PreviewUserFields';
import { projectDataPlaceholder } from '../../../common/models/ProjectData';
import { userFieldsPlaceholder } from '../../../common/models/UserFields';
import { useEmitLog } from '../../../common/stores/logger';
import ModalSplitInput from '../ModalSplitInput';
import { cx } from '../../../common/utils/styleUtils';
import { validateFile } from './utils';
import ExcelFileOptions from './upload-options/ExcelFileOptions';
import OntimeFileOptions from './upload-options/OntimeFileOptions';
import UploadStepTracker from './upload-step/UploadStep';
import ReviewFile from './ReviewExcel';
import UploadFile from './UploadFile';
import { useUploadModalContextStore } from './uploadModalContext';
import { defaultExcelImportMap, ExcelImportMapKeys, isExcelFile, isOntimeFile } from './uploadUtils';
import style from './UploadModal.module.scss';
const rundownDemo: OntimeRundown = [
{
title: 'Albania',
subtitle: 'Sekret',
presenter: 'Ronela Hajati',
note: 'SF1.01',
endAction: 'none',
timerType: 'count-down',
timeStart: 36000000,
timeEnd: 37200000,
duration: 1200000,
isPublic: true,
skip: false,
colour: '',
user0: '',
user1: '',
user2: '',
user3: '',
user4: '',
user5: '',
user6: '',
user7: '',
user8: '',
user9: '',
type: 'event',
revision: 0,
id: '32d31',
cue: '1',
},
{
title: 'Latvia',
subtitle: 'Eat Your Salad',
presenter: 'Citi Zeni',
note: 'SF1.02',
endAction: 'none',
timerType: 'count-down',
timeStart: 37500000,
timeEnd: 38700000,
duration: 1200000,
isPublic: true,
skip: false,
colour: '',
user0: '',
user1: '',
user2: '',
user3: '',
user4: '',
user5: '',
user6: '',
user7: '',
user8: '',
user9: '',
type: 'event',
revision: 0,
id: '21cd2',
cue: '2',
},
{
title: 'Lithuania',
subtitle: 'Sentimentai',
presenter: 'Monika Liu',
note: 'SF1.03',
endAction: 'none',
timerType: 'count-down',
timeStart: 39000000,
timeEnd: 40200000,
duration: 1200000,
isPublic: true,
skip: false,
colour: '',
user0: '',
user1: '',
user2: '',
user3: '',
user4: '',
user5: '',
user6: '',
user7: '',
user8: '',
user9: '',
type: 'event',
revision: 0,
id: '0b371',
cue: '3',
},
{
title: 'Switzerland',
subtitle: 'Boys Do Cry',
presenter: 'Marius Bear',
note: 'SF1.04',
endAction: 'none',
timerType: 'count-down',
timeStart: 40500000,
timeEnd: 41700000,
duration: 1200000,
isPublic: true,
skip: false,
colour: '',
user0: '',
user1: '',
user2: '',
user3: '',
user4: '',
user5: '',
user6: '',
user7: '',
user8: '',
user9: '',
type: 'event',
revision: 0,
id: '3cd28',
cue: '4',
},
{
title: 'Slovenia',
subtitle: 'Disko',
presenter: 'LPS',
note: 'SF1.05',
endAction: 'none',
timerType: 'count-down',
timeStart: 42000000,
timeEnd: 43200000,
duration: 1200000,
isPublic: true,
skip: false,
colour: '',
user0: '',
user1: '',
user2: '',
user3: '',
user4: '',
user5: '',
user6: '',
user7: '',
user8: '',
user9: '',
type: 'event',
revision: 0,
id: 'e457f',
cue: '5',
},
{
title: 'Lunch break',
type: 'block',
id: '01e85',
},
{
title: 'Ukraine',
subtitle: 'Stefania',
presenter: 'Kalush Orchestra',
note: 'SF1.06',
endAction: 'none',
timerType: 'count-down',
timeStart: 47100000,
timeEnd: 48300000,
duration: 1200000,
isPublic: true,
skip: false,
colour: '',
user0: '',
user1: '',
user2: '',
user3: '',
user4: '',
user5: '',
user6: '',
user7: '',
user8: '',
user9: '',
type: 'event',
revision: 0,
id: '1c420',
cue: '6',
},
{
title: 'Bulgaria',
subtitle: 'Intention',
presenter: 'Intelligent Music Project',
note: 'SF1.07',
endAction: 'none',
timerType: 'count-down',
timeStart: 48600000,
timeEnd: 49800000,
duration: 1200000,
isPublic: true,
skip: false,
colour: '',
user0: '',
user1: '',
user2: '',
user3: '',
user4: '',
user5: '',
user6: '',
user7: '',
user8: '',
user9: '',
type: 'event',
revision: 0,
id: 'b7737',
cue: '7',
},
{
title: 'Netherlands',
subtitle: 'De Diepte',
presenter: 'S10',
note: 'SF1.08',
endAction: 'none',
timerType: 'count-down',
timeStart: 50100000,
timeEnd: 51300000,
duration: 1200000,
isPublic: true,
skip: false,
colour: '',
user0: '',
user1: '',
user2: '',
user3: '',
user4: '',
user5: '',
user6: '',
user7: '',
user8: '',
user9: '',
type: 'event',
revision: 0,
id: 'd3a80',
cue: '8',
},
{
title: 'Moldova',
subtitle: 'Trenuletul',
presenter: 'Zdob si Zdub',
note: 'SF1.09',
endAction: 'none',
timerType: 'count-down',
timeStart: 51600000,
timeEnd: 52800000,
duration: 1200000,
isPublic: true,
skip: false,
colour: '',
user0: '',
user1: '',
user2: '',
user3: '',
user4: '',
user5: '',
user6: '',
user7: '',
user8: '',
user9: '',
type: 'event',
revision: 0,
id: '8276c',
cue: '9',
},
{
title: 'Portugal',
subtitle: 'Saudade Saudade',
presenter: 'Maro',
note: 'SF1.10',
endAction: 'none',
timerType: 'count-down',
timeStart: 53100000,
timeEnd: 54300000,
duration: 1200000,
isPublic: true,
skip: false,
colour: '',
user0: '',
user1: '',
user2: '',
user3: '',
user4: '',
user5: '',
user6: '',
user7: '',
user8: '',
user9: '',
type: 'event',
revision: 0,
id: '2340b',
cue: '10',
},
{
title: 'Afternoon break',
type: 'block',
id: 'cb90b',
},
{
title: 'Croatia',
subtitle: 'Guilty Pleasure',
presenter: 'Mia Dimsic',
note: 'SF1.11',
endAction: 'none',
timerType: 'count-down',
timeStart: 56100000,
timeEnd: 57300000,
duration: 1200000,
isPublic: true,
skip: false,
colour: '',
user0: '',
user1: '',
user2: '',
user3: '',
user4: '',
user5: '',
user6: '',
user7: '',
user8: '',
user9: '',
type: 'event',
revision: 0,
id: '503c4',
cue: '11',
},
{
title: 'Denmark',
subtitle: 'The Show',
presenter: 'Reddi',
note: 'SF1.12',
endAction: 'none',
timerType: 'count-down',
timeStart: 57600000,
timeEnd: 58800000,
duration: 1200000,
isPublic: true,
skip: false,
colour: '',
user0: '',
user1: '',
user2: '',
user3: '',
user4: '',
user5: '',
user6: '',
user7: '',
user8: '',
user9: '',
type: 'event',
revision: 0,
id: '5e965',
cue: '12',
},
{
title: 'Austria',
subtitle: 'Halo',
presenter: 'LUM!X & Pia Maria',
note: 'SF1.13',
endAction: 'none',
timerType: 'count-down',
timeStart: 59100000,
timeEnd: 60300000,
duration: 1200000,
isPublic: true,
skip: false,
colour: '',
user0: '',
user1: '',
user2: '',
user3: '',
user4: '',
user5: '',
user6: '',
user7: '',
user8: '',
user9: '',
type: 'event',
revision: 0,
id: 'bab4a',
cue: '13',
},
{
title: 'Greece',
subtitle: 'Die Together',
presenter: 'Amanda Tenfjord',
note: 'SF1.14',
endAction: 'none',
timerType: 'count-down',
timeStart: 60600000,
timeEnd: 61800000,
duration: 1200000,
isPublic: true,
skip: false,
colour: '',
user0: '',
user1: '',
user2: '',
user3: '',
user4: '',
user5: '',
user6: '',
user7: '',
user8: '',
user9: '',
type: 'event',
revision: 0,
id: 'd3eb1',
cue: '14',
},
];
export type UploadStep = 'upload' | 'review';
export interface OntimeInputOptions {
onlyImportRundown?: boolean;
}
export type ExcelInputOptions = {
[K in ExcelImportMapKeys]: string;
};
interface UploadModalProps {
onClose: () => void;
@@ -444,73 +45,106 @@ interface UploadModalProps {
export default function UploadModal({ onClose, isOpen }: UploadModalProps) {
const queryClient = useQueryClient();
const { emitError } = useEmitLog();
const [errors, setErrors] = useState<string | undefined>();
const [isSubmitting, setSubmitting] = useState(false);
const [file, setFile] = useState<File | null>(null);
const [progress, setProgress] = useState(0);
const overrideOptionRef = useRef<HTMLInputElement>(null);
const fileInputRef = useRef<HTMLInputElement>(null);
const [success, setSuccess] = useState(false);
const handleFile = useCallback((event: ChangeEvent<HTMLInputElement>) => {
const fileUploaded = event?.target?.files?.[0];
if (!fileUploaded) return;
const { file, setProgress, clear } = useUploadModalContextStore();
const validate = validateFile(fileUploaded);
setErrors(validate.errors?.[0]);
const [uploadStep, setUploadStep] = useState<UploadStep>('upload');
const [submitting, setSubmitting] = useState(false);
const [rundown, setRundown] = useState<OntimeRundown>([]);
const [userFields, setUserFields] = useState(userFieldsPlaceholder);
const [project, setProject] = useState(projectDataPlaceholder);
if (validate.isValid) {
setFile(fileUploaded);
} else {
setFile(null);
}
}, []);
const [errors, setErrors] = useState('');
const handleSubmit = useCallback(async () => {
setSubmitting(true);
console.log(file);
const ontimeFileOptions = useRef<Partial<OntimeInputOptions>>({});
const excelFileOptions = useRef<Partial<ExcelInputOptions>>(defaultExcelImportMap);
useEffect(() => {
clear();
setUploadStep('upload');
setSubmitting(false);
setRundown([]);
setUserFields(userFieldsPlaceholder);
setProject(projectDataPlaceholder);
setErrors('');
}, [clear, isOpen]);
const handleParse = async () => {
if (file) {
// not the most robust, but ok for now
if (file.name.endsWith('.xlsx')) {
console.log('pushing to preview');
const r = await postPreviewExcel(file, setProgress, {});
console.log('got from preview', r);
} else {
try {
const options = {
onlyRundown: overrideOptionRef.current?.checked || false,
};
await uploadData(file, setProgress, options);
} catch (error) {
emitError(`Failed uploading file: ${error}`);
} finally {
setSubmitting(true);
try {
if (isOntimeFile(file)) {
await handleOntimeFile(file);
await queryClient.invalidateQueries(RUNDOWN_TABLE);
setSuccess(true);
} else if (isExcelFile(file)) {
await handleExcelFile(file);
}
} catch (error) {
setErrors(`Failed uploading file: ${error}`);
} finally {
setSubmitting(false);
}
}
setSubmitting(false);
}, [emitError, file, queryClient]);
const handleClick = () => {
fileInputRef.current?.click();
};
async function handleExcelFile(file: File) {
const options = excelFileOptions.current;
// TODO: option type should be central, to also be used by backend
const response = await postPreviewExcel(file, setProgress, options);
if (response.status === 200) {
setRundown(response.data.rundown);
setUserFields(response.data.userFields);
setProject(response.data.project);
setUploadStep('review');
}
}
const clearFile = () => {
setFile(null);
async function handleOntimeFile(file: File) {
const options = {
onlyRundown: Boolean(ontimeFileOptions.current.onlyImportRundown),
};
await uploadData(file, setProgress, options);
}
};
const handleClose = () => {
clearFile();
setSuccess(false);
setErrors(undefined);
setProgress(0);
clear();
setRundown([]);
setUserFields(userFieldsPlaceholder);
setProject(projectDataPlaceholder);
onClose();
};
const disableSubmit = !file || isSubmitting;
const handleFinalise = async () => {
if (file) {
setSubmitting(true);
try {
const options = {
//onlyRundown: overrideOptionRef.current?.checked || false,
};
await uploadData(file, setProgress, options);
handleClose();
} catch (error) {
console.error(error);
} finally {
await queryClient.invalidateQueries(RUNDOWN_TABLE);
setSubmitting(false);
}
}
};
const isUpload = uploadStep === 'upload';
const isExcel = isExcelFile(file);
const isOntime = isOntimeFile(file);
const handleGoBack = isUpload ? undefined : () => setUploadStep('upload');
const handleSubmit = isUpload ? handleParse : handleFinalise;
const disableSubmit = isUpload && !file;
const disableGoBack = isUpload;
const submitText = isUpload ? 'Upload' : 'Finish';
const modalClasses = cx([style.modalWidthOverride, isExcel ? style.doExtend : null]);
console.log('debug', isExcel, modalClasses);
return (
<Modal
onClose={handleClose}
@@ -520,68 +154,43 @@ export default function UploadModal({ onClose, isOpen }: UploadModalProps) {
size='xl'
scrollBehavior='inside'
preserveScrollBarGap
variant='ontime-small'
variant='ontime-upload'
>
<ModalOverlay />
<ModalContent>
<ModalHeader>File import</ModalHeader>
<ModalCloseButton />
<ModalBody className={style.uploadBody}>
<Input
ref={fileInputRef}
style={{ display: 'none' }}
type='file'
onChange={handleFile}
accept='.json, .xlsx'
data-testid='file-input'
/>
<div className={style.uploadArea} onClick={handleClick}>
Click to upload Ontime project file
</div>
{file && (
<div className={`${style.uploadedItem} ${success ? style.success : ''}`}>
<IoClose className={style.cancelUpload} onClick={clearFile} />
<IoDocumentTextOutline className={style.icon} />
<span className={style.fileTitle}>{file.name}</span>
<span className={style.fileInfo}>{`${(file.size / 1024).toFixed(2)}kb - ${file.type}`}</span>
<Progress variant='ontime-on-light' className={style.fileProgress} value={progress} />
</div>
{isExcel && <UploadStepTracker uploadStep={uploadStep} />}
{uploadStep === 'upload' ? (
<>
<UploadFile />
{errors && <div className={style.error}>{errors}</div>}
{isOntime && <OntimeFileOptions optionsRef={ontimeFileOptions} />}
{isExcel && <ExcelFileOptions optionsRef={excelFileOptions} />}
</>
) : (
<ReviewFile rundown={rundown} project={project} userFields={userFields} />
)}
{errors && (
<div className={`${style.uploadedItem} ${style.error}`}>
<IoWarningOutline className={style.icon} />
<span className={style.fileTitle}>{errors}</span>
<span className={style.fileInfo}>Please try again</span>
<Progress className={style.fileProgress} value={progress} />
</div>
)}
<div className={style.uploadOptions}>
<span className={style.title}>Import options</span>
<ModalSplitInput
field=''
title='Only import rundown'
description='All other options, including application settings will be discarded'
>
<Switch variant='ontime-on-light' ref={overrideOptionRef} />
</ModalSplitInput>
</div>
<PreviewProjectData project={projectDataPlaceholder} />
<PreviewUserField userFields={userFieldsPlaceholder} />
<PreviewRundown rundown={rundownDemo} />
</ModalBody>
<ModalFooter className={`${style.buttonSection} ${style.pad}`}>
<Button onClick={handleClose} isDisabled={isSubmitting} variant='ontime-ghost-on-light' size='sm'>
Cancel
<Button
onClick={handleGoBack}
isDisabled={disableGoBack || submitting}
variant='ontime-ghost-on-light'
size='sm'
>
Go Back
</Button>
<Button
onClick={handleSubmit}
isLoading={isSubmitting}
isLoading={submitting}
isDisabled={disableSubmit}
variant='ontime-filled'
padding='0 2em'
size='sm'
>
Import
{submitText}
</Button>
</ModalFooter>
</ModalContent>
apps/client/src/features/modals/upload-modal/upload-entry/UploadEntry.module.scss
+59
View File
@@ -0,0 +1,59 @@
@use '../../../../theme/ontimeColours' as *;
@use '../../../../theme/v2Styles' as *;
.uploadedItem {
margin: 0 auto;
width: 100%;
max-width: 550px;
border: 1px solid $gray-200;
padding: 0.5rem;
display: grid;
grid-template-areas:
"icon title close"
"icon info ."
"progress progress progress";
grid-template-columns: auto 1fr auto;
column-gap: 1rem;
border-radius: 3px;
.icon {
align-self: center;
grid-area: icon;
font-size: 2rem;
color: $gray-700;
}
.fileTitle {
grid-area: title;
font-size: calc(1rem - 2px);
color: $ui-black;
}
.fileInfo {
grid-area: info;
font-size: calc(1rem - 4px);
color: $gray-1100;
}
.fileProgress {
grid-area: progress;
}
.cancelUpload {
grid-area: close;
cursor: pointer;
}
&.error {
.icon {
color: $error-red;
}
}
&.success {
.icon {
color: $green-500;
}
}
}
apps/client/src/features/modals/upload-modal/upload-entry/UploadEntry.tsx
+53
View File
@@ -0,0 +1,53 @@
import { Progress } from '@chakra-ui/react';
import { IoClose } from '@react-icons/all-files/io5/IoClose';
import { IoDocumentTextOutline } from '@react-icons/all-files/io5/IoDocumentTextOutline';
import { IoWarningOutline } from '@react-icons/all-files/io5/IoWarningOutline';
import { isExcelFile, isOntimeFile } from '../uploadUtils';
import style from './UploadEntry.module.scss';
interface UploadEntryProps {
file: File | null;
errors?: string;
progress: number;
success: boolean;
handleClear: () => void;
}
export default function UploadEntry(props: UploadEntryProps) {
const { file, errors, progress, success, handleClear } = props;
if (errors) {
return (
<div className={`${style.uploadedItem} ${style.error}`}>
<IoWarningOutline className={style.icon} />
<span className={style.fileTitle}>{errors}</span>
<span className={style.fileInfo}>Please try again</span>
<Progress className={style.fileProgress} value={progress} />
</div>
);
}
if (file) {
const fileSize = `${(file.size / 1024).toFixed(2)}kb`;
let fileType = '';
if (isOntimeFile(file)) {
fileType = 'Ontime Project File';
} else if (isExcelFile(file)) {
fileType = 'Excel Rundown';
}
return (
<div className={`${style.uploadedItem} ${success ? style.success : ''}`}>
<IoClose className={style.cancelUpload} onClick={handleClear} />
<IoDocumentTextOutline className={style.icon} />
<span className={style.fileTitle}>{file.name}</span>
<span className={style.fileInfo}>{`${fileSize} - ${fileType}`}</span>
<Progress variant='ontime-on-light' className={style.fileProgress} value={progress} />
</div>
);
}
return null;
}
apps/client/src/features/modals/upload-modal/upload-options/ExcelFileOptions.tsx
+78
View File
@@ -0,0 +1,78 @@
import { MutableRefObject } from 'react';
import { Input } from '@chakra-ui/react';
import ModalSplitInput from '../../ModalSplitInput';
import ImportMapTable, { type TableEntry } from './ImportMapTable';
import { ExcelInputOptions } from '../UploadModal';
import style from '../UploadModal.module.scss';
interface ExcelFileOptionsProps {
optionsRef: MutableRefObject<ExcelInputOptions>;
}
export default function ExcelFileOptions(props: ExcelFileOptionsProps) {
const { optionsRef } = props;
const updateRef = <T extends keyof ExcelInputOptions>(field: T, value: ExcelInputOptions[T]) => {
// avoid unnecessary changes
if (optionsRef.current[field] !== value) {
optionsRef.current = { ...optionsRef.current, [field]: value };
}
};
const worksheet: TableEntry[] = [{ label: 'Worksheet', title: 'worksheet', value: optionsRef.current.worksheet }];
const timings: TableEntry[] = [
{ label: 'Start time', title: 'timeStart', value: optionsRef.current.timeStart },
{ label: 'End Time', title: 'timeEnd', value: optionsRef.current.timeEnd },
{ label: 'Duration', title: 'duration', value: optionsRef.current.duration },
];
const titles: TableEntry[] = [
{ label: 'Cue', title: 'cue', value: optionsRef.current.cue },
{ label: 'Colour', title: 'colour', value: optionsRef.current.colour },
{ label: 'Title', title: 'title', value: optionsRef.current.title },
{ label: 'Presenter', title: 'presenter', value: optionsRef.current.presenter },
{ label: 'Subtitle', title: 'subtitle', value: optionsRef.current.subtitle },
{ label: 'Note', title: 'note', value: optionsRef.current.note },
];
const options: TableEntry[] = [
{ label: 'Is Public', title: 'isPublic', value: optionsRef.current.isPublic },
{ label: 'Timer Type', title: 'timerType', value: optionsRef.current.timerType },
{ label: 'End Action', title: 'endAction', value: optionsRef.current.endAction },
];
const userFields: TableEntry[] = [
{ label: 'User 0', title: 'user0', value: optionsRef.current.user0 },
{ label: 'User 1', title: 'user1', value: optionsRef.current.user1 },
{ label: 'User 2', title: 'user2', value: optionsRef.current.user2 },
{ label: 'User 3', title: 'user3', value: optionsRef.current.user3 },
{ label: 'User 4', title: 'user4', value: optionsRef.current.user4 },
{ label: 'User 5', title: 'user5', value: optionsRef.current.user5 },
{ label: 'User 6', title: 'user6', value: optionsRef.current.user6 },
{ label: 'User 7', title: 'user7', value: optionsRef.current.user7 },
{ label: 'User 8', title: 'user8', value: optionsRef.current.user8 },
{ label: 'User 9', title: 'user9', value: optionsRef.current.user9 },
];
return (
<div className={style.uploadOptions}>
<div className={style.twoColumn}>
<ImportMapTable title='Import options' fields={worksheet} handleOnChange={updateRef} />
</div>
<div className={style.twoColumn}>
<ImportMapTable title='Timings' fields={timings} handleOnChange={updateRef} />
<ImportMapTable title='Options' fields={options} handleOnChange={updateRef} />
</div>
<div className={style.twoColumn}>
<ImportMapTable title='Titles' fields={titles} handleOnChange={updateRef} />
<ImportMapTable title='User Fields' fields={userFields} handleOnChange={updateRef} />
</div>
</div>
);
}
apps/client/src/features/modals/upload-modal/upload-options/ImportMapTable.module.scss
+22
View File
@@ -0,0 +1,22 @@
@use '../../../../theme/v2Styles' as *;
@use '../../../../theme/ontimeColours' as *;
.importTable {
margin: 0.5rem;
font-size: $inner-section-text-size;
height: fit-content;
thead {
color: $gray-500;
text-transform: uppercase;
}
tr:hover {
background-color: $gray-50;
}
}
.label {
display: inline-block;
width: 100%;
}
apps/client/src/features/modals/upload-modal/upload-options/ImportMapTable.tsx
+50
View File
@@ -0,0 +1,50 @@
import { Input } from '@chakra-ui/react';
import { ExcelInputOptions } from '../UploadModal';
import style from './ImportMapTable.module.scss';
// TODO: make this generic
export type TableEntry = { label: string; title: keyof ExcelInputOptions; value: string };
interface ImportMapTableProps {
title: string;
fields: TableEntry[];
handleOnChange: (field: keyof ExcelInputOptions, value: string) => void;
}
export default function ImportMapTable(props: ImportMapTableProps) {
const { title, fields, handleOnChange } = props;
return (
<table className={style.importTable}>
<thead>{title}</thead>
<tbody>
{fields.map((field) => {
return (
<tr key={field.title}>
<td>
<label className={style.label} htmlFor={field.title}>
{field.title}
</label>
</td>
<td>
<Input
id={field.title}
size='xs'
variant='ontime-filled-on-light'
maxLength={25}
defaultValue={field.value}
placeholder='Use default column name'
onBlur={(event) => {
handleOnChange(field.title, event.target.value);
}}
/>
</td>
</tr>
);
})}
</tbody>
</table>
);
}
apps/client/src/features/modals/upload-modal/upload-options/OntimeFileOptions.tsx
+37
View File
@@ -0,0 +1,37 @@
import { MutableRefObject } from 'react';
import { Switch } from '@chakra-ui/react';
import ModalSplitInput from '../../ModalSplitInput';
import { OntimeInputOptions } from '../UploadModal';
import style from '../UploadModal.module.scss';
interface OntimeFileOptionsProps {
optionsRef: MutableRefObject<OntimeInputOptions>;
}
export default function OntimeFileOptions(props: OntimeFileOptionsProps) {
const { optionsRef } = props;
const updateRef = <T extends keyof OntimeInputOptions>(field: T, value: OntimeInputOptions[T]) => {
optionsRef.current = { ...optionsRef.current, [field]: value };
};
return (
<div className={style.uploadOptions}>
<span className={style.title}>Import options</span>
<ModalSplitInput
field=''
title='Only import rundown'
description='All other options, including application settings will be discarded'
>
<Switch
variant='ontime-on-light'
onChange={(e) => {
updateRef('onlyImportRundown', e.target.checked);
}}
/>
</ModalSplitInput>
</div>
);
}
apps/client/src/features/modals/upload-modal/upload-step/UploadStep.module.scss
+40
View File
@@ -0,0 +1,40 @@
@use '../../../../theme/ontimeColours' as *;
@mixin row {
display: flex;
align-items: center;
gap: 0.25rem;
padding: 0 0.25rem;
}
.stepRow {
display: flex;
gap: 2rem;
align-items: center;
margin: 0 auto;
font-size: 1rem;
}
.idle {
@include row;
color: $blue-500;
}
.inactive {
@include row;
color: $gray-700;
}
.active {
@include row;
color: $blue-700;
}
.inactiveIcon {
color: $gray-700;
}
.activeIcon {
color: $blue-500;
}
apps/client/src/features/modals/upload-modal/upload-step/UploadStep.tsx
+26
View File
@@ -0,0 +1,26 @@
import { IoCheckmarkCircle } from '@react-icons/all-files/io5/IoCheckmarkCircle';
import { IoChevronForward } from '@react-icons/all-files/io5/IoChevronForward';
import { IoEllipseOutline } from '@react-icons/all-files/io5/IoEllipseOutline';
import type { UploadStep } from '../UploadModal';
import style from './UploadStep.module.scss';
export default function UploadStepTracker({ uploadStep }: { uploadStep: UploadStep }) {
const isUpload = uploadStep === 'upload';
const isReview = uploadStep === 'review';
return (
<div className={style.stepRow}>
<div className={isUpload ? style.active : style.idle}>
<IoCheckmarkCircle />
Upload
</div>
<IoChevronForward className={isReview ? style.activeIcon : style.inactiveIcon} />
<div className={isReview ? style.active : style.inactive}>
{isReview ? <IoCheckmarkCircle /> : <IoEllipseOutline />}
Review
</div>
</div>
);
}
apps/client/src/features/modals/upload-modal/uploadModalContext.tsx
+21
View File
@@ -0,0 +1,21 @@
import { create } from 'zustand';
type UploadModalContext = {
file: File | null;
setFile: (file: File | null) => void;
progress: number;
setProgress: (progress: number) => void;
clear: () => void;
};
export const useUploadModalContextStore = create<UploadModalContext>((set) => ({
file: null,
setFile: (file: File | null) => set({ file }),
progress: 0,
setProgress: (progress: number) => set({ progress }),
clear: () => set({ file: null, progress: 0 }),
}));
apps/client/src/features/modals/upload-modal/uploadUtils.ts
+70
View File
@@ -0,0 +1,70 @@
type ValidationStatus = {
errors: string[];
isValid: boolean;
};
export function validateFile(file: File): ValidationStatus {
const status: ValidationStatus = { errors: [], isValid: true };
if (!file) {
status.errors.push('No file to upload');
status.isValid = false;
}
// Limit file size to 1MB
if (file.size > 1000000) {
status.errors.push('File size limit (1MB) exceeded');
status.isValid = false;
}
// Check file extension
if (!file.name.endsWith('.xlsx') && !file.name.endsWith('.json')) {
status.errors.push('Unhandled file type');
status.isValid = false;
}
return status;
}
export type MaybeFile = null | 'ontime' | 'excel';
export function isExcelFile(file: File | null) {
return file?.name.endsWith('.xlsx');
}
export function isOntimeFile(file: File | null) {
return file?.name.endsWith('.json');
}
export type ExcelImportMapKeys = keyof typeof defaultExcelImportMap;
export const defaultExcelImportMap = {
worksheet: 'ontime',
projectName: 'project name',
projectDescription: 'project description',
publicUrl: 'public url',
publicInfo: 'public info',
backstageUrl: 'backstage url',
backstageInfo: 'backstage info',
timeStart: 'start',
timeEnd: 'end',
duration: 'duration',
cue: 'cue',
title: 'title',
presenter: 'presenter',
subtitle: 'subtitle',
isPublic: 'public',
skip: 'skip',
note: 'note',
colour: 'colour',
endAction: 'end action',
timerType: 'timer type',
user0: 'user0',
user1: 'user1',
user2: 'user2',
user3: 'user3',
user4: 'user4',
user5: 'user5',
user6: 'user6',
user7: 'user7',
user8: 'user8',
user9: 'user9',
};
apps/client/src/features/modals/upload-modal/utils.ts
-25
View File
@@ -1,25 +0,0 @@
type ValidationStatus = {
errors: string[];
isValid: boolean;
};
export function validateFile(file: File): ValidationStatus {
const status: ValidationStatus = { errors: [], isValid: true };
if (!file) {
status.errors.push('No file to upload');
status.isValid = false;
}
// Limit file size to 1MB
if (file.size > 1000000) {
status.errors.push('File size limit (1MB) exceeded');
status.isValid = false;
}
// Check file extension
if (!file.name.endsWith('.xlsx') && !file.name.endsWith('.json')) {
status.errors.push('Unhandled file type');
status.isValid = false;
}
return status;
}
apps/client/src/theme/OntimeProgress.ts
+8
View File
@@ -0,0 +1,8 @@
export const ontimeProgressGray = {
track: {
background: '#f6f6f6', // $gray-500
},
filledTrack: {
background: '#578AF4', // $blue-500
},
};
apps/client/src/theme/ontimeModal.ts
+17 -5
View File
@@ -2,8 +2,8 @@ export const ontimeModal = {
header: {
fontWeight: 400,
letterSpacing: '0.3px',
padding: '16px 24px',
fontSize: '20px',
padding: '1rem 1.5rem',
fontSize: '1.25rem',
color: '#202020', // $gray-50
},
dialog: {
@@ -20,17 +20,29 @@ export const ontimeModal = {
color: '#202020', // $gray-50
},
footer: {
padding: '8px',
padding: '0.5rem',
},
};
export const ontimeSmallModal = {
...ontimeModal,
body: {
padding: '16px',
fontSize: '14px',
padding: '1rem',
fontSize: 'calc(1rem - 2px)',
},
dialog: {
minHeight: 'min(200px, 10vh)',
},
};
export const ontimeUploadModal = {
...ontimeSmallModal,
body: {
padding: '1rem',
fontSize: 'calc(1rem - 2px)',
},
dialog: {
minHeight: 'min(200px, 10vh)',
maxWidth: 'min(800px, 80vh)',
},
};
apps/client/src/theme/theme.ts
+8 -1
View File
@@ -13,7 +13,8 @@ import {
import { ontimeCheckboxOnDark } from './ontimeCheckbox';
import { ontimeEditable } from './ontimeEditable';
import { ontimeMenuOnDark } from './ontimeMenu';
import { ontimeModal, ontimeSmallModal } from './ontimeModal';
import { ontimeModal, ontimeSmallModal, ontimeUploadModal } from './ontimeModal';
import { ontimeProgressGray } from './OntimeProgress';
import { ontimeBlockRadio } from './ontimeRadio';
import { ontimeSelect } from './ontimeSelect';
import { lightSwitch, ontimeSwitch } from './ontimeSwitch';
@@ -79,6 +80,12 @@ const theme = extendTheme({
variants: {
ontime: { ...ontimeModal },
'ontime-small': { ...ontimeSmallModal },
'ontime-upload': { ...ontimeUploadModal },
},
},
Progress: {
variants: {
'ontime-on-light': { ...ontimeProgressGray },
},
},
Radio: {
apps/electron/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "ontime",
"version": "2.7.2",
"version": "2.8.1-rc-table",
"author": "Carlos Valente",
"description": "Time keeping for live events",
"repository": "https://github.com/cpvalente/ontime",
apps/server/package.json
+1 -1
View File
@@ -2,7 +2,7 @@
"name": "ontime-server",
"type": "module",
"main": "src/index.ts",
"version": "2.7.2",
"version": "2.8.1-rc-table",
"exports": "./src/index.js",
"dependencies": {
"body-parser": "^1.20.0",
apps/server/src/controllers/ontimeController.ts
+2
View File
@@ -344,6 +344,8 @@ export async function previewExcel(req, res) {
return;
}
const options = req.query;
const options2 = JSON.parse(req.body.options);
console.log(options2);
const file = req.file.path;
try {
const data = await justUploadAndParse(file, req, res, options);
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "ontime",
"version": "2.7.2",
"version": "2.8.1-rc-table",
"description": "Time keeping for live events",
"keywords": [
"lighdev",