Strona główna Odkrywaj Pomoc
Zaloguj się
emil
/
LED-web
1
0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Przeglądaj źródła

Can choose shelves. TODO: Everything

Emil 3 lat temu
rodzic
31e9199f72
commit
e6735eaf11
5 zmienionych plików z 95 dodań i 16 usunięć
Zunifikowany widok Pokaż statystyki zmian
  1. 4 0
      css/nav.css
  2. 24 3
      css/spotlight.css
  3. 53 0
      js/spotlight.js
  4. 0 0
      res/spotlights.json
  5. 14 13
      spotlights.html

+ 4 - 0
css/nav.css
Wyświetl plik 

@@ -79,4 +79,8 @@ body {
 
 
 
 .sideBar a:hover {
 
 .sideBar a:hover {
 
     background-color: #252531;
 
     background-color: #252531;
 
+}
 
+
 
+.hidden {
 
+    display: none !important;
 
 }
 
 }

+ 24 - 3
css/spotlight.css
Wyświetl plik 

@@ -82,17 +82,38 @@
 
     border: none;
 
     border: none;
 
 }
 
 }
 
 
 
-#spotlightContainer button {
 
+#makeCluster {
 
+    grid-row: 1/2;
 
+    grid-column: 3/4;
 
+    border: none;
 
+    padding: 10px;
 
+    height: min-content;
 
+    font-size: 1.5vw;
 
+    color: white;
 
+    background-color: #252531;
 
+    border-radius: 10px;
 
+}
 
+
 
+#makeCluster:hover {
 
+    background-color: #2f2f3d;
 
+}
 
+
 
+.shelfButton {
 
     background-color: #2c2c36;
 
     background-color: #2c2c36;
 
+    font-size: 1.5vw;
 
+    color: white;
 
+    font-family: 'Raleway', sans-serif;
 
 }
 
 }
 
 
 
-#spotlightContainer button:hover {
 
+.shelfButton:hover {
 
     background-color: #2f2f3d;
 
     background-color: #2f2f3d;
 
     border-radius: 10px;
 
     border-radius: 10px;
 
 }
 
 }
 
 
 
-#selected {
 
+.selected {
 
     background-color: #a8a9b4 !important;
 
     background-color: #a8a9b4 !important;
 
+    margin: 5px;
 
+    border-radius: 10px;
 
 }
 
 }

+ 53 - 0
js/spotlight.js
Wyświetl plik 

@@ -1 +1,54 @@
 
 const shelfGrid = document.getElementById("shelfButtonContainer")
 
 const shelfGrid = document.getElementById("shelfButtonContainer")
 
+const makeClusterButton = document.getElementById("makeCluster")
 
+
 
+let clusters = Array()
 
+let chosenShelves = Array()
 
+
 
+function getEByID(id) {
 
+    return document.getElementById(id)
 
+}
 
+
 
+function shelfClick(id) {
 
+    const clickedShelf = getEByID("b" + id.toString())
 
+
 
+    if (!clusters.flat(1).includes(id)) { //If not id in clusters
 
+        if (chosenShelves.includes(id)) { //If id in chosenShelves
 
+            chosenShelves = chosenShelves.filter(e => {
 
+                return e !== id;
 
+            })
 
+            clickedShelf.classList.remove("selected")
 
+            clickedShelf.innerText = ""
 
+        } else { //Else (if id not in chosenShelves
 
+            chosenShelves.push(id)
 
+            clickedShelf.classList.add("selected")
 
+        }
 
+    }
 
+
 
+    chosenShelves.forEach((id, num) => {
 
+        getEByID("b" + id.toString()).innerText = (num + 1).toString()
 
+    })
 
+
 
+
 
+    if (chosenShelves.length > 0) {
 
+        makeClusterButton.classList.remove("hidden")
 
+    } else {
 
+        makeClusterButton.classList.add("hidden")
 
+    }
 
+}
 
+
 
+
 
+function unselectAll() {
 
+    chosenShelves.forEach(id => {
 
+        getEByID("b" + id.toString()).innerText = ""
 
+        getEByID("b" + id.toString()).classList.remove("selected")
 
+    })
 
+    chosenShelves = Array()
 
+    makeClusterButton.classList.add("hidden")
 
+}
 
+
 
+window.onkeydown = function(event) {
 
+    if (event.key === "Escape") {
 
+        unselectAll()
 
+    }
 
+}
 
+

+ 0 - 0
res/spotlights.json
Wyświetl plik


+ 14 - 13
spotlights.html
Wyświetl plik 

@@ -1,5 +1,5 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
-<html lang="se">
 
+<html lang="sv">
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <title>RGB Hub</title>
 
     <title>RGB Hub</title>
 
@@ -32,16 +32,17 @@
 
     <div id="spotlightContainer">
 
     <div id="spotlightContainer">
 
         <h2>Spotlight</h2>
 
         <h2>Spotlight</h2>
 
         <div id="shelfButtonContainer">
 
         <div id="shelfButtonContainer">
 
-            <button id="b0"></button>
 
-            <button id="b1"></button>
 
-            <button id="b2"></button>
 
-            <button id="b3"></button>
 
-            <button id="b4"></button>
 
-            <button id="b5"></button>
 
-            <button id="b6"></button>
 
-            <button id="b7"></button>
 
-            <button id="b8"></button>
 
-            <button id="b9"></button>
 
+            <button id="b0" class="shelfButton" onclick="shelfClick(0)"></button>
 
+            <button id="b1" class="shelfButton" onclick="shelfClick(1)"></button>
 
+            <button id="b2" class="shelfButton" onclick="shelfClick(2)"></button>
 
+            <button id="b3" class="shelfButton" onclick="shelfClick(3)"></button>
 
+            <button id="b4" class="shelfButton" onclick="shelfClick(4)"></button>
 
+            <button id="b5" class="shelfButton" onclick="shelfClick(5)"></button>
 
+            <button id="b6" class="shelfButton" onclick="shelfClick(6)"></button>
 
+            <button id="b7" class="shelfButton" onclick="shelfClick(7)"></button>
 
+            <button id="b8" class="shelfButton" onclick="shelfClick(8)"></button>
 
+            <button id="b9" class="shelfButton" onclick="shelfClick(9)"></button>
 
+            <button id="makeCluster" class="hidden">Skapa kluster</button>
 
         </div>
 
         </div>
 
 
 
         <div id="spotlightSettingsContainer">
 
         <div id="spotlightSettingsContainer">
 
@@ -55,11 +56,11 @@
 
             <input type="number" class="var1Input">
 
             <input type="number" class="var1Input">
 
             <p class="var2Input">{var2Name}</p>
 
             <p class="var2Input">{var2Name}</p>
 
             <input type="number" class="var2Input">
 
             <input type="number" class="var2Input">
 
-            <p class="speedInput">Speed (MS)</p>
 
+            <p class="speedInput">Hastighet (MS)</p>
 
             <input type="number" class="speedInput">
 
             <input type="number" class="speedInput">
 
             <button id="deleteCluster"><span class="material-symbols-outlined">delete</span></button>
 
             <button id="deleteCluster"><span class="material-symbols-outlined">delete</span></button>
 
             <div id="clusters">
 
             <div id="clusters">
 
-                <button>Sync</button>
 
+                <button>Synk</button>
 
             </div>
 
             </div>
 
         </div>
 
         </div>