klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2024-10-18 12:58:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

use spaces for indentation

Browse Source
This commit is contained in:
imperosol 2024-10-08 13:54:44 +02:00
parent 24925f7726
commit 20bea62542
24 changed files with 5167 additions and 5207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
babel.config.json
View File

@ -1,15 +1,15 @@
{ {
"presets": [ "presets": [
[ [
"@babel/preset-env", "@babel/preset-env",
{ {
"targets": { "targets": {
"edge": "17", "edge": "17",
"firefox": "60", "firefox": "60",
"chrome": "67", "chrome": "67",
"safari": "11.1" "safari": "11.1"
} }
} }
] ]
] ]
} }

53
biome.json
View File

@ -1,31 +1,26 @@
{ {
"$schema": "./node_modules/@biomejs/biome/configuration_schema.json", "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
"vcs": { "vcs": {
"enabled": true, "enabled": true,
"clientKind": "git", "clientKind": "git",
"useIgnoreFile": true "useIgnoreFile": true
}, },
"files": { "files": {
"ignoreUnknown": false, "ignoreUnknown": false,
"ignore": ["core/static/vendored", "*.min.js", "staticfiles/generated"] "ignore": ["core/static/vendored", "*.min.*", "staticfiles/generated"]
}, },
"formatter": { "formatter": {
"enabled": true, "enabled": true,
"indentStyle": "tab" "indentStyle": "space",
}, "lineWidth": 88
"organizeImports": { },
"enabled": true "organizeImports": {
}, "enabled": true
"linter": { },
"enabled": true, "linter": {
"ignore": ["core/static/vendored", "*.min.js", "staticfiles/generated"], "enabled": true,
"rules": { "rules": {
"recommended": true "recommended": true
} }
}, }
"javascript": {
"formatter": {
"quoteStyle": "double"
}
}
} }

36
com/static/com/js/poster_list.js
View File

@ -1,23 +1,23 @@
$(document).ready(() => { $(document).ready(() => {
$("#poster_list #view").click((e) => { $("#poster_list #view").click((e) => {
$("#view").removeClass("active"); $("#view").removeClass("active");
}); });
$("#poster_list .poster .image").click((e) => { $("#poster_list .poster .image").click((e) => {
let el = $(e.target); let el = $(e.target);
if (el.hasClass("image")) { if (el.hasClass("image")) {
el = el.find("img"); el = el.find("img");
} }
$("#poster_list #view #placeholder").html(el.clone()); $("#poster_list #view #placeholder").html(el.clone());
$("#view").addClass("active"); $("#view").addClass("active");
}); });
$(document).keyup((e) => { $(document).keyup((e) => {
if (e.keyCode === 27) { if (e.keyCode === 27) {
// escape key maps to keycode `27` // escape key maps to keycode `27`
e.preventDefault(); e.preventDefault();
$("#view").removeClass("active"); $("#view").removeClass("active");
} }
}); });
}); });

175
com/static/com/js/slideshow.js
View File

@ -1,106 +1,103 @@
$(document).ready(() => { $(document).ready(() => {
transition_time = 1000; transition_time = 1000;
i = 0; i = 0;
max = $("#slideshow .slide").length; max = $("#slideshow .slide").length;
next_trigger = 0; next_trigger = 0;
function enterFullscreen() { function enterFullscreen() {
element = document.getElementById("slideshow"); element = document.getElementById("slideshow");
$(element).addClass("fullscreen"); $(element).addClass("fullscreen");
if (element.requestFullscreen) { if (element.requestFullscreen) {
element.requestFullscreen(); element.requestFullscreen();
} else if (element.mozRequestFullScreen) { } else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen(); element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) { } else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen(); element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { } else if (element.msRequestFullscreen) {
element.msRequestFullscreen(); element.msRequestFullscreen();
} }
} }
function exitFullscreen() { function exitFullscreen() {
element = document.getElementById("slideshow"); element = document.getElementById("slideshow");
$(element).removeClass("fullscreen"); $(element).removeClass("fullscreen");
if (document.exitFullscreen) { if (document.exitFullscreen) {
document.exitFullscreen(); document.exitFullscreen();
} else if (document.webkitExitFullscreen) { } else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen(); document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) { } else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen(); document.mozCancelFullScreen();
} else if (document.msExitFullscreen) { } else if (document.msExitFullscreen) {
document.msExitFullscreen(); document.msExitFullscreen();
} }
} }
function init_progress_bar() { function init_progress_bar() {
$("#slideshow #progress_bar").css("transition", "none"); $("#slideshow #progress_bar").css("transition", "none");
$("#slideshow #progress_bar").removeClass("progress"); $("#slideshow #progress_bar").removeClass("progress");
$("#slideshow #progress_bar").addClass("init"); $("#slideshow #progress_bar").addClass("init");
} }
function start_progress_bar(display_time) { function start_progress_bar(display_time) {
$("#slideshow #progress_bar").removeClass("init"); $("#slideshow #progress_bar").removeClass("init");
$("#slideshow #progress_bar").addClass("progress"); $("#slideshow #progress_bar").addClass("progress");
$("#slideshow #progress_bar").css( $("#slideshow #progress_bar").css("transition", `width ${display_time}s linear`);
"transition", }
`width ${display_time}s linear`,
);
}
function next() { function next() {
init_progress_bar(); init_progress_bar();
slide = $($("#slideshow .slide").get(i % max)); slide = $($("#slideshow .slide").get(i % max));
slide.removeClass("center"); slide.removeClass("center");
slide.addClass("left"); slide.addClass("left");
next_slide = $($("#slideshow .slide").get((i + 1) % max)); next_slide = $($("#slideshow .slide").get((i + 1) % max));
next_slide.removeClass("right"); next_slide.removeClass("right");
next_slide.addClass("center"); next_slide.addClass("center");
display_time = next_slide.attr("display_time") || 2; display_time = next_slide.attr("display_time") || 2;
$("#slideshow .bullet").removeClass("active"); $("#slideshow .bullet").removeClass("active");
bullet = $("#slideshow .bullet")[(i + 1) % max]; bullet = $("#slideshow .bullet")[(i + 1) % max];
$(bullet).addClass("active"); $(bullet).addClass("active");
i = (i + 1) % max; i = (i + 1) % max;
setTimeout(() => { setTimeout(() => {
others_left = $("#slideshow .slide.left"); others_left = $("#slideshow .slide.left");
others_left.removeClass("left"); others_left.removeClass("left");
others_left.addClass("right"); others_left.addClass("right");
start_progress_bar(display_time); start_progress_bar(display_time);
next_trigger = setTimeout(next, display_time * 1000); next_trigger = setTimeout(next, display_time * 1000);
}, transition_time); }, transition_time);
} }
display_time = $("#slideshow .center").attr("display_time"); display_time = $("#slideshow .center").attr("display_time");
init_progress_bar(); init_progress_bar();
setTimeout(() => { setTimeout(() => {
if (max > 1) { if (max > 1) {
start_progress_bar(display_time); start_progress_bar(display_time);
setTimeout(next, display_time * 1000); setTimeout(next, display_time * 1000);
} }
}, 10); }, 10);
$("#slideshow").click((e) => { $("#slideshow").click((e) => {
if (!$("#slideshow").hasClass("fullscreen")) { if (!$("#slideshow").hasClass("fullscreen")) {
console.log("Entering fullscreen ..."); console.log("Entering fullscreen ...");
enterFullscreen(); enterFullscreen();
} else { } else {
console.log("Exiting fullscreen ..."); console.log("Exiting fullscreen ...");
exitFullscreen(); exitFullscreen();
} }
}); });
$(document).keyup((e) => { $(document).keyup((e) => {
if (e.keyCode === 27) { if (e.keyCode === 27) {
// escape key maps to keycode `27` // escape key maps to keycode `27`
e.preventDefault(); e.preventDefault();
console.log("Exiting fullscreen ..."); console.log("Exiting fullscreen ...");
exitFullscreen(); exitFullscreen();
} }
}); });
}); });

24
core/fixtures/groups.json
View File

@ -1,14 +1,14 @@
[ [
{ {
"pk": 1, "pk": 1,
"fields": { "fields": {
"permissions": [ "permissions": [
1, 2, 3, 7, 8, 9, 4, 5, 6, 10, 11, 12, 19, 20, 21, 22, 25, 23, 24, 16, 1, 2, 3, 7, 8, 9, 4, 5, 6, 10, 11, 12, 19, 20, 21, 22, 25, 23, 24, 16, 17, 18,
17, 18, 13, 14, 15 13, 14, 15
] ]
}, },
"model": "core.group" "model": "core.group"
}, },
{ "pk": 2, "fields": { "permissions": [25] }, "model": "core.group" }, { "pk": 2, "fields": { "permissions": [25] }, "model": "core.group" },
{ "pk": 3, "fields": { "permissions": [] }, "model": "core.group" } { "pk": 3, "fields": { "permissions": [] }, "model": "core.group" }
] ]

144
core/fixtures/pages.json
View File

@ -1,74 +1,74 @@
[ [
{ {
"pk": 1, "pk": 1,
"model": "core.page", "model": "core.page",
"fields": { "fields": {
"full_name": "guy2", "full_name": "guy2",
"owner_group": 1, "owner_group": 1,
"parent": null, "parent": null,
"edit_groups": [], "edit_groups": [],
"name": "guy2", "name": "guy2",
"view_groups": [] "view_groups": []
} }
}, },
{ {
"pk": 2, "pk": 2,
"model": "core.page", "model": "core.page",
"fields": { "fields": {
"full_name": "guy2/bibou", "full_name": "guy2/bibou",
"owner_group": 1, "owner_group": 1,
"parent": 1, "parent": 1,
"edit_group": [], "edit_group": [],
"name": "bibou", "name": "bibou",
"view_group": [] "view_group": []
} }
}, },
{ {
"pk": 3, "pk": 3,
"model": "core.page", "model": "core.page",
"fields": { "fields": {
"full_name": "guy2/bibou/troll", "full_name": "guy2/bibou/troll",
"owner_group": 1, "owner_group": 1,
"parent": 2, "parent": 2,
"edit_group": [], "edit_group": [],
"name": "troll", "name": "troll",
"view_group": [] "view_group": []
} }
}, },
{ {
"pk": 4, "pk": 4,
"model": "core.page", "model": "core.page",
"fields": { "fields": {
"full_name": "guy", "full_name": "guy",
"owner_group": 1, "owner_group": 1,
"parent": null, "parent": null,
"edit_group": [1], "edit_group": [1],
"name": "guy", "name": "guy",
"view_group": [1] "view_group": [1]
} }
}, },
{ {
"pk": 5, "pk": 5,
"model": "core.page", "model": "core.page",
"fields": { "fields": {
"full_name": "bibou", "full_name": "bibou",
"owner_group": 3, "owner_group": 3,
"parent": null, "parent": null,
"edit_group": [1], "edit_group": [1],
"name": "bibou", "name": "bibou",
"view_group": [] "view_group": []
} }
}, },
{ {
"pk": 6, "pk": 6,
"model": "core.page", "model": "core.page",
"fields": { "fields": {
"full_name": "guy2/guy", "full_name": "guy2/guy",
"owner_group": 1, "owner_group": 1,
"parent": 1, "parent": 1,
"edit_group": [], "edit_group": [],
"name": "guy", "name": "guy",
"view_group": [] "view_group": []
} }
} }
] ]

