From 10246192c47e1d8342276e912a426ff188109ce2 Mon Sep 17 00:00:00 2001
From: toino <joaoapereira21@hotmail.com>
Date: Tue, 26 Sep 2023 01:40:55 +0100
Subject: [PATCH 1/3] Show the user's notifications in a popup

---
 content-scripts/src/modules/layout.js | 101 ++++++++++++++++++++++-
 css/simpler.css                       | 114 +++++++++++++++++++++++++-
 2 files changed, 211 insertions(+), 4 deletions(-)

diff --git a/content-scripts/src/modules/layout.js b/content-scripts/src/modules/layout.js
index fab38d6..da5c68f 100644
--- a/content-scripts/src/modules/layout.js
+++ b/content-scripts/src/modules/layout.js
@@ -1,5 +1,6 @@
 import { elementFromHtml } from "./utilities/elementFromHtml";
 import { createPopover } from "./utilities/popover";
+import { fetchSigarraPage } from "./utilities/pageUtils";
 
 const HEADER_LINKS = {
     Estudantes: {
@@ -40,13 +41,32 @@ const HEADER_LINKS = {
 const authentication = (auth) =>
     auth
         ? /*html*/ `
-            <a 
-                href="gnots_geral.all_nots_list?pv_user=${auth.number}" 
+            <button
+                id="se-auth-notifications-button"
                 class="se-button se-icon-button ${
                     auth.notifications ? "se-badge" : ""
                 }">
                 <span class="se-icon ri-notification-line"></span>
-            </a>
+            </button>
+            <div id="se-auth-notifications-menu">
+                <input type="radio" name="se-auth-notifications" id="se-auth-new-notifications-radio" checked>
+                <input type="radio" name="se-auth-notifications" id="se-auth-read-notifications-radio">
+                <div id="se-auth-notifications-header">
+                    <label for="se-auth-new-notifications-radio">Novas</label>
+                    <label for="se-auth-read-notifications-radio">Lidas</label>
+                </div>
+                <div id="se-auth-notifications-list">
+                    <ol id="se-auth-new-notifications"></ol>
+                    <ol id="se-auth-read-notifications"></ol>
+                    <div id="se-auth-empty-notifications">
+                        <span class="se-icon ri-notification-off-line"></span>
+                        <span>Sem notificações</span>
+                    </div>
+                    <div class="se-loading-indicator">
+                        <span class="se-icon ri-refresh-line"></span>
+                    </div>
+                </div>
+            </div>
             <button id="se-auth-profile-button">
                 <img
                     src="fotografias_service.foto?pct_cod=${auth.number}"
@@ -155,6 +175,66 @@ const createNewHeader = (auth) =>
         </header>
     `);
 
+const loadNotifications = async () => {
+    const notificationsList = document.querySelector(
+        "#se-auth-notifications-list"
+    );
+
+    if (
+        notificationsList?.hasAttribute("data-se-loaded") ||
+        notificationsList?.classList.contains("se-loading")
+    )
+        return;
+
+    notificationsList.classList.add("se-loading");
+
+    const newNotifications = document.querySelector(
+        "#se-auth-new-notifications"
+    );
+    const readNotifications = document.querySelector(
+        "#se-auth-read-notifications"
+    );
+
+    const dateFormatter = new Intl.DateTimeFormat("pt-PT", {
+        dateStyle: "short",
+    });
+
+    await Promise.allSettled(
+        [
+            [newNotifications, "P"],
+            [readNotifications, "F"],
+        ].map(async ([list, type]) => {
+            const r = await fetchSigarraPage(
+                `gnots_ajax.show_lista_notifs?pv_estado=${type}`
+            );
+
+            r.querySelectorAll("tr.d").forEach((x) => {
+                const date = x.querySelector("td:nth-child(3)")?.textContent;
+                const title = x.querySelector("td:nth-child(4)")?.textContent;
+                const answer = x.querySelector("td:nth-child(7) input");
+
+                const li = document.createElement("li");
+                li.classList.add("se-notification");
+
+                const time = document.createElement("time");
+                time.classList.add("se-notification-time");
+                time.dateTime = date;
+                time.textContent = dateFormatter.format(new Date(date));
+
+                const span = document.createElement("span");
+                span.classList.add("se-notification-title");
+                span.textContent = title;
+
+                li.append(span, time);
+                list.append(li);
+            });
+        })
+    );
+
+    notificationsList.classList.remove("se-loading");
+    notificationsList.setAttribute("data-se-loaded", "");
+};
+
 const replaceHeader = () => {
     const oldHeader = document.querySelector("#cabecalho");
 
@@ -181,6 +261,21 @@ const replaceHeader = () => {
         .querySelectorAll(":is(#se-auth-button, #se-auth-profile-button)")
         .forEach((x) => x.addEventListener("click", openAuth));
 
+    const notificationsPopover = newHeader.querySelector(
+        "#se-auth-notifications-menu"
+    );
+    const notificationsButton = newHeader.querySelector(
+        "#se-auth-notifications-button"
+    );
+
+    if (notificationsPopover && notificationsButton) {
+        const openNotifications = createPopover(notificationsPopover);
+        notificationsButton.addEventListener("click", () => {
+            loadNotifications();
+            openNotifications();
+        });
+    }
+
     newHeader.querySelectorAll(".se-header-link").forEach((x) => {
         const popover = x.querySelector(".se-header-link-popover");
         const togglePopover = createPopover(popover);
diff --git a/css/simpler.css b/css/simpler.css
index ab2744e..14ef9c2 100644
--- a/css/simpler.css
+++ b/css/simpler.css
@@ -115,6 +115,33 @@ body:is(body) {
     color: white !important;
 }
 
+.se-loading-indicator {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5em;
+    font-size: 1.25em;
+    font-weight: 500;
+}
+
+.se-loading .se-loading-indicator {
+    display: flex;
+}
+
+.se-loading-indicator > .se-icon {
+    animation: infinite linear rotate 1s;
+}
+
+@keyframes rotate {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 #se-auth-federate {
     background-color: #4a9cd4 !important;
     color: white !important;
@@ -239,6 +266,7 @@ body:is(body) {
 
 #se-auth-form,
 #se-auth-profile-menu,
+#se-auth-notifications-menu,
 .se-header-link-popover {
     display: none;
     flex-direction: column;
@@ -276,6 +304,7 @@ body:is(body) {
 }
 
 .se-popover-open :is(#se-auth-form, #se-auth-profile-menu),
+#se-auth-notifications-menu.se-popover-open,
 .se-header-link-popover.se-popover-open,
 .se-header-link:hover > .se-header-link-popover {
     display: flex;
@@ -290,10 +319,11 @@ body:is(body) {
     padding: 1em;
 }
 
-#se-auth-profile-menu {
+#se-auth-profile-menu, #se-auth-notifications-menu {
     top: 6em;
     right: 1em;
     width: 16em;
+    max-height: calc(100vh - 7em);
 }
 
 #se-auth-header {
@@ -380,6 +410,88 @@ body:is(body) {
     object-fit: cover;
 }
 
+#se-auth-notifications-menu input {
+    display: none;
+}
+
+#se-auth-notifications-header {
+    display: flex;
+    flex-direction: row;
+    border-bottom: 1px solid #d1d1d1;
+}
+
+#se-auth-notifications-header label {
+    flex: 1;
+    padding: .5em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+#se-auth-notifications-header label:hover {
+    background-color: #f0f0f0;
+}
+
+#se-auth-new-notifications-radio:checked ~ #se-auth-notifications-header label[for="se-auth-new-notifications-radio"],
+#se-auth-read-notifications-radio:checked ~ #se-auth-notifications-header label[for="se-auth-read-notifications-radio"] {
+    font-weight: bold;
+}
+
+#se-auth-notifications-list {
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+}
+
+.se-notification {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: .25em;
+    padding: .5em;
+    border-bottom: 1px solid #d1d1d1;
+}
+
+.se-notification:last-of-type {
+    border: none;
+}
+
+.se-notification-title {
+    font-weight: 500;
+}
+
+#se-auth-new-notifications,
+#se-auth-read-notifications {
+    display: none;
+    flex-direction: column;
+    padding: 0;
+    margin: 0;
+}
+
+#se-auth-new-notifications-radio:checked ~ #se-auth-notifications-list #se-auth-new-notifications:not(:empty),
+#se-auth-read-notifications-radio:checked ~ #se-auth-notifications-list #se-auth-read-notifications:not(:empty) {
+    display: flex;
+}
+
+#se-auth-empty-notifications {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: .5em;
+    padding: 1em;
+}
+
+#se-auth-new-notifications-radio:checked ~ #se-auth-notifications-list #se-auth-new-notifications:empty ~ #se-auth-empty-notifications,
+#se-auth-read-notifications-radio:checked ~ #se-auth-notifications-list #se-auth-read-notifications:empty ~ #se-auth-empty-notifications {
+    display: flex;
+}
+
+.se-loading > :is(#se-auth-new-notifications, #se-auth-read-notifications, #se-auth-empty-notifications) {
+    display: none !important;
+}
+
 #conteudo {
     grid-area: main;
     overflow: auto;

From 311e86ab705682fe1b4fcb3437181c5fcd566568 Mon Sep 17 00:00:00 2001
From: toino <joaoapereira21@hotmail.com>
Date: Tue, 26 Sep 2023 14:43:23 +0100
Subject: [PATCH 2/3] Add button to mark notifications as read

---
 content-scripts/src/modules/layout.js | 30 +++++++++++++++++++++++++++
 css/simpler.css                       | 24 ++++++++++++++++++---
 2 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/content-scripts/src/modules/layout.js b/content-scripts/src/modules/layout.js
index da5c68f..bd0330c 100644
--- a/content-scripts/src/modules/layout.js
+++ b/content-scripts/src/modules/layout.js
@@ -226,6 +226,36 @@ const loadNotifications = async () => {
                 span.textContent = title;
 
                 li.append(span, time);
+
+                if (answer) {
+                    const markAsRead = async (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+
+                        // Seems to always succeed
+                        await fetchSigarraPage(
+                            `gnots_geral.nots_list_sub?${answer.name}=${answer.value}`
+                        );
+
+                        e.target.remove();
+                        readNotifications.insertBefore(
+                            li,
+                            readNotifications.firstChild
+                        );
+                    };
+
+                    const button = document.createElement("button");
+                    button.classList.add("se-notification-button");
+                    button.type = "button";
+                    button.addEventListener("click", markAsRead);
+
+                    const icon = document.createElement("span");
+                    icon.classList.add("se-icon", "ri-check-line");
+
+                    button.append(icon);
+                    li.append(button);
+                }
+
                 list.append(li);
             });
         })
