API offline alert

faisalnjs · Sep 29, 2024 · 2193795 · 2193795
1 parent c106ac4
commit 2193795
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 9 deletions.
diff --git a/admin/index.html b/admin/index.html
@@ -311,6 +311,16 @@ <h1 class="text-placeholder">000</h1>
         </li>
       </ol>
     </dialog>
+    <dialog data-modal-page="api-fail" data-page-title="API Offline">
+      <p>
+        The Virtual Checker API is currently offline. Please try again later, or contact support below.
+      </p>
+      <div class="row center">
+        <a href="https://github.com/faisalnjs/virtual-checker/issues" class="icon"><i class="bi bi-github"></i></a>
+        <a href="https://faisaln.com/discord" class="icon"><i class="bi bi-discord"></i></a>
+        <a href="mailto:contact@faisaln.com" class="icon"><i class="bi bi-envelope-fill"></i></a>
+      </div>
+    </dialog>
     <script src="../src/admin.js" type="module"></script>
   </body>
 </html>
diff --git a/admin/questions.html b/admin/questions.html
@@ -281,6 +281,16 @@ <h1 class="text-placeholder">000</h1>
         </li>
       </ol>
     </dialog>
+    <dialog data-modal-page="api-fail" data-page-title="API Offline">
+      <p>
+        The Virtual Checker API is currently offline. Please try again later, or contact support below.
+      </p>
+      <div class="row center">
+        <a href="https://github.com/faisalnjs/virtual-checker/issues" class="icon"><i class="bi bi-github"></i></a>
+        <a href="https://faisaln.com/discord" class="icon"><i class="bi bi-discord"></i></a>
+        <a href="mailto:contact@faisaln.com" class="icon"><i class="bi bi-envelope-fill"></i></a>
+      </div>
+    </dialog>
     <script src="../src/admin.js" type="module"></script>
   </body>
 </html>
diff --git a/index.html b/index.html
@@ -305,6 +305,16 @@ <h1 class="text-placeholder">000</h1>
       </li>
     </ol>
   </dialog>
+  <dialog data-modal-page="api-fail" data-page-title="API Offline">
+    <p>
+      The Virtual Checker API is currently offline. Please try again later, or contact support below.
+    </p>
+    <div class="row center">
+      <a href="https://github.com/faisalnjs/virtual-checker/issues" class="icon"><i class="bi bi-github"></i></a>
+      <a href="https://faisaln.com/discord" class="icon"><i class="bi bi-discord"></i></a>
+      <a href="mailto:contact@faisaln.com" class="icon"><i class="bi bi-envelope-fill"></i></a>
+    </div>
+  </dialog>
   <script src="src/main.js" type="module"></script>
 </body>
 

diff --git a/src/checker/admin.js b/src/checker/admin.js
@@ -72,9 +72,12 @@ async function init() {
             .then(q => {
               questions = q;
               if (document.querySelector('.questions.section')) updateQuestions();
-            });
-        });
-    });
+            })
+            .catch(() => ui.view("api-fail"));
+        })
+        .catch(() => ui.view("api-fail"));
+    })
+    .catch(() => ui.view("api-fail"));
   if (document.getElementById("course-period-input")) {
     document.querySelector('.course-reorder').style.display = 'none';
     document.querySelectorAll('[data-remove-segment-input]').forEach(a => a.removeEventListener('click', removeSegment));
@@ -248,7 +251,8 @@ if (document.getElementById("reorder-courses-button")) {
           item.addEventListener('dragover', handleDragOver);
           item.addEventListener('drop', handleDrop);
         });
-      });
+      })
+      .catch(() => ui.view("api-fail"));
     // Show submit confirmation
     ui.modeless(`<i class="bi bi-check-lg"></i>`, "Saved");
   });
@@ -308,7 +312,8 @@ async function save(hideResult) {
   fetch(domain + '/save', {
     method: "POST",
     body: formData,
-  });
+  })
+  .catch(() => ui.view("api-fail"));
   document.getElementById("save-button").disabled = true;
   window.scroll(0, 0);
   if ((typeof hideResult != 'boolean')) ui.modeless(`<i class="bi bi-check-lg"></i>`, "Saved");
@@ -482,7 +487,8 @@ async function removeImage(event) {
       .then(() => {
         ui.modeless(`<i class="bi bi-file-earmark-x"></i>`, "Removed");
         init();
-      });
+      })
+      .catch(() => ui.view("api-fail"));
   } else {
     window.open(event.target.src);
   }

diff --git a/src/checker/checker.js b/src/checker/checker.js
@@ -246,6 +246,7 @@ async function submitClick(code, segment, question, answer) {
       nextQuestion();
       updateQuestion();
     })
+    .catch(() => ui.view("api-fail"))
 }
 
 // Limit seat code input to integers
@@ -319,7 +320,7 @@ async function updateCode() {
       updateSegment();
       if (document.querySelector('#checker .images').innerHTML === '') await updateQuestion();
     } catch (error) {
-      console.error("Failed to fetch data:", error);
+      ui.view("api-fail");
     }
   }
 }

diff --git a/src/modules/ui.js b/src/modules/ui.js
@@ -190,7 +190,7 @@ export function view(path) {
       });
   }
   const previous = pages.slice(0, pages.length - 1).join("/");
-  const buttons = [
+  const buttons = (title === 'API Offline') ? [] : [
     {
       text: `<i class="bi bi-x-lg"></i>`,
       class: "icon",
@@ -327,7 +327,7 @@ export class Element {
 (() => {
   document.addEventListener("pointerdown", (e) => {
     const dialog = document.querySelector("dialog[open]");
-    if (dialog?.hasAttribute("data-open") && !dialog?.contains(e.target)) {
+    if ((dialog?.querySelector('h2').innerText != 'API Offline') && dialog?.hasAttribute("data-open") && !dialog?.contains(e.target)) {
       document.addEventListener(
         "pointerup",
         () => {