80
core/fixtures/users.json
View File

@ -1,42 +1,42 @@
[ [
{ {
"model": "core.user", "model": "core.user",
"pk": 1, "pk": 1,
"fields": { "fields": {
"first_name": "Ro", "first_name": "Ro",
"date_joined": "2015-11-19T16:05:51.764Z", "date_joined": "2015-11-19T16:05:51.764Z",
"groups": [], "groups": [],
"password": "pbkdf2_sha256$20000$MDukCN5X8Bof$rYdhppKiusj+W/1Rxpy0yuYsEyWocESEjtRsopkOc5c=", "password": "pbkdf2_sha256$20000$MDukCN5X8Bof$rYdhppKiusj+W/1Rxpy0yuYsEyWocESEjtRsopkOc5c=",
"last_name": "Ot", "last_name": "Ot",
"nick_name": "", "nick_name": "",
"username": "root", "username": "root",
"user_permissions": [], "user_permissions": [],
"email": "bibou@git.an", "email": "bibou@git.an",
"last_login": "2015-11-26T16:28:36.464Z", "last_login": "2015-11-26T16:28:36.464Z",
"date_of_birth": "1969-12-31T23:00:00Z", "date_of_birth": "1969-12-31T23:00:00Z",
"is_superuser": true, "is_superuser": true,
"is_active": true, "is_active": true,
"is_staff": true "is_staff": true
} }
}, },
{ {
"model": "core.user", "model": "core.user",
"pk": 2, "pk": 2,
"fields": { "fields": {
"first_name": "Skia", "first_name": "Skia",
"date_joined": "2015-11-19T16:06:29.556Z", "date_joined": "2015-11-19T16:06:29.556Z",
"groups": [3], "groups": [3],
"password": "pbkdf2_sha256$20000$UK9a29p5bBEh$Jzv7xs0W9njJZiXfIdYXDydim/3YHs6awKwDmN7gSAc=", "password": "pbkdf2_sha256$20000$UK9a29p5bBEh$Jzv7xs0W9njJZiXfIdYXDydim/3YHs6awKwDmN7gSAc=",
"last_name": "Kia", "last_name": "Kia",
"nick_name": "", "nick_name": "",
"username": "skia", "username": "skia",
"user_permissions": [], "user_permissions": [],
"email": "plop@libskia.so", "email": "plop@libskia.so",
"last_login": "2015-11-26T16:37:01.671Z", "last_login": "2015-11-26T16:37:01.671Z",
"date_of_birth": "1969-12-31T23:00:00Z", "date_of_birth": "1969-12-31T23:00:00Z",
"is_superuser": false, "is_superuser": false,
"is_active": true, "is_active": true,
"is_staff": false "is_staff": false
} }
} }
] ]

26
core/static/core/base.css
View File

@ -80,11 +80,11 @@ time,
mark, mark,
audio, audio,
video { video {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
font-size: 100%; font-size: 100%;
vertical-align: baseline; vertical-align: baseline;
} }
/* HTML5 display-role reset for older browsers */ /* HTML5 display-role reset for older browsers */
article, article,
@ -98,27 +98,27 @@ hgroup,
menu, menu,
nav, nav,
section { section {
display: block; display: block;
} }
body { body {
line-height: 1; line-height: 1;
} }
ol, ol,
ul { ul {
/* list-style: none;*/ /* list-style: none;*/
} }
blockquote, blockquote,
q { q {
quotes: none; quotes: none;
} }
blockquote:before, blockquote:before,
blockquote:after, blockquote:after,
q:before, q:before,
q:after { q:after {
content: ""; content: "";
content: none; content: none;
} }
table { table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
} }

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

