Laat nu de fout zien, als het ophalen van het rooster, gebruikerstype of

token mislukt, in plaats van stilletjes te falen zoals voorheen

Author: klascal

index.html

@@ -406,6 +406,34 @@ <h2>Weet je het zeker?</h2>
           </section>
         </div>
       </dialog>
+      <dialog id="error" role="dialog" aria-label="Fout" closedby="any">
+        <div>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 -960 960 960"
+            id="icon"
+          >
+            <path
+              d="M508.5-291.5Q520-303 520-320t-11.5-28.5Q497-360 480-360t-28.5 11.5Q440-337 440-320t11.5 28.5Q463-280 480-280t28.5-11.5ZM440-440h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
+            />
+          </svg>
+          <h2>Er is een fout opgetreden</h2>
+          <section id="content">
+            <div id="text">
+              <p></p>
+            </div>
+          </section>
+          <button
+            class="btn"
+            id="closeBtn"
+            commandfor="dialog"
+            command="close"
+            style="margin-top: 0"
+          >
+            <span data-translate="closeBtn">Sluiten</span>
+          </button>
+        </div>
+      </dialog>
       <dialog
         id="scanQrCode"
         role="dialog"

material.css

@@ -488,6 +488,7 @@ p {
   font-family: inherit;
   font-size: inherit;
   float: right;
+  margin-left: auto;
   margin-top: 12px;
   view-transition-name: close;
 }

schedule.js

@@ -91,10 +91,10 @@ async function fetchToken() {
         "Content-Type": "application/json",
       },
     });
+    const data = await response.json();
     if (!response.ok) {
-      throw new Error(`Error ${response.status}: ${response.statusText}`);
+      errorMessage(data.response.message);
     }
-    const data = await response.json();
     localStorage.setItem("access_token", data.access_token);
     accessToken = localStorage.getItem("access_token");
   } catch (error) {
@@ -140,6 +140,7 @@ async function userInfo() {
     userType1 = "teacher";
   } else if (!data.response.data[0]) {
     console.error(data);
+    errorMessage(data.response.message);
   } else {
     schoolInSchoolYears(data.response.data[0].schoolInSchoolYears);
   }
@@ -366,7 +367,10 @@ function show(id, title, hideBack) {
     }
   });
 }
-
+function errorMessage(e) {
+  document.querySelector("#error p").innerText = e;
+  document.getElementById("error").showModal();
+}
 function renderAnnouncements() {
   const content = document.getElementById("allAnnouncements");
   content.innerHTML = "";
@@ -501,6 +505,9 @@ async function fetchSchedule(year, week, isFirstLoad) {
     }
   );
   const data = await response.json();
+  if (!response.ok) {
+    errorMessage(data.response.message);
+  }
   const appointments = data.response.data[0].appointments;
   const isHoliday = !appointments[0];
   const schedule = document.getElementById("schedule");

style.css

@@ -317,8 +317,13 @@ table {
 #clearSettings #content {
   width: 282px;
 }
+#error,
+#error #content {
+  width: 310px;
+}
 #clearSettings div,
-#scanQrCode div {
+#scanQrCode div,
+#error div {
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -331,7 +336,9 @@ table {
   letter-spacing: 0.1px;
 }
 #clearSettings h2,
-#clearSettings #content {
+#clearSettings #content,
+#error h2,
+#error #content {
   margin: 0;
   padding: 0;
 }
@@ -346,7 +353,8 @@ table {
   align-items: center;
 }
 #clearSettings #icon,
-#scanQrCode #icon {
+#scanQrCode #icon,
+#error #icon {
   fill: var(--accent-text);
   width: 2rem;
   height: 2rem;