klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-07-10 03:49:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Apply standard formater and linter on js files

Browse Source
This commit is contained in:
Antoine Bartuccio
2024-10-03 01:45:29 +02:00
parent e5aa7aa866
commit c57d2ece9c
19 changed files with 3980 additions and 829 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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