@ -1,66 +1,66 @@
$(() => { $(() => {
// const buttons = $('.choose_file_button') // const buttons = $('.choose_file_button')
const popups = $(".choose_file_widget"); const popups = $(".choose_file_widget");
popups.dialog({ popups.dialog({
autoOpen: false, autoOpen: false,
modal: true, modal: true,
width: "90%", width: "90%",
create: (event) => { create: (event) => {
const target = $(event.target); const target = $(event.target);
target.parent().css({ target.parent().css({
position: "fixed", position: "fixed",
top: "5%", top: "5%",
bottom: "5%", bottom: "5%",
}); });
target.css("height", "300px"); target.css("height", "300px");
console.log(target); console.log(target);
}, },
buttons: [ buttons: [
{ {
text: "Choose", text: "Choose",
click: function () { click: function () {
console.log($("#file_id")); console.log($("#file_id"));
$(`input[name=${$(this).attr("name")}]`).attr( $(`input[name=${$(this).attr("name")}]`).attr(
"value", "value",
$("#file_id").attr("value"), $("#file_id").attr("value"),
); );
$(this).dialog("close"); $(this).dialog("close");
}, },
disabled: true, disabled: true,
}, },
], ],
}); });
$(".choose_file_button") $(".choose_file_button")
.button() .button()
.on("click", function () { .on("click", function () {
const popup = popups.filter(`[name=${$(this).attr("name")}]`); const popup = popups.filter(`[name=${$(this).attr("name")}]`);
console.log(popup); console.log(popup);
popup.html( popup.html(
'<iframe src="/file/popup" width="100%" height="95%"></iframe><div id="file_id" value="null" />', '<iframe src="/file/popup" width="100%" height="95%"></iframe><div id="file_id" value="null" />',
); );
popup.dialog({ title: $(this).text() }).dialog("open"); popup.dialog({ title: $(this).text() }).dialog("open");
}); });
$("#quick_notif li").click(function () { $("#quick_notif li").click(function () {
$(this).hide(); $(this).hide();
}); });
}); });
function createQuickNotif(msg) { function createQuickNotif(msg) {
const el = document.createElement("li"); const el = document.createElement("li");
el.textContent = msg; el.textContent = msg;
el.addEventListener("click", () => el.parentNode.removeChild(el)); el.addEventListener("click", () => el.parentNode.removeChild(el));
document.getElementById("quick_notif").appendChild(el); document.getElementById("quick_notif").appendChild(el);
} }
function deleteQuickNotifs() { function deleteQuickNotifs() {
const el = document.getElementById("quick_notif"); const el = document.getElementById("quick_notif");
while (el.firstChild) { while (el.firstChild) {
el.removeChild(el.firstChild); el.removeChild(el.firstChild);
} }
} }
function display_notif() { function display_notif() {
$("#header_notif").toggle().parent().toggleClass("white"); $("#header_notif").toggle().parent().toggleClass("white");
} }
// You can't get the csrf token from the template in a widget // You can't get the csrf token from the template in a widget
@ -70,7 +70,7 @@ function display_notif() {
// So, the true workaround is to get the token from the dom // 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 // https://docs.djangoproject.com/en/2.0/ref/csrf/#acquiring-the-token-if-csrf-use-sessions-is-true
function getCSRFToken() { function getCSRFToken() {
return $("[name=csrfmiddlewaretoken]").val(); return $("[name=csrfmiddlewaretoken]").val();
} }
const initialUrlParams = new URLSearchParams(window.location.search); const initialUrlParams = new URLSearchParams(window.location.search);
@ -80,9 +80,9 @@ const initialUrlParams = new URLSearchParams(window.location.search);
* @enum {number} * @enum {number}
*/ */
const History = { const History = {
NONE: 0, NONE: 0,
PUSH: 1, PUSH: 1,
REPLACE: 2, REPLACE: 2,
}; };
/** /**
@ -92,29 +92,29 @@ const History = {
* @param {URL | null} url * @param {URL | null} url
*/ */
function update_query_string(key, value, action = History.REPLACE, url = null) { function update_query_string(key, value, action = History.REPLACE, url = null) {
let ret = url; let ret = url;
if (!ret) { if (!ret) {
ret = new URL(window.location.href); ret = new URL(window.location.href);
} }
if (value === undefined || value === null || value === "") { if (value === undefined || value === null || value === "") {
// If the value is null, undefined or empty => delete it // If the value is null, undefined or empty => delete it
ret.searchParams.delete(key); ret.searchParams.delete(key);
} else if (Array.isArray(value)) { } else if (Array.isArray(value)) {
ret.searchParams.delete(key); ret.searchParams.delete(key);
for (const v of value) { for (const v of value) {
ret.searchParams.append(key, v); ret.searchParams.append(key, v);
} }
} else { } else {
ret.searchParams.set(key, value); ret.searchParams.set(key, value);
} }
if (action === History.PUSH) { if (action === History.PUSH) {
window.history.pushState(null, "", ret.toString()); window.history.pushState(null, "", ret.toString());
} else if (action === History.REPLACE) { } else if (action === History.REPLACE) {
window.history.replaceState(null, "", ret.toString()); window.history.replaceState(null, "", ret.toString());
} }
return ret; return ret;
} }
// TODO : If one day a test workflow is made for JS in this project // TODO : If one day a test workflow is made for JS in this project
@ -126,28 +126,26 @@ function update_query_string(key, value, action = History.REPLACE, url = null) {
* @return {Promise<Object[]>} * @return {Promise<Object[]>}
*/ */
async function fetch_paginated(url) { async function fetch_paginated(url) {
const max_per_page = 199; const max_per_page = 199;
const paginated_url = new URL(url, document.location.origin); const paginated_url = new URL(url, document.location.origin);
paginated_url.searchParams.set("page_size", max_per_page.toString()); paginated_url.searchParams.set("page_size", max_per_page.toString());
paginated_url.searchParams.set("page", "1"); paginated_url.searchParams.set("page", "1");
const first_page = await (await fetch(paginated_url)).json(); const first_page = await (await fetch(paginated_url)).json();
const results = first_page.results; const results = first_page.results;
const nb_pictures = first_page.count; const nb_pictures = first_page.count;
const nb_pages = Math.ceil(nb_pictures / max_per_page); const nb_pages = Math.ceil(nb_pictures / max_per_page);
if (nb_pages > 1) { if (nb_pages > 1) {
const promises = []; const promises = [];
for (let i = 2; i <= nb_pages; i++) { for (let i = 2; i <= nb_pages; i++) {
paginated_url.searchParams.set("page", i.toString()); paginated_url.searchParams.set("page", i.toString());
promises.push( promises.push(
fetch(paginated_url).then((res) => fetch(paginated_url).then((res) => res.json().then((json) => json.results)),
res.json().then((json) => json.results), );
), }
); results.push(...(await Promise.all(promises)).flat());
} }
results.push(...(await Promise.all(promises)).flat()); return results;
}
return results;
} }

97
core/static/core/js/sith-select2.js
View File

@ -158,14 +158,14 @@
* @param {Select2Options} options * @param {Select2Options} options
*/ */
function sithSelect2(options) { function sithSelect2(options) {
const elem = $(options.element); const elem = $(options.element);
return elem.select2({ return elem.select2({
theme: elem[0].multiple ? "classic" : "default", theme: elem[0].multiple ? "classic" : "default",
minimumInputLength: 2, minimumInputLength: 2,
templateResult: select_item_builder(options.picture_getter), templateResult: select_item_builder(options.picture_getter),
...options.data_source, ...options.data_source,
...(options.overrides || {}), ...(options.overrides || {}),
}); });
} }
/** /**
@ -180,11 +180,11 @@ function sithSelect2(options) {
* @param {RemoteSourceOptions} options * @param {RemoteSourceOptions} options
*/ */
function local_data_source(source, options) { function local_data_source(source, options) {
if (options.excluded) { if (options.excluded) {
const ids = options.excluded(); const ids = options.excluded();
return { data: source.filter((i) => !ids.includes(i.id)) }; return { data: source.filter((i) => !ids.includes(i.id)) };
} }
return { data: source }; return { data: source };
} }
/** /**
@ -203,37 +203,37 @@ function local_data_source(source, options) {
* @param {RemoteSourceOptions} options * @param {RemoteSourceOptions} options
*/ */
function remote_data_source(source, options) { function remote_data_source(source, options) {
jQuery.ajaxSettings.traditional = true; jQuery.ajaxSettings.traditional = true;
const params = { const params = {
url: source, url: source,
dataType: "json", dataType: "json",
cache: true, cache: true,
delay: 250, delay: 250,
data: function (params) { data: function (params) {
return { return {
search: params.term, search: params.term,
exclude: [ exclude: [
...(this.val() || []).map((i) => Number.parseInt(i)), ...(this.val() || []).map((i) => Number.parseInt(i)),
...(options.excluded ? options.excluded() : []), ...(options.excluded ? options.excluded() : []),
], ],
}; };
}, },
}; };
if (options.result_converter) { if (options.result_converter) {
params.processResults = (data) => ({ params.processResults = (data) => ({
results: data.results.map(options.result_converter), results: data.results.map(options.result_converter),
}); });
} }
if (options.overrides) { if (options.overrides) {
Object.assign(params, options.overrides); Object.assign(params, options.overrides);
} }
return { ajax: params }; return { ajax: params };
} }
function item_formatter(user) { function item_formatter(user) {
if (user.loading) { if (user.loading) {
return user.text; return user.text;
} }
} }
/** /**
@ -242,20 +242,19 @@ function item_formatter(user) {
* @return {function(string): jQuery|HTMLElement} * @return {function(string): jQuery|HTMLElement}
*/ */
function select_item_builder(picture_getter) { function select_item_builder(picture_getter) {
return (item) => { return (item) => {
const picture = const picture = typeof picture_getter === "function" ? picture_getter(item) : null;
typeof picture_getter === "function" ? picture_getter(item) : null; const img_html = picture
const img_html = picture ? `<img
? `<img
src="${picture_getter(item)}" src="${picture_getter(item)}"
alt="${item.text}" alt="${item.text}"
onerror="this.src = '/static/core/img/unknown.jpg'" onerror="this.src = '/static/core/img/unknown.jpg'"
/>` />`
: ""; : "";
return $(`<div class="select-item"> return $(`<div class="select-item">
${img_html} ${img_html}
<span class="select-item-text">${item.text}</span> <span class="select-item-text">${item.text}</span>
</div>`); </div>`);
}; };
} }

460
core/static/user/js/family_graph.js
View File

@ -1,167 +1,163 @@
async function get_graph_data(url, godfathers_depth, godchildren_depth) { async function get_graph_data(url, godfathers_depth, godchildren_depth) {
const data = await ( const data = await (
await fetch( await fetch(
`${url}?godfathers_depth=${godfathers_depth}&godchildren_depth=${godchildren_depth}`, `${url}?godfathers_depth=${godfathers_depth}&godchildren_depth=${godchildren_depth}`,
) )
).json(); ).json();
return [ return [
...data.users.map((user) => { ...data.users.map((user) => {
return { data: user }; return { data: user };
}), }),
...data.relationships.map((rel) => { ...data.relationships.map((rel) => {
return { return {
data: { source: rel.godfather, target: rel.godchild }, data: { source: rel.godfather, target: rel.godchild },
}; };
}), }),
]; ];
} }
function create_graph(container, data, active_user_id) { function create_graph(container, data, active_user_id) {
const cy = cytoscape({ const cy = cytoscape({
boxSelectionEnabled: false, boxSelectionEnabled: false,
autounselectify: true, autounselectify: true,
container, container,
elements: data, elements: data,
minZoom: 0.5, minZoom: 0.5,
style: [ style: [
// the stylesheet for the graph // the stylesheet for the graph
{ {
selector: "node", selector: "node",
style: { style: {
label: "data(display_name)", label: "data(display_name)",
"background-image": "data(profile_pict)", "background-image": "data(profile_pict)",
width: "100%", width: "100%",
height: "100%", height: "100%",
"background-fit": "cover", "background-fit": "cover",
"background-repeat": "no-repeat", "background-repeat": "no-repeat",
shape: "ellipse", shape: "ellipse",
}, },
}, },
{ {
selector: "edge", selector: "edge",
style: { style: {
width: 5, width: 5,
"line-color": "#ccc", "line-color": "#ccc",
"target-arrow-color": "#ccc", "target-arrow-color": "#ccc",
"target-arrow-shape": "triangle", "target-arrow-shape": "triangle",
"curve-style": "bezier", "curve-style": "bezier",
}, },
}, },
{ {
selector: ".traversed", selector: ".traversed",
style: { style: {
"border-width": "5px", "border-width": "5px",
"border-style": "solid", "border-style": "solid",
"border-color": "red", "border-color": "red",
"target-arrow-color": "red", "target-arrow-color": "red",
"line-color": "red", "line-color": "red",
}, },
}, },
{ {
selector: ".not-traversed", selector: ".not-traversed",
style: { style: {
"line-opacity": "0.5", "line-opacity": "0.5",
"background-opacity": "0.5", "background-opacity": "0.5",
"background-image-opacity": "0.5", "background-image-opacity": "0.5",
}, },
}, },
], ],
layout: { layout: {
name: "klay", name: "klay",
nodeDimensionsIncludeLabels: true, nodeDimensionsIncludeLabels: true,
fit: true, fit: true,
klay: { klay: {
addUnnecessaryBendpoints: true, addUnnecessaryBendpoints: true,
direction: "DOWN", direction: "DOWN",
nodePlacement: "INTERACTIVE", nodePlacement: "INTERACTIVE",
layoutHierarchy: true, layoutHierarchy: true,
}, },
}, },
}); });
const active_user = cy const active_user = cy.getElementById(active_user_id).style("shape", "rectangle");
.getElementById(active_user_id) /* Reset graph */
.style("shape", "rectangle"); const reset_graph = () => {
/* Reset graph */ cy.elements((element) => {
const reset_graph = () => { if (element.hasClass("traversed")) {
cy.elements((element) => { element.removeClass("traversed");
if (element.hasClass("traversed")) { }
element.removeClass("traversed"); if (element.hasClass("not-traversed")) {
} element.removeClass("not-traversed");
if (element.hasClass("not-traversed")) { }
element.removeClass("not-traversed"); });
} };
});
};
const on_node_tap = (el) => { const on_node_tap = (el) => {
reset_graph(); reset_graph();
/* Create path on graph if selected isn't the targeted user */ /* Create path on graph if selected isn't the targeted user */
if (el === active_user) { if (el === active_user) {
return; return;
} }
cy.elements((element) => { cy.elements((element) => {
element.addClass("not-traversed"); element.addClass("not-traversed");
}); });
for (const traversed of cy.elements().aStar({ for (const traversed of cy.elements().aStar({
root: el, root: el,
goal: active_user, goal: active_user,
}).path) { }).path) {
traversed.removeClass("not-traversed"); traversed.removeClass("not-traversed");
traversed.addClass("traversed"); traversed.addClass("traversed");
} }
}; };
cy.on("tap", "node", (tapped) => { cy.on("tap", "node", (tapped) => {
on_node_tap(tapped.target); on_node_tap(tapped.target);
}); });
cy.zoomingEnabled(false); cy.zoomingEnabled(false);
/* Add context menu */ /* Add context menu */
if (cy.cxtmenu === undefined) { if (cy.cxtmenu === undefined) {
console.error( console.error("ctxmenu isn't loaded, context menu won't be available on graphs");
"ctxmenu isn't loaded, context menu won't be available on graphs", return cy;
); }
return cy; cy.cxtmenu({
} selector: "node",
cy.cxtmenu({
selector: "node",
commands: [ commands: [
{ {
content: '<i class="fa fa-external-link fa-2x"></i>', content: '<i class="fa fa-external-link fa-2x"></i>',
select: (el) => { select: (el) => {
window.open(el.data().profile_url, "_blank").focus(); window.open(el.data().profile_url, "_blank").focus();
}, },
}, },
{ {
content: '<span class="fa fa-mouse-pointer fa-2x"></span>', content: '<span class="fa fa-mouse-pointer fa-2x"></span>',
select: (el) => { select: (el) => {
on_node_tap(el); on_node_tap(el);
}, },
}, },
{ {
content: '<i class="fa fa-eraser fa-2x"></i>', content: '<i class="fa fa-eraser fa-2x"></i>',
select: (el) => { select: (el) => {
reset_graph(); reset_graph();
}, },
}, },
], ],
}); });
return cy; return cy;
} }
/* global api_url, active_user, depth_min, depth_max */ /* global api_url, active_user, depth_min, depth_max */
document.addEventListener("alpine:init", () => { document.addEventListener("alpine:init", () => {
/* /*
This needs some constants to be set before the document has been loaded This needs some constants to be set before the document has been loaded
api_url: base url for fetching the tree as a string api_url: base url for fetching the tree as a string
@ -169,104 +165,100 @@ document.addEventListener("alpine:init", () => {
depth_min: minimum tree depth for godfathers and godchildren as an int depth_min: minimum tree depth for godfathers and godchildren as an int
depth_max: maximum tree depth for godfathers and godchildren as an int depth_max: maximum tree depth for godfathers and godchildren as an int
*/ */
const default_depth = 2; const default_depth = 2;
if ( if (
typeof api_url === "undefined" || typeof api_url === "undefined" ||
typeof active_user === "undefined" || typeof active_user === "undefined" ||
typeof depth_min === "undefined" || typeof depth_min === "undefined" ||
typeof depth_max === "undefined" typeof depth_max === "undefined"
) { ) {
console.error( console.error(
"Some constants are not set before using the family_graph script, please look at the documentation", "Some constants are not set before using the family_graph script, please look at the documentation",
); );
return; return;
} }
function get_initial_depth(prop) { function get_initial_depth(prop) {
const value = Number.parseInt(initialUrlParams.get(prop)); const value = Number.parseInt(initialUrlParams.get(prop));
if (Number.isNaN(value) || value < depth_min || value > depth_max) { if (Number.isNaN(value) || value < depth_min || value > depth_max) {
return default_depth; return default_depth;
} }
return value; return value;
} }
Alpine.data("graph", () => ({ Alpine.data("graph", () => ({
loading: false, loading: false,
godfathers_depth: get_initial_depth("godfathers_depth"), godfathers_depth: get_initial_depth("godfathers_depth"),
godchildren_depth: get_initial_depth("godchildren_depth"), godchildren_depth: get_initial_depth("godchildren_depth"),
reverse: initialUrlParams.get("reverse")?.toLowerCase?.() === "true", reverse: initialUrlParams.get("reverse")?.toLowerCase?.() === "true",
graph: undefined, graph: undefined,
graph_data: {}, graph_data: {},
async init() { async init() {
const delayed_fetch = Alpine.debounce(async () => { const delayed_fetch = Alpine.debounce(async () => {
this.fetch_graph_data(); this.fetch_graph_data();
}, 100); }, 100);
for (const param of ["godfathers_depth", "godchildren_depth"]) { for (const param of ["godfathers_depth", "godchildren_depth"]) {
this.$watch(param, async (value) => { this.$watch(param, async (value) => {
if (value < depth_min || value > depth_max) { if (value < depth_min || value > depth_max) {
return; return;
} }
update_query_string(param, value, History.REPLACE); update_query_string(param, value, History.REPLACE);
delayed_fetch(); delayed_fetch();
}); });
} }
this.$watch("reverse", async (value) => { this.$watch("reverse", async (value) => {
update_query_string("reverse", value, History.REPLACE); update_query_string("reverse", value, History.REPLACE);
this.reverse_graph(); this.reverse_graph();
}); });
this.$watch("graph_data", async () => { this.$watch("graph_data", async () => {
await this.generate_graph(); await this.generate_graph();
if (this.reverse) { if (this.reverse) {
await this.reverse_graph(); await this.reverse_graph();
} }
}); });
this.fetch_graph_data(); this.fetch_graph_data();
}, },
async screenshot() { async screenshot() {
const link = document.createElement("a"); const link = document.createElement("a");
link.href = this.graph.jpg(); link.href = this.graph.jpg();
link.download = interpolate( link.download = interpolate(
gettext("family_tree.%(extension)s"), gettext("family_tree.%(extension)s"),
{ extension: "jpg" }, { extension: "jpg" },
true, true,
); );
document.body.appendChild(link); document.body.appendChild(link);
link.click(); link.click();
document.body.removeChild(link); document.body.removeChild(link);
}, },
async reset() { async reset() {
this.reverse = false; this.reverse = false;
this.godfathers_depth = default_depth; this.godfathers_depth = default_depth;
this.godchildren_depth = default_depth; this.godchildren_depth = default_depth;
}, },
async reverse_graph() { async reverse_graph() {
this.graph.elements((el) => { this.graph.elements((el) => {
el.position({ x: -el.position().x, y: -el.position().y }); el.position({ x: -el.position().x, y: -el.position().y });
}); });
this.graph.center(this.graph.elements()); this.graph.center(this.graph.elements());
}, },
async fetch_graph_data() { async fetch_graph_data() {
this.graph_data = await get_graph_data( this.graph_data = await get_graph_data(
api_url, api_url,
this.godfathers_depth, this.godfathers_depth,
this.godchildren_depth, this.godchildren_depth,
); );
}, },
async generate_graph() { async generate_graph() {
this.loading = true; this.loading = true;
this.graph = create_graph( this.graph = create_graph($(this.$refs.graph), this.graph_data, active_user);
$(this.$refs.graph), this.loading = false;
this.graph_data, },
active_user, }));
);
this.loading = false;
},
}));
}); });

190
core/static/user/js/user_edit.js
View File

@ -1,111 +1,107 @@
function alpine_webcam_builder( function alpine_webcam_builder(default_picture, delete_url, can_delete_picture) {
default_picture, return () => ({
delete_url, can_edit_picture: false,
can_delete_picture,
) {
return () => ({
can_edit_picture: false,
loading: false, loading: false,
is_camera_enabled: false, is_camera_enabled: false,
is_camera_error: false, is_camera_error: false,
picture: null, picture: null,
video: null, video: null,
picture_form: null, picture_form: null,
init() { init() {
this.video = this.$refs.video; this.video = this.$refs.video;
this.picture_form = this.$refs.form.getElementsByTagName("input"); this.picture_form = this.$refs.form.getElementsByTagName("input");
if (this.picture_form.length > 0) { if (this.picture_form.length > 0) {
this.picture_form = this.picture_form[0]; this.picture_form = this.picture_form[0];
this.can_edit_picture = true; this.can_edit_picture = true;
// Link the displayed element to the form input // Link the displayed element to the form input
this.picture_form.onchange = (event) => { this.picture_form.onchange = (event) => {
const files = event.srcElement.files; const files = event.srcElement.files;
if (files.length > 0) { if (files.length > 0) {
this.picture = (window.URL || window.webkitURL).createObjectURL( this.picture = (window.URL || window.webkitURL).createObjectURL(
event.srcElement.files[0], event.srcElement.files[0],
); );
} else { } else {
this.picture = null; this.picture = null;
} }
}; };
} }
}, },
get_picture() { get_picture() {
return this.picture || default_picture; return this.picture || default_picture;
}, },
delete_picture() { delete_picture() {
// Only remove currently displayed picture // Only remove currently displayed picture
if (this.picture) { if (this.picture) {
const list = new DataTransfer(); const list = new DataTransfer();
this.picture_form.files = list.files; this.picture_form.files = list.files;
this.picture_form.dispatchEvent(new Event("change")); this.picture_form.dispatchEvent(new Event("change"));
return; return;
} }
if (!can_delete_picture) { if (!can_delete_picture) {
return; return;
} }
// Remove user picture if correct rights are available // Remove user picture if correct rights are available
window.open(delete_url, "_self"); window.open(delete_url, "_self");
}, },
enable_camera() { enable_camera() {
this.picture = null; this.picture = null;
this.loading = true; this.loading = true;
this.is_camera_error = false; this.is_camera_error = false;
navigator.mediaDevices navigator.mediaDevices
.getUserMedia({ video: true, audio: false }) .getUserMedia({ video: true, audio: false })
.then((stream) => { .then((stream) => {
this.loading = false; this.loading = false;
this.is_camera_enabled = true; this.is_camera_enabled = true;
this.video.srcObject = stream; this.video.srcObject = stream;
this.video.play(); this.video.play();
}) })
.catch((err) => { .catch((err) => {
this.is_camera_error = true; this.is_camera_error = true;
this.loading = false; this.loading = false;
throw err; throw err;
}); });
}, },
take_picture() { take_picture() {
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
const context = canvas.getContext("2d"); const context = canvas.getContext("2d");
/* Create the image */ /* Create the image */
const settings = this.video.srcObject.getTracks()[0].getSettings(); const settings = this.video.srcObject.getTracks()[0].getSettings();
canvas.width = settings.width; canvas.width = settings.width;
canvas.height = settings.height; canvas.height = settings.height;
context.drawImage(this.video, 0, 0, canvas.width, canvas.height); context.drawImage(this.video, 0, 0, canvas.width, canvas.height);
/* Stop camera */ /* Stop camera */
this.video.pause(); this.video.pause();
for (const track of this.video.srcObject.getTracks()) { for (const track of this.video.srcObject.getTracks()) {
if (track.readyState === "live") { if (track.readyState === "live") {
track.stop(); track.stop();
} }
} }
canvas.toBlob((blob) => { canvas.toBlob((blob) => {
const filename = interpolate(gettext("captured.%s"), ["webp"]); const filename = interpolate(gettext("captured.%s"), ["webp"]);
const file = new File([blob], filename, { const file = new File([blob], filename, {
type: "image/webp", type: "image/webp",
}); });
const list = new DataTransfer(); const list = new DataTransfer();
list.items.add(file); list.items.add(file);
this.picture_form.files = list.files; this.picture_form.files = list.files;
// No change event is triggered, we trigger it manually #} // No change event is triggered, we trigger it manually #}
this.picture_form.dispatchEvent(new Event("change")); this.picture_form.dispatchEvent(new Event("change"));
}, "image/webp"); }, "image/webp");
canvas.remove(); canvas.remove();
this.is_camera_enabled = false; this.is_camera_enabled = false;
}, },
}); });
} }

2
core/static/webpack/alpine-index.js
View File

@ -3,5 +3,5 @@ import Alpine from "alpinejs";
window.Alpine = Alpine; window.Alpine = Alpine;
window.addEventListener("DOMContentLoaded", (event) => { window.addEventListener("DOMContentLoaded", (event) => {
Alpine.start(); Alpine.start();
}); });

336
core/static/webpack/easymde-index.js
View File

@ -10,180 +10,178 @@ import EasyMDE from "easymde";
* @param {string} link to the markdown api * @param {string} link to the markdown api
**/ **/
function easymdeFactory(textarea, markdownApiURL) { function easymdeFactory(textarea, markdownApiURL) {
const easymde = new EasyMDE({ const easymde = new EasyMDE({
element: textarea, element: textarea,
spellChecker: false, spellChecker: false,
autoDownloadFontAwesome: false, autoDownloadFontAwesome: false,
previewRender: Alpine.debounce(async (plainText, preview) => { previewRender: Alpine.debounce(async (plainText, preview) => {
const res = await fetch(markdownApiURL, { const res = await fetch(markdownApiURL, {
method: "POST", method: "POST",
body: JSON.stringify({ text: plainText }), body: JSON.stringify({ text: plainText }),
}); });
preview.innerHTML = await res.text(); preview.innerHTML = await res.text();
return null; return null;
}, 300), }, 300),
forceSync: true, // Avoid validation error on generic create view forceSync: true, // Avoid validation error on generic create view
toolbar: [ toolbar: [
{ {
name: "heading-smaller", name: "heading-smaller",
action: EasyMDE.toggleHeadingSmaller, action: EasyMDE.toggleHeadingSmaller,
className: "fa fa-header", className: "fa fa-header",
title: gettext("Heading"), title: gettext("Heading"),
}, },
{ {
name: "italic", name: "italic",
action: EasyMDE.toggleItalic, action: EasyMDE.toggleItalic,
className: "fa fa-italic", className: "fa fa-italic",
title: gettext("Italic"), title: gettext("Italic"),
}, },
{ {
name: "bold", name: "bold",
action: EasyMDE.toggleBold, action: EasyMDE.toggleBold,
className: "fa fa-bold", className: "fa fa-bold",
title: gettext("Bold"), title: gettext("Bold"),
}, },
{ {
name: "strikethrough", name: "strikethrough",
action: EasyMDE.toggleStrikethrough, action: EasyMDE.toggleStrikethrough,
className: "fa fa-strikethrough", className: "fa fa-strikethrough",
title: gettext("Strikethrough"), title: gettext("Strikethrough"),
}, },
{ {
name: "underline", name: "underline",
action: function customFunction(editor) { action: function customFunction(editor) {
const cm = editor.codemirror; const cm = editor.codemirror;
cm.replaceSelection(`__${cm.getSelection()}__`); cm.replaceSelection(`__${cm.getSelection()}__`);
}, },
className: "fa fa-underline", className: "fa fa-underline",
title: gettext("Underline"), title: gettext("Underline"),
}, },
{ {
name: "superscript", name: "superscript",
action: function customFunction(editor) { action: function customFunction(editor) {
const cm = editor.codemirror; const cm = editor.codemirror;
cm.replaceSelection(`^${cm.getSelection()}^`); cm.replaceSelection(`^${cm.getSelection()}^`);
}, },
className: "fa fa-superscript", className: "fa fa-superscript",
title: gettext("Superscript"), title: gettext("Superscript"),
}, },
{ {
name: "subscript", name: "subscript",
action: function customFunction(editor) { action: function customFunction(editor) {
const cm = editor.codemirror; const cm = editor.codemirror;
cm.replaceSelection(`~${cm.getSelection()}~`); cm.replaceSelection(`~${cm.getSelection()}~`);
}, },
className: "fa fa-subscript", className: "fa fa-subscript",
title: gettext("Subscript"), title: gettext("Subscript"),
}, },
{ {
name: "code", name: "code",
action: EasyMDE.toggleCodeBlock, action: EasyMDE.toggleCodeBlock,
className: "fa fa-code", className: "fa fa-code",
title: gettext("Code"), title: gettext("Code"),
}, },
"|", "|",
{ {
name: "quote", name: "quote",
action: EasyMDE.toggleBlockquote, action: EasyMDE.toggleBlockquote,
className: "fa fa-quote-left", className: "fa fa-quote-left",
title: gettext("Quote"), title: gettext("Quote"),
}, },
{ {
name: "unordered-list", name: "unordered-list",
action: EasyMDE.toggleUnorderedList, action: EasyMDE.toggleUnorderedList,
className: "fa fa-list-ul", className: "fa fa-list-ul",
title: gettext("Unordered list"), title: gettext("Unordered list"),
}, },
{ {
name: "ordered-list", name: "ordered-list",
action: EasyMDE.toggleOrderedList, action: EasyMDE.toggleOrderedList,
className: "fa fa-list-ol", className: "fa fa-list-ol",
title: gettext("Ordered list"), title: gettext("Ordered list"),
}, },
"|", "|",
{ {
name: "link", name: "link",
action: EasyMDE.drawLink, action: EasyMDE.drawLink,
className: "fa fa-link", className: "fa fa-link",
title: gettext("Insert link"), title: gettext("Insert link"),
}, },
{ {
name: "image", name: "image",
action: EasyMDE.drawImage, action: EasyMDE.drawImage,
className: "fa-regular fa-image", className: "fa-regular fa-image",
title: gettext("Insert image"), title: gettext("Insert image"),
}, },
{ {
name: "table", name: "table",
action: EasyMDE.drawTable, action: EasyMDE.drawTable,
className: "fa fa-table", className: "fa fa-table",
title: gettext("Insert table"), title: gettext("Insert table"),
}, },
"|", "|",
{ {
name: "clean-block", name: "clean-block",
action: EasyMDE.cleanBlock, action: EasyMDE.cleanBlock,
className: "fa fa-eraser fa-clean-block", className: "fa fa-eraser fa-clean-block",
title: gettext("Clean block"), title: gettext("Clean block"),
}, },
"|", "|",
{ {
name: "preview", name: "preview",
action: EasyMDE.togglePreview, action: EasyMDE.togglePreview,
className: "fa fa-eye no-disable", className: "fa fa-eye no-disable",
title: gettext("Toggle preview"), title: gettext("Toggle preview"),
}, },
{ {
name: "side-by-side", name: "side-by-side",
action: EasyMDE.toggleSideBySide, action: EasyMDE.toggleSideBySide,
className: "fa fa-columns no-disable no-mobile", className: "fa fa-columns no-disable no-mobile",
title: gettext("Toggle side by side"), title: gettext("Toggle side by side"),
}, },
{ {
name: "fullscreen", name: "fullscreen",
action: EasyMDE.toggleFullScreen, action: EasyMDE.toggleFullScreen,
className: "fa fa-expand no-mobile", className: "fa fa-expand no-mobile",
title: gettext("Toggle fullscreen"), title: gettext("Toggle fullscreen"),
}, },
"|", "|",
{ {
name: "guide", name: "guide",
action: "/page/Aide_sur_la_syntaxe", action: "/page/Aide_sur_la_syntaxe",
className: "fa fa-question-circle", className: "fa fa-question-circle",
title: gettext("Markdown guide"), title: gettext("Markdown guide"),
}, },
], ],
}); });
const submits = textarea const submits = textarea.closest("form").querySelectorAll('input[type="submit"]');
.closest("form") const parentDiv = textarea.parentElement;
.querySelectorAll('input[type="submit"]'); let submitPressed = false;
const parentDiv = textarea.parentElement;
let submitPressed = false;
function checkMarkdownInput(e) { function checkMarkdownInput(e) {
// an attribute is null if it does not exist, else a string // an attribute is null if it does not exist, else a string
const required = textarea.getAttribute("required") != null; const required = textarea.getAttribute("required") != null;
const length = textarea.value.trim().length; const length = textarea.value.trim().length;
if (required && length === 0) { if (required && length === 0) {
parentDiv.style.boxShadow = "red 0px 0px 1.5px 1px"; parentDiv.style.boxShadow = "red 0px 0px 1.5px 1px";
} else { } else {
parentDiv.style.boxShadow = ""; parentDiv.style.boxShadow = "";
} }
} }
function onSubmitClick(e) { function onSubmitClick(e) {
if (!submitPressed) { if (!submitPressed) {
easymde.codemirror.on("change", checkMarkdownInput); easymde.codemirror.on("change", checkMarkdownInput);
} }
submitPressed = true; submitPressed = true;
checkMarkdownInput(e); checkMarkdownInput(e);
} }
for (const submit of submits) { for (const submit of submits) {
submit.addEventListener("click", onSubmitClick); submit.addEventListener("click", onSubmitClick);
} }
} }
window.easymdeFactory = easymdeFactory; window.easymdeFactory = easymdeFactory;

2
core/static/webpack/jquery-index.js vendored
View File

@ -19,7 +19,7 @@ require("jquery-ui/themes/base/all.css");
* @param {Object} options object to pass to the shorten function * @param {Object} options object to pass to the shorten function
**/ **/
function shorten(selector, options) { function shorten(selector, options) {
$(selector).shorten(options); $(selector).shorten(options);
} }
window.shorten = shorten; window.shorten = shorten;

138
counter/static/counter/js/counter_click.js
View File

@ -1,80 +1,80 @@
document.addEventListener("alpine:init", () => { document.addEventListener("alpine:init", () => {
Alpine.data("counter", () => ({ Alpine.data("counter", () => ({
basket, basket,
errors: [], errors: [],
sum_basket() { sum_basket() {
if (!this.basket || Object.keys(this.basket).length === 0) { if (!this.basket || Object.keys(this.basket).length === 0) {
return 0; return 0;
} }
const total = Object.values(this.basket).reduce( const total = Object.values(this.basket).reduce(
(acc, cur) => acc + cur.qty * cur.price, (acc, cur) => acc + cur.qty * cur.price,
0, 0,
); );
return total / 100; return total / 100;
}, },
async handle_code(event) { async handle_code(event) {
const code = $(event.target).find("#code_field").val().toUpperCase(); const code = $(event.target).find("#code_field").val().toUpperCase();
if (["FIN", "ANN"].includes(code)) { if (["FIN", "ANN"].includes(code)) {
$(event.target).submit(); $(event.target).submit();
} else { } else {
await this.handle_action(event); await this.handle_action(event);
} }
}, },
async handle_action(event) { async handle_action(event) {
const payload = $(event.target).serialize(); const payload = $(event.target).serialize();
const request = new Request(click_api_url, { const request = new Request(click_api_url, {
method: "POST", method: "POST",
body: payload, body: payload,
headers: { headers: {
Accept: "application/json", Accept: "application/json",
"X-CSRFToken": csrf_token, "X-CSRFToken": csrf_token,
}, },
}); });
const response = await fetch(request); const response = await fetch(request);
const json = await response.json(); const json = await response.json();
this.basket = json.basket; this.basket = json.basket;
this.errors = json.errors; this.errors = json.errors;
$("form.code_form #code_field").val("").focus(); $("form.code_form #code_field").val("").focus();
}, },
})); }));
}); });
$(() => { $(() => {
/* Autocompletion in the code field */ /* Autocompletion in the code field */
const code_field = $("#code_field"); const code_field = $("#code_field");
let quantity = ""; let quantity = "";
code_field.autocomplete({ code_field.autocomplete({
select: (event, ui) => { select: (event, ui) => {
event.preventDefault(); event.preventDefault();
code_field.val(quantity + ui.item.value); code_field.val(quantity + ui.item.value);
}, },
focus: (event, ui) => { focus: (event, ui) => {
event.preventDefault(); event.preventDefault();
code_field.val(quantity + ui.item.value); code_field.val(quantity + ui.item.value);
}, },
source: (request, response) => { source: (request, response) => {
const res = /^(\d+x)?(.*)/i.exec(request.term); const res = /^(\d+x)?(.*)/i.exec(request.term);
quantity = res[1] || ""; quantity = res[1] || "";
const search = res[2]; const search = res[2];
const matcher = new RegExp($.ui.autocomplete.escapeRegex(search), "i"); const matcher = new RegExp($.ui.autocomplete.escapeRegex(search), "i");
response( response(
$.grep(products_autocomplete, (value) => { $.grep(products_autocomplete, (value) => {
return matcher.test(value.tags); return matcher.test(value.tags);
}), }),
); );
}, },
}); });
/* Accordion UI between basket and refills */ /* Accordion UI between basket and refills */
$("#click_form").accordion({ $("#click_form").accordion({
heightStyle: "content", heightStyle: "content",
activate: () => $(".focus").focus(), activate: () => $(".focus").focus(),
}); });
$("#products").tabs(); $("#products").tabs();
code_field.focus(); code_field.focus();
}); });

2
docs/stylesheets/extra.css
View File

@ -1,3 +1,3 @@
.mermaid { .mermaid {
text-align: center; text-align: center;
} }

296
eboutic/static/eboutic/css/eboutic.css
View File

@ -1,245 +1,245 @@
#eboutic { #eboutic {
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
align-items: flex-start; align-items: flex-start;
column-gap: 20px; column-gap: 20px;
margin: 0 20px 20px; margin: 0 20px 20px;
} }
#eboutic-title { #eboutic-title {
margin-left: 20px; margin-left: 20px;
} }
#eboutic h3 { #eboutic h3 {
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
#basket { #basket {
min-width: 300px; min-width: 300px;
border-radius: 8px; border-radius: 8px;
box-shadow: rgb(60 64 67 / 30%) 0 1px 3px 0, rgb(60 64 67 / 15%) 0 4px 8px 3px; box-shadow: rgb(60 64 67 / 30%) 0 1px 3px 0, rgb(60 64 67 / 15%) 0 4px 8px 3px;
padding: 10px; padding: 10px;
} }
#basket h3 { #basket h3 {
margin-top: 0; margin-top: 0;
} }
@media screen and (max-width: 765px) { @media screen and (max-width: 765px) {
#eboutic { #eboutic {
flex-direction: column-reverse; flex-direction: column-reverse;
align-items: center; align-items: center;
margin: 10px; margin: 10px;
row-gap: 20px; row-gap: 20px;
} }
#eboutic-title { #eboutic-title {
margin-bottom: 20px; margin-bottom: 20px;
margin-top: 4px; margin-top: 4px;
} }
#basket { #basket {
width: -webkit-fill-available; width: -webkit-fill-available;
} }
} }
#eboutic .item-list { #eboutic .item-list {
margin-left: 0; margin-left: 0;
list-style: none; list-style: none;
} }
#eboutic .item-list li { #eboutic .item-list li {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 10px; margin-bottom: 10px;
} }
#eboutic .item-row { #eboutic .item-row {
gap: 10px; gap: 10px;
} }
#eboutic .item-name { #eboutic .item-name {
word-break: break-word; word-break: break-word;
width: 100%; width: 100%;
line-height: 100%; line-height: 100%;
} }
#eboutic .fa-plus, #eboutic .fa-plus,
#eboutic .fa-minus { #eboutic .fa-minus {
cursor: pointer; cursor: pointer;
background-color: #354a5f; background-color: #354a5f;
color: white; color: white;
border-radius: 50%; border-radius: 50%;
padding: 5px; padding: 5px;
font-size: 10px; font-size: 10px;
line-height: 10px; line-height: 10px;
width: 10px; width: 10px;
text-align: center; text-align: center;
} }
#eboutic .item-quantity { #eboutic .item-quantity {
min-width: 65px; min-width: 65px;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
display: flex; display: flex;
gap: 5px; gap: 5px;
} }
#eboutic .item-price { #eboutic .item-price {
min-width: 65px; min-width: 65px;
text-align: right; text-align: right;
} }
/* CSS du catalogue */ /* CSS du catalogue */
#eboutic #catalog { #eboutic #catalog {
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
flex-direction: column; flex-direction: column;
row-gap: 30px; row-gap: 30px;
} }
#eboutic .category-header { #eboutic .category-header {
margin-bottom: 15px; margin-bottom: 15px;
} }
#eboutic .product-group { #eboutic .product-group {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
column-gap: 15px; column-gap: 15px;
row-gap: 15px; row-gap: 15px;
} }
#eboutic .product-button { #eboutic .product-button {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
min-height: 180px; min-height: 180px;
height: fit-content; height: fit-content;
width: 150px; width: 150px;
padding: 15px; padding: 15px;
overflow: hidden; overflow: hidden;
box-shadow: rgb(60 64 67 / 30%) 0 1px 3px 0, rgb(60 64 67 / 15%) 0 4px 8px 3px; box-shadow: rgb(60 64 67 / 30%) 0 1px 3px 0, rgb(60 64 67 / 15%) 0 4px 8px 3px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
row-gap: 5px; row-gap: 5px;
justify-content: flex-start; justify-content: flex-start;
} }
#eboutic .product-button.selected { #eboutic .product-button.selected {
animation: bg-in-out 1s ease; animation: bg-in-out 1s ease;
background-color: rgb(216, 236, 255); background-color: rgb(216, 236, 255);
} }
#eboutic .product-button.selected::after { #eboutic .product-button.selected::after {
content: "🛒"; content: "🛒";
position: absolute; position: absolute;
top: 5px; top: 5px;
right: 5px; right: 5px;
padding: 5px; padding: 5px;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 0 12px 2px rgb(0 0 0 / 14%); box-shadow: 0 0 12px 2px rgb(0 0 0 / 14%);
background-color: white; background-color: white;
width: 20px; width: 20px;
height: 20px; height: 20px;
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
} }
#eboutic .product-button:active { #eboutic .product-button:active {
box-shadow: none; box-shadow: none;
} }
#eboutic .product-image { #eboutic .product-image {
width: 100%; width: 100%;
height: 100%; height: 100%;
min-height: 70px; min-height: 70px;
max-height: 70px; max-height: 70px;
object-fit: contain; object-fit: contain;
border-radius: 4px; border-radius: 4px;
line-height: 70px; line-height: 70px;
margin-bottom: 15px; margin-bottom: 15px;
} }
#eboutic i.product-image { #eboutic i.product-image {
background-color: rgba(173, 173, 173, 0.2); background-color: rgba(173, 173, 173, 0.2);
} }
#eboutic .product-description h4 { #eboutic .product-description h4 {
font-size: .75em; font-size: .75em;
word-break: break-word; word-break: break-word;
margin: 0 0 5px 0; margin: 0 0 5px 0;
} }
#eboutic .product-button p { #eboutic .product-button p {
font-size: 13px; font-size: 13px;
margin: 0; margin: 0;
} }
#eboutic .catalog-buttons { #eboutic .catalog-buttons {
display: flex; display: flex;
justify-content: center; justify-content: center;
column-gap: 30px; column-gap: 30px;
margin: 30px 0 0; margin: 30px 0 0;
} }
#eboutic input { #eboutic input {
all: unset; all: unset;
} }
#eboutic .catalog-buttons button { #eboutic .catalog-buttons button {
min-width: 60px; min-width: 60px;
} }
#eboutic .catalog-buttons form { #eboutic .catalog-buttons form {
margin: 0; margin: 0;
} }
@media screen and (max-width: 765px) { @media screen and (max-width: 765px) {
#eboutic #catalog { #eboutic #catalog {
row-gap: 15px; row-gap: 15px;
width: 100%; width: 100%;
} }
#eboutic section { #eboutic section {
text-align: center; text-align: center;
} }
#eboutic .product-group { #eboutic .product-group {
justify-content: space-around; justify-content: space-around;
flex-direction: column; flex-direction: column;
} }
#eboutic .product-group .product-button { #eboutic .product-group .product-button {
min-height: 100px; min-height: 100px;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 10px; gap: 10px;
} }
#eboutic .product-group .product-description { #eboutic .product-group .product-description {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
width: 100%; width: 100%;
} }
#eboutic .product-description h4 { #eboutic .product-description h4 {
text-align: left; text-align: left;
max-width: 90%; max-width: 90%;
} }
#eboutic .product-image { #eboutic .product-image {
margin-bottom: 0; margin-bottom: 0;
max-width: 70px; max-width: 70px;
} }
} }
@keyframes bg-in-out { @keyframes bg-in-out {
0% { 0% {
background-color: white; background-color: white;
} }
100% { 100% {
background-color: rgb(216, 236, 255); background-color: rgb(216, 236, 255);
} }
} }

