wip: upload review

apps/client/package.json

@@ -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/apiConstants.ts

@@ -1,5 +1,5 @@
 // REST stuff
-export const EVENT_DATA = ['eventdata'];
+export const PROJECT_DATA = ['project'];
 export const ALIASES = ['aliases'];
 export const USERFIELDS = ['userFields'];
 export const RUNDOWN_TABLE_KEY = 'rundown';
@@ -19,7 +19,7 @@ export const serverPort = isProduction ? location.port : STATIC_PORT;
 export const serverURL = `${location.protocol}//${location.hostname}:${serverPort}`;
 export const websocketUrl = `${socketProtocol}://${location.hostname}:${serverPort}/ws`;
 
-export const eventURL = `${serverURL}/eventdata`;
+export const projectDataURL = `${serverURL}/project`;
 export const rundownURL = `${serverURL}/events`;
 export const ontimeURL = `${serverURL}/ontime`;
 

apps/client/src/common/api/eventDataApi.ts

@@ -1,21 +0,0 @@
-import axios from 'axios';
-import { EventData } from 'ontime-types';
-
-import { eventURL } from './apiConstants';
-
-/**
- * @description HTTP request to fetch event data
- * @return {Promise}
- */
-export async function fetchEventData(): Promise<EventData> {
-  const res = await axios.get(eventURL);
-  return res.data;
-}
-
-/**
- * @description HTTP request to mutate event data
- * @return {Promise}
- */
-export async function postEventData(data: EventData) {
-  return axios.post(eventURL, data);
-}

apps/client/src/common/api/ontimeApi.ts

@@ -1,5 +1,14 @@
-import axios from 'axios';
+import axios, { AxiosResponse } from 'axios';
-import { Alias, EventData, OSCSettings, OscSubscription, Settings, UserFields, ViewSettings } from 'ontime-types';
+import {
+  Alias,
+  OntimeRundown,
+  OSCSettings,
+  OscSubscription,
+  ProjectData,
+  Settings,
+  UserFields,
+  ViewSettings,
+} from 'ontime-types';
 
 import { apiRepoLatest } from '../../externals';
 import { InfoType } from '../models/Info';
@@ -161,6 +170,31 @@ 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);
+  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;
+}
+
 export type HasUpdate = {
   url: string;
   version: string;
@@ -178,6 +212,6 @@ export async function getLatestVersion(): Promise<HasUpdate> {
   };
 }
 