diff --git a/css/simpler.css b/css/simpler.css
index 14ef9c2..49c2027 100644
--- a/css/simpler.css
+++ b/css/simpler.css
@@ -445,9 +445,11 @@ body:is(body) {
 }
 
 .se-notification {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
+    display: grid;
+    grid-template: "title button" auto
+                   "date button" auto
+                   / 1fr auto;
+    align-items: center;
     gap: .25em;
     padding: .5em;
     border-bottom: 1px solid #d1d1d1;
@@ -458,9 +460,21 @@ body:is(body) {
 }
 
 .se-notification-title {
+    grid-area: title;
     font-weight: 500;
 }
 
+.se-notification-date {
+    grid-area: date;
+    font-size: .8em;
+}
+
+.se-notification-button {
+    grid-area: button;
+    background: none !important;
+    border: none !important;
+}
+
 #se-auth-new-notifications,
 #se-auth-read-notifications {
     display: none;
@@ -476,6 +490,10 @@ body:is(body) {
 
 #se-auth-empty-notifications {
     display: none;
+}
+
+#se-auth-empty-notifications,
+#se-auth-notifications-list .se-loading-indicator {
     flex-direction: column;
     align-items: center;
     justify-content: center;

From d9132beddccdf7cac755e65e024bf11252aece58 Mon Sep 17 00:00:00 2001
From: toino <joaoapereira21@hotmail.com>
Date: Tue, 26 Sep 2023 16:19:15 +0100
Subject: [PATCH 3/3] Wrong class name in notifications

---
 css/simpler.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/css/simpler.css b/css/simpler.css
index 49c2027..e3fe7ca 100644
--- a/css/simpler.css
+++ b/css/simpler.css
@@ -447,7 +447,7 @@ body:is(body) {
 .se-notification {
     display: grid;
     grid-template: "title button" auto
-                   "date button" auto
+                   "time button" auto
                    / 1fr auto;
     align-items: center;
     gap: .25em;
@@ -464,8 +464,8 @@ body:is(body) {
     font-weight: 500;
 }
 
-.se-notification-date {
-    grid-area: date;
+.se-notification-time {
+    grid-area: time;
     font-size: .8em;
 }