Optie voor QR-code scannen met Barcode Detection API toegevoegd op

ondersteunde apparaten. Knoppen gegevens verwijderen beetje aangepast.
Positie van datumtekst gefikst bij draaien. Padding verminderd bij
schakelaarcontainers in instellingen.

Author: Floris

index.html

@@ -396,6 +396,34 @@ <h2>Weet je het zeker?</h2>
           </section>
         </div>
       </dialog>
+      <dialog
+        id="scanQrCode"
+        role="dialog"
+        aria-label="QR-code scannen"
+        closedby="any"
+      >
+        <div>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 -960 960 960"
+            id="icon"
+          >
+            <path
+              d="M120-680q-17 0-28.5-11.5T80-720v-120q0-17 11.5-28.5T120-880h120q17 0 28.5 11.5T280-840q0 17-11.5 28.5T240-800h-80v80q0 17-11.5 28.5T120-680Zm0 600q-17 0-28.5-11.5T80-120v-120q0-17 11.5-28.5T120-280q17 0 28.5 11.5T160-240v80h80q17 0 28.5 11.5T280-120q0 17-11.5 28.5T240-80H120Zm600 0q-17 0-28.5-11.5T680-120q0-17 11.5-28.5T720-160h80v-80q0-17 11.5-28.5T840-280q17 0 28.5 11.5T880-240v120q0 17-11.5 28.5T840-80H720Zm91.5-611.5Q800-703 800-720v-80h-80q-17 0-28.5-11.5T680-840q0-17 11.5-28.5T720-880h120q17 0 28.5 11.5T880-840v120q0 17-11.5 28.5T840-680q-17 0-28.5-11.5ZM700-200v-60h60v60h-60Zm0-120v-60h60v60h-60Zm-60 60v-60h60v60h-60Zm-60 60v-60h60v60h-60Zm-60-60v-60h60v60h-60Zm120-120v-60h60v60h-60Zm-60 60v-60h60v60h-60Zm-60-60v-60h60v60h-60Zm40-140q-17 0-28.5-11.5T520-560v-160q0-17 11.5-28.5T560-760h160q17 0 28.5 11.5T760-720v160q0 17-11.5 28.5T720-520H560ZM240-200q-17 0-28.5-11.5T200-240v-160q0-17 11.5-28.5T240-440h160q17 0 28.5 11.5T440-400v160q0 17-11.5 28.5T400-200H240Zm0-320q-17 0-28.5-11.5T200-560v-160q0-17 11.5-28.5T240-760h160q17 0 28.5 11.5T440-720v160q0 17-11.5 28.5T400-520H240Zm20 260h120v-120H260v120Zm0-320h120v-120H260v120Zm320 0h120v-120H580v120Z"
+            />
+          </svg>
+          <h2>QR-code scannen</h2>
+          <div class="scan-container">
+            <video id="video" autoplay playsinline></video>
+            <div class="scan-frame">
+              <span class="corner tl"></span>
+              <span class="corner tr"></span>
+              <span class="corner bl"></span>
+              <span class="corner br"></span>
+            </div>
+          </div>
+        </div>
+      </dialog>
       <dialog
         id="customAppointments"
         role="dialog"
@@ -1002,6 +1030,28 @@ <h2 data-translate="settings">Instellingen</h2>
                   >Koppelcode</label
                 >
               </div>