209
eboutic/static/eboutic/js/eboutic.js
View File

@ -14,16 +14,14 @@ const BASKET_ITEMS_COOKIE_NAME = "basket_items";
* @returns {string|null|undefined} the value of the cookie or null if it does not exist, undefined if not found * @returns {string|null|undefined} the value of the cookie or null if it does not exist, undefined if not found
*/ */
function getCookie(name) { function getCookie(name) {
if (!document.cookie || document.cookie.length === 0) return null; if (!document.cookie || document.cookie.length === 0) return null;
const found = document.cookie const found = document.cookie
.split(";") .split(";")
.map((c) => c.trim()) .map((c) => c.trim())
.find((c) => c.startsWith(`${name}=`)); .find((c) => c.startsWith(`${name}=`));
return found === undefined return found === undefined ? undefined : decodeURIComponent(found.split("=")[1]);
? undefined
: decodeURIComponent(found.split("=")[1]);
} }
/** /**
@ -31,118 +29,115 @@ function getCookie(name) {
* @returns {BasketItem[]|[]} the items in the basket * @returns {BasketItem[]|[]} the items in the basket
*/ */
function get_starting_items() { function get_starting_items() {
const cookie = getCookie(BASKET_ITEMS_COOKIE_NAME); const cookie = getCookie(BASKET_ITEMS_COOKIE_NAME);
if (!cookie) { if (!cookie) {
return []; return [];
} }
// Django cookie backend converts `,` to `\054` // Django cookie backend converts `,` to `\054`
let parsed = JSON.parse(cookie.replace(/\\054/g, ",")); let parsed = JSON.parse(cookie.replace(/\\054/g, ","));
if (typeof parsed === "string") { if (typeof parsed === "string") {
// In some conditions, a second parsing is needed // In some conditions, a second parsing is needed
parsed = JSON.parse(parsed); parsed = JSON.parse(parsed);
} }
const res = Array.isArray(parsed) ? parsed : []; const res = Array.isArray(parsed) ? parsed : [];
return res.filter((i) => !!document.getElementById(i.id)); return res.filter((i) => !!document.getElementById(i.id));
} }
document.addEventListener("alpine:init", () => { document.addEventListener("alpine:init", () => {
Alpine.data("basket", () => ({ Alpine.data("basket", () => ({
items: get_starting_items(), items: get_starting_items(),
/** /**
* Get the total price of the basket * Get the total price of the basket
* @returns {number} The total price of the basket * @returns {number} The total price of the basket
*/ */
get_total() { get_total() {
return this.items.reduce( return this.items.reduce((acc, item) => acc + item.quantity * item.unit_price, 0);
(acc, item) => acc + item.quantity * item.unit_price, },
0,
);
},
/** /**
* Add 1 to the quantity of an item in the basket * Add 1 to the quantity of an item in the basket
* @param {BasketItem} item * @param {BasketItem} item
*/ */
add(item) { add(item) {
item.quantity++; item.quantity++;
this.set_cookies(); this.set_cookies();
}, },
/** /**
* Remove 1 to the quantity of an item in the basket * Remove 1 to the quantity of an item in the basket
* @param {BasketItem} item_id * @param {BasketItem} item_id
*/ */
remove(item_id) { remove(item_id) {
const index = this.items.findIndex((e) => e.id === item_id); const index = this.items.findIndex((e) => e.id === item_id);
if (index < 0) return; if (index < 0) return;
this.items[index].quantity -= 1; this.items[index].quantity -= 1;
if (this.items[index].quantity === 0) { if (this.items[index].quantity === 0) {
this.items = this.items.filter((e) => e.id !== this.items[index].id); this.items = this.items.filter((e) => e.id !== this.items[index].id);
} }
this.set_cookies(); this.set_cookies();
}, },
/** /**
* Remove all the items from the basket & cleans the catalog CSS classes * Remove all the items from the basket & cleans the catalog CSS classes
*/ */
clear_basket() { clear_basket() {
this.items = []; this.items = [];
this.set_cookies(); this.set_cookies();
}, },
/** /**
* Set the cookie in the browser with the basket items * Set the cookie in the browser with the basket items
* ! the cookie survives an hour * ! the cookie survives an hour
*/ */
set_cookies() { set_cookies() {
if (this.items.length === 0) { if (this.items.length === 0) {
document.cookie = `${BASKET_ITEMS_COOKIE_NAME}=;Max-Age=0`; document.cookie = `${BASKET_ITEMS_COOKIE_NAME}=;Max-Age=0`;
} else { } else {
document.cookie = `${BASKET_ITEMS_COOKIE_NAME}=${encodeURIComponent(JSON.stringify(this.items))};Max-Age=3600`; document.cookie = `${BASKET_ITEMS_COOKIE_NAME}=${encodeURIComponent(JSON.stringify(this.items))};Max-Age=3600`;
} }
}, },
/** /**
* Create an item in the basket if it was not already in * Create an item in the basket if it was not already in
* @param {number} id The id of the product to add * @param {number} id The id of the product to add
* @param {string} name The name of the product * @param {string} name The name of the product
* @param {number} price The unit price of the product * @param {number} price The unit price of the product
* @returns {BasketItem} The created item * @returns {BasketItem} The created item
*/ */
create_item(id, name, price) { create_item(id, name, price) {
const new_item = { const new_item = {
id, id,
name, name,
quantity: 0, quantity: 0,
unit_price: price, unit_price: price,
}; };
this.items.push(new_item); this.items.push(new_item);
this.add(new_item); this.add(new_item);
return new_item; return new_item;
}, },
/** /**
* Add an item to the basket. * Add an item to the basket.
* This is called when the user click on a button in the catalog * This is called when the user click on a button in the catalog
* @param {number} id The id of the product to add * @param {number} id The id of the product to add
* @param {string} name The name of the product * @param {string} name The name of the product
* @param {number} price The unit price of the product * @param {number} price The unit price of the product
*/ */
add_from_catalog(id, name, price) { add_from_catalog(id, name, price) {
let item = this.items.find((e) => e.id === id); let item = this.items.find((e) => e.id === id);
// if the item is not in the basket, we create it // if the item is not in the basket, we create it
// else we add + 1 to it // else we add + 1 to it
if (!item) { if (!item) {
item = this.create_item(id, name, price); item = this.create_item(id, name, price);
} else { } else {
this.add(item); this.add(item);
} }
}, },
})); }));
}); });

