datatables...

bin/websocket.js

@@ -79,6 +79,7 @@ class websocket {
                     io.emit("callback.dataUpdate", self.getIndexFile());
                 });
 
+
                 client.on("moveSong", (oldIndex, newIndex) => {
                     let song = self.serverOptions.showData.songs.splice(oldIndex, 1);
                     self.serverOptions.showData.songs.splice(newIndex, 0, song[0]);
@@ -129,6 +130,16 @@ class websocket {
                     io.emit("update", self.serverOptions);
                 })
 
+                client.on("newShow", () => {
+                    self.serverOptions.currentShow = "";
+                    self.serverOptions.showData = {
+                        name: "",
+                        titles: [],
+                        songs: []
+                    }
+                    client.emit("updateAll", self.serverOptions);
+                });
+
                 client.on("loadShow", (file) => {
                     try {
                         if (fs.existsSync("./data/shows/" + file)) {

public/javascripts/admin.js

@@ -61,6 +61,7 @@ $(function () {
         action: function (text, value) {
             switch (value) {
                 case "new":
+                    socket.emit("newShow");
                     break;
                 case "open":
                     openShow();
@@ -145,7 +146,29 @@ function renameShow() {
 function openShow() {
     $('.fileAction').text("Open");
     $("#dialogFilename").val("");
-    $.getJSON("/ajax/shows", function (json) {
+    $('#showContent').DataTable().destroy();
+    $('#showContent').DataTable({
+        paging: false,
+        ajax: '/ajax/shows',
+        columns: [
+            { data: "file" }
+        ],
+        "initComplete": function () {
+            var api = this.api();
+            api.$('td').click(function () {
+                $("#dialogFilename").val(this.innerHTML);
+            });
+        }
+    });
+
+    $('#showDialog').modal({
+        blurring: true,
+        onApprove: function () {
+            socket.emit("loadShow", $("#dialogFilename").val());
+        }
+    }).modal('show');
+
+    /*$.getJSON("/ajax/shows", function (json) {
         let data = ``;
         for (let elem of json) {
             data += `
@@ -163,57 +186,94 @@ function openShow() {
                 socket.emit("loadShow", $("#dialogFilename").val());
             }
         }).modal('show');
+      
     });
-
+  */
 }
 
 function saveShow() {
     $('.fileAction').text("Save");
     $("#dialogFilename").val("");
-    $.getJSON("/ajax/shows", function (json) {
-        let data = ``;
-        for (let elem of json) {
-            data += `
-            <div class="item" onclick="selectShowFile(this);">
-                <i class="file icon"></i>
-                <div class="content noselect">
-                    <div class="header">${elem}</div>
-                </div>
-            </div>`;
+    $('#showContent').DataTable().destroy();
+    $('#showContent').DataTable({
+        paging: false,
+        scrollCollapse: true,
+        ajax: '/ajax/shows',
+        columns: [
+            { data: "file" }
+        ],
+        "initComplete": function () {
+            var api = this.api();
+            api.$('td').click(function () {
+                $("#dialogFilename").val(this.innerHTML);
+            });
         }
-        $("#showContent").html(data);
-        $('#showDialog').modal({
-            blurring: true,
-            onApprove: function () {
-                socket.emit("saveShow", $("#dialogFilename").val());
-            }
-        }).modal('show');
     });
+    $('#showDialog').modal({
+        blurring: true,
+        onApprove: function () {
+            socket.emit("saveShow", $("#dialogFilename").val());
+        }
+    }).modal('show');
 }
 
 function importSongs() {
-    $.getJSON("/ajax/songs", function (json) {
-        let data = ``;
-        for (let elem of json) {
-            data += `
-            <div class="item">
-                <div class="right floated middle aligned content noselect">
-                    <div class="ui button" onclick="editSong('${elem.file}')">Edit</div>
-                    <div class="ui green button" onclick="addSong('${elem.file}')">Import</div>
-             
-                </div>
-         
-                <div class="content noselect">
-                    <i class="music icon"></i>${elem.title} (${elem.artist})
-                </div>
-               
-            </div>`;
-        }
-        $("#songContent").html(data);
-        $('#songDialog').modal({
-            blurring: true
-        }).modal('show');
+    /* $.getJSON("/ajax/songs", function (json) {
+         let data = ``;
+         for (let elem of json) {
+             data += `
+             <div class="item">
+                 <div class="right floated middle aligned content noselect">
+                     <div class="ui button" onclick="editSong('${elem.file}')">Edit</div>
+                     <div class="ui green button" onclick="addSong('${elem.file}')">Import</div>
+                 </div>
+          
+                 <div class="content noselect">
+                     <i class="music icon"></i>${elem.title} (${elem.artist})
+                 </div>
+                
+             </div>`;
+         }
+         $("#songContent").html(data);*/
+
+    $('#songContent').DataTable().destroy();
+    $('#songContent').DataTable({
+        paging: false,
+        scrollCollapse: true,
+        pageLength: 25,
+        lengthChange: false,
+        info: false,
+        ajax: '/ajax/songs',
+        columns: [
+            { data: "title" },
+            { data: "artist" },
+            { data: "file" },
+        ],
+        "columnDefs": [
+            {
+                // The `data` parameter refers to the data for the cell (defined by the
+                // `data` option, which defaults to the column being worked with, in
+                // this case `data: 0`.
+                "render": function (data, type, row) {
+                    return `
+                        <div class="ui button" onclick="editSong('${data}')">Edit</div>
+                        <div class="ui green button" onclick="addSong('${data}')">Import</div>
+                        `;
+                },
+                "targets": 2
+            },
+        ]
+        /*"initComplete": function () {
+            var api = this.api();
+            api.$('td').click(function () {
+                $("#dialogFilename").val(this.innerHTML);
+            });
+        } */
     });
+
+    $('#songDialog').modal({
+        blurring: true
+    }).modal('show');
 }
 
 

public/stylesheets/styles.css

@@ -69,6 +69,9 @@ iframe {
 #showDialog .ui.list .item {
   padding: 0.5rem;
 }
+.dataTable tbody tr:hover {
+  background: skyblue;
+}
 
 #showDialog .ui.list .item:hover {
   background: skyblue;
@@ -84,4 +87,4 @@ iframe {
 
 #songeditor .red.button {
   background: maroon;
-}
+}

routes/index.js

@@ -26,13 +26,18 @@ router.get('/ajax/songs', function (req, res, next) {
   let outData = [];
   for (song of songs) {
     let info = JSON.parse(fs.readFileSync("./data/songs/" + song).toString());
-    outData.push({ title: info.title, artist: info.artist, file: song });
+    outData.push({ title: info.title, artist: info.artist, file: song, actions: "" });
   }
-  res.json(outData);
+  res.json({ data: outData });
 });
 
 router.get('/ajax/shows', function (req, res, next) {
-  res.json(fs.readdirSync("./data/shows"));
+  let data = fs.readdirSync("./data/shows");
+  let out = [];
+  for (elem of data) {
+    out.push({ file: elem });
+  }
+  res.json({ data: out });
 });
 
 router.get('/ajax/song', function (req, res, next) {