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

Sheets settings (#774)

Browse Source 
* wip: migrate sheet settings

---------

Co-authored-by: arc-alex <ac@omnivox.dk>
This commit is contained in:
Carlos Valente
2024-02-17 22:05:38 +01:00
committed by GitHub
parent c1377544a0
commit 5a397c6da7
34 changed files with 732 additions and 701 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/common/api/ontimeApi.ts
+10 -9
View File
@@ -275,7 +275,8 @@ export const uploadSheetClientFile = async (file: File) => {
/**
* @description STEP 1 test
*/
export const getClientSecrect = async () => {
// TODO: do we still need this?
export const getClientSecret = async () => {
const response = await axios.get(`${ontimeURL}/sheet/clientsecret`);
return response.data;
};
@@ -300,32 +301,32 @@ export const getAuthentication = async () => {
* @description STEP 3
* @returns worksheetOptions
*/
export const postId = async (id: string) => {
const response = await axios.post(`${ontimeURL}/sheet/id`, { id });
export const postId = async (sheetId: string) => {
const response = await axios.post(`${ontimeURL}/sheet/sheetId`, { sheetId });
return response.data;
};
/**
* @description STEP 4
*/
export const postWorksheet = async (id: string, worksheet: string) => {
const response = await axios.post(`${ontimeURL}/sheet/worksheet`, { id, worksheet });
export const postWorksheet = async (sheetId: string, worksheet: string) => {
const response = await axios.post(`${ontimeURL}/sheet/worksheet`, { sheetId, worksheet });
return response.data;
};
/**
* @description STEP 5
*/
export const postPreviewSheet = async (id: string, options: ExcelImportMap) => {
const response = await axios.post(`${ontimeURL}/sheet/pull`, { id, options });
export const postPreviewSheet = async (sheetId: string, options: ExcelImportMap) => {
const response = await axios.post(`${ontimeURL}/sheet-pull`, { sheetId, options });
return response.data.data;
};
/**
* @description STEP 5
*/
export const postPushSheet = async (id: string, options: ExcelImportMap) => {
const response = await axios.post(`${ontimeURL}/sheet-push`, { id, options });
export const postPushSheet = async (sheetId: string, options: ExcelImportMap) => {
const response = await axios.post(`${ontimeURL}/sheet-push`, { sheetId, options });
return response.data.data;
};
apps/client/src/common/components/context-menu/ContextMenu.tsx
+1 -1
View File
@@ -68,7 +68,7 @@ export const ContextMenu = ({ children }: ContextMenuProps) => {
<>
{children}
<div className={style.contextMenuBackdrop} />
<Menu isOpen gutter={0} onClose={onClose} isLazy lazyBehavior='unmount' variant='ontime-on-dark'>
<Menu isOpen size='sm' gutter={0} onClose={onClose} isLazy lazyBehavior='unmount' variant='ontime-on-dark'>
<MenuButton
className={style.contextMenuButton}
aria-hidden
apps/client/src/common/components/external-link/ExternalLink.module.scss
+1
View File
@@ -6,6 +6,7 @@
color: $blue-500;
transition-property: color;
transition-duration: $transition-time-action;
width: fit-content;
&.inline {
display: inline-flex;
apps/client/src/common/components/input/time-input/TimeInputWithButton.tsx
+9 -12
View File
@@ -1,7 +1,6 @@
import { PropsWithChildren } from 'react';
import { InputGroup, Tooltip } from '@chakra-ui/react';
import { InputGroup } from '@chakra-ui/react';
import { tooltipDelayFast } from '../../../../ontimeConfig';
import { cx } from '../../../utils/styleUtils';
import TimeInput from './TimeInput';
@@ -24,16 +23,14 @@ export default function TimeInputWithButton<T extends string>(props: PropsWithCh
return (
<InputGroup size='sm' className={inputClasses} width='fit-content'>
<Tooltip label={placeholder} openDelay={tooltipDelayFast} variant='ontime-ondark'>
<TimeInput<T>
name={name}
submitHandler={submitHandler}
time={time}
placeholder={placeholder}
className={style.inputField}
disabled={disabled}
/>
</Tooltip>
<TimeInput<T>
name={name}
submitHandler={submitHandler}
time={time}
placeholder={placeholder}
className={style.inputField}
disabled={disabled}
/>
{children}
</InputGroup>
);
apps/client/src/features/app-settings/AppSettings.tsx
+2
View File
@@ -7,6 +7,7 @@ import IntegrationsPanel from './panel/integrations-panel/IntegrationsPanel';
import LogPanel from './panel/log-panel/LogPanel';
import ProjectPanel from './panel/project-panel/ProjectPanel';
import ProjectSettingsPanel from './panel/project-settings-panel/ProjectSettingsPanel';
import SourcesPanel from './panel/sources-panel/SourcesPanel';
import PanelContent from './panel-content/PanelContent';
import PanelList from './panel-list/PanelList';
import { useSettingsStore } from './settingsStore';
@@ -28,6 +29,7 @@ export default function AppSettings() {
<PanelList />
<PanelContent onClose={closeSettings}>
{selectedPanel === 'project' && <ProjectPanel />}
{selectedPanel === 'sources' && <SourcesPanel />}
{selectedPanel === 'integrations' && <IntegrationsPanel />}
{selectedPanel === 'project_settings' && <ProjectSettingsPanel />}
{selectedPanel === 'about' && <AboutPanel />}
apps/client/src/features/app-settings/panel/Panel.module.scss
+6 -4
View File
@@ -17,11 +17,13 @@ $inner-padding: 1rem;
}
.title {
font-size: 1.25rem;
padding-left: $inner-padding;
font-size: 1.375rem;
padding: 0 2rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
color: $gray-300;
}
.section {
@@ -49,7 +51,7 @@ $inner-padding: 1rem;
.pad {
padding: 0 1rem;
max-height: 500px;
max-height: 550px;
overflow-y: scroll;
}
@@ -80,7 +82,7 @@ $inner-padding: 1rem;
}
.listGroup {
padding: 0.5rem 1rem 0 1rem;
padding: 1rem 2rem 0 2rem;
> li:not(:last-child) {
border-bottom: 1px solid $white-10;
apps/client/src/features/app-settings/panel/about-panel/AboutPanel.tsx
+6 -10
View File
@@ -17,18 +17,14 @@ export default function AboutPanel() {
</Panel.Paragraph>
</Panel.Section>
<Panel.Section>
<Panel.Card>
<Panel.SubHeader>Links</Panel.SubHeader>
<ExternalLink href={gitbookUrl}>Read the docs over at GitBook</ExternalLink>
<ExternalLink href={githubUrl}>Follow the project on GitHub</ExternalLink>
</Panel.Card>
<Panel.SubHeader>Links</Panel.SubHeader>
<ExternalLink href={gitbookUrl}>Read the docs over at GitBook</ExternalLink>
<ExternalLink href={githubUrl}>Follow the project on GitHub</ExternalLink>
</Panel.Section>
<Panel.Section>
<Panel.Card>
<Panel.SubHeader>Current version</Panel.SubHeader>
<Panel.Paragraph>{`You are currently using Ontime ${version}`}</Panel.Paragraph>
<CheckUpdatesButton version={version} />
</Panel.Card>
<Panel.SubHeader>Current version</Panel.SubHeader>
<Panel.Paragraph>{`You are currently using Ontime ${version}`}</Panel.Paragraph>
<CheckUpdatesButton version={version} />
</Panel.Section>
</>
);
apps/client/src/features/app-settings/panel/about-panel/CheckUpdatesButton.tsx
+1 -1
View File
@@ -52,7 +52,7 @@ export default function CheckUpdatesButton(props: CheckUpdatesButtonProps) {
return (
<>
<Button onClick={versionCheck} variant='ontime-filled' isLoading={isFetching} isDisabled={disableButton}>
<Button onClick={versionCheck} variant='ontime-filled' isLoading={isFetching} isDisabled={disableButton} size='sm'>
Check for updates
</Button>
<ResolveUpdateMessage updateMessage={updateMessage} />
apps/client/src/features/app-settings/panel/integrations-panel/IntegrationsPanel.module.css
+2 -2
View File
@@ -2,8 +2,8 @@
width: 100%;
}
.fitContents {
width: max-content !important; /* override chakra */
.fitContents.fitContents {
width: max-content; /* override chakra */
}
.flex {
apps/client/src/features/app-settings/panel/integrations-panel/IntegrationsPanel.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ export default function IntegrationsPanel() {
<Alert status='info' variant='ontime-on-dark-info'>
<AlertIcon />
<AlertDescription>
Integrations allow Ontime to receive commands or send its data to other systems in your workflow. <br />{' '}
Integrations allow Ontime to receive commands or send its data to other systems in your workflow. <br />
<br />
Currently supported protocols are OSC (Open Sound Control), HTTP and Websockets. <br />
WebSockets are used for Ontime and cannot be configured independently. <br />
apps/client/src/features/app-settings/panel/integrations-panel/OscIntegrations.tsx
+4
View File
@@ -97,7 +97,11 @@ export default function OscIntegrations() {
</div>
</Panel.SubHeader>
<Panel.Divider />
<Panel.Section as='form' id='osc-form' onSubmit={handleSubmit(onSubmit)} onKeyDown={preventEscape}>
<Panel.Title>OSC Settings</Panel.Title>
{errors?.root && <Panel.Error>{errors.root.message}</Panel.Error>}
<Panel.ListGroup>
<Panel.ListItem>
apps/client/src/features/app-settings/panel/project-panel/ProjectPanel.tsx
+8 -3
View File
@@ -19,9 +19,14 @@ export default function ProjectPanel() {
<Panel.Card>
<Panel.SubHeader>
Manage projects
<Button variant='ontime-filled' onClick={handleToggleCreate}>
New
</Button>
<div style={{ display: 'flex', gap: '1rem' }}>
<Button variant='ontime-subtle' onClick={handleToggleCreate} size='sm'>
Import
</Button>
<Button variant='ontime-subtle' onClick={handleToggleCreate} size='sm'>
Add
</Button>
</div>
</Panel.SubHeader>
<ProjectList onToggleCreate={handleToggleCreate} isCreatingProject={isCreatingProject} />
</Panel.Card>
apps/client/src/features/app-settings/panel/sources-panel/GSheetInfo.tsx
+21
View File
@@ -0,0 +1,21 @@
import { Alert, AlertDescription, AlertIcon } from '@chakra-ui/react';
import ExternalLink from '../../../../common/components/external-link/ExternalLink';
const googleSheetDocsUrl = 'https://ontime.gitbook.io/v2/features/google-sheet';
export default function GSheetInfo() {
return (
<Alert status='info' variant='ontime-on-dark-info'>
<AlertIcon />
<AlertDescription>
Ontime allows you to synchronize your rundown with a Google Sheet.
<br />
<br />
To enable this feature, you will need to generate tokens in your Google account and provide them to Ontime.
<br />
Once set up, you will be able to synchronize data between Ontime and your Google Sheet. <br />
<ExternalLink href={googleSheetDocsUrl}>See the docs</ExternalLink>
</AlertDescription>
</Alert>
);
}
apps/client/src/features/app-settings/panel/sources-panel/GSheetSetup.tsx
+151
View File
@@ -0,0 +1,151 @@
import { useRef } from 'react';
import { Button, Input, Select } from '@chakra-ui/react';
import { IoCheckmark } from '@react-icons/all-files/io5/IoCheckmark';
import { IoCloudDownloadOutline } from '@react-icons/all-files/io5/IoCloudDownloadOutline';
import { IoShieldCheckmarkOutline } from '@react-icons/all-files/io5/IoShieldCheckmarkOutline';
import * as Panel from '../PanelUtils';
import useGoogleSheet from './useGoogleSheet';
import { useSheetStore } from './useSheetStore';
import style from './SourcesPanel.module.scss';
interface GSheetSetupProps {
cancel: () => void;
}
export default function GSheetSetup({ cancel }: GSheetSetupProps) {
const { handleClientSecret, handleAuthenticate, handleConnect } = useGoogleSheet();
const sheetIdInputRef = useRef<HTMLInputElement>(null);
const stepData = useSheetStore((state) => state.stepData);
const reset = useSheetStore((state) => state.reset);
const sheetId = useSheetStore((state) => state.sheetId);
const worksheetOptions = useSheetStore((state) => state.worksheetOptions) ?? [];
const setWorksheet = useSheetStore((state) => state.setWorksheet);
const setSheetId = useSheetStore((state) => state.setSheetId);
const worksheetIdInputRef = useRef<HTMLSelectElement>(null);
// user cancels the flow
const onCancel = () => {
reset();
cancel();
};
// connect to the accoutn with the given sheet ID
const connectToId = () => {
const sheetId = sheetIdInputRef.current?.value;
if (!sheetId) return;
handleConnect(sheetId);
};
// adds the user input sheet ID to the store
const addSheetId = () => {
const sheetId = sheetIdInputRef.current?.value;
console.log('adding', sheetId);
if (!sheetId) return;
setSheetId(sheetId);
};
// adds the selected worksheet to the store
const addWorksheetSheetId = () => {
const worksheetId = worksheetIdInputRef.current?.value;
if (!worksheetId) return;
setWorksheet(worksheetId);
};
const canAuthenticate = stepData.authenticate.available;
const canConnect = stepData.authenticate.available && sheetId;
return (
<Panel.Section>
<Panel.Title>
Sync with Google Sheet (experimental)
<Button variant='ontime-subtle' size='sm' onClick={onCancel}>
Cancel
</Button>
</Panel.Title>
<Panel.ListGroup>
<div className={style.buttonRow}>
<div className={style.inputContainer}>
<Input type='file' onChange={handleClientSecret} accept='.json' size='sm' variant='ontime-filled' />
</div>
<Button
variant='ontime-subtle'
size='sm'
onClick={handleAuthenticate}
leftIcon={<IoShieldCheckmarkOutline />}
isDisabled={!canAuthenticate}
>
Authenticate
</Button>
</div>
<Panel.Error>{stepData.clientSecret.error}</Panel.Error>
</Panel.ListGroup>
<Panel.ListGroup>
<Panel.Error>{stepData.sheetId.error}</Panel.Error>
<div className={style.buttonRow}>
<div className={style.inputContainer}>
<Input
size='sm'
variant='ontime-filled'
autoComplete='off'
isDisabled={!stepData.sheetId.available}
placeholder='Enter Sheet ID'
onBlur={addSheetId}
onSubmit={addSheetId}
ref={sheetIdInputRef}
/>
</div>
<Button
variant='ontime-subtle'
size='sm'
onClick={connectToId}
isDisabled={!canConnect}
leftIcon={<IoCheckmark />}
>
Connect
</Button>
</div>
</Panel.ListGroup>
<Panel.ListGroup>
<div className={style.buttonRow}>
<div className={style.inputContainer}>
<Select
size='sm'
variant='ontime'
isDisabled={!stepData.worksheet.available}
placeholder='Select worksheet'
ref={worksheetIdInputRef}
>
{worksheetOptions.map((value) => (
<option key={value} value={value}>
{value}
</option>
))}
</Select>
</div>
<Button
variant='ontime-filled'
size='sm'
onClick={addWorksheetSheetId}
isDisabled={!stepData.worksheet.available}
leftIcon={<IoCloudDownloadOutline />}
>
Continue
</Button>
</div>
<Panel.Error>{stepData.worksheet.error}</Panel.Error>
<Panel.Error>{stepData.pullPush.error}</Panel.Error>
</Panel.ListGroup>
</Panel.Section>
);
}
apps/client/src/features/app-settings/panel/sources-panel/ImportMap.tsx
+45
View File
@@ -0,0 +1,45 @@
import { Button } from '@chakra-ui/react';
import ExcelFileOptions from '../../../modals/upload-modal/upload-options/ExcelFileOptions';
import * as Panel from '../PanelUtils';
import useGoogleSheet from './useGoogleSheet';
import { useSheetStore } from './useSheetStore';
import style from './SourcesPanel.module.scss';
export default function ImportMap() {
const { handleImportPreview, handleExport } = useGoogleSheet();
const sheetId = useSheetStore((state) => state.sheetId);
const worksheetId = useSheetStore((state) => state.worksheet);
const importOptions = useSheetStore((state) => state.excelFileOptions);
const patchImportOptions = useSheetStore((state) => state.patchExcelFileOptions);
const stepData = useSheetStore((state) => state.stepData);
const exportRundown = () => {
if (!worksheetId || !sheetId) return;
handleExport(sheetId, worksheetId, importOptions);
};
const importPreviewRundown = () => {
if (!worksheetId || !sheetId) return;
handleImportPreview(sheetId, worksheetId, importOptions);
};
return (
<Panel.Section>
<Panel.Title>Import options</Panel.Title>
<ExcelFileOptions importOptions={importOptions} updateOptions={patchImportOptions} />
<Panel.Error>{stepData.worksheet.error}</Panel.Error>
<div className={style.buttonRow}>
<Button variant='ontime-filled' size='sm' onClick={exportRundown}>
Export
</Button>
<Button variant='ontime-filled' size='sm' onClick={importPreviewRundown}>
Import preview
</Button>
</div>
</Panel.Section>
);
}
apps/client/src/features/app-settings/panel/sources-panel/ImportReview.tsx
+37
View File
@@ -0,0 +1,37 @@
import { Button } from '@chakra-ui/react';
import { OntimeRundown, UserFields } from 'ontime-types';
import PreviewExcel from '../../../modals/upload-modal/preview/PreviewExcel';
import useGoogleSheet from './useGoogleSheet';
import { useSheetStore } from './useSheetStore';
import style from './SourcesPanel.module.scss';
interface ImportReviewProps {
rundown: OntimeRundown;
userFields: UserFields;
}
export default function ImportReview({ rundown, userFields }: ImportReviewProps) {
const { handleImport } = useGoogleSheet();
const resetPreview = useSheetStore((state) => state.resetPreview);
const applyImport = () => {
handleImport(rundown, userFields);
};
return (
<>
<PreviewExcel rundown={rundown} userFields={userFields} />
<div className={style.buttonRow}>
<Button onClick={resetPreview} variant='ontime-ghosted' size='sm'>
Cancel
</Button>
<Button onClick={applyImport} variant='ontime-filled' size='sm'>
Apply
</Button>
</div>
</>
);
}
apps/client/src/features/app-settings/panel/sources-panel/SourcesPanel.module.scss
+21
View File
@@ -0,0 +1,21 @@
.uploadSection {
margin-top: 1rem;
display: flex;
flex-direction: row;
gap: 2rem;
padding: 3rem 1rem;
align-items: center;
justify-content: center;
background-color: $gray-1350;
border: 1px solid $white-10;
border-radius: 3px;
}
.buttonRow {
display: flex;
gap: 1rem;
}
.inputContainer {
flex: 1;
}
apps/client/src/features/app-settings/panel/sources-panel/SourcesPanel.tsx
+84
View File
@@ -0,0 +1,84 @@
import { useRef, useState } from 'react';
import { Button, Input } from '@chakra-ui/react';
import { IoCloudOutline } from '@react-icons/all-files/io5/IoCloudOutline';
import { IoDownloadOutline } from '@react-icons/all-files/io5/IoDownloadOutline';
import * as Panel from '../PanelUtils';
import GSheetInfo from './GSheetInfo';
import GSheetSetup from './GSheetSetup';
import ImportMap from './ImportMap';
import ImportReview from './ImportReview';
import { useSheetStore } from './useSheetStore';
import style from './SourcesPanel.module.scss';
export default function SourcesPanel() {
const [importFlow, setImportFlow] = useState<'none' | 'excel' | 'gsheet'>('none');
const hasDataSource = useSheetStore((state) => state.stepData.worksheet.available);
const rundown = useSheetStore((state) => state.rundown);
const userFields = useSheetStore((state) => state.userFields);
const hasData = rundown && userFields;
const fileInputRef = useRef<HTMLInputElement>(null);
const handleFile = () => console.error('not yet implementeed');
const handleUpload = () => {
fileInputRef.current?.click();
setImportFlow('excel');
};
const openGSheetFlow = () => {
setImportFlow('gsheet');
};
const cancelGSheetFlow = () => {
setImportFlow('none');
};
const isExcelFlow = importFlow === 'excel';
const isGSheetFlow = importFlow === 'gsheet';
return (
<>
<Panel.Header>Data sources</Panel.Header>
<Panel.Section>
<Panel.Card>
<Panel.SubHeader>Synchronise your rundown with an external source</Panel.SubHeader>
<GSheetInfo />
{!isGSheetFlow && (
<>
<Input ref={fileInputRef} style={{ display: 'none' }} type='file' onChange={handleFile} accept='.xlsx' />
<div className={style.uploadSection}>
<div>
<Button
variant='ontime-filled'
size='sm'
leftIcon={<IoDownloadOutline />}
onClick={handleUpload}
isDisabled
>
Import from spreadsheet
</Button>
<Panel.Description>Accepts .xlsx files</Panel.Description>
</div>
<div>
<Button variant='ontime-filled' size='sm' leftIcon={<IoCloudOutline />} onClick={openGSheetFlow}>
Synchronise with Google
</Button>
<Panel.Description>Start authentication process</Panel.Description>
</div>
</div>
</>
)}
{isGSheetFlow && <GSheetSetup cancel={cancelGSheetFlow} />}
{isExcelFlow && <Panel.Title>Not yet implemented</Panel.Title>}
{hasDataSource && <ImportMap />}
{hasData && <ImportReview rundown={rundown} userFields={userFields} />}
</Panel.Card>
</Panel.Section>
</>
);
}
apps/client/src/features/app-settings/panel/sources-panel/useGoogleSheet.ts
+152
View File
@@ -0,0 +1,152 @@
import { ChangeEvent } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import { OntimeRundown, UserFields } from 'ontime-types';
import { ExcelImportMap } from 'ontime-utils';
import { RUNDOWN, USERFIELDS } from '../../../../common/api/apiConstants';
import { maybeAxiosError } from '../../../../common/api/apiUtils';
import {
getAuthentication,
getClientSecret,
getSheetsAuthUrl,
patchData,
postId,
postPreviewSheet,
postPushSheet,
postWorksheet,
uploadSheetClientFile,
} from '../../../../common/api/ontimeApi';
import { openLink } from '../../../../common/utils/linkUtils';
import { useSheetStore } from './useSheetStore';
// TODO: recover useEffect for resuming previous state
export default function useGoogleSheet() {
const queryClient = useQueryClient();
// functions push data to store
const setClientSecret = useSheetStore((state) => state.setClientSecret);
const patchStepData = useSheetStore((state) => state.patchStepData);
const setSheetId = useSheetStore((state) => state.setSheetId);
const setWorksheetOptions = useSheetStore((state) => state.setWorksheetOptions);
const setRundown = useSheetStore((state) => state.setRundown);
const setUserFields = useSheetStore((state) => state.setUserFields);
/** receives a client secrets file and passes on to the server */
const handleClientSecret = async (event: ChangeEvent<HTMLInputElement>) => {
if (!event.target.files?.length) {
patchStepData({
clientSecret: { available: true, error: 'Missing file' },
authenticate: { available: false, error: '' },
});
return;
}
try {
const selectedFile = event.target.files[0];
await uploadSheetClientFile(selectedFile);
// TODO: why do we need this call?
await getClientSecret();
setClientSecret(selectedFile);
patchStepData({
clientSecret: { available: true, error: '' },
authenticate: { available: true, error: '' },
});
} catch (error) {
patchStepData({
clientSecret: { available: true, error: maybeAxiosError(error) },
authenticate: { available: false, error: '' },
});
}
};
/** authenticate with the Google Sheets API */
const handleAuthenticate = async () => {
try {
const authLink = await getSheetsAuthUrl();
// request window to open link and check auth when user is back
openLink(authLink);
window.addEventListener('focus', async () => await getAuthentication(), { once: true });
patchStepData({
authenticate: { available: true, error: '' },
sheetId: { available: true, error: '' },
});
} catch (error) {
patchStepData({
authenticate: { available: true, error: maybeAxiosError(error) },
sheetId: { available: false, error: '' },
});
}
};
/** fetches data from a Google Sheet by its ID */
const handleConnect = async (sheetId: string) => {
try {
setSheetId(sheetId);
const data = await postId(sheetId);
setWorksheetOptions(data.worksheetOptions);
patchStepData({ worksheet: { available: true, error: '' } });
} catch (error) {
patchStepData({
sheetId: { available: true, error: maybeAxiosError(error) },
worksheet: { available: false, error: '' },
pullPush: { available: false, error: '' },
});
setWorksheetOptions([]);
}
};
/** fetches data from a worksheet by its ID */
const handleImportPreview = async (sheetId: string, worksheet: string, fileOptions: ExcelImportMap) => {
try {
// update worksheet data in the server
await postWorksheet(sheetId, worksheet);
// get data from google
const data = await postPreviewSheet(sheetId, fileOptions);
setRundown(data.rundown);
setUserFields(data.userFields);
} catch (error) {
patchStepData({ pullPush: { available: true, error: maybeAxiosError(error) } });
}
};
/** writes data to a worksheet by its ID */
const handleExport = async (sheetId: string, worksheet: string, fileOptions: ExcelImportMap) => {
try {
// update worksheet data in the server
await postWorksheet(sheetId, worksheet);
// write data to google
await postPushSheet(sheetId, fileOptions);
patchStepData({ pullPush: { available: false, error: '' } });
} catch (error) {
patchStepData({ pullPush: { available: true, error: maybeAxiosError(error) } });
}
};
/** applies rundown and userfields to current project */
const handleImport = async (rundown: OntimeRundown, userFields: UserFields) => {
try {
await patchData({ rundown, userFields });
queryClient.setQueryData(RUNDOWN, rundown);
queryClient.setQueryData(USERFIELDS, userFields);
await queryClient.invalidateQueries({
queryKey: [...RUNDOWN, ...USERFIELDS],
});
} catch (error) {
patchStepData({ pullPush: { available: true, error: maybeAxiosError(error) } });
}
};
return {
handleClientSecret,
handleAuthenticate,
handleConnect,
handleImportPreview,
handleImport,
handleExport,
};
}
apps/client/src/features/app-settings/panel/sources-panel/useSheetStore.ts
+67
View File
@@ -0,0 +1,67 @@
import { OntimeRundown, UserFields } from 'ontime-types';
import { defaultExcelImportMap, ExcelImportMap } from 'ontime-utils';
import { create } from 'zustand';
// TODO: persist excelFileOptions to localStorage
type SheetStore = {
clientSecret: File | null;
rundown: OntimeRundown | null;
userFields: UserFields | null;
sheetId: string | null;
worksheet: string | null;
worksheetOptions: string[] | null;
excelFileOptions: ExcelImportMap;
stepData: typeof initialStepData;
setClientSecret: (clientSecret: File | null) => void;
setRundown: (rundown: OntimeRundown | null) => void;
setUserFields: (userFields: UserFields | null) => void;
setSheetId: (sheetId: string) => void;
setWorksheet: (worksheet: string) => void;
setWorksheetOptions: (worksheetOptions: string[] | null) => void;
patchExcelFileOptions: <T extends keyof ExcelImportMap>(field: T, value: ExcelImportMap[T]) => void;
patchStepData: (patch: Partial<typeof initialStepData>) => void;
reset: () => void;
resetPreview: () => void;
};
const initialStepData = {
clientSecret: { available: true, error: '' },
authenticate: { available: false, error: '' },
sheetId: { available: false, error: '' },
worksheet: { available: false, error: '' },
pullPush: { available: false, error: '' },
};
const initialState = {
clientSecret: null,
rundown: null,
userFields: null,
sheetId: null,
worksheet: null,
worksheetOptions: null,
excelFileOptions: defaultExcelImportMap,
stepData: initialStepData,
};
export const useSheetStore = create<SheetStore>((set, get) => ({
...initialState,
setClientSecret: (clientSecret: File | null) => set({ clientSecret }),
setRundown: (rundown: OntimeRundown | null) => set({ rundown }),
setUserFields: (userFields: UserFields | null) => set({ userFields }),
setSheetId: (sheetId: string) => set({ sheetId }),
setWorksheet: (worksheet: string) => set({ worksheet }),
setWorksheetOptions: (worksheetOptions: string[] | null) => set({ worksheetOptions }),
patchExcelFileOptions: <T extends keyof ExcelImportMap>(field: T, value: ExcelImportMap[T]) => {
const excelFileOptions = get().excelFileOptions;
if (excelFileOptions[field] !== value) {
excelFileOptions[field] = value;
}
},
patchStepData: (patch: Partial<typeof initialStepData>) => {
const stepData = get().stepData;
set({ stepData: { ...stepData, ...patch } });
},
reset: () => set(initialState),
resetPreview: () => set({ rundown: null, userFields: null }),
}));
apps/client/src/features/app-settings/settingsStore.ts
+5 -2
View File
@@ -16,14 +16,17 @@ export const settingPanels: Readonly<SettingsOption[]> = [
{
id: 'project_settings',
label: 'Project Settings',
secondary: [{ id: 'project_settings__custom', label: 'Custom Fields' }],
secondary: [{ id: 'project_settings__custom', label: 'Custom fields' }],
},
{ id: 'interface', label: 'Interface' },
{ id: 'views', label: 'Views' },
{
id: 'sources',
label: 'Data Sources',
secondary: [{ id: 'sources__gsheet', label: 'Sync with Google Sheet' }],
secondary: [
{ id: 'sources__xlsx', label: 'Import spreadsheet' },
{ id: 'sources__gsheet', label: 'Sync with Google Sheet' },
],
split: true,
},
{
apps/client/src/features/editors/Editor.tsx
-5
View File
@@ -5,7 +5,6 @@ import ErrorBoundary from '../../common/components/error-boundary/ErrorBoundary'
import AppSettings from '../app-settings/AppSettings';
import { SettingsOptionId, useSettingsStore } from '../app-settings/settingsStore';
import MenuBar from '../menu/MenuBar';
import SheetsModal from '../modals/sheets-modal/SheetsModal';
import UploadModal from '../modals/upload-modal/UploadModal';
import Overview from '../overview/Overview';
@@ -26,7 +25,6 @@ export default function Editor() {
const { isOpen: isOldSettingsOpen, onOpen: onSettingsOpen, onClose: onSettingsClose } = useDisclosure();
const { isOpen: isUploadModalOpen, onOpen: onUploadModalOpen, onClose: onUploadModalClose } = useDisclosure();
const { isOpen: isSheetsOpen, onOpen: onSheetsOpen, onClose: onSheetsClose } = useDisclosure();
// Set window title
useEffect(() => {
@@ -40,7 +38,6 @@ export default function Editor() {
<ErrorBoundary>
<UploadModal onClose={onUploadModalClose} isOpen={isUploadModalOpen} />
<SettingsModal isOpen={isOldSettingsOpen} onClose={onSettingsClose} />
<SheetsModal onClose={onSheetsClose} isOpen={isSheetsOpen} />
</ErrorBoundary>
<div className={styles.mainContainer} data-testid='event-editor'>
<ErrorBoundary>
@@ -52,8 +49,6 @@ export default function Editor() {
onUploadOpen={onUploadModalOpen}
openSettings={handleSettings}
isSettingsOpen={isSettingsOpen}
isSheetsOpen={isSheetsOpen}
onSheetsOpen={onSheetsOpen}
/>
</ErrorBoundary>
{showSettings ? (
apps/client/src/features/menu/MenuBar.tsx
-15
View File
@@ -1,8 +1,6 @@
import { memo, useCallback, useEffect } from 'react';
import { IconButton, MenuButton, Tooltip } from '@chakra-ui/react';
import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
import { IoCloud } from '@react-icons/all-files/io5/IoCloud';
import { IoCloudOutline } from '@react-icons/all-files/io5/IoCloudOutline';
import { IoOptions } from '@react-icons/all-files/io5/IoOptions';
import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
import { IoPushOutline } from '@react-icons/all-files/io5/IoPushOutline';
@@ -25,8 +23,6 @@ interface MenuBarProps {
onSettingsClose: () => void;
isUploadOpen: boolean;
onUploadOpen: () => void;
isSheetsOpen: boolean;
onSheetsOpen: () => void;
openSettings: (newTab?: string) => void;
isSettingsOpen: boolean;
}
@@ -52,8 +48,6 @@ const MenuBar = (props: MenuBarProps) => {
onUploadOpen,
openSettings,
isSettingsOpen,
isSheetsOpen,
onSheetsOpen,
} = props;
const { isElectron, sendToElectron } = useElectronEvent();
@@ -141,15 +135,6 @@ const MenuBar = (props: MenuBarProps) => {
aria-label='Edit mode'
/>
<div className={style.gap} />
<TooltipActionBtn
{...buttonStyle}
isDisabled={appMode === AppMode.Run}
icon={isSheetsOpen ? <IoCloud /> : <IoCloudOutline />}
className={isSheetsOpen ? style.open : ''}
clickHandler={onSheetsOpen}
tooltip='Sheets'
aria-label='Sheets'
/>
<TooltipActionBtn
{...buttonStyle}
isDisabled={appMode === AppMode.Run}
apps/client/src/features/modals/sheets-modal/SheetsModal.tsx
-460
View File
@@ -1,460 +0,0 @@
import { ChangeEvent, useEffect, useRef, useState } from 'react';
import {
Alert,
AlertDescription,
AlertIcon,
AlertTitle,
Button,
HStack,
Input,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
Select,
} from '@chakra-ui/react';
import { useQueryClient } from '@tanstack/react-query';
import { OntimeRundown, UserFields } from 'ontime-types';
import { defaultExcelImportMap, ExcelImportMap } from 'ontime-utils';
import { RUNDOWN, USERFIELDS } from '../../../common/api/apiConstants';
import { maybeAxiosError } from '../../../common/api/apiUtils';
import {
getAuthentication,
getClientSecrect,
getSheetsAuthUrl,
patchData,
postId,
postPreviewSheet,
postPushSheet,
postWorksheet,
uploadSheetClientFile,
} from '../../../common/api/ontimeApi';
import { userFieldsPlaceholder } from '../../../common/models/UserFields';
import { openLink } from '../../../common/utils/linkUtils';
import ModalLink from '../ModalLink';
import PreviewExcel from '../upload-modal/preview/PreviewExcel';
import ExcelFileOptions from '../upload-modal/upload-options/ExcelFileOptions';
import Step from './Step';
interface SheetsModalProps {
onClose: () => void;
isOpen: boolean;
}
export default function SheetsModal(props: SheetsModalProps) {
const { isOpen, onClose } = props;
const queryClient = useQueryClient();
const [rundown, setRundown] = useState<OntimeRundown | null>(null);
const [userFields, setUserFields] = useState<UserFields | null>(null);
const [id, setSheetId] = useState('');
const [worksheet, setWorksheet] = useState('');
const [worksheetOptions, setWorksheetOptions] = useState<string[]>([]);
const [direction, setDirection] = useState('none');
const excelFileOptions = useRef<ExcelImportMap>(defaultExcelImportMap);
const fileInputRef = useRef<HTMLInputElement>(null);
const [state, setState] = useState({
clientSecret: { complete: false, message: '' },
authenticate: { complete: false, message: '' },
id: { complete: false, message: '' },
worksheet: { complete: false, message: '' },
pullPush: { complete: false, message: '' },
});
useEffect(() => {
if (isOpen) {
setDirection('none');
testClientSecret();
if (state.clientSecret.complete) testAuthentication();
if (state.authenticate.complete) testSheetId();
}
}, [isOpen]);
const handleClose = () => {
setRundown(null);
setUserFields(null);
onClose();
};
//STEP-1 Upload Client ID
const handleClick = () => {
fileInputRef.current?.click();
};
const handleFile = (event: ChangeEvent<HTMLInputElement>) => {
if (!event.target.files?.length) {
setState({
clientSecret: { complete: false, message: 'Missing file' },
authenticate: { complete: false, message: '' },
id: { complete: false, message: '' },
worksheet: { complete: false, message: '' },
pullPush: { complete: false, message: '' },
});
return;
}
const selectedFile = event.target.files[0];
uploadSheetClientFile(selectedFile)
.then(() => {
setState({ ...state, clientSecret: { complete: true, message: '' } });
})
.catch((err) => {
const message = maybeAxiosError(err);
setState({
clientSecret: { complete: false, message },
authenticate: { complete: false, message: '' },
id: { complete: false, message: '' },
worksheet: { complete: false, message: '' },
pullPush: { complete: false, message: '' },
});
});
};
const testClientSecret = () => {
getClientSecrect()
.then(() => {
setState({ ...state, clientSecret: { complete: true, message: '' } });
})
.catch((err) => {
const message = maybeAxiosError(err);
setState({
clientSecret: { complete: false, message },
authenticate: { complete: false, message: '' },
id: { complete: false, message: '' },
worksheet: { complete: false, message: '' },
pullPush: { complete: false, message: '' },
});
});
};
//STEP-2 Authenticate
const handleAuthenticate = () => {
getSheetsAuthUrl()
.then((data) => {
openLink(data);
window.addEventListener('focus', () => testAuthentication(), { once: true });
})
.catch((err) => {
const message = maybeAxiosError(err);
setState({
...state,
authenticate: { complete: false, message },
id: { complete: false, message: '' },
worksheet: { complete: false, message: '' },
pullPush: { complete: false, message: '' },
});
});
};
const testAuthentication = () => {
getAuthentication()
.then(() => {
setState({ ...state, authenticate: { complete: true, message: '' } });
})
.catch((error) => {
const message = maybeAxiosError(error);
setState({
...state,
authenticate: { complete: false, message },
id: { complete: false, message: '' },
worksheet: { complete: false, message: '' },
pullPush: { complete: false, message: '' },
});
});
};
//STEP-3 set sheet ID
const testSheetId = () => {
postId(id)
.then((data) => {
setState({ ...state, id: { complete: true, message: '' } });
setWorksheetOptions(data.worksheetOptions);
})
.catch((err) => {
const message = maybeAxiosError(err);
setState({
...state,
id: { complete: false, message },
worksheet: { complete: false, message: '' },
pullPush: { complete: false, message: '' },
});
setWorksheetOptions([]);
});
};
//STEP-4 Select Worksheet
const testWorksheet = (value: string) => {
excelFileOptions.current.worksheet = value;
setWorksheet(value);
postWorksheet(id, worksheet)
.then(() => {
setState({ ...state, worksheet: { complete: true, message: '' } });
})
.catch((err) => {
const message = maybeAxiosError(err);
setState({ ...state, worksheet: { complete: false, message }, pullPush: { complete: false, message: '' } });
});
};
//STEP-5 Upload / Download
const updateExcelFileOptions = <T extends keyof ExcelImportMap>(field: T, value: ExcelImportMap[T]) => {
if (excelFileOptions.current[field] !== value) {
excelFileOptions.current = { ...excelFileOptions.current, [field]: value };
}
};
const handlePullData = () => {
postPreviewSheet(id, excelFileOptions.current)
.then((data) => {
setRundown(data.rundown);
setUserFields(data.userFields);
})
.catch((error) => {
const message = maybeAxiosError(error);
setDirection('none');
setState({ ...state, pullPush: { complete: false, message } });
});
};
const handlePushData = () => {
postPushSheet(id, excelFileOptions.current)
.then(() => {
setDirection('none');
setState({ ...state, pullPush: { complete: true, message: '' } });
})
.catch((error) => {
const message = maybeAxiosError(error);
setDirection('none');
setState({ ...state, pullPush: { complete: false, message } });
});
};
//GET preview
const handleFinalise = async () => {
if (rundown && userFields) {
let doClose = false;
try {
await patchData({ rundown, userFields });
queryClient.setQueryData(RUNDOWN, rundown);
queryClient.setQueryData(USERFIELDS, userFields);
await queryClient.invalidateQueries({
queryKey: [...RUNDOWN, ...USERFIELDS],
});
doClose = true;
} catch (error) {
const message = maybeAxiosError(error);
console.error(message);
} finally {
if (doClose) {
handleClose();
}
}
}
};
return (
<Modal
onClose={handleClose}
isOpen={isOpen}
closeOnOverlayClick={false}
motionPreset='slideInBottom'
size='xl'
scrollBehavior='inside'
preserveScrollBarGap
variant='ontime-upload'
>
<ModalOverlay />
<ModalContent>
<ModalHeader>Rundown from sheets (experimental)</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Alert status='info' variant='ontime-on-light-info'>
<AlertIcon />
<div style={{ display: 'flex', flexDirection: 'column' }}>
<AlertTitle>Sync with Google Sheets</AlertTitle>
<AlertDescription>
<ModalLink href='https://ontime.gitbook.io/v2/features/google-sheet'>
For more information, see the docs
</ModalLink>
</AlertDescription>
</div>
</Alert>
{!rundown ? (
direction === 'up' || direction === 'down' ? (
<ExcelFileOptions optionsRef={excelFileOptions} updateOptions={updateExcelFileOptions} />
) : (
<>
<Step
title='1 - Upload OAuth 2.0 Client ID'
completed={state.clientSecret.complete}
disabled={false}
error={state.clientSecret.message}
>
<Input
ref={fileInputRef}
style={{ display: 'none' }}
type='file'
onChange={handleFile}
accept='.json'
data-testid='file-input'
/>
<div style={{ display: 'flex', gap: '1em' }}>
<Button size='sm' variant='ontime-subtle-on-light' onClick={handleClick}>
{state.clientSecret.complete ? 'Reupload Client ID' : 'Upload Client ID'}
</Button>
<Button size='sm' variant='ontime-ghosted-on-light' onClick={testClientSecret}>
Retry Client ID
</Button>
</div>
</Step>
<Step
title='2 - Authenticate with Google'
completed={state.authenticate.complete}
disabled={!state.clientSecret.complete}
error={state.authenticate.message}
>
<div style={{ display: 'flex', gap: '1em' }}>
<Button
size='sm'
variant='ontime-subtle-on-light'
onClick={handleAuthenticate}
isDisabled={!state.clientSecret.complete}
>
Authenticate
</Button>
<Button
size='sm'
variant='ontime-ghosted-on-light'
onClick={testAuthentication}
isDisabled={!state.clientSecret.complete}
>
Retry Connection
</Button>
</div>
</Step>
<Step
title='3 - Add Document ID'
completed={state.id.complete}
disabled={!state.authenticate.complete}
error={state.id.message}
>
<HStack>
<Input
type='text'
size='sm'
variant='ontime-filled-on-light'
isDisabled={!state.authenticate.complete}
value={id}
onChange={(event) => setSheetId(event.target.value)}
/>
<Button
isDisabled={!state.authenticate.complete}
size='sm'
variant='ontime-subtle-on-light'
padding='0 2em'
onClick={testSheetId}
>
Connect
</Button>
</HStack>
</Step>
<Step
title='4 - Select Worksheet to import'
completed={state.worksheet.complete}
disabled={worksheetOptions.length == 0}
>
<Select
size='sm'
isDisabled={worksheetOptions.length == 0}
placeholder='Select a worksheet'
onChange={(event) => testWorksheet(event.target.value)}
value={worksheet}
>
{worksheetOptions.map((value) => (
<option key={value} value={value}>
{value}
</option>
))}
</Select>
</Step>
<Step title='5 - Upload / Download rundown' completed={false} disabled={!state.worksheet.complete}>
<div style={{ display: 'flex', gap: '1em' }}>
<Button
isDisabled={!state.worksheet.complete}
variant='ontime-subtle-on-light'
padding='0 2em'
onClick={() => setDirection('up')}
>
Upload
</Button>
<Button
isDisabled={!state.worksheet.complete}
variant='ontime-subtle-on-light'
padding='0 2em'
onClick={() => setDirection('down')}
>
Download
</Button>
</div>
</Step>
</>
)
) : (
<PreviewExcel rundown={rundown ?? []} userFields={userFields ?? userFieldsPlaceholder} />
)}
</ModalBody>
<ModalFooter>
{rundown ? (
<div style={{ display: 'flex', gap: '1em' }}>
<Button
onClick={() => {
setRundown(null);
setDirection('none');
}}
variant='ontime-ghost-on-light'
>
Go Back
</Button>
<Button variant='ontime-filled' padding='0 2em' onClick={handleFinalise}>
Import
</Button>
</div>
) : direction === 'up' ? (
<div style={{ display: 'flex', gap: '1em' }}>
<Button onClick={() => setDirection('none')} variant='ontime-ghost-on-light'>
Go Back
</Button>
<Button variant='ontime-filled' padding='0 2em' onClick={handlePushData}>
Upload
</Button>
</div>
) : direction === 'down' ? (
<div style={{ display: 'flex', gap: '1em' }}>
<Button onClick={() => setDirection('none')} variant='ontime-ghost-on-light'>
Go Back
</Button>
<Button variant='ontime-filled' padding='0 2em' onClick={handlePullData}>
Preview
</Button>
</div>
) : (
<></>
)}
</ModalFooter>
</ModalContent>
</Modal>
);
}
apps/client/src/features/modals/sheets-modal/Step.module.scss
-40
View File
@@ -1,40 +0,0 @@
.wrapper {
padding: 0.5rem;
}
.header {
width: 100%;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1rem;
padding-bottom: 1rem;
}
.step {
width: 1.25rem;
height: 1.25rem;
font-size: 0.75rem;
display: grid;
place-content: center;
}
.title {
display: inline;
color: $gray-500;
text-transform: uppercase;
cursor: pointer;
}
.check {
color: $green-700;
}
.errorIcon {
color: $red-700;
}
.errorText {
color: $red-700;
font-size: 0.75rem;
}
apps/client/src/features/modals/sheets-modal/Step.tsx
-47
View File
@@ -1,47 +0,0 @@
import { PropsWithChildren, useEffect, useMemo, useState } from 'react';
import { IoCheckmarkCircle } from '@react-icons/all-files/io5/IoCheckmarkCircle';
import { IoCloseCircle } from '@react-icons/all-files/io5/IoCloseCircle';
import { IoRadioButtonOffOutline } from '@react-icons/all-files/io5/IoRadioButtonOffOutline';
import style from './Step.module.scss';
interface StepProps {
title: string;
disabled: boolean;
completed: boolean;
error?: string;
}
export default function Step(props: PropsWithChildren<StepProps>) {
const { title, disabled, completed, error, children } = props;
const [collapsed, setCollapsed] = useState(disabled);
const handleCollapse = () => setCollapsed((prev) => !prev);
const icon = useMemo(() => {
if (completed) return <IoCheckmarkCircle className={style.step} style={{ color: 'green' }} />;
if (error) return <IoCloseCircle className={style.step} style={{ color: 'red' }} />;
return <IoRadioButtonOffOutline className={style.step} />;
}, [completed, error]);
useEffect(() => {
if (completed) {
setCollapsed(true);
}
}, [completed]);
return (
<div className={style.wrapper}>
<div className={style.header} onClick={handleCollapse}>
{icon}
<span className={style.title}>{title}</span>
</div>
{!collapsed && (
<>
{error && <div className={style.errorText}>{error}</div>}
{children}
</>
)}
</div>
);
}
apps/client/src/features/modals/upload-modal/UploadModal.tsx
+3 -1
View File
@@ -207,7 +207,9 @@ export default function UploadModal({ onClose, isOpen }: UploadModalProps) {
<>
<UploadFile />
{isOntime && <OntimeFileOptions optionsRef={ontimeFileOptions} updateOptions={updateOntimeFileOptions} />}
{isExcel && <ExcelFileOptions optionsRef={excelFileOptions} updateOptions={updateExcelFileOptions} />}
{isExcel && (
<ExcelFileOptions importOptions={excelFileOptions.current} updateOptions={updateExcelFileOptions} />
)}
</>
) : (
<PreviewExcel rundown={rundown ?? []} userFields={userFields ?? userFieldsPlaceholder} />
apps/client/src/features/modals/upload-modal/upload-options/ExcelFileOptions.tsx
+28 -29
View File
@@ -1,4 +1,3 @@
import { MutableRefObject } from 'react';
import { ExcelImportMap } from 'ontime-utils';
import ImportMapTable, { type TableEntry } from './ImportMapTable';
@@ -6,50 +5,50 @@ import ImportMapTable, { type TableEntry } from './ImportMapTable';
import style from '../UploadModal.module.scss';
interface ExcelFileOptionsProps {
optionsRef: MutableRefObject<ExcelImportMap>;
importOptions: ExcelImportMap;
updateOptions: <T extends keyof ExcelImportMap>(field: T, value: ExcelImportMap[T]) => void;
}
export default function ExcelFileOptions(props: ExcelFileOptionsProps) {
const { optionsRef, updateOptions } = props;
const { importOptions, updateOptions } = props;
const worksheet: TableEntry[] = [{ label: 'Worksheet', title: 'worksheet', value: optionsRef.current.worksheet }];
const worksheet: TableEntry[] = [{ label: 'Worksheet', title: 'worksheet', value: importOptions.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 },
{ label: 'Warning Time', title: 'timeWarning', value: optionsRef.current.timeWarning },
{ label: 'Danger Time', title: 'timeDanger', value: optionsRef.current.timeDanger },
{ label: 'Start time', title: 'timeStart', value: importOptions.timeStart },
{ label: 'End Time', title: 'timeEnd', value: importOptions.timeEnd },
{ label: 'Duration', title: 'duration', value: importOptions.duration },
{ label: 'Warning Time', title: 'timeWarning', value: importOptions.timeWarning },
{ label: 'Danger Time', title: 'timeDanger', value: importOptions.timeDanger },
];
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 },
{ label: 'Cue', title: 'cue', value: importOptions.cue },
{ label: 'Colour', title: 'colour', value: importOptions.colour },
{ label: 'Title', title: 'title', value: importOptions.title },
{ label: 'Presenter', title: 'presenter', value: importOptions.presenter },
{ label: 'Subtitle', title: 'subtitle', value: importOptions.subtitle },
{ label: 'Note', title: 'note', value: importOptions.note },
];
const options: TableEntry[] = [
{ label: 'Is Public', title: 'isPublic', value: optionsRef.current.isPublic },
{ label: 'Skip', title: 'skip', value: optionsRef.current.skip },
{ label: 'Timer Type', title: 'timerType', value: optionsRef.current.timerType },
{ label: 'End Action', title: 'endAction', value: optionsRef.current.endAction },
{ label: 'Is Public', title: 'isPublic', value: importOptions.isPublic },
{ label: 'Skip', title: 'skip', value: importOptions.skip },
{ label: 'Timer Type', title: 'timerType', value: importOptions.timerType },
{ label: 'End Action', title: 'endAction', value: importOptions.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 },
{ label: 'User 0', title: 'user0', value: importOptions.user0 },
{ label: 'User 1', title: 'user1', value: importOptions.user1 },
{ label: 'User 2', title: 'user2', value: importOptions.user2 },
{ label: 'User 3', title: 'user3', value: importOptions.user3 },
{ label: 'User 4', title: 'user4', value: importOptions.user4 },
{ label: 'User 5', title: 'user5', value: importOptions.user5 },
{ label: 'User 6', title: 'user6', value: importOptions.user6 },
{ label: 'User 7', title: 'user7', value: importOptions.user7 },
{ label: 'User 8', title: 'user8', value: importOptions.user8 },
{ label: 'User 9', title: 'user9', value: importOptions.user9 },
];
return (
apps/client/src/features/modals/upload-modal/upload-options/ImportMapTable.tsx
+2 -2
View File
@@ -31,8 +31,8 @@ export default function ImportMapTable(props: ImportMapTableProps) {
<td className={style.input}>
<Input
id={field.title}
size='xs'
variant='ontime-filled-on-light'
size='sm'
variant='ontime-filled'
maxLength={25}
defaultValue={field.value}
placeholder='Use default column name'
apps/client/src/theme/ontimeSelect.ts
+5
View File
@@ -13,6 +13,11 @@ export const ontimeSelect = {
color: '#f6f6f6', // $gray-50
border: '1px solid #578AF4', // $blue-500
},
_disabled: {
_hover: {
background: '#262626', // $gray-1100
},
},
},
icon: {
color: '#e2e2e2', // $gray-200
apps/server/src/controllers/ontimeController.ts
+18 -15
View File
@@ -661,12 +661,13 @@ export async function uploadSheetClientFile(req, res: Response) {
}
/**
* @description STEP-1 GET Client Secrect status
* @description STEP-1 GET Client Secret status
*/
export const getClientSecrect = async (req: Request, res: Response) => {
export const getClientSecret = async (req: Request, res: Response) => {
try {
const clientSecrectExists = await sheet.testClientSecret();
if (clientSecrectExists) {
// TODO: can we merge this with the previous?
const clientSecretExists = await sheet.testClientSecret();
if (clientSecretExists) {
res.status(200).send();
} else {
res.status(500).send({ message: 'The Client ID does not exist' });
@@ -706,11 +707,11 @@ export const getAuthentication = async (_req: Request, res: Response) => {
*/
export const postId = async (req: Request, res: Response) => {
try {
const { id } = req.body;
if (id.lenght < 40) {
res.status(400).send({ message: 'ID is usualy 44 characters long' });
const { sheetId } = req.body;
if (sheetId.length < 40) {
res.status(400).send({ message: 'ID is usually 44 characters long' });
}
const state = await sheet.testSheetId(id);
const state = await sheet.testSheetId(sheetId);
res.status(200).send(state);
} catch (error) {
res.status(500).send({ message: String(error) });
@@ -722,8 +723,8 @@ export const postId = async (req: Request, res: Response) => {
*/
export const postWorksheet = async (req: Request, res: Response) => {
try {
const { worksheet, id } = req.body;
const state = await sheet.testWorksheet(worksheet, id);
const { sheetId, worksheet } = req.body;
const state = await sheet.testWorksheet(sheetId, worksheet);
res.status(200).send(state);
} catch (error) {
res.status(500).send({ message: String(error) });
@@ -731,13 +732,15 @@ export const postWorksheet = async (req: Request, res: Response) => {
};
/**
* @description STEP-5 POST download undown to sheet
* @description STEP-5 POST download rundown to sheet
* @returns parsed result
*/
export async function pullSheet(req: Request, res: Response) {
try {
const { id, options } = req.body;
const data = await sheet.pull(id, options);
const { sheetId, options } = req.body;
console.log('starting');
const data = await sheet.pull(sheetId, options);
console.log('finished');
res.status(200).send(data);
} catch (error) {
res.status(500).send({ message: String(error) });
@@ -749,8 +752,8 @@ export async function pullSheet(req: Request, res: Response) {
*/
export async function pushSheet(req: Request, res: Response) {
try {
const { id, options } = req.body;
await sheet.push(id, options);
const { sheetId, options } = req.body;
await sheet.push(sheetId, options);
res.status(200).send();
} catch (error) {
res.status(500).send({ message: String(error) });
apps/server/src/controllers/ontimeController.validate.ts
+4 -4
View File
@@ -244,8 +244,8 @@ export const validateProjectFiles = (projectFiles: { filename?: string; newFilen
return errors;
};
export const validateSheetid = [
body('id').exists().isString(),
export const validateSheetId = [
body('sheetId').exists().isString(),
(req: Request, res: Response, next: NextFunction) => {
const errors = validationResult(req);
@@ -255,7 +255,7 @@ export const validateSheetid = [
];
export const validateWorksheet = [
body('id').exists().isString(),
body('sheetId').exists().isString(),
body('worksheet').exists().isString(),
(req: Request, res: Response, next: NextFunction) => {
@@ -266,7 +266,7 @@ export const validateWorksheet = [
];
export const validateSheetOptions = [
body('id').exists().isString(),
body('sheetId').exists().isString(),
// body('options').exists().isObject(), TODO:
(req: Request, res: Response, next: NextFunction) => {
apps/server/src/routes/ontimeRouter.ts
+7 -5
View File
@@ -31,7 +31,8 @@ import {
pushSheet,
postId,
getAuthentication,
getClientSecrect as getClientSecret,
getClientSecret as getClientSecret,
postWorksheet,
} from '../controllers/ontimeController.js';
import {
@@ -45,7 +46,7 @@ import {
validateProjectDuplicate,
validateLoadProjectFile,
validateProjectRename,
validateSheetid,
validateSheetId,
validateWorksheet,
validateSheetOptions,
} from '../controllers/ontimeController.validate.js';
@@ -126,6 +127,7 @@ router.post('/project', projectSanitiser, createProjectFile);
// create route between controller and '/ontime/project/:filename' endpoint
router.delete('/project/:filename', sanitizeProjectFilename, deleteProjectFile);
// TODO: move the google sheet stuff into a separate file
// Google Sheet integration - Step 1
router.post('/sheet/clientsecret', uploadFile, uploadClientSecret);
router.get('/sheet/clientsecret', uploadFile, getClientSecret);
@@ -135,13 +137,13 @@ router.get('/sheet/authentication/url', getAuthenticationUrl);
router.get('/sheet/authentication', getAuthentication);
// Google Sheet integration - Step 3
router.post('/sheet/id', validateSheetid, postId);
router.post('/sheet/sheetId', validateSheetId, postId);
// Google Sheet integration - Step 4
router.post('/sheet/worksheet', validateWorksheet, postId);
router.post('/sheet/worksheet', validateWorksheet, postWorksheet);
// Google Sheet integration - Step 5
router.post('/sheet/pull', validateSheetOptions, pullSheet);
router.post('/sheet-pull', validateSheetOptions, pullSheet);
// Google Sheet integration - Step 6
router.post('/sheet-push', validateSheetOptions, pushSheet);
apps/server/src/utils/sheetsAuth.ts
+31 -33
View File
@@ -80,7 +80,7 @@ class Sheet {
}
/**
* @description STEP 1 - test that the saved object is pressent
* @description STEP 1 - test that the saved object is present
*/
testClientSecret() {
return Sheet.clientSecret !== null;
@@ -92,18 +92,15 @@ class Sheet {
* @throws
*/
async openAuthServer(): Promise<string | null> {
//TODO: this only works on local networks
//TODO: this only works in local networks
// if the server is allready running retun it
// if the server is already running return it
if (Sheet.authUrl) {
clearTimeout(this.authServerTimeout);
this.authServerTimeout = setTimeout(
() => {
Sheet.authUrl = null;
server.unref();
},
2 * 60 * 1000,
);
this.authServerTimeout = setTimeout(() => {
Sheet.authUrl = null;
server.unref();
}, 120000);
return Sheet.authUrl;
}
@@ -209,12 +206,12 @@ class Sheet {
* @description STEP 3 - test the given sheet id
* @throws
*/
async testSheetId(id: string) {
async testSheetId(sheetId: string) {
const spreadsheets = await sheets({ version: 'v4', auth: Sheet.client }).spreadsheets.get({
spreadsheetId: id,
spreadsheetId: sheetId,
includeGridData: false,
});
if (spreadsheets.status != 200) {
if (spreadsheets.status !== 200) {
throw new Error(spreadsheets.statusText);
}
return { worksheetOptions: spreadsheets.data.sheets.map((i) => i.properties.title) };
@@ -224,12 +221,12 @@ class Sheet {
* @description STEP 4 - test the given worksheet
* @throws
*/
async testWorksheet(id: string, worksheet: string) {
async testWorksheet(sheetId: string, worksheet: string) {
const spreadsheets = await sheets({ version: 'v4', auth: Sheet.client }).spreadsheets.get({
spreadsheetId: id,
spreadsheetId: sheetId,
includeGridData: false,
});
if (spreadsheets.status != 200) {
if (spreadsheets.status !== 200) {
throw new Error(spreadsheets.statusText);
}
const worksheetExist = spreadsheets.data.sheets.find((i) => i.properties.title === worksheet);
@@ -250,17 +247,18 @@ class Sheet {
spreadsheetId: sheetId,
});
if (spreadsheets.status === 200) {
const ourWorksheetData = spreadsheets.data.sheets.find((n) => n.properties.title == worksheet);
if (ourWorksheetData !== undefined) {
const endCell = getA1Notation(
ourWorksheetData.properties.gridProperties.rowCount,
ourWorksheetData.properties.gridProperties.columnCount,
);
return { worksheetId: ourWorksheetData.properties.sheetId, range: `${worksheet}!A1:${endCell}` };
}
} else {
throw new Error('Uable to open spreadsheets');
if (spreadsheets.status !== 200) {
throw new Error(`Request failed: ${spreadsheets.status} ${spreadsheets.statusText}`);
}
const ourWorksheetData = spreadsheets.data.sheets.find((n) => n.properties.title == worksheet);
if (ourWorksheetData !== undefined) {
const endCell = getA1Notation(
ourWorksheetData.properties.gridProperties.rowCount,
ourWorksheetData.properties.gridProperties.columnCount,
);
return { worksheetId: ourWorksheetData.properties.sheetId, range: `${worksheet}!A1:${endCell}` };
}
}
@@ -302,7 +300,7 @@ class Sheet {
updateRundown.push({
deleteDimension: { range: { dimension: 'ROWS', startIndex: titleRow + 2, sheetId: worksheetId } },
});
// insert the lenght of the rundown
// insert the length of the rundown
updateRundown.push({
insertDimension: {
inheritFromBefore: false,
@@ -340,19 +338,19 @@ class Sheet {
}
/**
* @description STEP 5 - Downpload the rundown from sheet
* @param {string} id - id of the sheet https://docs.google.com/spreadsheets/d/[[spreadsheetId]]/edit#gid=0
* @description STEP 5 - Download the rundown from sheet
* @param {string} sheetId - id of the sheet https://docs.google.com/spreadsheets/d/[[spreadsheetId]]/edit#gid=0
* @param {ExcelImportMap} options
* @returns {Promise<Partial<ResponseOK>>}
* @throws
*/
public async pull(id: string, options: ExcelImportMap): Promise<Partial<ResponseOK>> {
const { range } = await this.exist(id, options.worksheet);
public async pull(sheetId: string, options: ExcelImportMap): Promise<Partial<ResponseOK>> {
const { range } = await this.exist(sheetId, options.worksheet);
const res: Partial<ResponseOK> = {};
const googleResponse = await sheets({ version: 'v4', auth: Sheet.client }).spreadsheets.values.get({
spreadsheetId: id,
spreadsheetId: sheetId,
valueRenderOption: 'FORMATTED_VALUE',
majorDimension: 'ROWS',
range,