130
eboutic/static/eboutic/js/makecommand.js
View File

@ -3,77 +3,77 @@
* @enum {number} * @enum {number}
*/ */
const BillingInfoReqState = { const BillingInfoReqState = {
SUCCESS: 1, SUCCESS: 1,
FAILURE: 2, FAILURE: 2,
SENDING: 3, SENDING: 3,
}; };
document.addEventListener("alpine:init", () => { document.addEventListener("alpine:init", () => {
Alpine.store("billing_inputs", { Alpine.store("billing_inputs", {
data: et_data, data: et_data,
async fill() { async fill() {
document.getElementById("bank-submit-button").disabled = true; document.getElementById("bank-submit-button").disabled = true;
const res = await fetch(et_data_url); const res = await fetch(et_data_url);
if (res.ok) { if (res.ok) {
this.data = await res.json(); this.data = await res.json();
document.getElementById("bank-submit-button").disabled = false; document.getElementById("bank-submit-button").disabled = false;
} }
}, },
}); });
Alpine.data("billing_infos", () => ({ Alpine.data("billing_infos", () => ({
/** @type {BillingInfoReqState | null} */ /** @type {BillingInfoReqState | null} */
req_state: null, req_state: null,
async send_form() { async send_form() {
this.req_state = BillingInfoReqState.SENDING; this.req_state = BillingInfoReqState.SENDING;
const form = document.getElementById("billing_info_form"); const form = document.getElementById("billing_info_form");
document.getElementById("bank-submit-button").disabled = true; document.getElementById("bank-submit-button").disabled = true;
const payload = Object.fromEntries( const payload = Object.fromEntries(
Array.from(form.querySelectorAll("input, select")) Array.from(form.querySelectorAll("input, select"))
.filter((elem) => elem.type !== "submit" && elem.value) .filter((elem) => elem.type !== "submit" && elem.value)
.map((elem) => [elem.name, elem.value]), .map((elem) => [elem.name, elem.value]),
); );
const res = await fetch(billing_info_url, { const res = await fetch(billing_info_url, {
method: "PUT", method: "PUT",
body: JSON.stringify(payload), body: JSON.stringify(payload),
}); });
this.req_state = res.ok this.req_state = res.ok
? BillingInfoReqState.SUCCESS ? BillingInfoReqState.SUCCESS
: BillingInfoReqState.FAILURE; : BillingInfoReqState.FAILURE;
if (res.status === 422) { if (res.status === 422) {
const errors = (await res.json()).detail.flatMap((err) => err.loc); const errors = (await res.json()).detail.flatMap((err) => err.loc);
for (const elem of Array.from(form.querySelectorAll("input")).filter( for (const elem of Array.from(form.querySelectorAll("input")).filter((elem) =>
(elem) => errors.includes(elem.name), errors.includes(elem.name),
)) { )) {
elem.setCustomValidity(gettext("Incorrect value")); elem.setCustomValidity(gettext("Incorrect value"));
elem.reportValidity(); elem.reportValidity();
elem.oninput = () => elem.setCustomValidity(""); elem.oninput = () => elem.setCustomValidity("");
} }
} else if (res.ok) { } else if (res.ok) {
Alpine.store("billing_inputs").fill(); Alpine.store("billing_inputs").fill();
} }
}, },
get_alert_color() { get_alert_color() {
if (this.req_state === BillingInfoReqState.SUCCESS) { if (this.req_state === BillingInfoReqState.SUCCESS) {
return "green"; return "green";
} }
if (this.req_state === BillingInfoReqState.FAILURE) { if (this.req_state === BillingInfoReqState.FAILURE) {
return "red"; return "red";
} }
return ""; return "";
}, },
get_alert_message() { get_alert_message() {
if (this.req_state === BillingInfoReqState.SUCCESS) { if (this.req_state === BillingInfoReqState.SUCCESS) {
return billing_info_success_message; return billing_info_success_message;
} }
if (this.req_state === BillingInfoReqState.FAILURE) { if (this.req_state === BillingInfoReqState.FAILURE) {
return billing_info_failure_message; return billing_info_failure_message;
} }
return ""; return "";
}, },
})); }));
}); });

