sheet settings with feedback

2026-08-14 11:53:49 +00:00 · 2023-11-23 17:17:13 +01:00
parent b15b4b48a7
commit 4f1fa2053f
8 changed files with 199 additions and 38 deletions
@@ -3,6 +3,8 @@ import {
  Alias,
  DatabaseModel,
  GetInfo,
+  GoogleSheet,
+  GoogleSheetState,
  OntimeRundown,
  OSCSettings,
  OscSubscription,
@@ -239,7 +241,7 @@ export const uploadSheetClientFile = async (file: File) => {
    .post(`${ontimeURL}/sheet-clientsecrect`, formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
-      }
+      },
    })
    .then((response) => response.data.id);
 };
@@ -273,3 +275,30 @@ export const postPushSheet = async (sheetId: string, worksheet: string, options?
 };


+/**
+ * @description HTTP request to retrieve google sheets settings
+ * @return {Promise}
+ */
+export async function getSheetSettings(): Promise<GoogleSheet> {
+  const res = await axios.get(`${ontimeURL}/sheet-settings`);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to mutate google sheets settings
+ * @return {Promise}
+ */
+export async function postSheetSettings(data: GoogleSheet): Promise<GoogleSheet> {
+  const res = await axios.post(`${ontimeURL}/sheet-settings`, data);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to retrieve google sheets state
+ * @return {Promise}
+ */
+export async function getSheetstate(): Promise<GoogleSheetState> {
+  const res = await axios.get(`${ontimeURL}/sheet-state`);
+  console.log(res.data)
+  return res.data;
+}
@@ -9,9 +9,13 @@ import {
  ModalFooter,
  ModalHeader,
  ModalOverlay,
+  useDisclosure,
 } from '@chakra-ui/react';
+import { IoCheckmarkCircleOutline } from '@react-icons/all-files/io5/IoCheckmarkCircleOutline';
+import { IoCloseCircleOutline } from '@react-icons/all-files/io5/IoCloseCircleOutline';
+
 import { useQueryClient } from '@tanstack/react-query';
-import { OntimeRundown, ProjectData, UserFields } from 'ontime-types';
+import { OntimeRundown, ProjectData, UserFields, GoogleSheetState } from 'ontime-types';

 import { PROJECT_DATA, RUNDOWN, USERFIELDS } from '../../../common/api/apiConstants';
 import { maybeAxiosError } from '../../../common/api/apiUtils';
@@ -22,6 +26,9 @@ import {
  postPreviewSheet,
  postPushSheet,
  uploadSheetClientFile,
+  getSheetSettings,
+  postSheetSettings,
+  getSheetstate,
 } from '../../../common/api/ontimeApi';
 import { projectDataPlaceholder } from '../../../common/models/ProjectData';
 import { userFieldsPlaceholder } from '../../../common/models/UserFields';
@@ -34,6 +41,7 @@ interface SheetsModalProps {

 export default function SheetsModal(props: SheetsModalProps) {
  const { isOpen, onClose } = props;
+
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [authState, setAuthState] = useState<boolean>(true);

@@ -41,14 +49,18 @@ export default function SheetsModal(props: SheetsModalProps) {
  const [userFields, setUserFields] = useState<UserFields | null>(null);
  const [project, setProject] = useState<ProjectData | null>(null);

+  const [sheetState, setSheetState] = useState<GoogleSheetState>({ auth: false, id: false, worksheet: false });
+
  const queryClient = useQueryClient();

  const sheetid = useRef<HTMLInputElement>(null);
  const worksheet = useRef<HTMLInputElement>(null);
+
  const handleClose = () => {
    setRundown(null);
    setProject(null);
    setUserFields(null);
+    // setSheetState({ auth: false, id: false, worksheet: false });
    onClose();
  };
  const handleClick = () => {
@@ -64,19 +76,37 @@ export default function SheetsModal(props: SheetsModalProps) {
    }
  };

-  //TODO: do smoething better here
-  getSheetsAuthStatus().then((data) => {
-    setAuthState(data);
-  });
+  const _onChange = async () => {
+    setSheetState(await getSheetstate());
+  };

-  const handleAuthenticate = () => {
-    getSheetsAuthUrl().then((data) => {
-      console.log(data);
-      if (data != 'bad') {
-        window.open(data, '_blank', 'noreferrer');
+  if (isOpen) {
+    //TODO: how to get this on modal open
+    getSheetSettings().then((data) => {
+      if (sheetid.current?.value != data.id || worksheet.current?.value != data.worksheet) {
+        _onChange();
+      }
+      if (sheetid.current) {
+        sheetid.current.value = data.id;
+      }
+      if (worksheet.current) {
+        worksheet.current.value = data.worksheet;
+      }
+    });
+  }
+
+  const handelSave = () => {
+    postSheetSettings({ id: sheetid.current?.value ?? '', worksheet: worksheet.current?.value ?? '' }).then((data) => {
+      _onChange();
+      if (sheetid.current) {
+        sheetid.current.value = data.id;
+      }
+      if (worksheet.current) {
+        worksheet.current.value = data.worksheet;
      }
    });
  };
+
  const handlePullData = () => {
    postPreviewSheet(sheetid.current?.value ?? '', worksheet.current?.value ?? '').then((data) => {
      setProject(data.project);
@@ -163,11 +193,12 @@ export default function SheetsModal(props: SheetsModalProps) {
                  type='text'
                  ref={sheetid}
                  id='sheetid'
-                  width='440px'
+                  width='240px'
                  size='sm'
                  textAlign='right'
                  variant='ontime-filled-on-light'
                />
+                {sheetState.id ? <IoCheckmarkCircleOutline /> : <IoCloseCircleOutline />}
                <br />
                <label htmlFor='worksheet'>Worksheet </label>
                <Input
@@ -179,6 +210,8 @@ export default function SheetsModal(props: SheetsModalProps) {
                  textAlign='right'
                  variant='ontime-filled-on-light'
                />
+                {sheetState.worksheet ? <IoCheckmarkCircleOutline /> : <IoCloseCircleOutline />}
+
              </div>
              <div>
                <Button variant='ontime-filled' padding='0 2em' onClick={handlePullData}>
@@ -194,8 +227,8 @@ export default function SheetsModal(props: SheetsModalProps) {
        <ModalFooter>
          <Button variant='ontime-ghost-on-light'>Reset</Button>
          {!rundown && (
-            <Button variant='ontime-filled' padding='0 2em' onClick={handleAuthenticate}>
-              Authenticate
+            <Button variant='ontime-filled' padding='0 2em' onClick={handelSave}>
+              Save
            </Button>
          )}
          {rundown && (