Version 2.1.0 - Modification graphique

.gitea/workflows/pipeline.yml

@@ -0,0 +1,22 @@
+name: Subsonics Deployment
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+      
+    - name: Update and upgrade server
+      run: |
+        ssh raphix@raphix.fr sudo apt update -y
+        ssh raphix@raphix.fr sudo apt upgrade -y
+
+    - name: Run deployment script
+      run: ssh raphix@raphix.fr sudo -S -u gitlab-ci /home/gitlab-ci/subsonics_deploy.sh

Jenkinsfile

@@ -1,20 +0,0 @@
-pipeline {
-    agent any
-
-    stages {
-        stage('[Subsonics] - Déploiement') {
-            steps {
-                script {
-    
-                    echo "[Subsonics-Deploy] - Deploy Stage"
-                    sh "ssh raphix@raphix.fr sudo apt update -y"
-                    sh "ssh raphix@raphix.fr sudo apt upgrade -y"
-                    sh "ssh raphix@raphix.fr sudo -S -u gitlab-ci /home/gitlab-ci/subsonics_deploy.sh"
-                   
-                              
-                }
-                
-            }
-        }
-    }
-}

data/users.json

@@ -334,7 +334,8 @@
     "token": "0adeb1bf-c4a9-4d39-b40c-bc844cd50f2d",
     "picture": "/userspictures/172437570905571328.png",
     "admin": false,
