From 63d763cbaff73fc40afb665b3a825fc41d4e9ee5 Mon Sep 17 00:00:00 2001
From: Fabian Posenau <fabian.p99@gmx.de>
Date: Sun, 19 Feb 2023 20:52:42 +0100
Subject: [PATCH] Feature/#276/qrcodes (#289)

* bugfix: wrong format when on 12h format

* update: website link in placeholder

---------

Co-authored-by: Fabian Posenau <fabian@fphome.de>
Co-authored-by: cv <34649812+cpvalente@users.noreply.github.com>
---
 .../src/common/models/EventData.type.ts       |  8 ++-
 .../features/modals/EventSettingsModal.jsx    | 59 ++++++++++++-------
 apps/client/src/features/table/utils.js       |  3 +-
 .../features/viewers/backstage/Backstage.tsx  | 24 ++------
 .../src/features/viewers/public/Public.tsx    | 19 ++----
 .../features/viewers/studio/StudioClock.jsx   |  2 +-
 .../server/src/controllers/eventController.js |  3 +-
 .../controllers/eventController.validate.js   |  3 +-
 apps/server/src/models/dataModel.js           |  3 +-
 apps/server/src/utils/parser.js               | 22 ++++---
 apps/server/src/utils/parserFunctions.js      |  3 +-
 apps/server/test-db/db.json                   |  3 +-
 demo-db/db.json                               |  3 +-
 13 files changed, 81 insertions(+), 74 deletions(-)

diff --git a/apps/client/src/common/models/EventData.type.ts b/apps/client/src/common/models/EventData.type.ts
index 1f71424ae..9c966be12 100644
--- a/apps/client/src/common/models/EventData.type.ts
+++ b/apps/client/src/common/models/EventData.type.ts
@@ -1,15 +1,17 @@
 export type EventDataType = {
   title: string;
-  url: string;
+  publicUrl: string;
   publicInfo: string;
+  backstageUrl: string;
   backstageInfo: string;
   endMessage: string;
-}
+};
 
 export const eventDataPlaceholder: EventDataType = {
   title: '',
-  url: '',
+  publicUrl: '',
   publicInfo: '',
+  backstageUrl: '',
   backstageInfo: '',
   endMessage: '',
 };
