Padding bij ltr verminderd. Volledige docentennamen bij lesinformatie.

Dialoog kan nu niet meer gesloten worden als de initiële setup nog niet
klaar is. Analyses van PostHog standaard uit bij gebruik van een
adblocker.

Author: klascal

index.html

@@ -21,6 +21,8 @@
     <script src="ChristmasOverlay.js"></script>
     <script src="NewYearsOverlay.js"></script>
     <script src="BirthdayOverlay.js"></script>
+    <!--Detecteert adblocker via namaak advertentiescript om gebruiker automatisch uit PostHog te opten-->
+    <script src="old/prebid-ads.js"></script>
     <script>
       !(function (t, e) {
         var o, n, p, r;
@@ -61,7 +63,7 @@
                   return u.toString(1) + ".people (stub)";
                 },
                 o =
-                  "init bs ws ge fs capture De Ai $s register register_once register_for_session unregister unregister_for_session Is getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSurveysLoaded onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey canRenderSurveyAsync identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty xs Ss createPersonProfile Es gs opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing ys debug ks getPageViewId captureTraceFeedback captureTraceMetric".split(
+                  "init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".split(
                     " "
                   ),
                 n = 0;
@@ -75,7 +77,15 @@
       })(document, window.posthog || []);
       posthog.init("phc_IFVPiVBC7zO9ZZ7rrmgV0nFBQ3gndhsiL8y3V1OmyHa", {
         api_host: "https://eu.i.posthog.com",
-        person_profiles: "always", // or 'always' to create profiles for anonymous users as well
+        defaults: "2026-01-30",
+        loaded: function (posthog) {
+          if (
+            window.allowPostHog === undefined &&
+            !posthog.has_opted_out_capturing()
+          ) {
+            posthog.opt_out_capturing();
+          }
+        },
       });
     </script>
   </head>
@@ -632,7 +642,6 @@ <h2 data-translate="settings">Instellingen</h2>
                 id="submenu"
                 disabled
                 onclick="show('somtoday', 'Somtoday koppelen')"
-                style="display: block; text-align: left"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -644,9 +653,12 @@ <h2 data-translate="settings">Instellingen</h2>
                     d="M32.0533 12.4129H31.0726C29.9394 12.4129 29.025 11.5226 29.025 10.4194V8.50323C29.025 7.4 28.1105 6.50968 26.9774 6.50968H23.3991C22.2659 6.50968 21.3515 5.61935 21.3515 4.51613V1.99355C21.3515 0.890322 20.437 0 19.3039 0H15.8912C14.7581 0 13.8436 0.890322 13.8436 1.99355V4.51613C13.8436 5.61935 12.9292 6.50968 11.796 6.50968H8.21773C7.0846 6.50968 6.17014 7.4 6.17014 8.50323V10.4194C6.17014 11.5226 5.25568 12.4129 4.12255 12.4129H3.14183C2.0087 12.4129 1.09424 13.3032 1.09424 14.4065V20.3613C1.09424 21.4645 2.0087 22.3548 3.14183 22.3548H4.1093C5.24243 22.3548 6.15689 23.2452 6.15689 24.3484V26.5548C6.15689 27.6581 7.07135 28.5484 8.20448 28.5484C9.33761 28.5484 10.2521 29.4387 10.2521 30.5419V33.0065C10.2521 34.1097 11.1665 35 12.2997 35H14.4997C15.6328 35 16.5472 34.1097 16.5472 33.0065V29.5742C16.5472 29.0065 17.0177 28.5548 17.5942 28.5548C18.1707 28.5548 18.6412 29.0129 18.6412 29.5742V33.0065C18.6412 34.1097 19.5557 35 20.6888 35H22.8888C24.0219 35 24.9364 34.1097 24.9364 33.0065V30.5419C24.9364 29.4387 25.8509 28.5484 26.984 28.5484C28.1171 28.5484 29.0316 27.6581 29.0316 26.5548V24.3484C29.0316 23.2452 29.946 22.3548 31.0792 22.3548H32.0466C33.1798 22.3548 34.0942 21.4645 34.0942 20.3613V14.4065C34.0942 13.3032 33.1798 12.4129 32.0466 12.4129H32.0533ZM27.1894 18.8903C26.5466 20.9548 25.1153 22.6516 23.1605 23.671C21.9412 24.3032 20.6093 24.6258 19.2575 24.6258C18.4491 24.6258 17.634 24.5097 16.8388 24.271C16.3551 24.129 16.0834 23.6323 16.2292 23.1677C16.375 22.6968 16.8852 22.4323 17.3689 22.5742C19.0256 23.0645 20.775 22.8968 22.3057 22.1032C23.8298 21.3097 24.9497 19.9871 25.4533 18.3742C25.5991 17.9032 26.1093 17.6452 26.593 17.7806C27.0768 17.9226 27.3485 18.4194 27.2027 18.8903H27.1894Z"
                   />
                 </svg>
