Add deck switch and settings access on index

public/javascripts/index.js

@@ -1,14 +1,15 @@
 const socket = io();
+const deckSelect = document.getElementById("deck-select");
 const deck = document.getElementById("deck");
 
 socket.on("connected", () => {
     console.log("Connected !");
     socket.emit("getDeck");
+    socket.emit("getDecks");
 });
 
 socket.on("getDeck", d => {
     let data = d.data, name = d.name;
-    console.log(name);
     deck.innerHTML = "";
 
     for (let x = 0; x < data.x; x++) {
@@ -27,6 +28,13 @@ socket.on("getDeck", d => {
             setSlot(name, col, x, y);
 });
 
+socket.on("getDecks", data => {
+    deckSelect.innerHTML = "";
+    for (const deck of data)
+        deckSelect.insertAdjacentHTML("beforeend", `<option name="${deck}">${deck}</option>`);
+    M.FormSelect.init(deckSelect);
+});
+
 socket.on("trigger", data => {
     if (data.error)
         alert(data.error)
@@ -37,9 +45,20 @@ socket.on("setSlot", data => {
         setSlot(data.name, data.data, ...data.position)
 });
 
+deckSelect.addEventListener("change", ev => {
+    ev.stopPropagation();
+    socket.emit("getDeck", deckSelect.value);
+});
+
 function setSlot(name, data, x, y) {
     let e = document.getElementById(`r${x}c${y}`);
-    if (e && data) {
+
+    if (e) {
+        let d = document.createElement("div");
+        d.id = e.id;
+        e.replaceWith(d);
+        e = d;
+        if (data) {
             if (data.image)
                 e.insertAdjacentHTML("beforeend", `<img src="${data.image}" alt="${data.text}">`);
             else if (data.text)
@@ -49,9 +68,10 @@ function setSlot(name, data, x, y) {
                 ev.stopPropagation();
                 socket.emit("trigger", [name, x, y]);
             })
-    } else if (e) {
-        let d = document.createElement("div");
-        d.id = e.id;
-        e.replaceWith(d);
+        }
     }
 }
+
+document.addEventListener("DOMContentLoaded", () => {
+    M.AutoInit();
+});

public/javascripts/settings/decks.js

@@ -1,4 +1,5 @@
 const socket = io();
+const deckSelect = document.getElementById("deck-select");
 const deck = document.getElementById("deck");
 const modal = document.getElementById("modal");
 const type = document.getElementById("type");
@@ -11,6 +12,7 @@ let modalInstance, types, slot;
 socket.on("connected", () => {
     console.log("Connected !");
     socket.emit("getDeck");
+    socket.emit("getDecks");
     socket.emit("getType");
 });
 
@@ -45,6 +47,13 @@ socket.on("getDeck", d => {
         }
 });
 
+socket.on("getDecks", data => {
+    deckSelect.innerHTML = "";
+    for (const deck of data)
+        deckSelect.insertAdjacentHTML("beforeend", `<option name="${deck}">${deck}</option>`);
+    M.FormSelect.init(deckSelect);
+});
+
 socket.on("getSlot", data => {
     slot = data;
     customs.innerHTML = "";
@@ -75,14 +84,20 @@ socket.on("setSlot", data => {
     else {
         modalInstance.close();
         let e = document.getElementById(`r${data.position[0]}c${data.position[1]}`);
-        if (e && data.data) {
+        if (e) {
+            e.innerHTML = "";
+            if (data.data)
                 if (data.data.image)
                     e.insertAdjacentHTML("beforeend", `<img src="${data.data.image}" alt="${data.data.text}">`);
                 else if (data.data.text)
                     e.insertAdjacentHTML("beforeend", `<p>${data.data.text}</p>`);
-        } else if (e)
-            e.innerHTML = "";
         }
+    }
+});
+
+deckSelect.addEventListener("change", ev => {
+    ev.stopPropagation();
+    socket.emit("getDeck", deckSelect.value);
 });
 
 document.getElementById("save").addEventListener("click", ev => {

sockets/getDecks.js

@@ -0,0 +1,8 @@
+const db = require("../db.json");
+
+
+module.exports = socket => {
+    return () => {
+        socket.emit("getDecks", Object.keys(db.decks));
+    }
+};

sockets/index.js

@@ -1,5 +1,6 @@
 module.exports = socket => {
     socket.on("getDeck", require("./getDeck")(socket));
+    socket.on("getDecks", require("./getDecks")(socket));
     socket.on("getSlot", require("./getSlot")(socket));
     socket.on("getType", require("./getType")(socket));
     socket.on("setSlot", require("./setSlot")(socket));

views/index.pug

@@ -4,4 +4,20 @@ block content
   h1.center OpenDeck
   .container#deck
 
+  .fixed-action-btn
+    a(href="#modal").btn-floating.btn-large.green.modal-trigger
+      i.large.material-icons toc
+    ul
+      li
+        a(href="/settings").btn-floating.red
+          i.material-icons settings
+
+  #modal.modal
+    .modal-content
+      .input-field
+        select#deck-select
+        label Deck
+    .modal-footer
+      a#save.modal-close.waves-effect.waves-grey.btn-flat(href="#!") Close
+
   script(src="/javascripts/index.js")

views/layout.pug

@@ -3,6 +3,7 @@ html
   head
     title= "OpenDeck" + (title ? " - " + title: "")
     link(rel="stylesheet", href="/stylesheets/style.css")
+    link(rel="stylesheet", href="https://fonts.googleapis.com/icon?family=Material+Icons")
     script(src="/javascripts/materialize.js")
     script(src="/socket.io/socket.io.js")
   body

views/settings/decks.pug

@@ -3,7 +3,6 @@ extends ./settings
 block settings
     .input-field
         select#deck-select
-            option(value="default" selected) Default
         label Deck
 
     .container#deck

views/settings/settings.pug

@@ -6,5 +6,5 @@ block content
             a.brand-logo.right(href="/") OpenDeck
             ul#nav-mobile.left.hide-on-med-and-down
                 li
-                    a(href="sass.html") Decks
+                    a(href="/settings") Decks
     block settings