+              <div class="scanBtn">
+                <button
+                  id="submenu"
+                  command="show-modal"
+                  commandfor="scanQrCode"
+                  style="
+                    padding: 2px;
+                    background-color: var(--primary-foreground);
+                  "
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 -960 960 960"
+                    id="icon"
+                  >
+                    <path
+                      d="M120-680q-17 0-28.5-11.5T80-720v-120q0-17 11.5-28.5T120-880h120q17 0 28.5 11.5T280-840q0 17-11.5 28.5T240-800h-80v80q0 17-11.5 28.5T120-680Zm0 600q-17 0-28.5-11.5T80-120v-120q0-17 11.5-28.5T120-280q17 0 28.5 11.5T160-240v80h80q17 0 28.5 11.5T280-120q0 17-11.5 28.5T240-80H120Zm600 0q-17 0-28.5-11.5T680-120q0-17 11.5-28.5T720-160h80v-80q0-17 11.5-28.5T840-280q17 0 28.5 11.5T880-240v120q0 17-11.5 28.5T840-80H720Zm91.5-611.5Q800-703 800-720v-80h-80q-17 0-28.5-11.5T680-840q0-17 11.5-28.5T720-880h120q17 0 28.5 11.5T880-840v120q0 17-11.5 28.5T840-680q-17 0-28.5-11.5ZM700-200v-60h60v60h-60Zm0-120v-60h60v60h-60Zm-60 60v-60h60v60h-60Zm-60 60v-60h60v60h-60Zm-60-60v-60h60v60h-60Zm120-120v-60h60v60h-60Zm-60 60v-60h60v60h-60Zm-60-60v-60h60v60h-60Zm40-140q-17 0-28.5-11.5T520-560v-160q0-17 11.5-28.5T560-760h160q17 0 28.5 11.5T760-720v160q0 17-11.5 28.5T720-520H560ZM240-200q-17 0-28.5-11.5T200-240v-160q0-17 11.5-28.5T240-440h160q17 0 28.5 11.5T440-400v160q0 17-11.5 28.5T400-200H240Zm0-320q-17 0-28.5-11.5T200-560v-160q0-17 11.5-28.5T240-760h160q17 0 28.5 11.5T440-720v160q0 17-11.5 28.5T400-520H240Zm20 260h120v-120H260v120Zm0-320h120v-120H260v120Zm320 0h120v-120H580v120Z"
+                    />
+                  </svg>
+                  <span>QR-code scannen</span>
+                </button>
+              </div>
             </section>
           </div>
           <div id="somtoday" class="submenu">

material.css

@@ -22,9 +22,6 @@
   display: inherit;
   border-radius: 1rem;
 }
-.theme__input:checked + .theme__icon::after {
-  border-radius: 1rem;
-}
 .theme__icon {
   display: inline-block;
   width: 3.5rem;
@@ -37,16 +34,6 @@
   font-family: Inter;
   font-weight: 500;
 }
