Merge branch 'develop' into feature/favorite-course

.github/workflows/cd.yml

@@ -0,0 +1,121 @@
+name: CD
+
+on:
+  release:
+    types: ["published"]
+
+jobs:
+  build:
+    name: Build
+    runs-on: macos-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: "20"
+          cache: "yarn"
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Build
+        run: yarn release
+      - name: Upload chrome artifact
+        uses: actions/upload-artifact@v2
+        with:
+          path: bundle/chrome
+          name: chrome
+      - name: Upload firefox artifact
+        uses: actions/upload-artifact@v2
+        with:
+          path: bundle/firefox
+          name: firefox
+      - name: Upload safari artifact
+        uses: actions/upload-artifact@v2
+        with:
+          path: bundle/safari
+          name: safari
+
+  chrome:
+    name: Deploy to Chrome
+    runs-on: ubuntu-latest
+    needs: build
+    env:
+      EXTENSION_ID: ${{ secrets.CHROME_EXTENSION_ID }}
+      CLIENT_ID: ${{ secrets.CHROME_CLIENT_ID }}
+      CLIENT_SECRET: ${{ secrets.CHROME_CLIENT_SECRET }}
+      REFRESH_TOKEN: ${{ secrets.CHROME_REFRESH_TOKEN }}
+    steps:
+      - name: Download artifact
+        uses: actions/download-artifact@v2
+        with:
+          name: chrome
+      - name: Upload to Chrome Web Store
+        run: npx chrome-webstore-upload-cli upload --auto-publish
+
+#   edge:
+#     name: Deploy to Edge
+#     runs-on: ubuntu-latest
+#     needs: build
+#     steps:
+#       - name: Download artifact
+#         uses: actions/download-artifact@v2
+#         with:
+#           name: chrome
+
+  firefox:
+    name: Deploy to Firefox
+    runs-on: ubuntu-latest
+    needs: build
+    env:
+      API_KEY: ${{ secrets.FIREFOX_API_KEY }}
+      API_SECRET: ${{ secrets.FIREFOX_API_SECRET }}
+    steps:
+      - name: Download artifact
+        uses: actions/download-artifact@v2
+        with:
+          name: firefox
+      - name: Sign add-on
+        run: npx web-ext sign --api-key $API_KEY --api-secret $API_SECRET
+      - name: Upload signed add-on
+        uses: actions/upload-artifact@v2
+        with:
+          path: web-ext-artifacts
+          name: firefox-signed
+      - name: Upload release asset
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ github.event.release.upload_url }}
+          asset_path: web-ext-artifacts/*.xpi
+          asset_name: firefox.xpi
+          asset_content_type: application/x-xpinstall
+      - name: Trigger workflow on website
+        uses: benc-uk/workflow-dispatch@v1
+        with:
+          workflow: cd.yaml
+          repo: NIAEFEUP/nitsig-website
+          inputs: '{ "version": "${{ github.event.release.name }}" }'
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+#   opera:
+#     name: Deploy to Opera
+#     runs-on: ubuntu-latest
+#     needs: build
+#     steps:
+#       - name: Download artifact
+#         uses: actions/download-artifact@v2
+#         with:
+#           name: chrome
+
+#   safari:
+#     name: Deploy to Safari
+#     runs-on: macos-latest
+#     needs: build
+#     steps:
+#       - name: Download artifact
+#         uses: actions/download-artifact@v2
+#         with:
+#           name: safari
+#       - run: ls -R

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,96 @@ 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);
+
+                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);
+            });
+        })
+    );
+
+    notificationsList.classList.remove("se-loading");
+    notificationsList.setAttribute("data-se-loaded", "");
+};
+
 const replaceHeader = () => {
     const oldHeader = document.querySelector("#cabecalho");
 
@@ -183,6 +293,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);

content-scripts/src/pages/class_page.js

@@ -3,7 +3,6 @@ import { getPath } from "../modules/utilities/sigarra";
 
 const removeExtras = () => {
     document.querySelector("#conteudoinner > h2").remove();
-    document.querySelector("#conteudoinner > table:nth-child(5)").remove();
     document.querySelectorAll("#conteudoinner br").forEach( x => x.remove());
 }
 
@@ -59,8 +58,9 @@ const getPhotosLink = (title) => {
     return title.children[2].href;
 }
 
-const editTitle = async (title, table, dialog) => {   
+const editTitle = async (title, table, dialog, enrolled, enrolledText) => {   
     const titleText = document.createElement("h3");
+    const enrolledQnt = document.createElement("h3");
     const leftSide = document.createElement("div");
     const chevron = document.createElement("span");
     chevron.classList.add("ri-arrow-up-s-line", "rightChevron");
@@ -79,17 +79,28 @@ const editTitle = async (title, table, dialog) => {
     const photosButton = createPhotosButton(classLinks[1].children[0], dialog); // photos button
     leftSide.appendChild(photosButton);
 
+    enrolledQnt.classList.add("classTitle");
+    enrolledQnt.innerText = `${enrolled} ${enrolledText.toLowerCase()}`;
+
     title.appendChild(leftSide);
     title.appendChild(chevron);
+    leftSide.appendChild(enrolledQnt);
 
     titleContent.remove();
     title.addEventListener("click", () => titleClick(table, title));
 }
 
-const groupClasses = async () => {
+/**
+ * 
+ * @param {Element} enrolledTable
+ *
+ */
+const groupClasses = async (enrolledTable) => {
     const parent = document.querySelector("#conteudoinner");
-    let titleIndex = 5, tableIndex = 6, classIndex = 0;
+    let titleIndex = 5, tableIndex = 6, classIndex = 0, enrolledIndex = 2;
     let title = document.querySelector(`#conteudoinner > h3:nth-child(${titleIndex})`);
+    let enrolled = enrolledTable.querySelector(`td.l:nth-child(${enrolledIndex})`).textContent;
+    let enrolledText = enrolledTable.querySelector("tbody > tr.d > td.k.t").textContent
     let table = document.querySelector(`#conteudoinner > table:nth-child(${tableIndex})`);
 
     while (title || table) {
@@ -112,15 +123,17 @@ const groupClasses = async () => {
         groupElement.appendChild(tableWrapperElement);
         groupElement.appendChild(photosDialog);
 
-        editTitle(titleWrapperElement, tableWrapperElement, photosDialog);
+        editTitle(titleWrapperElement, tableWrapperElement, photosDialog, enrolled, enrolledText);
         titleWrapperElement.dataset.expand = "true";
 
         titleIndex++;
         tableIndex++;
         classIndex++;
+        enrolledIndex++;
 
         title = document.querySelector(`#conteudoinner > h3:nth-child(${titleIndex})`);
         table = document.querySelector(`#conteudoinner > table:nth-child(${tableIndex})`);
+        enrolled = enrolledTable.querySelector(`td.l:nth-child(${enrolledIndex})`).textContent;
     }
 }
 
@@ -129,5 +142,7 @@ export const classPage = () => {
     if(!path.includes("it_listagem.lista_turma_disciplina")) return;
 
     removeExtras();
-    groupClasses();
+    const enrolledTable = document.querySelector("#conteudoinner > table:nth-child(5)");
+    enrolledTable.remove();
+    groupClasses(enrolledTable);
 }