-                Somtoday<br /><small data-translate="somtodayMessage"
-                  >Hopelijk binnenkort weer</small
-                >
+                <div class="analytics-text">
+                  <span>Somtoday</span
+                  ><small data-translate="somtodayMessage"
+                    >Hopelijk binnenkort weer</small
+                  >
+                </div>
               </button>
             </section>
           </div>
@@ -1327,7 +1339,7 @@ <h2 data-translate="settings">Instellingen</h2>
                 <label for="prefix-location">Voorvoegsel voor lokaal</label>
               </div>
             </section>
-            <strong class="date">Gegevens wissen uit Klascal</strong>
+            <strong class="date">Gegevens wissen van Klascal</strong>
             <section>
               <button
                 id="submenu"
@@ -1345,6 +1357,26 @@ <h2 data-translate="settings">Instellingen</h2>
                 </svg>
                 <span>Gegevens wissen</span>
               </button>
+              <!--To do: JS hiervoor toevoegen
+              <button id="submenu" class="switch switch--2">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 -960 960 960"
+                  id="icon"
+                >
+                  <path
+                    d="M680-160q-17 0-28.5-11.5T640-200v-200q0-17 11.5-28.5T680-440h80q17 0 28.5 11.5T800-400v200q0 17-11.5 28.5T760-160h-80Zm-240 0q-17 0-28.5-11.5T400-200v-560q0-17 11.5-28.5T440-800h80q17 0 28.5 11.5T560-760v560q0 17-11.5 28.5T520-160h-80Zm-240 0q-17 0-28.5-11.5T160-200v-360q0-17 11.5-28.5T200-600h80q17 0 28.5 11.5T320-560v360q0 17-11.5 28.5T280-160h-80Z"
+                  />
+                </svg>
+                <div class="analytics-text">
+                  <label for="analytics">Analyses</label>
+                  <small>Analyses van PostHog</small>
+                </div>
+                <label class="switch__label">
+                  <input type="checkbox" id="analytics" class="switch__input" />
+                  <span class="switch__design" style="bottom: 2px"></span>
+                </label>
+              </button>-->
             </section>
           </div>
           <div id="welcomeScreen" class="submenu">

material.css