-.theme__icon::after {
-  content: "";
-  width: 3.5rem;
-  height: 2.9rem;
-  display: block;
-  border-radius: 1.5rem;
-  position: relative;
-  bottom: 2.9rem;
-  transition: 0.2s border-radius;
-}
 .theme__icon::before {
   content: "";
   background: linear-gradient(
@@ -407,7 +394,7 @@ body[data-theme="pink monochrome"] {
   --thumb-out: var(--thumb-space-between-edges);
   max-width: calc(100vw - 92px);
   width: 260px;
-  padding: 18px 16px;
+  padding: 16px;
 }
 .switch__design {
   width: var(--width);
@@ -419,7 +406,7 @@ body[data-theme="pink monochrome"] {
   transition: 0.1s;
   border: 2px solid var(--thumb-background);
   float: right;
-  bottom: 5px;
+  bottom: 6.5px;
   font-family: Inter;
 }
 .switch__design::before {

schedule.js

@@ -969,6 +969,9 @@ document.getElementById("ltr").addEventListener("click", () => {
   }
   document.getElementById("weekBtn").click();
 });
+document.querySelector(".scanBtn").addEventListener("click", () => {
+  startScanner();
+});
 if (
   localStorage.getItem("dag") == "false" ||
   (!localStorage.getItem("dag") && window.innerWidth > 1000)
@@ -980,6 +983,56 @@ if (
 if (window.innerWidth < 330) {
   document.getElementById("dayBtn").click();
 }
+
+const video = document.getElementById("video");
+
+async function startScanner() {
+  // Check support
+  if (!("BarcodeDetector" in window)) {
+    return;
+  }
+
+  // Create detector for QR codes only
+  const barcodeDetector = new BarcodeDetector({
+    formats: ["qr_code"],
+  });
+
+  // Start camera
+  const stream = await navigator.mediaDevices.getUserMedia({
+    video: { facingMode: "environment" },
+  });
+
+  video.srcObject = stream;
+
+  // Scan loop
+  async function scan() {
+    try {
+      const barcodes = await barcodeDetector.detect(video);
+
+      if (barcodes.length > 0) {
+        document.getElementById("schoolName").value = JSON.parse(
+          barcodes[0].rawValue
+        ).institution;
+        document.getElementById("authorizationCode").value = JSON.parse(
+          barcodes[0].rawValue
+        ).code;
+        // Stop scanning after success
+        stream.getTracks().forEach((track) => track.stop());
+        return;
+      }
+    } catch (err) {
+      console.error(err);
+    }
+
+    requestAnimationFrame(scan);
+  }
+
+  requestAnimationFrame(scan);
+}
+
+if (!("BarcodeDetector" in window)) {
+  document.querySelector(".scanBtn").remove();
+}
 async function showLessonInfo(lessonHTML, lesson) {
   const original = document.getElementById(lesson.appointmentInstance);
   original.classList.add("clicked");
@@ -1012,7 +1065,8 @@ async function showLessonInfo(lessonHTML, lesson) {
   if (!lesson.content) {
     lesson.content = "";
   }
-  let warning = lesson.changeDescription + lesson.schedulerRemark + lesson.content;
+  let warning =
+    lesson.changeDescription + lesson.schedulerRemark + lesson.content;
 
   if (lesson.cancelled == true) {
     lesson.appointmentType = "cancelled";

style.css

@@ -131,6 +131,58 @@ dialog {
   view-transition-name: dialog;
   width: 292px;
 }
+#scanQrCode {
+  width: 250px;
+}
+#video {
+  border-radius: 18px;
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+  background-color: var(--primary-foreground);
+}
+.scan-frame {
+  position: absolute;
+  inset: 0;
+}
+.scan-container {
+  width: 100%;
+}
+.corner {
+  width: 32px;
+  height: 32px;
+  border-width: 3px;
+  border-style: solid;
+  position: absolute;
+  border-color: var(--primary-border);
+}
+.tl {
+  top: 111px;
+  left: 15px;
+  border-right: 0;
+  border-bottom: 0;
+  border-radius: 24px 0 0 0;
+}
+.tr {
+  top: 111px;
+  right: 15px;
+  border-left: 0;
+  border-bottom: 0;
+  border-radius: 0 24px 0 0;
+}
+.bl {
+  bottom: 10px;
+  left: 15px;
+  border-right: 0;
+  border-top: 0;
+  border-radius: 0 0 0 24px;
+}
+.br {
+  bottom: 10px;
+  right: 15px;
+  border-left: 0;
+  border-top: 0;
+  border-radius: 0 0 24px 0;
+}
 
 @keyframes popIn {
   from {
@@ -195,12 +247,14 @@ h2.date {
   display: inline;
 }
 section div:first-of-type,
-section #submenu:first-of-type {
+section #submenu:first-of-type,
+#clearSettings section #submenu:first-of-type {
   border-top-left-radius: 1rem;
   border-top-right-radius: 1rem;
 }
 section div:last-of-type,
-section #submenu:last-of-type {
+section #submenu:last-of-type,
+#clearSettings section #submenu:last-of-type {
   border-bottom-left-radius: 1rem;
   border-bottom-right-radius: 1rem;
   margin-bottom: 0;
@@ -263,7 +317,8 @@ table {
 #clearSettings #content {
   width: 282px;
 }
-#clearSettings div {
+#clearSettings div,
+#scanQrCode div {
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -282,13 +337,16 @@ table {
 }
 #clearSettings #submenu {
   padding: 1rem;
+  border-radius: 0.4rem;
+  margin-bottom: 0.25rem;
   background-color: var(--primary-accent);
   color: var(--accent-text);
   display: flex;
   justify-content: center;
   align-items: center;
 }
-#clearSettings #icon {
+#clearSettings #icon,
+#scanQrCode #icon {
   fill: var(--accent-text);
   width: 2rem;
   height: 2rem;
@@ -410,7 +468,7 @@ details strong {
   height: calc(100vh - 3.75rem);
 }
 .ltrEnabled strong.date {
-  margin: 12px;
+  margin: 12px 10px;
   transform: translateY(-1.5rem);
 }
 .ltrEnabled div {
@@ -628,6 +686,7 @@ dialog details {
 }
 details {
   overflow: hidden;
+  font-weight: 450;
 }
 summary::marker {
   font-family: inherit;