-    "banned": false
+    "banned": false,
+    "oobe": true
   },
   {
     "auth": {
@@ -482,7 +483,8 @@
       "0a0b75f3-6a42-4ccf-92f9-d992a63545a4",
       "419a246f-e7b3-4aa4-9fa0-816dffc22a19",
       "471c4c81-b8bc-42e7-af1a-d33df30cff2b",
-      "b21fb001-4e6c-4530-81c4-07db0d1ef14d"
+      "b21fb001-4e6c-4530-81c4-07db0d1ef14d",
+      "7cc6807b-616e-4686-bfb2-f0b65dfae896"
     ],
     "picture": "/userspictures/486943594893017119.png",
     "banned": false,

package.json

@@ -1,7 +1,7 @@
 {
   "name": "subsonics-web",
   "author": "Raphix",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "nodemonConfig": {
     "ext": "js, html",
     "ignore": [

src/modules/sub-web.js

@@ -239,6 +239,11 @@ function IOConnection(io) {
              
             })
 
+            GetRequest("CALL_CONNECTED_USER", () => {
+                AlwaysRequest("ALL_CONNECTED_USER", usersOnline)
+                GetAnswer("CALL_CONNECTED_USER", "OK")
+            })
+
             GetRequest('MUSIC_STATE', () => {
                 
                 const data = subplayer.updateMusicState()

src/web/public/javascript/basics.js

@@ -1,3 +1,5 @@
+var actualView = null
+
 function getID(id) {
     return document.getElementById(id);
 }   

src/web/public/javascript/index.js

@@ -1,8 +1,7 @@
 const userImg = getID("user-img")
 const userName = getID("user-name")
 const userId = getID("user-id")
-const website_list = document.getElementById("ousers-list")
+
-const website_list_number = document.getElementById("ousers-number")
 
 AlwaysRequest("UPDATE_SELF", () => {
     initUser()
@@ -21,26 +20,6 @@ function initUser() {
     })
 }
 
-AlwaysRequest("ALL_CONNECTED_USER", (data) => {
-
-        
-        const userToPush = new Array()
-    
-        for(var user of data) {
-       
-           const userC = new User({
-                picture: user.picture,
-                name: user.global_name,
-                id: user.username
-           })
-           userToPush.push(userC.generateHTML())
-    
-        }
-    
-        website_list.innerHTML = userToPush.join("")
-        website_list_number.innerHTML = userToPush.length
-    
-})
 
 const modalError = new ModalComponent({
     title: "Erreur",

src/web/public/javascript/playlist.js

@@ -146,7 +146,7 @@ class PlaylistComponent {
         tileList.push(tile)
 
         playlist.addEventListener("click", () => {
-          
+            actualView = "playlist"
             loadPlaylist(this.id, this.self)
         })
 

src/web/public/javascript/settings.js

@@ -1,3 +1,4 @@
+
 function loadSettingsView(isAdmin) {
 
     const stContent = getID("st-content")
@@ -13,6 +14,7 @@ function loadSettingsView(isAdmin) {
             stNodes.classList.remove("selected")
             stLogs.classList.remove("selected")
             loadUsersView()
+           
         })
     
         stNodes.addEventListener("click", () => {
@@ -21,6 +23,7 @@ function loadSettingsView(isAdmin) {
             stNodes.classList.add("selected")
             stLogs.classList.remove("selected")
             loadNodesView()
+            
         })
     
         stLogs.addEventListener("click", () => {
@@ -29,6 +32,7 @@ function loadSettingsView(isAdmin) {
             stNodes.classList.remove("selected")
             stLogs.classList.add("selected")
             loadLogsView()
+       
         })
 
         stReport.addEventListener("click", () => {
@@ -37,21 +41,24 @@ function loadSettingsView(isAdmin) {
             stNodes.classList.remove("selected")
             stLogs.classList.remove("selected")
             loadReportView()
+          
         })
 
     }
 
     loadReportView()
   
+    
 }
 
 function loadReportView() {
-
+    actualView = "report"
     const stContent = getID("st-content")
 
 
 
     stContent.innerHTML = `
+    <div class="st-contain">
     <div class="st-report">
         <h1 style="
             align-self: start;
@@ -72,10 +79,23 @@ function loadReportView() {
         ">Le tutoriel est une suite de panneaux pour vous aider à utiliser l'interface du bot. Si vous avez des difficultés à utiliser le bot, vous pouvez lancer l'OOBE pour vous aider à comprendre comment l'utiliser. Vous pouvez aussi le lancer pour le fun !</h5>
       
         <button id='oobe-launch' class="report-send"><i class="fa-solid fa-up-right-from-square"></i> Lancer le tutoriel</button>
+        <br>
+        <br>
+        <h1 style="
+        align-self: start;
+        ">Utilisateurs en ligne (<span id="ousers-number"></span>)</h1>
+        <br>
     
+        <div id="ousers-list" class="ousers-list">
+                      
+                        
+        </div>
+   
+    </div>
     </div>
     `
 
+    get("CALL_CONNECTED_USER")
     const reportSend = getID("report-send")
     const oobeLaunch = getID("oobe-launch")
 
@@ -121,7 +141,7 @@ function loadReportView() {
 }
 
 function loadUsersView() {
-    
+    actualView = "users"
         const stContent = getID("st-content")
     
         stContent.innerHTML = `
@@ -161,7 +181,7 @@ function loadUsersView() {
 }
 
 function loadNodesView() {
-    
+    actualView = "nodes"
         const stContent = getID("st-content")
     
         stContent.innerHTML = `
@@ -244,7 +264,7 @@ function loadNodesView() {
 }   
 
 function loadLogsView() {
-    
+    actualView = "logs"
         const stContent = getID("st-content")
     
         stContent.innerHTML = `
@@ -454,3 +474,29 @@ class UserSetting {
        
     }
 }
+
+AlwaysRequest("ALL_CONNECTED_USER", (data) => {
+    if(actualView == "report") {
+        const website_list = document.getElementById("ousers-list")
+        const website_list_number = document.getElementById("ousers-number")
+    
+            
+        const userToPush = new Array()
+        
+        for(var user of data) {
+        
+        const userC = new User({
+            picture: user.picture,
+            name: user.global_name,
+            id: user.username
+        })
+        userToPush.push(userC.generateHTML())
+
+
+        
+        }
+        
+        website_list.innerHTML = userToPush.join("")
+        website_list_number.innerHTML = userToPush.length
+    }
+})

src/web/public/javascript/view.js

@@ -16,6 +16,7 @@ function loadSearch() {
             </div> 
         </div>
     `)
+    actualView = "search"
     loadSearchView()
 
 }
@@ -54,6 +55,8 @@ function loadSettings() {
 
    
 
+
+   
 }
 
 
@@ -70,6 +73,7 @@ tileList.push(settings_icon)
 search_btn.addEventListener("click", () => {  
     loadSearch()
     
+
 })
 
 settings_btn.addEventListener("click", () => {

src/web/public/stylesheets/style.css

@@ -396,7 +396,7 @@ button:hover {
     padding: 20px;
     justify-content: space-around;
     align-items: flex-start;
-    border-radius: 10px;
+    border-radius: 5px;
     background: #2F2F2F;
 }
 
@@ -420,7 +420,7 @@ button:hover {
 .homeselector_icon {
 
     border: 2px solid #ffffff;
-    border-radius: 10px;
+    border-radius: 5px;
     font-size: 23px;
     justify-content: center;
     align-items: center;
@@ -447,7 +447,7 @@ button:hover {
     gap: 20px;
     flex: 1 0 0;
     align-self: stretch;
-    border-radius: 10px;
+    border-radius: 5px;
     background: #2F2F2F;
 
 }
@@ -520,7 +520,7 @@ button:hover {
     flex: 1 0 0;
     align-self: stretch;
     padding: 20px;
-    border-radius: 10px;
+    border-radius: 5px;
     background: rgba(217, 217, 217, 0.30);
 }
 
@@ -542,18 +542,7 @@ button:hover {
 
 /*Online Users */
 
-.ousers {
-    display: flex;
-    padding: 20px;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 10px;
-    align-self: stretch;
-    border-radius: 10px;
-    height: 30%;
-    background: rgba(217, 217, 217, 0.30);
 
-}
 
 .ousers-list {
 
@@ -599,7 +588,7 @@ button:hover {
     flex: 1;
     min-height: 0;
     align-self: stretch;
-    border-radius: 10px;
+    border-radius: 5px;
     background: rgba(217, 217, 217, 0.30);
 
 }
@@ -641,7 +630,7 @@ button:hover {
 
     overflow-y: auto;
     flex: 1;
-    padding-right: 10px;
+    padding-right: 12px;
     gap: 10px;
     width: 100%;
     position: relative;
@@ -1064,7 +1053,7 @@ button:hover {
 .playlist-add {
     background-color: #545454;
     padding: 5px;
-    border-radius: 10px;
+    border-radius: 5px;
     cursor: pointer;
     transition: 0.2s;
     font-size: 14px;
@@ -1108,7 +1097,7 @@ button:hover {
 
     border: 2px solid #ffffff; 
   
-    border-radius: 10px;
+    border-radius: 5px;
     font-size: 20px;
     width: 56px;
     height: 56px;
@@ -1127,7 +1116,7 @@ button:hover {
    
     overflow-y: auto;
     flex: 1;
-    padding-right: 10px;
+    padding-right: 12px;
     gap: 10px;
     width: 100%;
     position: relative;
@@ -1152,6 +1141,8 @@ button:hover {
     align-self: stretch;
     flex: 1;
   
+    
+
 }
 
 .st-content {
@@ -1187,11 +1178,19 @@ button:hover {
 
 }
 
+.st-contain {
+    position: relative;
+    overflow: auto;
+    flex: 1;
+}
+
 .st-report {
  
     gap: 10px;
     align-self: stretch;
-    border-radius: 10px;
+    border-radius: 5px;
+  
+    position: absolute;
 
 
     
@@ -1454,7 +1453,7 @@ button:hover {
     align-items: flex-start;
     align-self: stretch;
     padding: 20px;
-    border-radius: 10px;
+    border-radius: 5px;
     background: rgba(217, 217, 217, 0.30);
     width: 30%;
 
@@ -1491,7 +1490,7 @@ button:hover {
     align-items: flex-start;
     align-self: stretch;
     padding: 20px;
-    border-radius: 10px;
+    border-radius: 5px;
     background: #2F2F2F;
     width: 30%;
 }
@@ -1503,7 +1502,7 @@ button:hover {
     align-items: flex-start;
     align-self: stretch;
     padding: 20px;
-    border-radius: 10px;
+    border-radius: 5px;
     background: #2F2F2F;
 
 }
@@ -1551,7 +1550,7 @@ button:hover {
 .oobe-search {
     background: #2d2d2d;
     padding: 20px;
-    border-radius: 10px;
+    border-radius: 5px;
 }
 
 
@@ -1607,15 +1606,20 @@ input[type="range"] {
   }
 /*Scrollbar */
 ::-webkit-scrollbar {
-    width: 10px;
+    width: 5px;
     margin-right: 20px;
+
   }
 ::-webkit-scrollbar-track {
     border-radius: 12px;
   }
 ::-webkit-scrollbar-thumb {
+    background: #ffffff3f;
+    border-radius: 5px;
+  }
+
+::-webkit-scrollbar-thumb:hover {
     background: #ffffffa8;
-    border-radius: 10px;
   }
   
 
@@ -1626,7 +1630,7 @@ input[type="range"] {
     display: flex;
     flex-direction: column;
     width: 150px;
-    border-radius: 10px;
+    border-radius: 5px;
     z-index: 3;
     height: auto;
   }
@@ -1676,7 +1680,7 @@ input[type="range"] {
     padding: 20px;
     box-shadow: 4px 5px 12px 5px rgba(0,0,0,0.6);
     width: 50%;
-    border-radius: 10px;
+    border-radius: 5px;
     color: #FFF;
   } 
 

src/web/templates/index.ejs

@@ -58,16 +58,7 @@
                 
             </div>
             <div class="view-other">
-                <div class="ousers">
-                    <div class="wintitle">
-                        <p>Utilisateurs en ligne (<span id="ousers-number"></span>)</p>
-                        <i class="fa fa-users"></i>
-                    </div>
-                    <div id="ousers-list" class="ousers-list">
                 
-                        
-                    </div>
-                </div>
                 <div class="list">
                     <div class="wintitle">
                         <p >Liste de lecture</p>