@@ -369,6 +369,7 @@ body[data-theme="pink monochrome"] {
 .switch__label {
   position: relative;
   cursor: pointer;
+  margin-left: auto;
 }
 .switch__input {
   opacity: 0;

schedule.js

@@ -67,6 +67,7 @@ if (!schoolName && !accessToken) {
   document
     .querySelector("#dialog #closeBtn")
     .setAttribute("onclick", "resetAfterWelcomeScreen()");
+  document.querySelector("#dialog").setAttribute("closedby", "none");
   document.querySelector("#dialog #closeBtn").removeAttribute("command");
   document.querySelector("#dialog #closeBtn").removeAttribute("commandfor");
   document.querySelector("#dialog #closeBtn span").innerHTML = "Volgende";
@@ -126,7 +127,7 @@ announcements();
 
 async function userInfo() {
   const response = await fetch(
-    `https://${schoolName}.zportal.nl/api/users/~me?fields=code,isEmployee`,
+    `https://${schoolName}.zportal.nl/api/users/~me?fields=code,isEmployee,schoolInSchoolYears`,
     {
       headers: {
         Authorization: `Bearer ${accessToken}`,
@@ -139,11 +140,70 @@ async function userInfo() {
     userType1 = "teacher";
   } else if (!data.response.data[0]) {
     console.error(data);
+  } else {
+    schoolInSchoolYears(data.response.data[0].schoolInSchoolYears);
   }
   localStorage.setItem("userType", userType1);
   userType = localStorage.getItem("userType");
   fetchSchedule();
 }
+async function schoolInSchoolYears(years) {
+  const response = await fetch(
+    `https://${schoolName}.zportal.nl/api/schoolsinschoolyears?fields=id,year`,
+    {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    }
+  );
+  const data = await response.json();
+  const schoolYears = data.response.data;
+  const current = schoolYears.reduce(
+    (latest, item) =>
+      years.includes(item.id) && (!latest || item.year > latest.year)
+        ? item
+        : latest,
+    null
+  );
+  localStorage.setItem("schoolInSchoolYear", current.id);
+  fetchTeachers();
+}
+async function fetchTeachers() {
+  const schoolYear = Number(localStorage.getItem("schoolInSchoolYear"));
+  let teacherTranslations = {};
+  return fetch(
+    `https://${schoolName}.zportal.nl/api/users?archived=false&schoolInSchoolYear=${schoolYear}&fields=code%2ClastName%2Cprefix&isEmployee=true`,
+    {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    }
+  )
+    .then((r) => r.json())
+    .then((result) => {
+      let teachers = result.response.data;
+      teachers.forEach((teacher) => {
+        let prefix = teacher.prefix;
+        let lastName = teacher.lastName;
+        // For my school the format {2 letters last name}{2 letters first name} is used which can be used to find the initial letter of the first name, possibly other schools??
+        if (schoolName == "csvincentvangogh" && teacher.code.length == 4)
+          prefix = `${teacher.code.split("")[2].toUpperCase()}.${prefix ? " " + prefix : ""}`;
+
+        if (!lastName) {
+          return;
+        }
+
+        let commaIndex = lastName.indexOf(",");
+        if (commaIndex != -1) {
+          lastName = lastName.substring(0, commaIndex);
+        }
+
+        let fullName = (prefix ? prefix + " " : "") + lastName;
+        teacherTranslations[teacher.code] = fullName;
+      });
+      localStorage.setItem("teachers", JSON.stringify(teacherTranslations));
+    });
+}
 const inputs = document.querySelectorAll("input");
 inputs.forEach((input) => {
   if (localStorage.getItem(input.id)) {
@@ -294,6 +354,7 @@ function show(id, title, hideBack) {
     } else {
       document.querySelector("#dialog h2").innerHTML = title;
       if (!hideBack) {
+        document.querySelector("#dialog").setAttribute("closedby", "any");
         document.querySelector("#dialog #closeBtn span").innerHTML = "Sluiten";
         document
           .querySelector("#dialog #closeBtn")
@@ -432,7 +493,7 @@ async function fetchSchedule(year, week, isFirstLoad) {
     return;
   }
   const response = await fetch(
-    `https://${schoolName}.zportal.nl/api/liveschedule?${userType}=~me&week=${year}${week}&fields`,
+    `https://${schoolName}.zportal.nl/api/liveschedule?${userType}=~me&week=${year}${week}&fields=week,user,appointments,replacements,status`,
     {
       headers: {
         Authorization: `Bearer ${accessToken}`,
@@ -756,9 +817,7 @@ async function fetchSchedule(year, week, isFirstLoad) {
   });
 }
 async function fetchFullSubjectNames() {
-  let url = `https://${localStorage.getItem(
-    "schoolName"
-  )}.zportal.nl/api/subjectselectionsubjects?fields=code,name`;
+  let url = `https://${schoolName}.zportal.nl/api/subjectselectionsubjects?fields=code,name`;
   return fetch(url, {
     headers: {
       Authorization: `Bearer ${localStorage.getItem("access_token")}`,
@@ -1083,14 +1142,26 @@ async function showLessonInfo(lessonHTML, lesson) {
     : "";
   const calendarClockIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="1.25rem" viewBox="0 -960 960 960" width="1.25rem" fill="var(--accent-text)" style="vertical-align: sub; translate: 0 -1px;"><path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-40q0-17 11.5-28.5T280-880q17 0 28.5 11.5T320-840v40h320v-40q0-17 11.5-28.5T680-880q17 0 28.5 11.5T720-840v40h40q33 0 56.5 23.5T840-720v187q0 17-11.5 28.5T800-493q-17 0-28.5-11.5T760-533v-27H200v400h232q17 0 28.5 11.5T472-120q0 17-11.5 28.5T432-80H200Zm520 40q-83 0-141.5-58.5T520-240q0-83 58.5-141.5T720-440q83 0 141.5 58.5T920-240q0 83-58.5 141.5T720-40Zm20-208v-92q0-8-6-14t-14-6q-8 0-14 6t-6 14v91q0 8 3 15.5t9 13.5l61 61q6 6 14 6t14-6q6-6 6-14t-6-14l-61-61Z"/></svg>`;
   const updateIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="1.25rem" viewBox="0 -960 960 960" width="1.25rem" fill="var(--accent-text)" style="vertical-align: sub;"><path d="M480-120q-75 0-140.5-28.5t-114-77q-48.5-48.5-77-114T120-480q0-75 28.5-140.5t77-114q48.5-48.5 114-77T480-840q82 0 155.5 35T760-706v-54q0-17 11.5-28.5T800-800q17 0 28.5 11.5T840-760v160q0 17-11.5 28.5T800-560H640q-17 0-28.5-11.5T600-600q0-17 11.5-28.5T640-640h70q-41-56-101-88t-129-32q-117 0-198.5 81.5T200-480q0 117 81.5 198.5T480-200q95 0 170-57t99-147q5-16 18-24t29-6q17 2 27 14.5t6 27.5q-29 119-126 195.5T480-120Zm40-376 100 100q11 11 11 28t-11 28q-11 11-28 11t-28-11L452-452q-6-6-9-13.5t-3-15.5v-159q0-17 11.5-28.5T480-680q17 0 28.5 11.5T520-640v144Z"/></svg>`;
+  const teacherIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="1.25rem" viewBox="0 -960 960 960" width="1.25rem" fill="var(--accent-text)" style="vertical-align: sub;"><path d="M609-389q-29-29-29-71t29-71q29-29 71-29t71 29q29 29 29 71t-29 71q-29 29-71 29t-71-29Zm-89 229q-17 0-28.5-11.5T480-200v-16q0-24 12.5-44.5T528-290q36-15 74.5-22.5T680-320q39 0 77.5 7.5T832-290q23 9 35.5 29.5T880-216v16q0 17-11.5 28.5T840-160H520ZM287-527q-47-47-47-113t47-113q47-47 113-47t113 47q47 47 47 113t-47 113q-47 47-113 47t-113-47ZM80-272q0-34 17-62.5t47-43.5q60-30 124.5-46T400-440q35 0 70 6t70 14l-68 68q-25 25-48.5 51T400-240v39q0 12 4.5 22.5T419-160H160q-33 0-56.5-23.5T80-240v-32Z"/></svg>`;
+  let fullTeacherNames = JSON.parse(localStorage.getItem("teachers"));
+  if (JSON.parse(localStorage.getItem("teachers"))) {
+    fullTeacherNames = lesson.teachers.map(
+      (teacher) => `${fullTeacherNames[teacher]} (${teacher})`
+    );
+  } else if (userType == "student") {
+    userInfo();
+  }
+  const teacherDiv = fullTeacherNames
+    ? `<div><span class="pill">${teacherIcon}${fullTeacherNames.join(", ")}</span></div>`
+    : "";
   document.querySelector("#info #content").innerHTML +=
-    `${warningSymbol}<div class="moreInfo"><span class="pill">${groupIcon}${lesson.expectedStudentCount}<span style="translate: 0 1.5px">${lesson.groups.join(", ")}</span></span>${onlinePill}</div>`;
+    `${warningSymbol}${teacherDiv}<div class="moreInfo"><span class="pill">${groupIcon}${lesson.expectedStudentCount}<span style="translate: 0 1.5px">${lesson.groups.join(", ")}</span></span>${onlinePill}</div>`;
   const url = `https://${schoolName}.zportal.nl/api/appointments?appointmentInstance=${
     lesson.appointmentInstance
   }&user=~me&valid=true&start=${lesson.start}&end=${
     lesson.end
   }&fields=created,modified,lastModified${
-    localStorage.getItem("userType") == "teacher" ? `,students` : ""
+    userType == "teacher" ? `,students` : ""
   }`;
   const response = await fetch(url, {
     headers: {

style.css

@@ -468,8 +468,8 @@ details strong {
   height: calc(100vh - 3.75rem);
 }
 .ltrEnabled strong.date {
-  margin: 12px 10px;
-  transform: translateY(-1.5rem);
+  margin: 6px 10px;
+  transform: translateY(-1.15rem);
 }
 .ltrEnabled div {
   height: 3rem;
@@ -481,7 +481,7 @@ details strong {
   display: block;
 }
 .ltrEnabled .warning {
-  bottom: 22px !important;
+  bottom: 20px !important;
 }
 .les {
   height: calc(var(--height) - 2px);
@@ -537,7 +537,7 @@ section div br:not(:first-of-type) {
   padding: 6px 10px;
   line-height: normal !important;
   top: unset;
-  height: 4rem;
+  height: 3.5rem;
   left: calc(var(--margin) * 3);
 }
 .dayEnabled div {
@@ -671,6 +671,12 @@ button:not(:disabled) {
   flex-wrap: wrap;
   justify-content: space-between;
 }
+.analytics-text {
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  padding: 0;
+}
 @font-face {
   font-family: "FontWithASyntaxHighlighter";
   src: url("/FontWithASyntaxHighlighter-Regular.woff2") format("woff2");
@@ -955,6 +961,7 @@ button:disabled {
 .weekEnabled .timeline {
   height: 2px;
   top: calc(var(--top) + 4.5rem);
+  left: 0;
 }
 .ltrEnabled .timeline {
   width: 2px;
@@ -1160,7 +1167,7 @@ dialog.right {
 }
 dialog.right,
 dialog.right #content {
-  width: 311px;
+  width: 303px;
 }
 #customAppointments,
 #customAppointments #content {