7054
galaxy/ref_galaxy_state.json
View File

File diff suppressed because it is too large Load Diff

73
package.json
View File

@ -1,38 +1,39 @@
{ {
"name": "sith", "name": "sith",
"version": "3", "version": "3",
"description": "Le web Sith de l'AE", "description": "Le web Sith de l'AE",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"compile": "webpack --mode production", "compile": "webpack --mode production",
"compile-dev": "webpack --mode development", "compile-dev": "webpack --mode development",
"serve": "webpack --mode development --watch" "serve": "webpack --mode development --watch",
}, "check": "biome check --write"
"keywords": [], },
"author": "", "keywords": [],
"license": "GPL-3.0-only", "author": "",
"sideEffects": [".css"], "license": "GPL-3.0-only",
"devDependencies": { "sideEffects": [".css"],
"@babel/core": "^7.25.2", "devDependencies": {
"@babel/preset-env": "^7.25.4", "@babel/core": "^7.25.2",
"@biomejs/biome": "1.9.3", "@babel/preset-env": "^7.25.4",
"babel-loader": "^9.2.1", "@biomejs/biome": "1.9.3",
"css-loader": "^7.1.2", "babel-loader": "^9.2.1",
"css-minimizer-webpack-plugin": "^7.0.0", "css-loader": "^7.1.2",
"expose-loader": "^5.0.0", "css-minimizer-webpack-plugin": "^7.0.0",
"mini-css-extract-plugin": "^2.9.1", "expose-loader": "^5.0.0",
"source-map-loader": "^5.0.0", "mini-css-extract-plugin": "^2.9.1",
"terser-webpack-plugin": "^5.3.10", "source-map-loader": "^5.0.0",
"webpack": "^5.94.0", "terser-webpack-plugin": "^5.3.10",
"webpack-cli": "^5.1.4" "webpack": "^5.94.0",
}, "webpack-cli": "^5.1.4"
"dependencies": { },
"@fortawesome/fontawesome-free": "^6.6.0", "dependencies": {
"alpinejs": "^3.14.1", "@fortawesome/fontawesome-free": "^6.6.0",
"easymde": "^2.18.0", "alpinejs": "^3.14.1",
"glob": "^11.0.0", "easymde": "^2.18.0",
"jquery": "^3.7.1", "glob": "^11.0.0",
"jquery-ui": "^1.14.0", "jquery": "^3.7.1",
"jquery.shorten": "^1.0.0" "jquery-ui": "^1.14.0",
} "jquery.shorten": "^1.0.0"
}
} }

