Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show the user's notifications in a popup #147

Merged
merged 3 commits into from
Dec 2, 2023
Merged

Show the user's notifications in a popup #147

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1024619
Show the user's notifications in a popup
ttoino Sep 26, 2023
311e86a
Add button to mark notifications as read
ttoino Sep 26, 2023
d9132be
Wrong class name in notifications
ttoino Sep 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 128 additions & 3 deletions content-scripts/src/modules/layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { elementFromHtml } from "./utilities/elementFromHtml";
import { createPopover } from "./utilities/popover";
import { fetchSigarraPage } from "./utilities/pageUtils";

const HEADER_LINKS = {
Estudantes: {
Expand Down Expand Up @@ -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}"
Expand Down Expand Up @@ -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");

Expand All @@ -181,6 +291,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);
Expand Down
132 changes: 131 additions & 1 deletion css/simpler.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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 {
Expand Down Expand Up @@ -380,6 +410,106 @@ 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: grid;
grid-template: "title button" auto
"time button" auto
/ 1fr auto;
align-items: center;
gap: .25em;
padding: .5em;
border-bottom: 1px solid #d1d1d1;
}

.se-notification:last-of-type {
border: none;
}

.se-notification-title {
grid-area: title;
font-weight: 500;
}

.se-notification-time {
grid-area: time;
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;
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;
}

#se-auth-empty-notifications,
#se-auth-notifications-list .se-loading-indicator {
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;
Expand Down