diff --git a/apps/client/src/features/modals/EventSettingsModal.jsx b/apps/client/src/features/modals/EventSettingsModal.jsx
index 553670264..da12197d9 100644
--- a/apps/client/src/features/modals/EventSettingsModal.jsx
+++ b/apps/client/src/features/modals/EventSettingsModal.jsx
@@ -27,8 +27,9 @@ export default function SettingsModal() {
 
     setFormData({
       title: data.title,
-      url: data.url,
+      publicUrl: data.publicUrl,
       publicInfo: data.publicInfo,
+      backstageUrl: data.backstageUrl,
       backstageInfo: data.backstageInfo,
       endMessage: data.endMessage,
     });
@@ -45,7 +46,7 @@ export default function SettingsModal() {
       try {
         await postEvent(formData);
       } catch (error) {
-        emitError(`Error saving event settings: ${error}`)
+        emitError(`Error saving event settings: ${error}`);
       } finally {
         await refetch();
         setChanged(false);
@@ -53,7 +54,7 @@ export default function SettingsModal() {
 
       setSubmitting(false);
     },
-    [emitError, formData, refetch]
+    [emitError, formData, refetch],
   );
 
   /**
@@ -69,12 +70,15 @@ export default function SettingsModal() {
    * @param {string} field - object parameter to update
    * @param {string} value - new object parameter value
    */
-  const handleChange = useCallback((field, value) => {
-    const temp = { ...formData };
-    temp[field] = value;
-    setFormData(temp);
-    setChanged(true);
-  },[formData]);
+  const handleChange = useCallback(
+    (field, value) => {
+      const temp = { ...formData };
+      temp[field] = value;
+      setFormData(temp);
+      setChanged(true);
+    },
+    [formData],
+  );
 
   return (
     <ModalBody className={style.modalBody}>
@@ -99,19 +103,19 @@ export default function SettingsModal() {
           </div>
           <div className={style.hSeparator}>Additional Screen Info</div>
           <div className={style.spacedEntry}>
-            <FormLabel htmlFor='url'>
-              Event URL
+            <FormLabel htmlFor='publicUrl'>
+              Public URL
               <span className={style.labelNote}>
                 <br />
-                Shown as a QR code in some views
+                QR code to be shown on public screens
               </span>
             </FormLabel>
             <Input
               {...inputProps}
-              name='url'
-              placeholder='www.onsite.no'
-              value={formData.url}
-              onChange={(event) => handleChange('url', event.target.value)}
+              name='publicUrl'
+              placeholder='www.getontime.no'
+              value={formData.publicUrl}
+              onChange={(event) => handleChange('publicUrl', event.target.value)}
             />
           </div>
           <div className={style.spacedEntry}>
@@ -130,6 +134,22 @@ export default function SettingsModal() {
               onChange={(event) => handleChange('publicInfo', event.target.value)}
             />
           </div>
+          <div className={style.spacedEntry}>
+            <FormLabel htmlFor='backstageUrl'>
+              Backstage URL
+              <span className={style.labelNote}>
+                <br />
+                QR to be shown on backstage screens
+              </span>
+            </FormLabel>
+            <Input
+              {...inputProps}
+              name='backstageUrl'
+              placeholder='www.getontime.no'
+              value={formData.backstageUrl}
+              onChange={(event) => handleChange('backstageUrl', event.target.value)}
+            />
+          </div>
           <div className={style.spacedEntry}>
             <FormLabel htmlFor='backstageInfo'>
               Backstage Info
@@ -165,12 +185,7 @@ export default function SettingsModal() {
             />
           </div>
         </div>
-        <SubmitContainer
-          revert={revert}
-          submitting={submitting}
-          changed={changed}
-          status={status}
-        />
+        <SubmitContainer revert={revert} submitting={submitting} changed={changed} status={status} />
       </form>
     </ModalBody>
   );
diff --git a/apps/client/src/features/table/utils.js b/apps/client/src/features/table/utils.js
index d48458a29..28d9c5cd5 100644
--- a/apps/client/src/features/table/utils.js
+++ b/apps/client/src/features/table/utils.js
@@ -39,7 +39,8 @@ export const makeTable = (headerData, tableData, userFields) => {
   const data = [
     ['Ontime · Schedule Template'],
     ['Event Name', headerData?.title || ''],
-    ['Event URL', headerData?.url || ''],
+    ['Public URL', headerData?.publicUrl || ''],
+    ['Backstage URL', headerData?.backstageUrl || ''],
     [],
   ];
 
diff --git a/apps/client/src/features/viewers/backstage/Backstage.tsx b/apps/client/src/features/viewers/backstage/Backstage.tsx
index 231fc6248..f48897e12 100644
--- a/apps/client/src/features/viewers/backstage/Backstage.tsx
+++ b/apps/client/src/features/viewers/backstage/Backstage.tsx
@@ -83,12 +83,7 @@ export default function Backstage(props) {
         </div>
       </div>
 
-      <ProgressBar
-        className='progress-container'
-        now={time.current}
-        complete={time.duration}
-        hidden={!showProgress}
-      />
+      <ProgressBar className='progress-container' now={time.current} complete={time.duration} hidden={!showProgress} />
 
       <div className='now-container'>
         <AnimatePresence>
@@ -146,30 +141,21 @@ export default function Backstage(props) {
         </AnimatePresence>
       </div>
 
-      <ScheduleProvider
-        events={filteredEvents}
-        selectedEventId={selectedId}
-        isBackstage
-      >
+      <ScheduleProvider events={filteredEvents} selectedEventId={selectedId} isBackstage>
         <ScheduleNav className='schedule-nav-container' />
         <Schedule className='schedule-container' />
       </ScheduleProvider>
 
-      <div
-        className={showPublicMessage ? 'public-container' : 'public-container public-container--hidden'}>
+      <div className={showPublicMessage ? 'public-container' : 'public-container public-container--hidden'}>
         <div className='label'>Public message</div>
         <div className='message'>{publ.text}</div>
       </div>
 
       <div className='info'>
         <div className='qr'>
-          {general.url != null && general.url !== '' && (
-            <QRCode value={general.url} size={qrSize} level='L' />
-          )}
+          {general.backstageUrl && <QRCode value={general.backstageUrl} size={qrSize} level='L' />}
         </div>
-        {general.backstageInfo && (
-          <div className='info__message'>{general.backstageInfo}</div>
-        )}
+        {general.backstageInfo && <div className='info__message'>{general.backstageInfo}</div>}
       </div>
     </div>
   );
diff --git a/apps/client/src/features/viewers/public/Public.tsx b/apps/client/src/features/viewers/public/Public.tsx
index 18aa9f1ba..7616a0807 100644
--- a/apps/client/src/features/viewers/public/Public.tsx
+++ b/apps/client/src/features/viewers/public/Public.tsx
@@ -64,7 +64,6 @@ export default function Public(props) {
       </div>
 
       <div className='now-container'>
-
         <AnimatePresence>
           {publicTitle.showNow && (
             <motion.div
@@ -106,29 +105,19 @@ export default function Public(props) {
         </AnimatePresence>
       </div>
 
-      <ScheduleProvider
-        events={events}
-        selectedEventId={publicSelectedId}
-      >
+      <ScheduleProvider events={events} selectedEventId={publicSelectedId}>
         <ScheduleNav className='schedule-nav-container' />
         <Schedule className='schedule-container' />
       </ScheduleProvider>
 
-      <div
-        className={showPublicMessage ? 'public-container' : 'public-container public-container--hidden'}>
+      <div className={showPublicMessage ? 'public-container' : 'public-container public-container--hidden'}>
         <div className='label'>Public message</div>
         <div className='message'>{publ.text}</div>
       </div>
 
       <div className='info'>
-        <div className='qr'>
-          {general.url != null && general.url !== '' && (
-            <QRCode value={general.url} size={qrSize} level='L' />
-          )}
-        </div>
-        {general.backstageInfo && (
-          <div className='info__message'>{general.backstageInfo}</div>
-        )}
+        <div className='qr'>{general.publicUrl && <QRCode value={general.publicUrl} size={qrSize} level='L' />}</div>
+        {general.publicInfo && <div className='info__message'>{general.publicInfo}</div>}
       </div>
     </div>
   );
diff --git a/apps/client/src/features/viewers/studio/StudioClock.jsx b/apps/client/src/features/viewers/studio/StudioClock.jsx
index 0e8539d6e..fc64b2c9c 100644
--- a/apps/client/src/features/viewers/studio/StudioClock.jsx
+++ b/apps/client/src/features/viewers/studio/StudioClock.jsx
@@ -46,7 +46,7 @@ export default function StudioClock(props) {
   const [searchParams] = useSearchParams();
   const showSeconds = searchParams.get('seconds');
   formatOptions.showSeconds = Boolean(showSeconds);
-  formatOptions.format = `hh:mm${formatOptions.showSeconds ? 'mm' : ''}`;
+  formatOptions.format = `hh:mm${formatOptions.showSeconds ? ':ss' : ''}`;
 
   useEffect(() => {
     document.title = 'ontime - Studio Clock';
diff --git a/apps/server/src/controllers/eventController.js b/apps/server/src/controllers/eventController.js
index 63e9eecb8..6a7a81bb6 100644
--- a/apps/server/src/controllers/eventController.js
+++ b/apps/server/src/controllers/eventController.js
@@ -16,8 +16,9 @@ export const postEvent = async (req, res) => {
   try {
     const newEvent = removeUndefined({
       title: req.body?.title,
-      url: req.body?.url,
+      publicUrl: req.body?.publicUrl,
       publicInfo: req.body?.publicInfo,
+      backstageUrl: req.body?.backstageUrl,
       backstageInfo: req.body?.backstageInfo,
       endMessage: req.body?.endMessage,
     });
diff --git a/apps/server/src/controllers/eventController.validate.js b/apps/server/src/controllers/eventController.validate.js
index b99b0915c..ea3c8bd96 100644
--- a/apps/server/src/controllers/eventController.validate.js
+++ b/apps/server/src/controllers/eventController.validate.js
@@ -2,8 +2,9 @@ import { body, validationResult } from 'express-validator';
 
 export const eventSanitizer = [
   body('title').optional().isString().trim(),
-  body('url').optional().isString().trim(),
+  body('publicUrl').optional().isString().trim(),
   body('publicInfo').optional().isString().trim(),
+  body('backstageUrl').optional().isString().trim(),
   body('backstageInfo').optional().isString().trim(),
   body('endMessage').optional().isString().trim(),
   (req, res, next) => {
diff --git a/apps/server/src/models/dataModel.js b/apps/server/src/models/dataModel.js
index 7c8152965..300d4aadf 100644
--- a/apps/server/src/models/dataModel.js
+++ b/apps/server/src/models/dataModel.js
@@ -2,8 +2,9 @@ export const dbModel = {
   rundown: [],
   event: {
     title: '',
-    url: '',
+    publicUrl: '',
     publicInfo: '',
+    backstageUrl: '',
     backstageInfo: '',
     endMessage: '',
   },
diff --git a/apps/server/src/utils/parser.js b/apps/server/src/utils/parser.js
index 8b14b4df8..4539e95c1 100644
--- a/apps/server/src/utils/parser.js
+++ b/apps/server/src/utils/parser.js
@@ -27,7 +27,8 @@ export const JSON_MIME = 'application/json';
 export const parseExcel = async (excelData) => {
   const eventData = {
     title: '',
-    url: '',
+    publicUrl: '',
+    backstageUrl: '',
   };
   const customUserFields = {};
   const rundown = [];
@@ -55,8 +56,9 @@ export const parseExcel = async (excelData) => {
     .filter((e) => e.length > 0)
     .forEach((row) => {
       let eventTitleNext = false;
-      let eventUrlNext = false;
+      let publicUrlNext = false;
       let publicInfoNext = false;
+      let backstageUrlNext = false;
       let backstageInfoNext = false;
       let endMessageNext = false;
       const event = {};
@@ -66,12 +68,15 @@ export const parseExcel = async (excelData) => {
         if (eventTitleNext) {
           eventData.title = column;
           eventTitleNext = false;
-        } else if (eventUrlNext) {
-          eventData.url = column;
-          eventUrlNext = false;
+        } else if (publicUrlNext) {
+          eventData.publicUrl = column;
+          publicUrlNext = false;
         } else if (publicInfoNext) {
           eventData.publicInfo = column;
           publicInfoNext = false;
+        } else if (backstageUrlNext) {
+          eventData.publicUrl = column;
+          backstageUrlNext = false;
         } else if (backstageInfoNext) {
           eventData.backstageInfo = column;
           backstageInfoNext = false;
@@ -125,12 +130,15 @@ export const parseExcel = async (excelData) => {
               case 'event name':
                 eventTitleNext = true;
                 break;
-              case 'event url':
-                eventUrlNext = true;
+              case 'public url':
+                publicUrlNext = true;
                 break;
               case 'public info':
                 publicInfoNext = true;
                 break;
+              case 'backstage url':
+                backstageUrlNext = true;
+                break;
               case 'backstage info':
                 backstageInfoNext = true;
                 break;
diff --git a/apps/server/src/utils/parserFunctions.js b/apps/server/src/utils/parserFunctions.js
index 09e85e1fa..6ed04eeae 100644
--- a/apps/server/src/utils/parserFunctions.js
+++ b/apps/server/src/utils/parserFunctions.js
@@ -71,8 +71,9 @@ export const parseEvent = (data, enforce) => {
     newEvent = {
       ...dbModel.event,
       title: e.title || dbModel.event.title,
-      url: e.url || dbModel.event.url,
+      publicUrl: e.publicUrl || dbModel.event.publicUrl,
       publicInfo: e.publicInfo || dbModel.event.publicInfo,
+      backstageUrl: e.backstageUrl || dbModel.event.backstageUrl,
       backstageInfo: e.backstageInfo || dbModel.event.backstageInfo,
       endMessage: e.endMessage || dbModel.event.endMessage,
     };
diff --git a/apps/server/test-db/db.json b/apps/server/test-db/db.json
index 74bddf0c9..30395bb73 100644
--- a/apps/server/test-db/db.json
+++ b/apps/server/test-db/db.json
@@ -109,8 +109,9 @@
   ],
   "event": {
     "title": "All about Carlos demo event",
-    "url": "www.carlosvalente.com",
+    "publicUrl": "www.getontime.no",
     "publicInfo": "WiFi: demoproject \nPassword: ontimeproject",
+    "backstageUrl": "www.getontime.no",
     "backstageInfo": "WiFi: demobackstage\nPassword: ontimeproject",
     "endMessage": ""
   },
diff --git a/demo-db/db.json b/demo-db/db.json
index f0168d029..af9554cc4 100644
--- a/demo-db/db.json
+++ b/demo-db/db.json
@@ -221,8 +221,9 @@
   ],
   "event": {
     "title": "All about Carlos demo event",
-    "url": "www.carlosvalente.com",
+    "publicUrl": "www.getontime.no",
     "publicInfo": "WiFi: demoproject \nPassword: ontimeproject",
+    "backstageUrl": "www.getontime.no",
     "backstageInfo": "WiFi: demobackstage\nPassword: ontimeproject",
     "endMessage": ""
   },