473
sas/static/sas/js/viewer.js
View File

@ -9,260 +9,251 @@
* able to prefetch its data. * able to prefetch its data.
*/ */
class PictureWithIdentifications { class PictureWithIdentifications {
identifications = null; identifications = null;
image_loading = false; image_loading = false;
identifications_loading = false; identifications_loading = false;
/** /**
* @param {Picture} picture * @param {Picture} picture
*/ */
constructor(picture) { constructor(picture) {
Object.assign(this, picture); Object.assign(this, picture);
} }
/** /**
* @param {Picture} picture * @param {Picture} picture
*/ */
static from_picture(picture) { static from_picture(picture) {
return new PictureWithIdentifications(picture); return new PictureWithIdentifications(picture);
} }
/** /**
* If not already done, fetch the users identified on this picture and * If not already done, fetch the users identified on this picture and
* populate the identifications field * populate the identifications field
* @param {?Object=} options * @param {?Object=} options
* @return {Promise<void>} * @return {Promise<void>}
*/ */
async load_identifications(options) { async load_identifications(options) {
if (this.identifications_loading) { if (this.identifications_loading) {
return; // The users are already being fetched. return; // The users are already being fetched.
} }
if (!!this.identifications && !options?.force_reload) { if (!!this.identifications && !options?.force_reload) {
// The users are already fetched // The users are already fetched
// and the user does not want to force the reload // and the user does not want to force the reload
return; return;
} }
this.identifications_loading = true; this.identifications_loading = true;
const url = `/api/sas/picture/${this.id}/identified`; const url = `/api/sas/picture/${this.id}/identified`;
this.identifications = await (await fetch(url)).json(); this.identifications = await (await fetch(url)).json();
this.identifications_loading = false; this.identifications_loading = false;
} }
/** /**
* Preload the photo and the identifications * Preload the photo and the identifications
* @return {Promise<void>} * @return {Promise<void>}
*/ */
async preload() { async preload() {
const img = new Image(); const img = new Image();
img.src = this.compressed_url; img.src = this.compressed_url;
if (!img.complete) { if (!img.complete) {
this.image_loading = true; this.image_loading = true;
img.addEventListener("load", () => { img.addEventListener("load", () => {
this.image_loading = false; this.image_loading = false;
}); });
} }
await this.load_identifications(); await this.load_identifications();
} }
} }
document.addEventListener("alpine:init", () => { document.addEventListener("alpine:init", () => {
Alpine.data("picture_viewer", () => ({ Alpine.data("picture_viewer", () => ({
/** /**
* All the pictures that can be displayed on this picture viewer * All the pictures that can be displayed on this picture viewer
* @type PictureWithIdentifications[] * @type PictureWithIdentifications[]
**/ **/
pictures: [], pictures: [],
/** /**
* The currently displayed picture * The currently displayed picture
* Default dummy data are pre-loaded to avoid javascript error * Default dummy data are pre-loaded to avoid javascript error
* when loading the page at the beginning * when loading the page at the beginning
* @type PictureWithIdentifications * @type PictureWithIdentifications
**/ **/
current_picture: { current_picture: {
is_moderated: true, is_moderated: true,
id: null, id: null,
name: "", name: "",
display_name: "", display_name: "",
compressed_url: "", compressed_url: "",
profile_url: "", profile_url: "",
full_size_url: "", full_size_url: "",
owner: "", owner: "",
date: new Date(), date: new Date(),
identifications: [], identifications: [],
}, },
/** /**
* The picture which will be displayed next if the user press the "next" button * The picture which will be displayed next if the user press the "next" button
* @type ?PictureWithIdentifications * @type ?PictureWithIdentifications
**/ **/
next_picture: null, next_picture: null,
/** /**
* The picture which will be displayed next if the user press the "previous" button * The picture which will be displayed next if the user press the "previous" button
* @type ?PictureWithIdentifications * @type ?PictureWithIdentifications
**/ **/
previous_picture: null, previous_picture: null,
/** /**
* The select2 component used to identify users * The select2 component used to identify users
**/ **/
selector: undefined, selector: undefined,
/** /**
* true if the page is in a loading state, else false * true if the page is in a loading state, else false
**/ **/
/** /**
* Error message when a moderation operation fails * Error message when a moderation operation fails
* @type string * @type string
**/ **/
moderation_error: "", moderation_error: "",
/** /**
* Method of pushing new url to the browser history * Method of pushing new url to the browser history
* Used by popstate event and always reset to it's default value when used * Used by popstate event and always reset to it's default value when used
* @type History * @type History
**/ **/
pushstate: History.PUSH, pushstate: History.PUSH,
async init() { async init() {
this.pictures = (await fetch_paginated(picture_endpoint)).map( this.pictures = (await fetch_paginated(picture_endpoint)).map(
PictureWithIdentifications.from_picture, PictureWithIdentifications.from_picture,
); );
this.selector = sithSelect2({ this.selector = sithSelect2({
element: $(this.$refs.search), element: $(this.$refs.search),
data_source: remote_data_source("/api/user/search", { data_source: remote_data_source("/api/user/search", {
excluded: () => [ excluded: () => [
...(this.current_picture.identifications || []).map( ...(this.current_picture.identifications || []).map((i) => i.user.id),
(i) => i.user.id, ],
), result_converter: (obj) => Object({ ...obj, text: obj.display_name }),
], }),
result_converter: (obj) => Object({ ...obj, text: obj.display_name }), picture_getter: (user) => user.profile_pict,
}), });
picture_getter: (user) => user.profile_pict, this.current_picture = this.pictures.find((i) => i.id === first_picture_id);
}); this.$watch("current_picture", (current, previous) => {
this.current_picture = this.pictures.find( if (current === previous) {
(i) => i.id === first_picture_id, /* Avoid recursive updates */
); return;
this.$watch("current_picture", (current, previous) => { }
if (current === previous) { this.update_picture();
/* Avoid recursive updates */ });
return; window.addEventListener("popstate", async (event) => {
} if (!event.state || event.state.sas_picture_id === undefined) {
this.update_picture(); return;
}); }
window.addEventListener("popstate", async (event) => { this.pushstate = History.REPLACE;
if (!event.state || event.state.sas_picture_id === undefined) { this.current_picture = this.pictures.find(
return; (i) => i.id === Number.parseInt(event.state.sas_picture_id),
} );
this.pushstate = History.REPLACE; });
this.current_picture = this.pictures.find( this.pushstate = History.REPLACE; /* Avoid first url push */
(i) => i.id === Number.parseInt(event.state.sas_picture_id), await this.update_picture();
); },
});
this.pushstate = History.REPLACE; /* Avoid first url push */
await this.update_picture();
},
/** /**
* Update the page. * Update the page.
* Called when the `current_picture` property changes. * Called when the `current_picture` property changes.
* *
* The url is modified without reloading the page, * The url is modified without reloading the page,
* and the previous picture, the next picture and * and the previous picture, the next picture and
* the list of identified users are updated. * the list of identified users are updated.
*/ */
async update_picture() { async update_picture() {
const update_args = [ const update_args = [
{ sas_picture_id: this.current_picture.id }, { sas_picture_id: this.current_picture.id },
"", "",
`/sas/picture/${this.current_picture.id}/`, `/sas/picture/${this.current_picture.id}/`,
]; ];
if (this.pushstate === History.REPLACE) { if (this.pushstate === History.REPLACE) {
window.history.replaceState(...update_args); window.history.replaceState(...update_args);
this.pushstate = History.PUSH; this.pushstate = History.PUSH;
} else { } else {
window.history.pushState(...update_args); window.history.pushState(...update_args);
} }
this.moderation_error = ""; this.moderation_error = "";
const index = this.pictures.indexOf(this.current_picture); const index = this.pictures.indexOf(this.current_picture);
this.previous_picture = this.pictures[index - 1] || null; this.previous_picture = this.pictures[index - 1] || null;
this.next_picture = this.pictures[index + 1] || null; this.next_picture = this.pictures[index + 1] || null;
await this.current_picture.load_identifications(); await this.current_picture.load_identifications();
this.$refs.main_picture?.addEventListener("load", () => { this.$refs.main_picture?.addEventListener("load", () => {
// once the current picture is loaded, // once the current picture is loaded,
// start preloading the next and previous pictures // start preloading the next and previous pictures
this.next_picture?.preload(); this.next_picture?.preload();
this.previous_picture?.preload(); this.previous_picture?.preload();
}); });
}, },
async moderate_picture() { async moderate_picture() {
const res = await fetch( const res = await fetch(`/api/sas/picture/${this.current_picture.id}/moderate`, {
`/api/sas/picture/${this.current_picture.id}/moderate`, method: "PATCH",
{ });
method: "PATCH", if (!res.ok) {
}, this.moderation_error = `${gettext("Couldn't moderate picture")} : ${res.statusText}`;
); return;
if (!res.ok) { }
this.moderation_error = `${gettext("Couldn't moderate picture")} : ${res.statusText}`; this.current_picture.is_moderated = true;
return; this.current_picture.asked_for_removal = false;
} },
this.current_picture.is_moderated = true;
this.current_picture.asked_for_removal = false;
},
async delete_picture() { async delete_picture() {
const res = await fetch(`/api/sas/picture/${this.current_picture.id}`, { const res = await fetch(`/api/sas/picture/${this.current_picture.id}`, {
method: "DELETE", method: "DELETE",
}); });
if (!res.ok) { if (!res.ok) {
this.moderation_error = `${gettext("Couldn't delete picture")} : ${res.statusText}`; this.moderation_error = `${gettext("Couldn't delete picture")} : ${res.statusText}`;
return; return;
} }
this.pictures.splice(this.pictures.indexOf(this.current_picture), 1); this.pictures.splice(this.pictures.indexOf(this.current_picture), 1);
if (this.pictures.length === 0) { if (this.pictures.length === 0) {
// The deleted picture was the only one in the list. // The deleted picture was the only one in the list.
// As the album is now empty, go back to the parent page // As the album is now empty, go back to the parent page
document.location.href = album_url; document.location.href = album_url;
} }
this.current_picture = this.next_picture || this.previous_picture; this.current_picture = this.next_picture || this.previous_picture;
}, },
/** /**
* Send the identification request and update the list of identified users. * Send the identification request and update the list of identified users.
*/ */
async submit_identification() { async submit_identification() {
const url = `/api/sas/picture/${this.current_picture.id}/identified`; const url = `/api/sas/picture/${this.current_picture.id}/identified`;
await fetch(url, { await fetch(url, {
method: "PUT", method: "PUT",
body: JSON.stringify( body: JSON.stringify(this.selector.val().map((i) => Number.parseInt(i))),
this.selector.val().map((i) => Number.parseInt(i)), });
), // refresh the identified users list
}); await this.current_picture.load_identifications({ force_reload: true });
// refresh the identified users list this.selector.empty().trigger("change");
await this.current_picture.load_identifications({ force_reload: true }); },
this.selector.empty().trigger("change");
},
/** /**
* Check if an identification can be removed by the currently logged user * Check if an identification can be removed by the currently logged user
* @param {PictureIdentification} identification * @param {PictureIdentification} identification
* @return {boolean} * @return {boolean}
*/ */
can_be_removed(identification) { can_be_removed(identification) {
return user_is_sas_admin || identification.user.id === user_id; return user_is_sas_admin || identification.user.id === user_id;
}, },
/** /**
* Untag a user from the current picture * Untag a user from the current picture
* @param {PictureIdentification} identification * @param {PictureIdentification} identification
*/ */
async remove_identification(identification) { async remove_identification(identification) {
const res = await fetch(`/api/sas/relation/${identification.id}`, { const res = await fetch(`/api/sas/relation/${identification.id}`, {
method: "DELETE", method: "DELETE",
}); });
if (res.ok && Array.isArray(this.current_picture.identifications)) { if (res.ok && Array.isArray(this.current_picture.identifications)) {
this.current_picture.identifications = this.current_picture.identifications =
this.current_picture.identifications.filter( this.current_picture.identifications.filter(
(i) => i.id !== identification.id, (i) => i.id !== identification.id,
); );
} }
}, },
})); }));
}); });