-export async function postNew(initialData: Partial<EventData>) {
+export async function postNew(initialData: Partial<ProjectData>) {
   return axios.post(`${ontimeURL}/new`, initialData);
 }

apps/client/src/common/api/projectDataApi.ts

@@ -0,0 +1,21 @@
+import axios from 'axios';
+import { ProjectData } from 'ontime-types';
+
+import { projectDataURL } from './apiConstants';
+
+/**
+ * @description HTTP request to fetch project data
+ * @return {Promise}
+ */
+export async function getProjectData(): Promise<ProjectData> {
+  const res = await axios.get(projectDataURL);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to mutate project data
+ * @return {Promise}
+ */
+export async function postProjectData(data: ProjectData) {
+  return axios.post(projectDataURL, data);
+}

apps/client/src/common/components/import-preview/PreviewColumn.module.scss

@@ -0,0 +1,22 @@
+@use "../../../theme/_ontimeColours" as *;
+
+@mixin pad-item {
+  padding-left: 0.5rem;
+  padding-right: 1rem;
+}
+
+.previewTable {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: repeat(6, auto);
+  font-size: calc(1rem - 2px);
+}
+
+.field {
+  font-weight: 200;
+  @include pad-item;
+}
+
+.value {
+  @include pad-item;
+}

apps/client/src/common/components/import-preview/PreviewProjectData.tsx

@@ -0,0 +1,26 @@
+import { ProjectData } from 'ontime-types';
+
+import style from './PreviewColumn.module.scss';
+
+interface PreviewProjectDataProps {
+  project: ProjectData;
+}
+
+export default function PreviewProjectData({ project }: PreviewProjectDataProps) {
+  return (
+    <div className={style.previewTable}>
+      <span className={style.field}>Title</span>
+      <span className={style.value}>{project.title}</span>
+      <span className={style.field}>Description</span>
+      <span className={style.value}>{project.description}</span>
+      <span className={style.field}>Public URL</span>
+      <span className={style.value}>{project.publicUrl}</span>
+      <span className={style.field}>Public info</span>
+      <span className={style.value}>{project.publicInfo}</span>
+      <span className={style.field}>Backstage URL</span>
+      <span className={style.value}>{project.backstageUrl}</span>
+      <span className={style.field}>Backstage info</span>
+      <span className={style.value}>{project.backstageInfo}</span>
+    </div>
+  );
+}

apps/client/src/common/components/import-preview/PreviewRundown.tsx

@@ -0,0 +1,126 @@
+import { ReactNode } from 'react';
+import { isOntimeEvent, OntimeRundown, UserFields } from 'ontime-types';
+import { millisToString } from 'ontime-utils';
+
+import { getAccessibleColour } from '../../utils/styleUtils';
+
+import style from './PreviewTable.module.scss';
+
+interface PreviewRundownProps {
+  rundown: OntimeRundown;
+  userFields: UserFields;
+}
+
+function booleanToText(value?: boolean) {
+  return value ? 'Yes' : undefined;
+}
+
+export default function PreviewRundown({ rundown, userFields }: PreviewRundownProps) {
+  return (
+    <div className={style.container}>
+      <div className={style.scrollContainer}>
+        <table className={style.rundownPreview}>
+          <thead className={style.header}>
+            <tr>
+              <th>#</th>
+              <th>Type</th>
+              <th>Cue</th>
+              <th>Title</th>
+              <th>Subtitle</th>
+              <th>Presenter</th>
+              <th>Note</th>
+              <th>Time Start</th>
+              <th>Time End</th>
+              <th>Duration</th>
+              <th>Is Public</th>
+              <th>Skip</th>
+              <th>Colour</th>
+              <th>Timer Type</th>
+              <th>End Action</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}>
+            {rundown.map((event, index) => {
+              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>
+                      <Tag>{index + 1}</Tag>
+                    </th>
+                    <th>Event</th>
+                    <th>{event.cue}</th>
+                    <th>{event.title}</th>
+                    <th>{event.subtitle}</th>
+                    <th>{event.presenter}</th>
+                    <th>{event.note}</th>
+                    <th>{millisToString(event.timeStart)}</th>
+                    <th>{millisToString(event.timeEnd)}</th>
+                    <th>{millisToString(event.duration)}</th>
+                    <th>{isPublic && <Tag>{isPublic}</Tag>}</th>
+                    <th>{skip && <Tag>{skip}</Tag>}</th>
+                    <th style={{ ...colour }}>{event.colour}</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>
+                    <th>{event.user3}</th>
+                    <th>{event.user4}</th>
+                    <th>{event.user5}</th>
+                    <th>{event.user6}</th>
+                    <th>{event.user7}</th>
+                    <th>{event.user8}</th>
+                    <th>{event.user9}</th>
+                  </tr>
+                );
+              }
+              return null;
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+function Tag({ children }: { children: ReactNode }) {
+  return <span className={style.tag}>{children}</span>;
+}

apps/client/src/common/components/import-preview/PreviewTable.module.scss

@@ -0,0 +1,55 @@
+@use "../../../theme/_ontimeColours" as *;
+
+.container {
+  max-width: 100%;
+  max-height: max(300px, 30vh);
+  overflow: scroll;
+}
+
+.scrollContainer {
+  overflow-x: scroll;
+}
+
+.rundownPreview {
+  font-size: calc(1rem - 2px);
+  border-collapse: separate;
+}
+
+.header,
+.body {
+  th {
+    font-weight: 400;
+    height: unset;
+    line-height: calc(1rem - 2px);
+    white-space: nowrap;
+    padding-left: 0.25rem;
+    padding-right: 1rem;
+  }
+}
+
+.header {
+  th {
+    font-weight: 200;
+    text-align: left;
+  }
+
+  tr {
+    word-wrap: unset;
+  }
+}
+
+.body {
+
+  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/common/components/import-preview/PreviewUserFields.tsx

@@ -0,0 +1,34 @@
+import { UserFields } from 'ontime-types';
+
+import style from './PreviewColumn.module.scss';
+
+interface PreviewUserFieldProps {
+  userFields: UserFields;
+}
+
+export default function PreviewUserField({ userFields }: PreviewUserFieldProps) {
+  return (
+    <div className={style.previewTable}>
+      <span className={style.field}>user0</span>
+      <span className={style.value}>{userFields.user0}</span>
+      <span className={style.field}>user1</span>
+      <span className={style.value}>{userFields.user1}</span>
+      <span className={style.field}>user2</span>
+      <span className={style.value}>{userFields.user2}</span>
+      <span className={style.field}>user3</span>
+      <span className={style.value}>{userFields.user3}</span>
+      <span className={style.field}>user4</span>
+      <span className={style.value}>{userFields.user4}</span>
+      <span className={style.field}>user5</span>
+      <span className={style.value}>{userFields.user5}</span>
+      <span className={style.field}>user6</span>
+      <span className={style.value}>{userFields.user6}</span>
+      <span className={style.field}>user7</span>
+      <span className={style.value}>{userFields.user7}</span>
+      <span className={style.field}>user8</span>
+      <span className={style.value}>{userFields.user8}</span>
+      <span className={style.field}>user9</span>
+      <span className={style.value}>{userFields.user9}</span>
+    </div>
+  );
+}

apps/client/src/common/hooks-query/useProjectData.ts

@@ -1,15 +1,15 @@
 import { useQuery } from '@tanstack/react-query';
 
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
-import { EVENT_DATA } from '../api/apiConstants';
+import { PROJECT_DATA } from '../api/apiConstants';
-import { fetchEventData } from '../api/eventDataApi';
+import { getProjectData } from '../api/projectDataApi';
-import { eventDataPlaceholder } from '../models/EventData';
+import { projectDataPlaceholder } from '../models/ProjectData';
 
-export default function useEventData() {
+export default function useProjectData() {
   const { data, status, isFetching, isError, refetch } = useQuery({
-    queryKey: EVENT_DATA,
+    queryKey: PROJECT_DATA,
-    queryFn: fetchEventData,
+    queryFn: getProjectData,
-    placeholderData: eventDataPlaceholder,
+    placeholderData: projectDataPlaceholder,
     retry: 5,
     retryDelay: (attempt) => attempt * 2500,
     refetchInterval: queryRefetchIntervalSlow,

apps/client/src/common/models/ProjectData.ts

@@ -1,6 +1,6 @@
-import { EventData } from 'ontime-types';
+import { ProjectData } from 'ontime-types';
 
-export const eventDataPlaceholder: EventData = {
+export const projectDataPlaceholder: ProjectData = {
   title: '',
   description: '',
   publicUrl: '',

apps/client/src/features/cuesheet/CuesheetWrapper.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo } from 'react';
-import { EventData, OntimeRundownEntry } from 'ontime-types';
+import { OntimeRundownEntry, ProjectData } from 'ontime-types';
 
 import Empty from '../../common/components/state/Empty';
 import { useEventAction } from '../../common/hooks/useEventAction';
@@ -69,7 +69,7 @@ export default function CuesheetWrapper() {
   );
 
   const exportHandler = useCallback(
-    (headerData: EventData) => {
+    (headerData: ProjectData) => {
       if (!headerData || !rundown || !userFields) {
         return;
       }

apps/client/src/features/cuesheet/cuesheet-table-header/CuesheetTableHeader.tsx

@@ -3,12 +3,12 @@ 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 { EventData, Playback } from 'ontime-types';
+import { Playback, ProjectData } from 'ontime-types';
 import { formatDisplay } from 'ontime-utils';
 
 import useFullscreen from '../../../common/hooks/useFullscreen';
 import { useTimer } from '../../../common/hooks/useSocket';
-import useEventData from '../../../common/hooks-query/useEventData';
+import useProjectData from '../../../common/hooks-query/useProjectData';
 import { formatTime } from '../../../common/utils/time';
 import { tooltipDelayFast } from '../../../ontimeConfig';
 import { useCuesheetSettings } from '../store/CuesheetSettings';
@@ -17,7 +17,7 @@ import PlaybackIcon from '../tableElements/PlaybackIcon';
 import style from './CuesheetTableHeader.module.scss';
 
 interface CuesheetTableHeaderProps {
-  handleCSVExport: (headerData: EventData) => void;
+  handleCSVExport: (headerData: ProjectData) => void;
   featureData: {
     playback: Playback;
     selectedEventIndex: number | null;
@@ -33,11 +33,11 @@ export default function CuesheetTableHeader({ handleCSVExport, featureData }: Cu
   const toggleFollow = useCuesheetSettings((state) => state.toggleFollow);
   const timer = useTimer();
   const { isFullScreen, toggleFullScreen } = useFullscreen();
-  const { data: event } = useEventData();
+  const { data: project } = useProjectData();
 
   const exportCsv = () => {
-    if (event) {
+    if (project) {
-      handleCSVExport(event);
+      handleCSVExport(project);
     }
   };
 
@@ -58,7 +58,7 @@ export default function CuesheetTableHeader({ handleCSVExport, featureData }: Cu
   return (
     <div className={style.header}>
       <div className={style.event}>
-        <div className={style.title}>{event?.title || '-'}</div>
+        <div className={style.title}>{project?.title || '-'}</div>
         <div className={style.eventNow}>{featureData?.titleNow || '-'}</div>
       </div>
       <div className={style.playback}>

apps/client/src/features/cuesheet/cuesheetUtils.ts

@@ -1,5 +1,5 @@
 import { stringify } from 'csv-stringify/browser/esm/sync';
-import { EventData, OntimeEntryCommonKeys, OntimeRundown, UserFields } from 'ontime-types';
+import { OntimeEntryCommonKeys, OntimeRundown, ProjectData, UserFields } from 'ontime-types';
 import { millisToString } from 'ontime-utils';
 
 /**
@@ -38,10 +38,11 @@ export const parseField = (field: keyof OntimeRundown, data: unknown): string =>
  * @param {object} userFields
  * @return {(string[])[]}
  */
-export const makeTable = (headerData: EventData, rundown: OntimeRundown, userFields: UserFields): string[][] => {
+export const makeTable = (headerData: ProjectData, rundown: OntimeRundown, userFields: UserFields): string[][] => {
   const data = [
     ['Ontime · Schedule Template'],
-    ['Event Name', headerData?.title || ''],
+    ['Project Title', headerData?.title || ''],
+    ['Project Description', headerData?.description || ''],
     ['Public URL', headerData?.publicUrl || ''],
     ['Backstage URL', headerData?.backstageUrl || ''],
     [],

apps/client/src/features/info/info-header/InfoHeader.tsx

@@ -1,9 +1,9 @@
-import useEventData from '../../../common/hooks-query/useEventData';
+import useProjectData from '../../../common/hooks-query/useProjectData';
 
 import style from '../Info.module.scss';
 
 export default function InfoHeader({ selected }: { selected: string }) {
-  const { data } = useEventData();
+  const { data } = useProjectData();
 
   return (
     <>

apps/client/src/features/modals/Modal.module.scss

@@ -41,8 +41,8 @@ $el-padding-with-compensation: 24px; // 16 + 8
 .title {
   font-size: $inner-section-text-size;
   color: $gray-500;
-  padding-left: 8px;
+  padding-left: 0.5rem;
-  margin: 8px 0;
+  margin: 0.5rem 0;
   text-transform: uppercase;
 }
 

apps/client/src/features/modals/quick-start/QuickStart.tsx

@@ -16,12 +16,12 @@ import {
   ModalOverlay,
   Textarea,
 } from '@chakra-ui/react';
-import type { EventData } from 'ontime-types';
+import type { ProjectData } from 'ontime-types';
 
-import { EVENT_DATA, RUNDOWN_TABLE } from '../../../common/api/apiConstants';
+import { PROJECT_DATA, RUNDOWN_TABLE } from '../../../common/api/apiConstants';
 import { postNew } from '../../../common/api/ontimeApi';
-import useEventData from '../../../common/hooks-query/useEventData';
+import useProjectData from '../../../common/hooks-query/useProjectData';
-import { eventDataPlaceholder } from '../../../common/models/EventData';
+import { projectDataPlaceholder } from '../../../common/models/ProjectData';
 import { ontimeQueryClient } from '../../../common/queryClient';
 
 import styles from '../Modal.module.scss';
@@ -32,7 +32,7 @@ interface QuickStartProps {
 }
 
 export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
-  const { data, status } = useEventData();
+  const { data, status } = useProjectData();
   const {
     handleSubmit,
     register,
@@ -49,10 +49,10 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
     if (data) reset(data);
   }, [data, reset]);
 
-  const onSubmit = async (data: Partial<EventData>) => {
+  const onSubmit = async (data: Partial<ProjectData>) => {
     try {
       await postNew(data);
-      await ontimeQueryClient.invalidateQueries(EVENT_DATA);
+      await ontimeQueryClient.invalidateQueries(PROJECT_DATA);
       await ontimeQueryClient.invalidateQueries(RUNDOWN_TABLE);
 
       onClose();
@@ -61,7 +61,7 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
     }
   };
 
-  const onReset = () => reset(eventDataPlaceholder);
+  const onReset = () => reset(projectDataPlaceholder);
 
   const disableButtons = status !== 'success' || isSubmitting;
   return (
@@ -86,13 +86,13 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
               <div className={styles.column}>
                 <AlertTitle>Note</AlertTitle>
                 <AlertDescription>
-                  On submit, application options will be kept but rundown and event data will be reset
+                  On submit, application options will be kept but rundown and project data will be reset
                 </AlertDescription>
               </div>
             </Alert>
             <div className={styles.entryRow}>
               <label className={styles.sectionTitle}>
-                Event title
+                Project title
                 <Input
                   variant='ontime-filled-on-light'
                   size='sm'
@@ -104,7 +104,7 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
             </div>
             <div className={styles.entryRow}>
               <label className={styles.sectionTitle}>
-                Event description
+                Project description
                 <Input
                   variant='ontime-filled-on-light'
                   size='sm'
@@ -116,7 +116,7 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
             </div>
             <div className={styles.entryRow}>
               <label className={styles.sectionTitle}>
-                Public Info
+                Public info
                 <Textarea
                   variant='ontime-filled-on-light'
                   size='sm'
@@ -128,7 +128,7 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
             </div>
             <div className={styles.entryRow}>
               <label className={styles.sectionTitle}>
-                Public QR Code Url
+                Public QR code Url
                 <Input
                   variant='ontime-filled-on-light'
                   size='sm'
@@ -139,7 +139,7 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
             </div>
             <div className={styles.entryRow}>
               <label className={styles.sectionTitle}>
-                Backstage Info
+                Backstage info
                 <Textarea
                   variant='ontime-filled-on-light'
                   size='sm'
@@ -151,7 +151,7 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
             </div>
             <div className={styles.entryRow}>
               <label className={styles.sectionTitle}>
-                Backstage QR Code Url
+                Backstage QR code Url
                 <Input
                   variant='ontime-filled-on-light'
                   size='sm'

apps/client/src/features/modals/settings-modal/ProjectDataForm.tsx

@@ -1,11 +1,11 @@
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { Input, Textarea } from '@chakra-ui/react';
-import { EventData } from 'ontime-types';
+import { ProjectData } from 'ontime-types';
 
 import { logAxiosError } from '../../../common/api/apiUtils';
-import { postEventData } from '../../../common/api/eventDataApi';
+import { postProjectData } from '../../../common/api/projectDataApi';
-import useEventData from '../../../common/hooks-query/useEventData';
+import useProjectData from '../../../common/hooks-query/useProjectData';
 import ModalLoader from '../modal-loader/ModalLoader';
 import { inputProps } from '../modalHelper';
 import ModalInput from '../ModalInput';
@@ -13,14 +13,14 @@ import OntimeModalFooter from '../OntimeModalFooter';
 
 import style from './SettingsModal.module.scss';
 
-export default function EventDataForm() {
+export default function ProjectDataForm() {
-  const { data, status, isFetching, refetch } = useEventData();
+  const { data, status, isFetching, refetch } = useProjectData();
   const {
     handleSubmit,
     register,
     reset,
     formState: { errors, isSubmitting, isDirty, isValid },
-  } = useForm<EventData>({
+  } = useForm<ProjectData>({
     defaultValues: data,
     values: data,
     resetOptions: {
@@ -34,11 +34,11 @@ export default function EventDataForm() {
     }
   }, [data, reset]);
 
-  const onSubmit = async (formData: EventData) => {
+  const onSubmit = async (formData: ProjectData) => {
     try {
-      await postEventData(formData);
+      await postProjectData(formData);
     } catch (error) {
-      logAxiosError('Error saving event settings', error);
+      logAxiosError('Error saving project data', error);
     } finally {
       await refetch();
     }
@@ -55,10 +55,10 @@ export default function EventDataForm() {
   }
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)} id='event-data' className={style.sectionContainer}>
+    <form onSubmit={handleSubmit(onSubmit)} id='project-data' className={style.sectionContainer}>
       <ModalInput
         field='title'
-        title='Event title'
+        title='Project title'
         description='Shown in overview screens'
         error={errors.title?.message}
       >
@@ -73,7 +73,7 @@ export default function EventDataForm() {
       </ModalInput>
       <ModalInput
         field='description'
-        title='Event description'
+        title='Project description'
         description='Free field, shown in editor'
         error={errors.description?.message}
       >
@@ -87,7 +87,7 @@ export default function EventDataForm() {
         />
       </ModalInput>
       <div style={{ height: '16px' }} />
-      <ModalInput field='publicInfo' title='Public Info' description='Information shown in public screens'>
+      <ModalInput field='publicInfo' title='Public info' description='Information shown in public screens'>
         <Textarea
           {...inputProps}
           variant='ontime-filled-on-light'
@@ -107,7 +107,7 @@ export default function EventDataForm() {
         />
       </ModalInput>
       <div style={{ height: '16px' }} />
-      <ModalInput field='backstageInfo' title='Backstage Info' description='Information shown in public screens'>
+      <ModalInput field='backstageInfo' title='Backstage info' description='Information shown in public screens'>
         <Textarea
           {...inputProps}
           variant='ontime-filled-on-light'
@@ -128,7 +128,7 @@ export default function EventDataForm() {
         />
       </ModalInput>
       <OntimeModalFooter
-        formId='event-data'
+        formId='project-data'
         handleRevert={onReset}
         isDirty={isDirty}
         isValid={isValid}

apps/client/src/features/modals/settings-modal/SettingsModal.tsx

@@ -6,7 +6,7 @@ import AliasesForm from './AliasesForm';
 import AppSettingsModal from './AppSettings';
 import CuesheetSettingsForm from './CuesheetSettingsForm';
 import EditorSettings from './EditorSettings';
-import EventDataForm from './EventDataForm';
+import ProjectDataForm from './ProjectDataForm';
 import ViewSettingsForm from './ViewSettingsForm';
 
 interface ModalManagerProps {
@@ -22,7 +22,7 @@ export default function SettingsModal(props: ModalManagerProps) {
         <Tabs variant='ontime' size='sm' isLazy>
           <TabList>
             <Tab>App</Tab>
-            <Tab>Event Data</Tab>
+            <Tab>Project Data</Tab>
             <Tab>Editor</Tab>
             <Tab>Cuesheet</Tab>
             <Tab>Views</Tab>
@@ -33,7 +33,7 @@ export default function SettingsModal(props: ModalManagerProps) {
               <AppSettingsModal />
             </TabPanel>
             <TabPanel>
-              <EventDataForm />
+              <ProjectDataForm />
             </TabPanel>
             <TabPanel>
               <EditorSettings />

apps/client/src/features/modals/upload-modal/CollapsableSection.module.scss

@@ -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

@@ -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

@@ -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

@@ -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

@@ -5,79 +5,31 @@
 .uploadBody {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 1rem;
 }
 
 .uploadArea {
+  margin: 0 auto;
   width: 100%;
-  min-height: 200px;
+  max-width: 550px;
-  border: 2px dashed $gray-50;
+
+  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;
+    color: $modal-note-color;
-  }
-}
-
-.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;
-    }
   }
 }
 
@@ -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

@@ -1,7 +1,6 @@
-import { ChangeEvent, useCallback, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import {
   Button,
-  Input,
   Modal,
   ModalBody,
   ModalCloseButton,
@@ -9,23 +8,36 @@ 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 { uploadData } from '../../../common/api/ontimeApi';
+import { postPreviewExcel, uploadData } from '../../../common/api/ontimeApi';
-import { useEmitLog } from '../../../common/stores/logger';
+import { projectDataPlaceholder } from '../../../common/models/ProjectData';
-import ModalSplitInput from '../ModalSplitInput';
+import { userFieldsPlaceholder } from '../../../common/models/UserFields';
+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';
 
+export type UploadStep = 'upload' | 'review';
+
+export interface OntimeInputOptions {
+  onlyImportRundown?: boolean;
+}
+
+export type ExcelInputOptions = {
+  [K in ExcelImportMapKeys]: string;
+};
+
 interface UploadModalProps {
   onClose: () => void;
   isOpen: boolean;
@@ -33,65 +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 { file, setProgress, clear } = useUploadModalContextStore();
-    const fileUploaded = event?.target?.files?.[0];
-    if (!fileUploaded) return;
 
-    const validate = validateFile(fileUploaded);
+  const [uploadStep, setUploadStep] = useState<UploadStep>('upload');
-    setErrors(validate.errors?.[0]);
+  const [submitting, setSubmitting] = useState(false);
+  const [rundown, setRundown] = useState<OntimeRundown>([]);
+  const [userFields, setUserFields] = useState(userFieldsPlaceholder);
+  const [project, setProject] = useState(projectDataPlaceholder);
 
-    if (validate.isValid) {
+  const [errors, setErrors] = useState('');
-      setFile(fileUploaded);
-    } else {
-      setFile(null);
-    }
-  }, []);
 
-  const handleSubmit = useCallback(async () => {
+  const ontimeFileOptions = useRef<Partial<OntimeInputOptions>>({});
-    setSubmitting(true);
+  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) {
+      setSubmitting(true);
       try {
-        const options = {
+        if (isOntimeFile(file)) {
-          onlyRundown: overrideOptionRef.current?.checked || false,
+          await handleOntimeFile(file);
-        };
+          await queryClient.invalidateQueries(RUNDOWN_TABLE);
-        await uploadData(file, setProgress, options);
+        } else if (isExcelFile(file)) {
+          await handleExcelFile(file);
+        }
       } catch (error) {
-        emitError(`Failed uploading file: ${error}`);
+        setErrors(`Failed uploading file: ${error}`);
       } finally {
-        await queryClient.invalidateQueries(RUNDOWN_TABLE);
+        setSubmitting(false);
-        setSuccess(true);
       }
     }
-    setSubmitting(false);
-  }, [emitError, file, queryClient]);
 
-  const handleClick = () => {
+    async function handleExcelFile(file: File) {
-    fileInputRef.current?.click();
+      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 = () => {
+    async function handleOntimeFile(file: File) {
-    setFile(null);
+      const options = {
+        onlyRundown: Boolean(ontimeFileOptions.current.onlyImportRundown),
+      };
+      await uploadData(file, setProgress, options);
+    }
   };
 
   const handleClose = () => {
-    clearFile();
+    clear();
-    setSuccess(false);
+    setRundown([]);
-    setErrors(undefined);
+    setUserFields(userFieldsPlaceholder);
-    setProgress(0);
+    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}
@@ -101,65 +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
+          {isExcel && <UploadStepTracker uploadStep={uploadStep} />}
-            ref={fileInputRef}
+          {uploadStep === 'upload' ? (
-            style={{ display: 'none' }}
+            <>
-            type='file'
+              <UploadFile />
-            onChange={handleFile}
+              {errors && <div className={style.error}>{errors}</div>}
-            accept='.json, .xlsx'
+              {isOntime && <OntimeFileOptions optionsRef={ontimeFileOptions} />}
-            data-testid='file-input'
+              {isExcel && <ExcelFileOptions optionsRef={excelFileOptions} />}
-          />
+            </>
-          <div className={style.uploadArea} onClick={handleClick}>
+          ) : (
-            Click to upload Ontime project file
+            <ReviewFile rundown={rundown} project={project} userFields={userFields} />
-          </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>
           )}
-          {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>
         </ModalBody>
         <ModalFooter className={`${style.buttonSection} ${style.pad}`}>
-          <Button onClick={handleClose} isDisabled={isSubmitting} variant='ontime-ghost-on-light' size='sm'>
+          <Button
-            Cancel
+            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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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/features/viewers/ViewWrapper.tsx

@@ -3,7 +3,7 @@ import { ComponentType, useMemo } from 'react';
 import { TitleBlock } from 'ontime-types';
 import { useStore } from 'zustand';
 
-import useEventData from '../../common/hooks-query/useEventData';
+import useProjectData from '../../common/hooks-query/useProjectData';
 import useRundown from '../../common/hooks-query/useRundown';
 import useViewSettings from '../../common/hooks-query/useViewSettings';
 import { runtime } from '../../common/stores/runtime';
@@ -18,7 +18,7 @@ const withData = <P extends object>(Component: ComponentType<P>) => {
 
     // HTTP API data
     const { data: rundownData } = useRundown();
-    const { data: eventData } = useEventData();
+    const { data: project } = useProjectData();
     const { data: viewSettings } = useViewSettings();
 
     const publicEvents = useMemo(() => {
@@ -104,7 +104,7 @@ const withData = <P extends object>(Component: ComponentType<P>) => {
         publicSelectedId={publicSelectedId}
         viewSettings={viewSettings}
         nextId={nextId}
-        general={eventData}
+        general={project}
         onAir={onAir}
       />
     );

apps/client/src/features/viewers/backstage/Backstage.scss

@@ -25,7 +25,7 @@
 
   /* =================== HEADER + EXTRAS ===================*/
 
-  .event-header {
+  .project-header {
     grid-area: header;
     font-size: clamp(32px, 4.5vw, 64px);
     font-weight: 600;

apps/client/src/features/viewers/backstage/Backstage.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import QRCode from 'react-qr-code';
 import { AnimatePresence, motion } from 'framer-motion';
-import { EventData, Message, OntimeEvent, SupportedEvent, ViewSettings } from 'ontime-types';
+import { Message, OntimeEvent, ProjectData, SupportedEvent, ViewSettings } from 'ontime-types';
 import { formatDisplay } from 'ontime-utils';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
@@ -34,7 +34,7 @@ interface BackstageProps {
   time: TimeManagerType;
   backstageEvents: OntimeEvent[];
   selectedId: string | null;
-  general: EventData;
+  general: ProjectData;
   viewSettings: ViewSettings;
 }
 
@@ -93,7 +93,7 @@ export default function Backstage(props: BackstageProps) {
     <div className={`backstage ${isMirrored ? 'mirror' : ''}`} data-testid='backstage-view'>
       <NavigationMenu />
       <ViewParamsEditor paramFields={[TIME_FORMAT_OPTION]} />
-      <div className='event-header'>
+      <div className='project-header'>
         {general.title}
         <div className='clock-container'>
           <div className='label'>{getLocalizedString('common.time_now')}</div>

apps/client/src/features/viewers/minimal-timer/MinimalTimer.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { EventData, Playback, TimerMessage, TimerType, ViewSettings } from 'ontime-types';
+import { Playback, TimerMessage, TimerType, ViewSettings } from 'ontime-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
@@ -19,7 +19,6 @@ interface MinimalTimerProps {
   pres: TimerMessage;
   time: TimeManagerType;
   viewSettings: ViewSettings;
-  general: EventData;
 }
 
 export default function MinimalTimer(props: MinimalTimerProps) {

apps/client/src/features/viewers/public/Public.scss

@@ -24,7 +24,7 @@
 
   /* =================== HEADER + EXTRAS ===================*/
 
-  .event-header {
+  .project-header {
     grid-area: header;
     font-size: clamp(32px, 4.5vw, 64px);
     font-weight: 600;

apps/client/src/features/viewers/public/Public.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import QRCode from 'react-qr-code';
 import { AnimatePresence, motion } from 'framer-motion';
-import { EventData, Message, OntimeEvent, ViewSettings } from 'ontime-types';
+import { Message, OntimeEvent, ProjectData, ViewSettings } from 'ontime-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
@@ -32,7 +32,7 @@ interface BackstageProps {
   time: TimeManagerType;
   events: OntimeEvent[];
   publicSelectedId: string | null;
-  general: EventData;
+  general: ProjectData;
   viewSettings: ViewSettings;
 }
 
@@ -58,7 +58,7 @@ export default function Public(props: BackstageProps) {
     <div className={`public-screen ${isMirrored ? 'mirror' : ''}`} data-testid='public-view'>
       <NavigationMenu />
       <ViewParamsEditor paramFields={[TIME_FORMAT_OPTION]} />
-      <div className='event-header'>
+      <div className='project-header'>
         {general.title}
         <div className='clock-container'>
           <div className='label'>{getLocalizedString('common.time_now')}</div>

apps/client/src/features/viewers/timer/Timer.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { EventData, Playback, TimerMessage, TimerType, ViewSettings } from 'ontime-types';
+import { Playback, TimerMessage, TimerType, ViewSettings } from 'ontime-types';
 
 import { overrideStylesURL } from '../../../common/api/apiConstants';
 import MultiPartProgressBar from '../../../common/components/multi-part-progress-bar/MultiPartProgressBar';
@@ -40,7 +40,6 @@ const titleVariants = {
 
 interface TimerProps {
   isMirrored: boolean;
-  general: EventData;
   pres: TimerMessage;
   title: TitleManager;
   time: TimeManagerType;

apps/client/src/theme/OntimeProgress.ts

@@ -0,0 +1,8 @@
+export const ontimeProgressGray = {
+  track: {
+    background: '#f6f6f6', // $gray-500
+  },
+  filledTrack: {
+    background: '#578AF4', // $blue-500
+  },
+};

apps/client/src/theme/ontimeModal.ts

@@ -2,8 +2,8 @@ export const ontimeModal = {
   header: {
     fontWeight: 400,
     letterSpacing: '0.3px',
-    padding: '16px 24px',
+    padding: '1rem 1.5rem',
-    fontSize: '20px',
+    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',
+    padding: '1rem',
-    fontSize: '14px',
+    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

@@ -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,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

@@ -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/app.ts

@@ -13,7 +13,7 @@ import { LogOrigin, OSCSettings } from 'ontime-types';
 
 // Import Routes
 import { router as rundownRouter } from './routes/rundownRouter.js';
-import { router as eventDataRouter } from './routes/eventDataRouter.js';
+import { router as projectRouter } from './routes/projectRouter.js';
 import { router as ontimeRouter } from './routes/ontimeRouter.js';
 import { router as playbackRouter } from './routes/playbackRouter.js';
 
@@ -55,7 +55,7 @@ app.use(express.json({ limit: '1mb' }));
 
 // Implement route endpoints
 app.use('/events', rundownRouter);
-app.use('/eventdata', eventDataRouter);
+app.use('/project', projectRouter);
 app.use('/ontime', ontimeRouter);
 app.use('/playback', playbackRouter);
 

apps/server/src/classes/data-provider/DataProvider.ts

@@ -2,7 +2,7 @@
  * Class Event Provider is a mediator for handling the local db
  * and adds logic specific to ontime data
  */
-import { EventData, OntimeRundown, ViewSettings } from 'ontime-types';
+import { ProjectData, OntimeRundown, ViewSettings } from 'ontime-types';
 
 import { data, db } from '../../modules/loadDb.js';
 import { safeMerge } from './DataProvider.utils.js';
@@ -12,14 +12,14 @@ export class DataProvider {
     return data;
   }
 
-  static async setEventData(newData: Partial<EventData>) {
+  static async setProjectData(newData: Partial<ProjectData>) {
-    data.eventData = { ...data.eventData, ...newData };
+    data.project = { ...data.project, ...newData };
     await this.persist();
-    return data.eventData;
+    return data.project;
   }
 
-  static getEventData() {
+  static getProjectData() {
-    return data.eventData;
+    return data.project;
   }
 
   static async setRundown(newData: OntimeRundown) {
@@ -97,7 +97,7 @@ export class DataProvider {
 
   static async mergeIntoData(newData) {
     const mergedData = safeMerge(data, newData);
-    data.eventData = mergedData.eventData;
+    data.project = mergedData.project;
     data.settings = mergedData.settings;
     data.viewSettings = mergedData.viewSettings;
     data.osc = mergedData.osc;

apps/server/src/classes/data-provider/DataProvider.utils.ts

@@ -4,11 +4,11 @@
  * @param {object} newData
  */
 export function safeMerge(existing, newData) {
-  const { rundown, eventData, settings, viewSettings, osc, http, aliases, userFields } = newData || {};
+  const { rundown, project, settings, viewSettings, osc, http, aliases, userFields } = newData || {};
   return {
     ...existing,
     rundown: rundown ?? existing.rundown,
-    eventData: { ...existing.eventData, ...eventData },
+    project: { ...existing.project, ...project },
     settings: { ...existing.settings, ...settings },
     viewSettings: { ...existing.viewSettings, ...viewSettings },
     aliases: aliases ?? existing.aliases,

apps/server/src/classes/data-provider/__test__/DataProvider.test.ts

@@ -3,7 +3,7 @@ import { safeMerge } from '../DataProvider.utils.js';
 describe('safeMerge', () => {
   const existing = {
     rundown: [],
-    eventData: {
+    project: {
       title: 'existing title',
       publicUrl: 'existing public URL',
       backstageUrl: 'existing backstageUrl',
@@ -62,15 +62,15 @@ describe('safeMerge', () => {
     expect(mergedData.rundown).toEqual(newData.rundown);
   });
 
-  it('merges the event key', () => {
+  it('merges the project key', () => {
     const newData = {
-      eventData: {
+      project: {
         title: 'new title',
         publicInfo: 'new public info',
       },
     };
     const mergedData = safeMerge(existing, newData);
-    expect(mergedData.eventData).toEqual({
+    expect(mergedData.project).toEqual({
       title: 'new title',
       publicUrl: 'existing public URL',
       publicInfo: 'new public info',

apps/server/src/controllers/ontimeController.ts

@@ -1,4 +1,4 @@
-import { Alias, EventData, LogOrigin } from 'ontime-types';
+import { Alias, LogOrigin, ProjectData } from 'ontime-types';
 
 import { RequestHandler } from 'express';
 import fs from 'fs';
@@ -31,7 +31,7 @@ export const poll = async (req, res) => {
 // Create controller for GET request to '/ontime/db'
 // Returns -
 export const dbDownload = async (req, res) => {
-  const { title } = DataProvider.getEventData();
+  const { title } = DataProvider.getProjectData();
   const fileTitle = title || 'ontime data';
 
   res.download(resolveDbPath, `${fileTitle}.json`, (err) => {
@@ -43,6 +43,23 @@ export const dbDownload = async (req, res) => {
   });
 };
 
+async function justUploadAndParse(file, req, res, options) {
+  if (!fs.existsSync(file)) {
+    res.status(500).send({ message: 'Upload failed' });
+    return;
+  }
+
+  const result = await fileHandler(file);
+
+  if ('error' in result && result.error) {
+    throw new Error(result.message);
+  } else if ('data' in result && result.message === 'success') {
+    return result.data;
+  } else {
+    throw new Error('Failed parsing, no data');
+  }
+}
+
 /**
  * handles file upload
  * @param file
@@ -319,6 +336,25 @@ export const postOSC = async (req, res) => {
   }
 };
 
+// Create controller for POST request to '/ontime/previewExcel'
+// Returns -
+export async function previewExcel(req, res) {
+  if (!req.file) {
+    res.status(400).send({ message: 'File not found' });
+    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);
+    res.status(200).send(data);
+  } catch (error) {
+    res.status(500).send(error);
+  }
+}
+
 // Create controller for POST request to '/ontime/db'
 // Returns -
 export const dbUpload = async (req, res) => {
@@ -334,7 +370,7 @@ export const dbUpload = async (req, res) => {
 // Create controller for POST request to '/ontime/new'
 export const postNew: RequestHandler = async (req, res) => {
   try {
-    const newEventData: EventData = {
+    const newProjectData: ProjectData = {
       title: req.body?.title ?? '',
       description: req.body?.description ?? '',
       publicUrl: req.body?.publicUrl ?? '',
@@ -342,7 +378,7 @@ export const postNew: RequestHandler = async (req, res) => {
       backstageUrl: req.body?.backstageUrl ?? '',
       backstageInfo: req.body?.backstageInfo ?? '',
     };
-    const newData = await DataProvider.setEventData(newEventData);
+    const newData = await DataProvider.setProjectData(newProjectData);
     await deleteAllEvents();
     res.status(201).send(newData);
   } catch (error) {

apps/server/src/controllers/projectController.ts

@@ -1,24 +1,24 @@
 import { RequestHandler } from 'express';
 
-import { EventData } from 'ontime-types';
+import { ProjectData } from 'ontime-types';
 
 import { removeUndefined } from '../utils/parserUtils.js';
 import { failEmptyObjects } from '../utils/routerUtils.js';
 import { DataProvider } from '../classes/data-provider/DataProvider.js';
 
-// Create controller for GET request to 'event'
+// Create controller for GET request to 'project'
-export const getEventData: RequestHandler = async (req, res) => {
+export const getProject: RequestHandler = async (req, res) => {
-  res.json(DataProvider.getEventData());
+  res.json(DataProvider.getProjectData());
 };
 
-// Create controller for POST request to 'event'
+// Create controller for POST request to 'project'
-export const postEventData: RequestHandler = async (req, res) => {
+export const postProject: RequestHandler = async (req, res) => {
   if (failEmptyObjects(req.body, res)) {
     return;
   }
 
   try {
-    const newEvent: Partial<EventData> = removeUndefined({
+    const newEvent: Partial<ProjectData> = removeUndefined({
       title: req.body?.title,
       description: req.body?.description,
       publicUrl: req.body?.publicUrl,
@@ -27,7 +27,7 @@ export const postEventData: RequestHandler = async (req, res) => {
       backstageInfo: req.body?.backstageInfo,
       endMessage: req.body?.endMessage,
     });
-    const newData = await DataProvider.setEventData(newEvent);
+    const newData = await DataProvider.setProjectData(newEvent);
     res.status(200).send(newData);
   } catch (error) {
     res.status(400).send(error);

apps/server/src/controllers/projectController.validate.ts

@@ -1,6 +1,6 @@
 import { body, validationResult } from 'express-validator';
 
-export const eventDataSanitizer = [
+export const projectSanitiser = [
   body('title').optional().isString().trim(),
   body('description').optional().isString().trim(),
   body('publicUrl').optional().isString().trim(),

apps/server/src/models/dataModel.ts

@@ -2,7 +2,7 @@ import { DatabaseModel } from 'ontime-types';
 
 export const dbModel: DatabaseModel = {
   rundown: [],
-  eventData: {
+  project: {
     title: '',
     description: '',
     publicUrl: '',

apps/server/src/routes/eventDataRouter.ts

@@ -1,11 +0,0 @@
-import express from 'express';
-import { getEventData, postEventData } from '../controllers/eventDataController.js';
-import { eventDataSanitizer } from '../controllers/eventDataController.validate.js';
-
-export const router = express.Router();
-
-// create route between controller and 'GET /event' endpoint
-router.get('/', getEventData);
-
-// create route between controller and 'POST /event' endpoint
-router.post('/', eventDataSanitizer, postEventData);

apps/server/src/routes/ontimeRouter.ts

@@ -17,6 +17,7 @@ import {
   postSettings,
   postUserFields,
   postViewSettings,
+  previewExcel,
 } from '../controllers/ontimeController.js';
 
 import {
@@ -27,7 +28,7 @@ import {
   validateUserFields,
   viewValidator,
 } from '../controllers/ontimeController.validate.js';
-import { eventDataSanitizer } from '../controllers/eventDataController.validate.js';
+import { projectSanitiser } from '../controllers/projectController.validate.js';
 
 export const router = express.Router();
 
@@ -40,6 +41,9 @@ router.get('/db', dbDownload);
 // create route between controller and '/ontime/db' endpoint
 router.post('/db', uploadFile, dbUpload);
 
+// create route between controller and '/ontime/db' endpoint
+router.post('/previewExcel', uploadFile, previewExcel);
+
 // create route between controller and '/ontime/settings' endpoint
 router.get('/settings', getSettings);
 
@@ -77,4 +81,4 @@ router.post('/osc', validateOSC, postOSC);
 router.post('/osc-subscriptions', validateOscSubscription, postOscSubscriptions);
 
 // create route between controller and '/ontime/new' endpoint
-router.post('/new', eventDataSanitizer, postNew);
+router.post('/new', projectSanitiser, postNew);

apps/server/src/routes/projectRouter.ts

@@ -0,0 +1,11 @@
+import express from 'express';
+import { getProject, postProject } from '../controllers/projectController.js';
+import { projectSanitiser } from '../controllers/projectController.validate.js';
+
+export const router = express.Router();
+
+// create route between controller and 'GET /project' endpoint
+router.get('/', getProject);
+
+// create route between controller and 'POST /project' endpoint
+router.post('/', projectSanitiser, postProject);

apps/server/src/utils/__tests__/parser.test.ts

@@ -1,6 +1,6 @@
 import { vi } from 'vitest';
 
-import { EndAction, OntimeEvent, TimerType } from 'ontime-types';
+import { EndAction, TimerType } from 'ontime-types';
 
 import { dbModel } from '../../models/dataModel.js';
 import { parseExcel, parseJson, validateEvent } from '../parser.js';
@@ -192,7 +192,7 @@ describe('test json parser with valid def', () => {
         user9: '',
       },
     ],
-    eventData: {
+    project: {
       title: 'This is a test definition',
       url: 'www.carlosvalente.com',
       publicInfo: 'WiFi: demoproject \nPassword: ontimeproject',
@@ -246,7 +246,7 @@ describe('test json parser with valid def', () => {
   });
 
   it('loaded event settings', () => {
-    const eventTitle = parseResponse?.eventData?.title;
+    const eventTitle = parseResponse?.project?.title;
     expect(eventTitle).toBe('This is a test definition');
   });
 
@@ -402,10 +402,10 @@ describe('test corrupt data', () => {
     expect(parsedDef.rundown.length).toBe(0);
   });
 
-  it('handles missing event data', async () => {
+  it('handles missing project data', async () => {
-    const emptyEventData = {
+    const emptyProjectData = {
       rundown: [{}, {}, {}, {}, {}, {}, {}, {}],
-      eventData: {},
+      project: {},
       settings: {
         app: 'ontime',
         version: 2,
@@ -415,8 +415,8 @@ describe('test corrupt data', () => {
       },
     };
 
-    const parsedDef = await parseJson(emptyEventData);
+    const parsedDef = await parseJson(emptyProjectData);
-    expect(parsedDef.eventData).toStrictEqual(dbModel.eventData);
+    expect(parsedDef.project).toStrictEqual(dbModel.project);
   });
 
   it('handles missing settings', async () => {
@@ -629,7 +629,7 @@ describe('test parseExcel function', () => {
       [],
     ];
 
-    const expectedParsedEvent = {
+    const expectedParsedProjectData = {
       title: 'Test Event',
       publicUrl: 'www.public.com',
       backstageUrl: 'www.backstage.com',
@@ -682,7 +682,7 @@ describe('test parseExcel function', () => {
     ];
 
     const parsedData = await parseExcel(testdata);
-    expect(parsedData.eventData).toStrictEqual(expectedParsedEvent);
+    expect(parsedData.project).toStrictEqual(expectedParsedProjectData);
     expect(parsedData.rundown).toBeDefined();
     expect(parsedData.rundown[0]).toMatchObject(expectedParsedRundown[0]);
     expect(parsedData.rundown[1]).toMatchObject(expectedParsedRundown[1]);

apps/server/src/utils/parser.ts

@@ -7,7 +7,6 @@ import { generateId, calculateDuration } from 'ontime-utils';
 import {
   DatabaseModel,
   EndAction,
-  EventData,
   OntimeEvent,
   OntimeRundown,
   SupportedEvent,
@@ -19,7 +18,7 @@ import { dbModel } from '../models/dataModel.js';
 import { deleteFile, makeString } from './parserUtils.js';
 import {
   parseAliases,
-  parseEventData,
+  parseProject,
   parseOsc,
   parseRundown,
   parseSettings,
@@ -37,8 +36,9 @@ export const JSON_MIME = 'application/json';
  * @returns {object} - parsed object
  */
 export const parseExcel = async (excelData) => {
-  const eventData: Partial<EventData> = {
+  const projectData: Partial<ProjectData> = {
     title: '',
+    description: '',
     publicUrl: '',
     backstageUrl: '',
   };
@@ -71,6 +71,7 @@ export const parseExcel = async (excelData) => {
     .filter((e) => e.length > 0)
     .forEach((row) => {
       let eventTitleNext = false;
+      let projectTitleNext = false;
       let publicUrlNext = false;
       let publicInfoNext = false;
       let backstageUrlNext = false;
@@ -81,19 +82,22 @@ export const parseExcel = async (excelData) => {
       row.forEach((column, j) => {
         // check flags
         if (eventTitleNext) {
-          eventData.title = column;
+          projectData.title = column;
           eventTitleNext = false;
+        } else if (projectTitleNext) {
+          projectData.description = column;
+          projectTitleNext = false;
         } else if (publicUrlNext) {
-          eventData.publicUrl = column;
+          projectData.publicUrl = column;
           publicUrlNext = false;
         } else if (publicInfoNext) {
-          eventData.publicInfo = column;
+          projectData.publicInfo = column;
           publicInfoNext = false;
         } else if (backstageUrlNext) {
-          eventData.backstageUrl = column;
+          projectData.backstageUrl = column;
           backstageUrlNext = false;
         } else if (backstageInfoNext) {
-          eventData.backstageInfo = column;
+          projectData.backstageInfo = column;
           backstageInfoNext = false;
         } else if (j === timeStartIndex) {
           event.timeStart = parseExcelDate(column);
@@ -154,9 +158,12 @@ export const parseExcel = async (excelData) => {
             // look for keywords
             // need to make sure it is a string first
             switch (col) {
-              case 'event name':
+              case 'project name':
                 eventTitleNext = true;
                 break;
+              case 'project description':
+                projectTitleNext = true;
+                break;
               case 'public url':
                 publicUrlNext = true;
                 break;
@@ -273,7 +280,7 @@ export const parseExcel = async (excelData) => {
     });
   return {
     rundown,
-    eventData,
+    project: projectData,
     settings: {
       app: 'ontime',
       version: 2,
@@ -299,7 +306,7 @@ export const parseJson = async (jsonData, enforce = false): Promise<DatabaseMode
   // parse Events
   returnData.rundown = parseRundown(jsonData);
   // parse Event
-  returnData.eventData = parseEventData(jsonData, enforce);
+  returnData.project = parseProject(jsonData, enforce);
   // Settings handled partially
   returnData.settings = parseSettings(jsonData, enforce);
   // View settings handled partially
@@ -396,7 +403,7 @@ export const fileHandler = async (file): Promise<ResponseOK | ResponseError> =>
         const dataFromExcel = await parseExcel(excelData.data);
         res.data = {};
         res.data.rundown = parseRundown(dataFromExcel);
-        res.data.eventData = parseEventData(dataFromExcel, true);
+        res.data.project = parseProject(dataFromExcel, true);
         res.data.userFields = parseUserFields(dataFromExcel);
         res.message = 'success';
       } else {

apps/server/src/utils/parserFunctions.ts

@@ -2,11 +2,11 @@ import { generateId } from 'ontime-utils';
 import {
   Alias,
   EndAction,
-  EventData,
   OntimeRundown,
   OSCSettings,
   OscSubscription,
   OscSubscriptionOptions,
+  ProjectData,
   Settings,
   TimerLifeCycle,
   TimerType,
@@ -91,26 +91,26 @@ export const parseRundown = (data): OntimeRundown => {
  * @param {boolean} enforce - whether to create a definition if one is missing
  * @returns {object} - event object data
  */
-export const parseEventData = (data, enforce): EventData => {
+export const parseProject = (data, enforce): ProjectData => {
-  let newEventData: Partial<EventData> = {};
+  let newProjectData: Partial<ProjectData> = {};
-  if ('eventData' in data) {
+  if ('project' in data) {
-    console.log('Found event data, importing...');
+    console.log('Found project data, importing...');
-    const e = data.eventData;
+    const project = data.project;
     // filter known properties and write to db
-    newEventData = {
+    newProjectData = {
-      ...dbModel.eventData,
+      ...dbModel.project,
-      title: e.title || dbModel.eventData.title,
+      title: project.title || dbModel.project.title,
-      description: e.description || dbModel.eventData.description,
+      description: project.description || dbModel.project.description,
-      publicUrl: e.publicUrl || dbModel.eventData.publicUrl,
+      publicUrl: project.publicUrl || dbModel.project.publicUrl,
-      publicInfo: e.publicInfo || dbModel.eventData.publicInfo,
+      publicInfo: project.publicInfo || dbModel.project.publicInfo,
-      backstageUrl: e.backstageUrl || dbModel.eventData.backstageUrl,
+      backstageUrl: project.backstageUrl || dbModel.project.backstageUrl,
-      backstageInfo: e.backstageInfo || dbModel.eventData.backstageInfo,
+      backstageInfo: project.backstageInfo || dbModel.project.backstageInfo,
     };
   } else if (enforce) {
-    newEventData = { ...dbModel.eventData };
+    newProjectData = { ...dbModel.project };
-    console.log('Created event object in db');
+    console.log('Created project object in db');
   }
-  return newEventData as EventData;
+  return newProjectData as ProjectData;
 };
 
 /**

apps/server/test-db/db.json

@@ -227,7 +227,7 @@
       "id": "1358"
     }
   ],
-  "eventData": {
+  "project": {
     "title": "All about Carlos demo event",
     "description": "Demo event for Ontime",
     "publicUrl": "www.getontime.no",

apps/test-db/db.json

@@ -93,7 +93,7 @@
       "id": "da5b4"
     }
   ],
-  "eventData": {
+  "project": {
     "title": "All about Carlos demo event",
     "description": "Demo event for Ontime",
     "publicUrl": "www.getontime.no",

demo-db/db.json

@@ -389,7 +389,7 @@
       "id": "d3eb1"
     }
   ],
-  "eventData": {
+  "project": {
     "title": "Eurovision Song Contest",
     "description": "Turin 2022",
     "publicUrl": "www.getontime.no",

e2e/tests/fixtures/test-db.json

@@ -93,7 +93,7 @@
       "id": "da5b4"
     }
   ],
-  "eventData": {
+  "project": {
     "title": "All about Carlos demo event",
     "description": "Demo event for Ontime",
     "publicUrl": "www.getontime.no",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime",
-  "version": "2.7.2",
+  "version": "2.8.1-rc-table",
   "description": "Time keeping for live events",
   "keywords": [
     "lighdev",

packages/types/src/definitions/DataModel.type.ts

@@ -1,5 +1,5 @@
 import { Alias } from './core/Alias.type.js';
-import { EventData } from './core/EventData.type.js';
+import { ProjectData } from './core/ProjectData.type.js';
 import { OntimeRundown } from './core/Rundown.type.js';
 import { OSCSettings } from './core/OscSettings.type.js';
 import { Settings } from './core/Settings.type.js';
@@ -8,7 +8,7 @@ import { ViewSettings } from './core/Views.type.js';
 
 export type DatabaseModel = {
   rundown: OntimeRundown;
-  eventData: EventData;
+  project: ProjectData;
   settings: Settings;
   viewSettings: ViewSettings;
   aliases: Alias[];

packages/types/src/definitions/core/ProjectData.type.ts

@@ -1,4 +1,4 @@
-export type EventData = {
+export type ProjectData = {
   title: string;
   description: string;
   publicUrl: string;

packages/types/src/index.ts

@@ -13,8 +13,8 @@ export {
 export type { OntimeEntryCommonKeys, OntimeRundown, OntimeRundownEntry } from './definitions/core/Rundown.type.js';
 export { TimerType } from './definitions/TimerType.type.js';
 
-// ---> Event Data
+// ---> Project Data
-export type { EventData } from './definitions/core/EventData.type.js';
+export type { ProjectData } from './definitions/core/ProjectData.type.js';
 
 // ---> Settings
 export type { Settings } from './definitions/core/Settings.type.js';