Version 0.2.0 - PREVERSION - Ajout de certaines fonctionnalités

public/javascripts/basics.js

@@ -1,10 +1,18 @@
 // Get Document ID
 
-function getID(string) {
+/**
+ * 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(string)
+    return document.getElementById(id)
 }
 
+/**
+ * Permet de faire une pop-up automatique
+ */
 class InfoPop {
     constructor(name) {
         this.name = name
@@ -33,4 +41,5 @@ class InfoPop {
         this.element.innerHTML = "<i class='fa fa-info-circle'></i> " + text
     }
 
-}
+}
+

public/javascripts/indexscript.js

@@ -0,0 +1,86 @@
+const infoUsername = getID("infoUsername")
+const infoUserimage = getID("infoUserimage")
+const infoDisplayname = getID("infoDisplayname")
+const views = getID("views")
+
+// User Request
+
+const REQ_user = get("USERINFO")
+
+REQ_user.then((ANS_user) => {
+    infoUserimage.src = ANS_user.picture
+    infoUsername.innerHTML = ANS_user.username
+    infoDisplayname.innerHTML = ANS_user.display_name
+
+    const permissions = ANS_user.permission
+
+    const AvailableViews = new Array()
+
+    permissions.forEach((permValue) => {
+        
+         if(permValue == "FILES_EXPLORER") {
+            AvailableViews.push(`<div class="view">
+            <span class="view-image"><i class="fa-solid fa-folder"></i></span>
+            <p class="view-text">Gestionnaire de fichiers</p>
+        </div>`)
+         }
+         if(permValue == "SERVICES") {
+            AvailableViews.push(`<div class="view">
+            <span class="view-image"><i class="fa-solid fa-layer-group"></i></span>
+            <p class="view-text">Gestion des services</p>
+        </div>`)
+         }
+         if(permValue == "SERVERS") {
+            AvailableViews.push(`<div class="view">
+            <span class="view-image"><i class="fa fa-server"></i></span>
+            <p class="view-text">Gestion des serveurs</p>
+          </div>`)
+         }
+         if(permValue == "PIPELINES") {
+            AvailableViews.push(` <div class="view">
+            <span class="view-image"><i class="fa-brands fa-jenkins"></i></span>
+            <p class="view-text">Gestion des pipelines</p>
+          </div>`)
+         }
+         if(permValue == "METRICS") {
+            AvailableViews.push(` <div class="view">
+            <span class="view-image"><i class="fa-solid fa-square-poll-vertical"></i></span>
+            <p class="view-text">Web Metrics</p>
+          </div>`)
+         }
+         if(permValue == "USERS") {
+            AvailableViews.push(` <div class="view">
+            <span class="view-image"><i class="fa fa-users"></i></span>
+            <p class="view-text">Gestion des utilisateurs</p>
+          </div>`)
+         }
+         if(permValue == "LINKS") {
+            AvailableViews.push(` <div class="view">
+            <span class="view-image"><i class="fa-solid fa-link"></i></span>
+            <p class="view-text">Générateur de lien</p>
+          </div>`)
+         }
+         if(permValue == "SETTINGS") {
+            AvailableViews.push(` <div class="view">
+            <span class="view-image"><i class="fa fa-gear"></i></span>
+            <p class="view-text">Paramètres</p>
+          </div>`)
+         }
+
+        
+    })
+    
+
+    if(AvailableViews.join("") == "") {
+
+        AvailableViews.push("<p class='yellow'><i class='fa-solid fa-warning'></i> Aucune permission ne semble vous êtes accordée<br>Demandez à Raphix afin de résoudre ce problème</p>")
+        views.classList.remove("views-box")
+    } else {
+
+        views.classList.add("views-box")
+    }
+
+    views.innerHTML = AvailableViews.join("")
+
+})
+

public/javascripts/io.js

@@ -0,0 +1,42 @@
+// Socket IO - Communication
+
+var socketLink = null
+
+fetch('/internal/socketlink', {
+    method: "GET"
+}).then(link => {socketLink = link})
+
+const socket = io(socketLink);
+
+socket.on("connect", () => {
+    console.log("Connecté au serveur par le Socket avec l'ID : " + socket.id)
+});
+
+socket.on("disconnect", () => {
+
+    window.location.href = "/"
+})
+
+function get(request) {
+
+    return new Promise((resolve, reject) => {
+
+        socket.emit("GET/" + request)
+        console.log("Envoi de la requête GET : " + request)
+        
+        socket.once("ANSWER/GET/" + request, (answer) => {
+            
+            console.log("Réponse pour la requête : " + request)
+       
+            resolve(answer)
+                    
+        })
+        
+    })
+    
+}
+
+function getSocket() {
+
+    return socket
+}

public/stylesheets/style.css

@@ -85,6 +85,10 @@ html {
   color: #f01000!important; 
 }
 
+.lightred {
+  color: #ff5d51 !important;
+}
+
 .blue {
 
   color: rgb(66, 242, 255) !important;
@@ -251,6 +255,65 @@ a {
   background-color: #605e5863;
 }
 
+.panel-box {
+
+  width: 900px;
+  height: 500px;
+  border-radius: 0.5vw;
+  display: flex;
+  padding: 2%;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: #605e5863;
+  gap: 50px;
+}
+
+.subpanel-box {
+
+  width: 900px;
+  height: 50px;
+  border-radius: 0.5vw;
+  padding: 2%;
+  display: flex;
+  justify-content: space-between;
+  background-color: #605e5863;
+}
+
+.subpanel-image {
+
+  width: 50px;
+  height: 50px;
+  border-radius: 100%;
+}
+
+.subpanel-user {
+
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+}
+
+.subpanel-userinfo {
+  text-align: start;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.subpanel-username {
+
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.68);
+  margin-block: 0 !important;
+}
+
+
+.subpanel-dispname {
+
+  margin-block: 0 !important;
+}
+
 .m-align {
 
     margin-right: auto !important;
@@ -274,9 +337,71 @@ a {
 .LOG_body {
 
     display: flex;
+    flex-direction: column;
     justify-content: center;
+    gap: 10px;
     align-items: center;
     height: 100vh;
     padding: 0 !important;
     margin: 0 !important;
+}
+
+/*INDEX Specs*/
+
+@media (max-width: 640px) {
+
+  .views-box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+  
+  }
+  
+  
+} 
+
+@media (min-width: 640px) {
+
+  .views-box {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    grid-column-gap: 10px;
+    grid-row-gap: 10px;
+  
+  }
+  
+
+}
+
+
+.view {
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+  -webkit-user-select: none;
+  transition: 0.1s;
+
+}
+
+.view:hover {
+
+  cursor: pointer;
+  color: #ff5d51;
+  text-shadow: 0px 3px 2px #070607;
+}
+.view:active {
+
+  cursor: pointer;
+  color: #ff5d5194;
+}
+
+.view-image {
+
+  font-size: 72px;
 }