152
webpack.config.js
View File

@ -5,81 +5,79 @@ const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin"); const TerserPlugin = require("terser-webpack-plugin");
module.exports = { module.exports = {
entry: glob entry: glob.sync("./!(static)/static/webpack/**?(-)index.js").reduce((obj, el) => {
.sync("./!(static)/static/webpack/**?(-)index.js") obj[path.parse(el).name] = `./${el}`;
.reduce((obj, el) => { return obj;
obj[path.parse(el).name] = `./${el}`; }, {}),
return obj; output: {
}, {}), filename: "[name].js",
output: { path: path.resolve(__dirname, "./staticfiles/generated/webpack"),
filename: "[name].js", clean: true,
path: path.resolve(__dirname, "./staticfiles/generated/webpack"), },
clean: true, plugins: [new MiniCssExtractPlugin()],
}, optimization: {
plugins: [new MiniCssExtractPlugin()], minimizer: [
optimization: { "...",
minimizer: [ new CssMinimizerPlugin({
"...", parallel: true,
new CssMinimizerPlugin({ }),
parallel: true, new TerserPlugin({
}), parallel: true,
new TerserPlugin({ terserOptions: {
parallel: true, mangle: true,
terserOptions: { compress: {
mangle: true, drop_console: true,
compress: { },
drop_console: true, },
}, }),
}, ],
}), },
], module: {
}, rules: [
module: { {
rules: [ test: /\.css$/,
{ sideEffects: true,
test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"],
sideEffects: true, },
use: [MiniCssExtractPlugin.loader, "css-loader"], {
}, test: /\.(jpe?g|png|gif)$/i,
{ type: "asset/resource",
test: /\.(jpe?g|png|gif)$/i, },
type: "asset/resource", {
}, test: /\.m?js$/,
{ exclude: /node_modules/,
test: /\.m?js$/, use: {
exclude: /node_modules/, loader: "babel-loader",
use: { options: {
loader: "babel-loader", presets: ["@babel/preset-env"],
options: { },
presets: ["@babel/preset-env"], },
}, },
}, {
}, test: /\.js$/,
{ enforce: "pre",
test: /\.js$/, use: ["source-map-loader"],
enforce: "pre", },
use: ["source-map-loader"], {
}, test: require.resolve("jquery"),
{ loader: "expose-loader",
test: require.resolve("jquery"), options: {
loader: "expose-loader", exposes: [
options: { {
exposes: [ globalName: ["$"],
{ override: true,
globalName: ["$"], },
override: true, {
}, globalName: ["jQuery"],
{ override: true,
globalName: ["jQuery"], },
override: true, {
}, globalName: ["window.jQuery"],
{ override: true,
globalName: ["window.jQuery"], },
override: true, ],
}, },
], },
}, ],
}, },
],
},
}; };