klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-10-28 23:53:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Create unified notification system

Browse Source
This commit is contained in:
Antoine Bartuccio
2025-09-23 18:39:01 +02:00
parent 980952807a
commit cbe9887efb
10 changed files with 55 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
core/static/bundled/utils/notifications.ts Normal file
View File

@@ -0,0 +1,24 @@
export enum NotificationLevel {
Error = "error",
Warning = "warning",
}
export function createNotification(message: string, level: NotificationLevel) {
const element = document.getElementById("notifications");
if (element === null) {
return false;
}
return element.dispatchEvent(
new CustomEvent("notification-add", {
detail: { text: message, tag: level },
}),
);
}
export function deleteNotifications() {
const element = document.getElementById("notifications");
if (element === null) {
return false;
}
return element.dispatchEvent(new CustomEvent("notification-delete"));
}

1
core/static/core/header.scss
View File

@@ -321,7 +321,6 @@ $hovered-red-text-color: #ff4d4d;
>#header_notif {
box-sizing: border-box;
display: none;
position: absolute;
margin: 0;
background-color: whitesmoke;

38
core/static/core/js/script.js
View File

@@ -1,38 +0,0 @@
$(() => {
$("#quick_notif li").click(function () {
$(this).hide();
});
});
// biome-ignore lint/correctness/noUnusedVariables: used in other scripts
function createQuickNotif(msg) {
const el = document.createElement("li");
el.textContent = msg;
el.addEventListener("click", () => el.parentNode.removeChild(el));
document.getElementById("quick_notif").appendChild(el);
}
// biome-ignore lint/correctness/noUnusedVariables: used in other scripts
function deleteQuickNotifs() {
const el = document.getElementById("quick_notif");
while (el.firstChild) {
el.removeChild(el.firstChild);
}
}
// biome-ignore lint/correctness/noUnusedVariables: used in other scripts
function displayNotif() {
$("#header_notif").toggle().parent().toggleClass("white");
}
// You can't get the csrf token from the template in a widget
// We get it from a cookie as a workaround, see this link
// https://docs.djangoproject.com/en/2.0/ref/csrf/#ajax
// Sadly, getting the cookie is not possible with CSRF_COOKIE_HTTPONLY or CSRF_USE_SESSIONS is True
// So, the true workaround is to get the token from the dom
// https://docs.djangoproject.com/en/2.0/ref/csrf/#acquiring-the-token-if-csrf-use-sessions-is-true
// biome-ignore lint/style/useNamingConvention: can't find it used anywhere but I will not play with the devil
// biome-ignore lint/correctness/noUnusedVariables: used in other scripts
function getCSRFToken() {
return $("[name=csrfmiddlewaretoken]").val();
}

9
core/templates/core/base.jinja
View File

@@ -34,7 +34,6 @@
<!-- Jquery declared here to be accessible in every django widgets -->
<script src="{{ static('bundled/vendored/jquery.min.js') }}"></script>
<script src="{{ static('core/js/script.js') }}"></script>
{% block additional_css %}{% endblock %}
{% block additional_js %}{% endblock %}
@@ -74,11 +73,9 @@
<div id="page">
<ul id="quick_notif">
{% for n in quick_notifs %}
<li>{{ n }}</li>
{% endfor %}
</ul>
{% block notifications %}
{% include "core/base/notifications.jinja" %}
{% endblock %}
<div id="content">
{%- block tabs -%}

8
core/templates/core/base/header.jinja
View File

@@ -74,9 +74,9 @@
{% endif %}
></a>
</div>
<div class="notification">
<a href="#" onclick="displayNotif()">
<i class="fa-regular fa-bell"></i>
<div class="notification" x-data="{display: false}" :class="{white: display}">
<a href="#" @click.prevent="display = !display">
<i :class="`fa-${display ? 'solid': 'regular'} fa-bell`" x-transition></i>
{% set notification_count = user.notifications.filter(viewed=False).count() %}
{% if notification_count > 0 %}
@@ -89,7 +89,7 @@
</span>
{% endif %}
</a>
<div id="header_notif">
<div id="header_notif" x-show="display" x-cloak x-transition>
<ul>
{% if user.notifications.filter(viewed=False).count() > 0 %}
{% for n in user.notifications.filter(viewed=False).order_by('-date') %}

