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>

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>
   );

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 || ''],
     [],
   ];
 

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>
   );

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>
   );

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';