2023-11-03 13:25:39 +00:00
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
var xMousePos = null;
|
|
|
|
var yMousePos = null;
|
2023-11-03 13:25:39 +00:00
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
document.onmousemove = function(e) {
|
|
|
|
xMousePos = e.clientX + window.scrollX;
|
|
|
|
yMousePos = e.clientY + window.scrollY;
|
2023-10-31 16:00:25 +00:00
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
document.oncontextmenu = function(e) {
|
|
|
|
|
|
|
|
xMousePos = e.clientX + window.scrollX;
|
|
|
|
yMousePos = e.clientY + window.scrollY;
|
|
|
|
|
|
|
|
}
|
2023-11-03 13:25:39 +00:00
|
|
|
|
2023-11-02 17:16:15 +00:00
|
|
|
/**
|
|
|
|
* Récupère depuis le document l'identifiant de l'élément
|
|
|
|
* @param {string} id Identifiant de l'élément `id='identifiant'`
|
|
|
|
* @returns
|
|
|
|
*/
|
|
|
|
function getID(id) {
|
|
|
|
|
|
|
|
return document.getElementById(id)
|
2023-10-31 16:00:25 +00:00
|
|
|
}
|
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
/**
|
|
|
|
*
|
|
|
|
* @param {Date} GetDate
|
|
|
|
* @returns
|
|
|
|
*/
|
|
|
|
function getFormattedDate(GetDate) {
|
|
|
|
|
|
|
|
const date = new Date(GetDate)
|
|
|
|
|
|
|
|
var gmonth = date.getMonth() + 1
|
|
|
|
var gday = date.getDate()
|
|
|
|
var gHour = date.getHours()
|
|
|
|
var gMinute = date.getMinutes()
|
|
|
|
var gSecondes = date.getSeconds()
|
|
|
|
|
|
|
|
|
|
|
|
if(date.getMonth() + 1 < 10) {
|
|
|
|
gmonth = "0" + (date.getMonth() + 1)
|
|
|
|
}
|
|
|
|
|
|
|
|
if(date.getDate() + 1 <= 10) {
|
|
|
|
gday = "0" + date.getDate()
|
|
|
|
}
|
|
|
|
|
|
|
|
if(date.getHours() + 1 <= 10) {
|
|
|
|
gHour = "0" + date.getHours()
|
|
|
|
}
|
|
|
|
|
|
|
|
if(date.getMinutes() + 1 <= 10) {
|
|
|
|
gMinute = "0" + date.getMinutes()
|
|
|
|
}
|
|
|
|
|
|
|
|
if(date.getSeconds() + 1 <= 10) {
|
|
|
|
gSecondes = "0" + date.getSeconds()
|
|
|
|
}
|
|
|
|
|
|
|
|
return gday + "/" + gmonth + "/" + date.getFullYear() + " - " + gHour + ":" + gMinute
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2023-11-02 17:16:15 +00:00
|
|
|
/**
|
|
|
|
* Permet de faire une pop-up automatique
|
|
|
|
*/
|
2023-11-28 20:05:44 +00:00
|
|
|
class TextResponse {
|
2023-10-31 16:00:25 +00:00
|
|
|
constructor(name) {
|
|
|
|
this.name = name
|
|
|
|
this.element = getID(this.name)
|
2023-11-02 10:09:47 +00:00
|
|
|
this.element.innerHTML = " "
|
2023-10-31 16:00:25 +00:00
|
|
|
this.element.style.fontSize = "14px"
|
2023-11-02 10:09:47 +00:00
|
|
|
this.element.style.position = "sticky"
|
2023-11-03 21:21:21 +00:00
|
|
|
this.element.style.width = this.element.parentElement.offsetWidth + "px"
|
|
|
|
this.element.style.textAlign = "center"
|
2023-10-31 16:00:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
clear() {
|
|
|
|
|
2023-11-02 10:09:47 +00:00
|
|
|
this.element.innerHTML = " "
|
2023-10-31 16:00:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
err(text) {
|
|
|
|
|
|
|
|
this.element.classList.add("yellow")
|
|
|
|
this.element.innerHTML = "<i class='fa fa-warning'></i> " + text
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
info(text) {
|
|
|
|
|
|
|
|
this.element.classList.remove("yellow")
|
|
|
|
|
|
|
|
this.element.innerHTML = "<i class='fa fa-info-circle'></i> " + text
|
|
|
|
}
|
|
|
|
|
2023-11-03 21:21:21 +00:00
|
|
|
setSize(size) {
|
|
|
|
|
|
|
|
this.element.style.fontSize = size
|
|
|
|
}
|
|
|
|
|
2023-11-02 17:16:15 +00:00
|
|
|
}
|
|
|
|
|
2023-11-03 13:25:39 +00:00
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
const AllViews = new Map()
|
2023-11-03 21:21:21 +00:00
|
|
|
var zIndex = 5
|
2023-11-03 13:25:39 +00:00
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Permet de créer une fenêtre
|
|
|
|
* @param {object} properties Propriétés de la fenêtre
|
|
|
|
*/
|
2023-11-03 13:25:39 +00:00
|
|
|
class ViewWindow {
|
|
|
|
ViewHTML = null
|
2023-11-28 20:05:44 +00:00
|
|
|
ViewWindowDiv
|
|
|
|
ViewProperties = null
|
2023-11-03 13:25:39 +00:00
|
|
|
ViewSpanInteger = null
|
2023-11-03 21:21:21 +00:00
|
|
|
ViewPopupSpanInteger = null
|
|
|
|
ViewPopupHTML = null
|
|
|
|
ViewPopupTitle = null
|
2023-11-28 20:05:44 +00:00
|
|
|
ViewItem = new ViewItem(this)
|
2023-11-03 13:25:39 +00:00
|
|
|
constructor(properties) {
|
2023-11-28 20:05:44 +00:00
|
|
|
if(!AllViews.has(properties.title)) {
|
2023-11-03 13:25:39 +00:00
|
|
|
|
|
|
|
this.ViewProperties = properties
|
2023-11-28 20:05:44 +00:00
|
|
|
AllViews.set(properties.title, true)
|
|
|
|
|
|
|
|
|
2023-11-03 13:25:39 +00:00
|
|
|
|
|
|
|
this.ViewHTML = `
|
|
|
|
<div draggable="true" id='${properties.title}_window' style='width: ${properties.width}; height: ${properties.height}' class='view-window'>
|
2023-11-03 21:21:21 +00:00
|
|
|
|
2023-11-03 13:25:39 +00:00
|
|
|
<div id='${properties.title}_header' class='view-window-header'>
|
|
|
|
<span style='width: 40px'></span>
|
|
|
|
<p>${properties.title}</p>
|
2023-11-28 20:05:44 +00:00
|
|
|
<div class='view-closediv'>
|
|
|
|
<span id='${properties.title}_reduce' class='btn-cover'><i class="fa-solid fa-window-minimize"></i></span>
|
|
|
|
<span id='${properties.title}_minimize' class='btn-cover'><i class="fa-solid fa-window-maximize"></i></span>
|
2023-11-04 13:50:28 +00:00
|
|
|
<span id='${properties.title}_close' class='view-close'><i class='fa fa-xmark'></i></span>
|
2023-11-03 13:25:39 +00:00
|
|
|
</div>
|
2023-11-28 20:05:44 +00:00
|
|
|
</div>
|
2023-11-03 13:25:39 +00:00
|
|
|
<div id='${properties.title}_content' class='view-window-content'>
|
|
|
|
</div>
|
2023-11-03 21:21:21 +00:00
|
|
|
<div id='${properties.title}_popupDiv'></div>
|
|
|
|
|
2023-11-03 13:25:39 +00:00
|
|
|
</div>
|
|
|
|
`
|
|
|
|
this.ViewSpanInteger = document.createElement("div")
|
|
|
|
document.body.appendChild(this.ViewSpanInteger);
|
|
|
|
this.ViewSpanInteger.outerHTML = this.ViewHTML
|
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
const header = document.getElementById(properties.title + "_header")
|
|
|
|
const windowDiv = document.getElementById(properties.title + "_window")
|
|
|
|
this.ViewWindowDiv = windowDiv
|
2023-11-03 13:25:39 +00:00
|
|
|
const closeWindow = document.getElementById(properties.title + "_close")
|
2023-11-28 20:05:44 +00:00
|
|
|
const minimizeWindow = document.getElementById(properties.title + "_minimize")
|
|
|
|
const reduceWindow = document.getElementById(properties.title + "_reduce")
|
|
|
|
|
2023-11-03 13:25:39 +00:00
|
|
|
closeWindow.addEventListener("click", () => {
|
|
|
|
|
|
|
|
this.destroy()
|
|
|
|
|
|
|
|
})
|
2023-11-28 20:05:44 +00:00
|
|
|
|
|
|
|
reduceWindow.addEventListener("click", () => {
|
|
|
|
windowDiv.style.display = "none"
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
minimizeWindow.addEventListener("click", () => {
|
|
|
|
|
|
|
|
const windowDiv = document.getElementById(properties.title + "_window")
|
|
|
|
const contentDiv = document.getElementById(properties.title + "_content")
|
|
|
|
const minimizeIcon = document.getElementById(properties.title + "_minimize").children[0]
|
|
|
|
|
|
|
|
|
|
|
|
if(windowDiv.classList.contains("minimized")) {
|
|
|
|
windowDiv.classList.remove("minimized")
|
|
|
|
contentDiv.style.display = "unset"
|
|
|
|
windowDiv.style.backgroundColor = "#605e58c1"
|
|
|
|
minimizeIcon.classList.remove("fa-window-restore")
|
|
|
|
minimizeIcon.classList.add("fa-window-maximize")
|
|
|
|
} else {
|
|
|
|
windowDiv.classList.add("minimized")
|
|
|
|
contentDiv.style.display = "none"
|
|
|
|
windowDiv.style.backgroundColor = "transparent"
|
|
|
|
minimizeIcon.classList.remove("fa-window-maximize")
|
|
|
|
minimizeIcon.classList.add("fa-window-restore")
|
|
|
|
this.destroyPopup()
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
2023-11-03 13:25:39 +00:00
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
|
2023-11-03 13:25:39 +00:00
|
|
|
|
|
|
|
let isDragging = false;
|
|
|
|
let offsetX, offsetY;
|
2023-11-03 21:21:21 +00:00
|
|
|
windowDiv.style.zIndex = zIndex + 1
|
|
|
|
|
2023-11-03 13:25:39 +00:00
|
|
|
header.addEventListener('mousedown', (e) => {
|
|
|
|
isDragging = true;
|
2023-11-03 21:21:21 +00:00
|
|
|
|
|
|
|
zIndex+=2
|
|
|
|
windowDiv.style.zIndex = zIndex
|
|
|
|
|
|
|
|
|
2023-11-03 13:25:39 +00:00
|
|
|
// Enregistrez la position de la souris par rapport à la fenêtre
|
|
|
|
offsetX = e.clientX - windowDiv.getBoundingClientRect().left;
|
|
|
|
offsetY = e.clientY - windowDiv.getBoundingClientRect().top;
|
|
|
|
});
|
|
|
|
|
|
|
|
// Gérer le déplacement
|
|
|
|
document.addEventListener('mousemove', (e) => {
|
|
|
|
if (isDragging) {
|
|
|
|
|
|
|
|
header.style.cursor = "grab"
|
|
|
|
|
|
|
|
// Calculez la nouvelle position de la fenêtre en fonction de la position de la souris
|
|
|
|
const newLeft = e.clientX - offsetX;
|
|
|
|
const newTop = e.clientY - offsetY;
|
|
|
|
|
|
|
|
// Limitation de la position pour éviter un débordement
|
|
|
|
const maxX = window.innerWidth - windowDiv.offsetWidth;
|
|
|
|
const maxY = window.innerHeight - windowDiv.offsetHeight;
|
|
|
|
|
|
|
|
windowDiv.style.left = Math.min(Math.max(newLeft, 0), maxX) + 'px';
|
|
|
|
windowDiv.style.top = Math.min(Math.max(newTop, 0), maxY) + 'px';
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// Gérer la fin du glisser-déposer
|
|
|
|
document.addEventListener('mouseup', () => {
|
|
|
|
header.style.cursor = "unset"
|
|
|
|
isDragging = false;
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
this.ViewItem.show()
|
|
|
|
|
2023-11-03 13:25:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
destroy() {
|
|
|
|
const win = getID(`${this.ViewProperties.title}_window`)
|
2023-11-03 21:21:21 +00:00
|
|
|
win.outerHTML = " "
|
2023-11-28 20:05:44 +00:00
|
|
|
AllViews.delete(this.ViewProperties.title)
|
|
|
|
this.ViewItem.hide()
|
2023-11-03 13:25:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
setContent(text) {
|
|
|
|
const contentDiv = document.getElementById(this.ViewProperties.title + "_content")
|
|
|
|
contentDiv.innerHTML = text
|
|
|
|
}
|
|
|
|
|
|
|
|
getViewTitle() {
|
|
|
|
|
|
|
|
return this.ViewProperties.title
|
|
|
|
}
|
|
|
|
|
2023-11-03 21:21:21 +00:00
|
|
|
|
|
|
|
|
|
|
|
createPopup(properties) {
|
|
|
|
|
2023-11-04 13:50:28 +00:00
|
|
|
this.ViewPopupHTML = `<div id="${properties.title}_popup" class='view-popup'>
|
2023-11-03 21:21:21 +00:00
|
|
|
<div class='view-popup-bar'>
|
|
|
|
<p>${properties.title}</p>
|
2023-11-04 13:50:28 +00:00
|
|
|
<span id="${properties.title}_popupClose" class='btn-cover'><i class='fa fa-xmark'></i></span>
|
2023-11-03 21:21:21 +00:00
|
|
|
</div>
|
|
|
|
${properties.content}
|
|
|
|
</div>`
|
|
|
|
|
|
|
|
const contentDiv = getID(this.ViewProperties.title + "_content")
|
|
|
|
const popupDiv = getID(this.ViewProperties.title + "_popupDiv")
|
|
|
|
this.ViewPopupSpanInteger = document.createElement("div")
|
|
|
|
popupDiv.appendChild(this.ViewPopupSpanInteger);
|
|
|
|
this.ViewPopupSpanInteger.outerHTML = this.ViewPopupHTML
|
|
|
|
|
|
|
|
this.ViewPopupTitle = properties.title
|
|
|
|
|
|
|
|
const popup = getID(properties.title + "_popup")
|
|
|
|
const popupClose = getID(properties.title + "_popupClose")
|
|
|
|
|
|
|
|
popupClose.addEventListener("click", () => {
|
|
|
|
|
|
|
|
this.destroyPopup()
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
// Center the popup to the window div
|
|
|
|
|
|
|
|
popup.style.left = (contentDiv.offsetWidth / 2) - (popup.offsetWidth / 2) + "px"
|
|
|
|
popup.style.top = (contentDiv.offsetHeight / 2) - (popup.offsetHeight / 2) + "px"
|
|
|
|
|
|
|
|
// Render parent element styled blur
|
|
|
|
contentDiv.classList.add("blur")
|
|
|
|
|
|
|
|
// Disable all interractions like click and events with contentDiv children
|
|
|
|
|
|
|
|
for(var child of contentDiv.children) {
|
|
|
|
|
|
|
|
child.style.pointerEvents = "none"
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
destroyPopup() {
|
|
|
|
|
|
|
|
const popup = getID(this.ViewPopupTitle + "_popup")
|
2023-11-28 20:05:44 +00:00
|
|
|
|
|
|
|
if(popup) {
|
|
|
|
const contentDiv = getID(this.ViewProperties.title + "_content")
|
|
|
|
for(var child of contentDiv.children) {
|
2023-11-03 21:21:21 +00:00
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
child.style.pointerEvents = "unset"
|
|
|
|
}
|
|
|
|
contentDiv.classList.remove("blur")
|
|
|
|
|
|
|
|
|
|
|
|
popup.outerHTML = ""
|
|
|
|
|
|
|
|
}
|
|
|
|
|
2023-11-03 21:21:21 +00:00
|
|
|
}
|
|
|
|
|
2023-11-03 13:25:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
var AllComponents = new Array()
|
2023-11-03 13:25:39 +00:00
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
/**
|
|
|
|
* Permet de créer un composant de vue
|
|
|
|
* @param {object} properties Propriétés du composant de vue
|
|
|
|
*/
|
|
|
|
class ViewComponent {
|
|
|
|
name;
|
|
|
|
icon;
|
|
|
|
permission;
|
|
|
|
window;
|
|
|
|
constructor (properties) {
|
|
|
|
this.name = properties.name
|
|
|
|
this.icon = properties.icon
|
|
|
|
this.permission = properties.permission
|
|
|
|
|
|
|
|
AllComponents.push(this)
|
2023-11-03 13:25:39 +00:00
|
|
|
}
|
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
inject(array) {
|
|
|
|
|
|
|
|
array.push(`<div id='${this.name}' class='view'>
|
|
|
|
<span class='view-image'><i class='${this.icon}'></i></span>
|
|
|
|
<p class='view-text'>${this.name}</p>
|
|
|
|
</div>`)
|
|
|
|
|
|
|
|
|
2023-11-05 11:12:18 +00:00
|
|
|
}
|
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
createWindow(functionToExecute) {
|
|
|
|
|
|
|
|
this.window = functionToExecute
|
2023-11-03 13:25:39 +00:00
|
|
|
}
|
2023-11-28 20:05:44 +00:00
|
|
|
|
|
|
|
bindView() {
|
|
|
|
|
|
|
|
const component = getID(this.name)
|
|
|
|
if(component) {
|
|
|
|
component.addEventListener("click", () => {
|
|
|
|
console.log(component)
|
|
|
|
if(this.window) {
|
|
|
|
this.window()
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
forceWindow() {
|
|
|
|
|
|
|
|
if(this.window) {
|
|
|
|
this.window()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
2023-11-03 13:25:39 +00:00
|
|
|
}
|
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
/**
|
|
|
|
* Permet de créer un menu déroulant
|
|
|
|
* @param {object} properties Propriétés du menu déroulant
|
|
|
|
*/
|
|
|
|
|
2023-11-03 13:25:39 +00:00
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
var ActualDroppableMenu = null
|
2023-11-03 13:25:39 +00:00
|
|
|
class DroppableMenu {
|
|
|
|
options = new Array()
|
|
|
|
id = null
|
|
|
|
DMSpanInteger = null
|
2023-11-28 20:05:44 +00:00
|
|
|
#enableHide = false
|
|
|
|
constructor() {
|
2023-11-03 13:25:39 +00:00
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
this.id = Math.random().toString(36).substring(7)
|
2023-11-03 13:25:39 +00:00
|
|
|
this.options.push(`<div id='dm-${this.id}' class='dm-menu'>`)
|
2023-11-28 20:05:44 +00:00
|
|
|
|
2023-11-03 13:25:39 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
add(action, string) {
|
|
|
|
|
|
|
|
this.options.push("<div id='" + this.id + "_" + action + "' class='dm-element'>" + string + "</div>")
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
show() {
|
2023-11-28 20:05:44 +00:00
|
|
|
console.log("DROPPABLE MENU - " + this.id)
|
|
|
|
if(ActualDroppableMenu) {
|
|
|
|
ActualDroppableMenu.hide()
|
|
|
|
}
|
|
|
|
ActualDroppableMenu = this
|
|
|
|
|
2023-11-03 13:25:39 +00:00
|
|
|
this.options.push(`</div>`)
|
|
|
|
|
|
|
|
if(xMousePos && yMousePos) {
|
2023-11-28 20:05:44 +00:00
|
|
|
|
2023-11-03 13:25:39 +00:00
|
|
|
this.DMSpanInteger = document.createElement("span")
|
2023-11-28 20:05:44 +00:00
|
|
|
|
2023-11-03 13:25:39 +00:00
|
|
|
document.body.appendChild(this.DMSpanInteger);
|
|
|
|
this.DMSpanInteger.outerHTML = this.options.join('')
|
|
|
|
|
|
|
|
const menu = getID(`dm-${this.id}`)
|
2023-11-03 21:21:21 +00:00
|
|
|
|
|
|
|
menu.style.zIndex = zIndex + 2
|
|
|
|
zIndex+=1
|
|
|
|
|
2023-11-03 13:25:39 +00:00
|
|
|
menu.style.left = (xMousePos - 40) + "px"
|
|
|
|
menu.style.top = (yMousePos - 40) + "px"
|
2023-11-28 20:05:44 +00:00
|
|
|
|
2023-11-03 13:25:39 +00:00
|
|
|
}
|
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
this.#enableHide = false
|
2023-11-03 13:25:39 +00:00
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
document.addEventListener("click", () => {
|
|
|
|
|
|
|
|
this.hide()
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
2023-11-03 13:25:39 +00:00
|
|
|
}
|
|
|
|
|
2023-11-03 21:21:21 +00:00
|
|
|
get(action) {
|
|
|
|
|
|
|
|
return getID(this.id + "_" + action)
|
|
|
|
}
|
|
|
|
|
|
|
|
hide() {
|
2023-11-28 20:05:44 +00:00
|
|
|
|
2023-11-03 21:21:21 +00:00
|
|
|
const menu = getID(`dm-${this.id}`)
|
2023-11-28 20:05:44 +00:00
|
|
|
if(menu) {
|
|
|
|
menu.outerHTML = ""
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Permet de créer un composant de type "Serveur"
|
|
|
|
*/
|
|
|
|
class Server {
|
|
|
|
constructor(properties) {
|
|
|
|
this.name = properties.name
|
|
|
|
this.description = properties.description
|
|
|
|
this.icon = properties.icon
|
|
|
|
}
|
|
|
|
|
|
|
|
generateHTML() {
|
|
|
|
return `
|
|
|
|
<div class="servers-box">
|
|
|
|
<div class="servers-box-title">
|
|
|
|
<div class='servers-box-title-info'>
|
|
|
|
<i class='${this.icon}'></i>
|
|
|
|
<p>${this.name}</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<p style='font-size: 12px;'>${this.description}</p>
|
|
|
|
</div>
|
|
|
|
<div class="servers-box-content">
|
|
|
|
<div class='servers-metrics'>
|
|
|
|
<div class='servers-metrics-box'>
|
|
|
|
<div>
|
|
|
|
<i class='fa-solid fa-memory'></i>
|
|
|
|
<p>RAM</p>
|
|
|
|
</div>
|
|
|
|
<p id='${this.name}_ram'>-- Mo / -- Mo</p>
|
|
|
|
</div>
|
|
|
|
<div class='servers-metrics-box'>
|
|
|
|
<div>
|
|
|
|
<i class='fa-solid fa-microchip'></i>
|
|
|
|
<p>CPU</p>
|
|
|
|
</div>
|
|
|
|
<p id='${this.name}_cpu'>---%</p>
|
|
|
|
</div>
|
|
|
|
<div class='servers-metrics-box'>
|
|
|
|
<div>
|
|
|
|
<i class='fa-solid fa-hdd'></i>
|
|
|
|
<p>DISK</p>
|
|
|
|
</div>
|
|
|
|
<p id='${this.name}_disk'>-- Go / -- Go</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
`
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
loadScript() {
|
|
|
|
|
|
|
|
const ramSpan = getID(`${this.name}_ram`)
|
|
|
|
const cpuSpan = getID(`${this.name}_cpu`)
|
|
|
|
const diskSpan = getID(`${this.name}_disk`)
|
|
|
|
|
|
|
|
|
|
|
|
setInterval(() => {
|
|
|
|
|
|
|
|
if(getID(`${this.name}_ram`)) {
|
|
|
|
|
|
|
|
const request = post(`SERVER_GET_METRICS_` + this.name, this.name )
|
|
|
|
console.log(this.name)
|
|
|
|
|
|
|
|
|
|
|
|
request.then((answer) => {
|
|
|
|
console.log(answer)
|
|
|
|
console.log(this.name)
|
|
|
|
//Transform all metrics in mb to answer.metrics to Go or %
|
|
|
|
answer.metrics.usedram = Math.round(answer.metrics.usedram)
|
|
|
|
answer.metrics.totalram = Math.round(answer.metrics.totalram)
|
|
|
|
|
|
|
|
//Transform all metrics in blocks to Go
|
|
|
|
answer.metrics.usedisk = Math.round((answer.metrics.usedisk * 3.814697265625) / 1000000)
|
|
|
|
answer.metrics.totaldisk = Math.round((answer.metrics.totaldisk * 3.814697265625) / 1000000)
|
|
|
|
|
|
|
|
if(answer.metrics.name == this.name) {
|
|
|
|
ramSpan.innerHTML = `${answer.metrics.usedram} Mo / ${answer.metrics.totalram} Mo`
|
|
|
|
cpuSpan.innerHTML = answer.metrics.cpu + "%"
|
|
|
|
diskSpan.innerHTML = `${answer.metrics.usedisk} Go / ${answer.metrics.totaldisk} Go`
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
}
|
2023-11-03 21:21:21 +00:00
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
|
|
|
|
|
|
|
|
}, 1000)
|
|
|
|
|
|
|
|
|
2023-11-03 21:21:21 +00:00
|
|
|
}
|
2023-11-03 13:25:39 +00:00
|
|
|
}
|
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
/**
|
|
|
|
* Créer un composant de vue de type "Service"
|
|
|
|
* @param {object} properties Propriétés du composant de vue
|
|
|
|
*/
|
|
|
|
class Service {
|
|
|
|
name = null
|
|
|
|
description = null
|
|
|
|
icon = null
|
|
|
|
url = null
|
|
|
|
canAccess = false
|
|
|
|
isOnline = false
|
|
|
|
constructor(properties) {
|
|
|
|
this.name = properties.name
|
|
|
|
this.description = properties.description
|
|
|
|
this.icon = properties.icon
|
|
|
|
this.url = properties.url
|
|
|
|
this.canAccess = properties.canAccess
|
|
|
|
}
|
2023-11-03 13:25:39 +00:00
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
generateHTML() {
|
|
|
|
return `
|
|
|
|
<div class="sv">
|
|
|
|
<div class='sv-info'>
|
|
|
|
<img class="sv-icon" src="${this.icon}" alt="${this.name}">
|
|
|
|
<div>
|
|
|
|
<h1>${this.name}</h1>
|
|
|
|
<p>${this.description}</p>
|
|
|
|
<p>Etat : <span id='${this.name}_status' class="sv-status">Vérification en cours ...</span></p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="sv-actions">
|
|
|
|
${this.canAccess ? `<a href="${this.url}" target="_blank"><button class="btn green"><span>Accéder au service</span></button></a>` : ""}
|
|
|
|
<button id='${this.name}_svpower' class='btn yellow'n><span>Options d'alimentation<span></button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
`
|
2023-11-03 13:25:39 +00:00
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
|
|
|
|
}
|
2023-11-03 13:25:39 +00:00
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
loadScript() {
|
2023-11-03 13:25:39 +00:00
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
const statusSpan = getID(`${this.name}_status`)
|
|
|
|
const request = post(`SV_GET_SERVICE_STATUS`, this.url)
|
|
|
|
|
|
|
|
|
|
|
|
request.then((answer) => {
|
|
|
|
if(answer.name == this.url) {
|
|
|
|
if(answer.answer == "ONLINE") {
|
|
|
|
statusSpan.innerHTML = '<span style="font-size: 12px;"><i class="fa-solid fa-circle green"></i> En ligne</span>'
|
|
|
|
this.isOnline = true
|
|
|
|
} else {
|
|
|
|
statusSpan.innerHTML = '<span style="font-size: 12px;"><i class="fa-solid fa-circle red"></i> Hors ligne</span>'
|
|
|
|
|
|
|
|
}
|
|
|
|
resolve("LOADED")
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
2023-11-03 13:25:39 +00:00
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
const powerButton = getID(`${this.name}_svpower`)
|
2023-11-03 13:25:39 +00:00
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
// Make a popup of View to select if you want to start, stop or restart the service by doing a request
|
2023-11-03 13:25:39 +00:00
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
powerButton.addEventListener("click", () => {
|
|
|
|
View.createPopup({
|
|
|
|
title: `<i class='fa-solid fa-power-off'></i> Gestion de l'alimentation du service`,
|
|
|
|
content: `
|
|
|
|
|
|
|
|
<p class='sv-power-select'>${this.name}</p>
|
|
|
|
<p id='sv-power-info'></p>
|
|
|
|
<div class="sv-power">
|
|
|
|
<button id="${this.name}_start" class="btn green"><span>Démarrer</span></button>
|
|
|
|
<button id="${this.name}_restart" class="btn yellow"><span>Redémarrer</span></button>
|
|
|
|
<button id="${this.name}_stop" class="btn red"><span> Arrêter</span></button>
|
|
|
|
</div>
|
|
|
|
`
|
|
|
|
})
|
|
|
|
|
|
|
|
const startButton = getID(`${this.name}_start`)
|
|
|
|
const stopButton = getID(`${this.name}_stop`)
|
|
|
|
const restartButton = getID(`${this.name}_restart`)
|
|
|
|
const info = new InfoPop("sv-power-info")
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if(this.isOnline) {
|
|
|
|
startButton.style.display = "none"
|
|
|
|
info.info("Verifiez que le service n'est pas utilisé par quelqu'un d'autre avant de le redémarrer ou de l'arrêter")
|
|
|
|
} else {
|
|
|
|
stopButton.style.display = "none"
|
|
|
|
restartButton.style.display = "none"
|
|
|
|
info.info("Si le service ne démarre pas, vérifiez l'intégrité du service")
|
|
|
|
}
|
|
|
|
|
|
|
|
startButton.addEventListener("click", () => {
|
|
|
|
const request = post(`SV_START_SERVICE`, this.url)
|
|
|
|
|
|
|
|
|
|
|
|
request.then((answer) => {
|
|
|
|
if(answer.answer == "OK") {
|
|
|
|
statusSpan.innerHTML = '<span style="font-size: 12px;"><i class="fa-solid fa-circle green"></i> En ligne</span>'
|
|
|
|
View.destroyPopup("`<i class='fa-solid fa-power-off'></i> Gestion de l'alimentation du service`")
|
|
|
|
this.isOnline = true
|
|
|
|
} else {
|
|
|
|
info.err("Impossible de démarrer le service")
|
|
|
|
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
stopButton.addEventListener("click", () => {
|
|
|
|
const request = post(`SV_STOP_SERVICE`, this.url)
|
|
|
|
|
|
|
|
request.then((answer) => {
|
|
|
|
if(answer.answer == "OK") {
|
|
|
|
statusSpan.innerHTML = '<span style="font-size: 12px;"><i class="fa-solid fa-circle red"></i> Hors ligne</span>'
|
|
|
|
this.isOnline = false
|
|
|
|
View.destroyPopup("`<i class='fa-solid fa-power-off'></i> Gestion de l'alimentation du service`")
|
|
|
|
|
|
|
|
} else {
|
|
|
|
info.err("Impossible d'arrêter le service")
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
restartButton.addEventListener("click", () => {
|
|
|
|
|
|
|
|
console.log("RESTART")
|
|
|
|
|
|
|
|
const request = post(`SV_RESTART_SERVICE`, this.url)
|
|
|
|
|
|
|
|
request.then((answer) => {
|
|
|
|
if(answer.answer == "OK") {
|
|
|
|
statusSpan.innerHTML = '<span style="font-size: 12px;"><i class="fa-solid fa-circle green"></i> En ligne</span>'
|
|
|
|
View.destroyPopup("`<i class='fa-solid fa-power-off'></i> Gestion de l'alimentation du service`")
|
|
|
|
this.isOnline = true
|
|
|
|
} else {
|
|
|
|
info.err("Impossible de redémarrer le service")
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
})
|
2023-11-03 13:25:39 +00:00
|
|
|
}
|
2023-11-28 20:05:44 +00:00
|
|
|
|
|
|
|
}
|
2023-11-03 13:25:39 +00:00
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Permet de créer un item de la barre des tâches
|
|
|
|
* @param {ViewWindow} window ViewWindow associé à l'item
|
|
|
|
*/
|
|
|
|
class ViewItem {
|
|
|
|
/**
|
|
|
|
*
|
|
|
|
* @param {ViewWindow} window
|
|
|
|
*/
|
|
|
|
constructor(window) {
|
|
|
|
this.window = window
|
2023-11-03 13:25:39 +00:00
|
|
|
}
|
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
show() {
|
|
|
|
const viewItems = getID("views-items")
|
|
|
|
|
|
|
|
const item = document.createElement("div")
|
|
|
|
item.id = `${this.window.ViewProperties.title}_item`
|
|
|
|
item.classList.add("view-item")
|
|
|
|
item.innerHTML = this.window.ViewProperties.title
|
|
|
|
|
|
|
|
viewItems.appendChild(item)
|
|
|
|
|
|
|
|
item.addEventListener("click", () => {
|
|
|
|
zIndex+=1
|
|
|
|
this.window.ViewWindowDiv.style.zIndex = zIndex + 1
|
|
|
|
this.window.ViewWindowDiv.style.display = "unset"
|
|
|
|
})
|
|
|
|
|
|
|
|
item.addEventListener("contextmenu", () => {
|
|
|
|
const dp = new DroppableMenu()
|
|
|
|
|
|
|
|
dp.add("index", `<i class='fa fa-window-restore'></i> Afficher`)
|
|
|
|
dp.add("close", `<span class='menu-signout'><i class='fa fa-xmark'></i> Fermer</span>`)
|
|
|
|
dp.show()
|
|
|
|
|
|
|
|
const index = dp.get("index")
|
|
|
|
const close = dp.get("close")
|
|
|
|
|
|
|
|
index.addEventListener("click", () => {
|
|
|
|
zIndex+=1
|
|
|
|
this.window.ViewWindowDiv.style.display = "unset"
|
|
|
|
this.window.ViewWindowDiv.style.zIndex = zIndex + 1
|
|
|
|
dp.hide()
|
|
|
|
})
|
|
|
|
|
|
|
|
close.addEventListener("click", () => {
|
|
|
|
this.window.destroy()
|
|
|
|
dp.hide()
|
|
|
|
})
|
|
|
|
|
|
|
|
})
|
|
|
|
|
2023-11-03 13:25:39 +00:00
|
|
|
}
|
2023-11-28 20:05:44 +00:00
|
|
|
|
|
|
|
hide() {
|
|
|
|
const viewItems = getID("views-items")
|
|
|
|
const item = getID(`${this.window.ViewProperties.title}_item`)
|
2023-11-03 13:25:39 +00:00
|
|
|
|
2023-11-28 20:05:44 +00:00
|
|
|
item.outerHTML = ""
|
2023-11-03 13:25:39 +00:00
|
|
|
}
|
2023-11-28 20:05:44 +00:00
|
|
|
|
|
|
|
}
|
2023-11-03 13:25:39 +00:00
|
|
|
|