24
core/templates/core/base/notifications.jinja Normal file
View File

@@ -0,0 +1,24 @@
<div id="notifications"
x-data="{
messages: [
{% if messages %}
{% for message in messages %}
{
tag: '{{ message.tags }}',
text: '{{ message }}',
},
{% endfor %}
{% endif %}
]
}"
@notification-add="(e) => messages.push(e?.detail)"
@notification-delete="messages = []">
<template x-for="message in messages">
<div x-data="{show: true}" class="alert" :class="`alert-${message.tag}`" x-show="show" x-transition>
<span class="alert-main" x-text="message.text"></span>
<span class="clickable" @click="show = false">
<i class="fa fa-close"></i>
</span>
</div>
</template>
</div>

8
eboutic/templates/eboutic/eboutic_billing_info.jinja
View File

@@ -31,12 +31,4 @@
</div>
<br>
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">
{{ message }}
</div>
{% endfor %}
{% endif %}
</div>

8
eboutic/templates/eboutic/eboutic_main.jinja
View File

@@ -22,14 +22,6 @@
{% block content %}
<h1 id="eboutic-title">{% trans %}Eboutic{% endtrans %}</h1>
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">
{{ message }}
</div>
{% endfor %}
{% endif %}
<div id="eboutic" x-data="basket({{ last_purchase_time }})">
<div id="basket">
<h3>Panier</h3>

8
eboutic/templates/eboutic/eboutic_payment_result.jinja
View File

@@ -4,14 +4,6 @@
<h3>{% trans %}Eboutic{% endtrans %}</h3>
<div>
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">
{{ message }}
</div>
{% endfor %}
{% endif %}
{% if success %}
{% trans %}Payment successful{% endtrans %}
{% else %}

50
pedagogy/templates/pedagogy/uv_edit.jinja
View File

@@ -21,11 +21,6 @@
{{ field.errors }}
<label for="{{ field.name }}">{{ field.label }}</label>
{{ field }}
{% if field.name == 'code' %}
<button type="button" id="autofill">{% trans %}Import from UTBM{% endtrans %}</button>
{% endif %}
</p>
{% endif %}
@@ -36,48 +31,3 @@
<p><input type="submit" value="{% trans %}Update{% endtrans %}" /></p>
</form>
{% endblock %}
{% block script %}
{{ super() }}
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
const autofillBtn = document.getElementById('autofill')
const codeInput = document.querySelector('input[name="code"]')
autofillBtn.addEventListener('click', () => {
const url = `/api/uv/${codeInput.value}`;
deleteQuickNotifs()
$.ajax({
dataType: "json",
url: url,
success: function(data, _, xhr) {
if (xhr.status !== 200) {
createQuickNotif("{% trans %}Unknown UE code{% endtrans %}")
return
}
Object.entries(data)
.filter(([_, val]) => !!val) // skip entries with null or undefined value
.map(([key, val]) => { // convert keys to DOM elements
return [document.querySelector('[name="' + key + '"]'), val];
})
.filter(([elem, _]) => !!elem) // skip non-existing DOM elements
.forEach(([elem, val]) => { // write the value in the form field
if (elem.tagName === 'TEXTAREA') {
// MD editor text input
elem.parentNode.querySelector('.CodeMirror').CodeMirror.setValue(val);
} else {
elem.value = val;
}
});
createQuickNotif('{% trans %}Successful autocomplete{% endtrans %}')
},
error: function(_, _, statusMessage) {
createQuickNotif('{% trans %}An error occurred: {% endtrans %}' + statusMessage)
},
})
})
})
</script>
{% endblock %}