Dashboard modifications

- finished most functionalities of the dashboard
- fixed some bugs

bot.js

@@ -327,7 +327,7 @@ class Bot {
                 (this.mention) ? msg.reply(answer) : msg.channel.send(answer);
             }
         } else {
-            logger.warn(`Empty answer won't be send.`);
+            logger.verbose(`Empty answer won't be send.`);
         }
     }
 

lib/webapi.js

@@ -60,12 +60,12 @@ exports.WebServer = class {
      * @returns {Promise<any>}
      */
     stop() {
-       return new Promise((resolve) => {
+        return new Promise((resolve) => {
-           if (this.server)
+            if (this.server)
-               this.server.close(() => resolve());
+                this.server.close(() => resolve());
-           else
+            else
-               resolve();
+                resolve();
-       })
+        })
     }
 
     /**
@@ -79,13 +79,13 @@ exports.WebServer = class {
             let token = generateID(['TOKEN', username, (new Date()).getMilliseconds()]);
             this.maindb.run('INSERT INTO users (username, token, scope) VALUES (?, ?, ?)',
                 [username, token, scope], (err) => {
-                if(err) {
+                    if (err) {
-                    logger.warn(err.message);
+                        logger.warn(err.message);
-                    reject(err);
+                        reject(err);
-                } else {
+                    } else {
-                    resolve(token);
+                        resolve(token);
-                }
+                    }
-            })
+                })
         });
     }
 
@@ -141,9 +141,14 @@ exports.WebServer = class {
                             .map((x) => new Guild(x, objects.getGuildHandler(x)))
                             .find(x => (x.id === args.id))];
                     } else {
-                        return Array.from(dcGuilds)
+                        try {
-                            .map((x) => new Guild(x, objects.getGuildHandler(x)))
+                            return Array.from(dcGuilds)
-                            .slice(args.offset, args.offset + args.first);
+                                .slice(args.offset, args.offset + args.first)
+                                .map((x) => new Guild(x, objects.getGuildHandler(x)));
+                        } catch (err) {
+                            logger.error(err.stack);
+                            return null;
+                        }
                     }
                 },
                 guildCount: () => {
@@ -279,7 +284,7 @@ class Guild {
         this.ready = guildHandler.ready;
         this.prSaved = null;
         this.guildHandler = guildHandler;
-        this.dj = this.guildHandler.dj? new DJ(this.guildHandler.dj) : null;
+        this.dj = this.guildHandler.dj ? new DJ(this.guildHandler.dj) : null;
     }
 
     querySaved() {
@@ -393,7 +398,7 @@ class User {
         this.tag = discordUser.tag;
         this.tag = discordUser.tag;
         this.presence = {
-            game: discordUser.presence.game.name,
+            game: discordUser.presence.game? discordUser.presence.game.name : null,
             status: discordUser.presence.status
         }
     }

web/http/index.html

@@ -42,7 +42,47 @@
 			</div>
 		</div>
 		<div class="column" id="column-right">
-			<p>right</p>
+			<select class="cell" id="guild-select">
+				<option value="select-default">-Select a guild-</option>
+			</select>
+			<div id="guildinfo" style="display: none">
+				<div class="cell" id="guild-icon-container">
+					<img id="guild-icon" src="" alt="Icon"/>
+					<div class="listContainer">
+						<h2 class="cell" id="guild-name"></h2>
+						<p class="cell">by</p>
+						<h3 class="cell" id="guild-owner"></h3>
+					</div>
+				</div>
+				<div class="space"></div>
+				<h3 class="cell">Stats</h3>
+				<div class="cell">
+					<span class="label text-right">Member Count: </span>
+					<span class="text-left" id="guild-memberCount"></span>
+				</div>
+				<div class="space"></div>
+				<h3 class="cell">DJ</h3>
+				<div class="cell">
+					<span class="label text-right">State: </span>
+					<span class="text-left" id="guild-djStatus"></span>
+				</div>
+				<div class="cell">
+					<span class="label text-right">Repeat: </span>
+					<span class="text-left" id="dj-repeat"></span>
+				</div>
+				<a class="cell listContainer" id="dj-songinfo" style="display: none">
+					<div class="cell">
+						<span class="label text-right">Voice Channel: </span>
+						<span class="text-left" id="dj-voiceChannel"></span>
+					</div>
+					<div id="songinfo-container">
+						<span id="dj-songname"></span>
+						<img id="dj-songImg" src="" alt=""/>
+						<span style="font-weight: bold">Next 5 Songs</span>
+						<div id="dj-songQueue"></div>
+					</div>
+				</a>
+			</div>
 		</div>
 	</div>
 	<script>

web/http/sass/style.sass

@@ -25,9 +25,11 @@ body
   margin: 0 auto
   text-align: center
   max-height: 100vh
+  height: 100%
 
 .cell
-  //display: table-cell
+  display: list-item
+  list-style: none
   align-content: center
   text-align: center
   margin: auto
@@ -112,6 +114,28 @@ div.cell > *
   width: 50%
   display: table-cell
 
+.songEntry
+  display: flex
+  background: lighten($cBackgroundVariant, 5)
+  padding: 2px
+  margin: 5px
+  border-radius: 5px
+
+.songEntry > *
+  display: table-column
+  margin: auto
+
+.songEntry img
+  max-height: 30px
+  max-width: 20%
+  height: auto
+  width: auto
+
+.songEntry a
+  width: 80%
+  text-decoration: none
+  color: $cPrimary
+
 #content
   display: flex
   height: 100%
@@ -163,4 +187,44 @@ div.cell > *
 #bot-config
   background: darken($cBackground, 3)
   word-wrap: break-word
-  display: none
+  display: none
+
+#guild-select
+  background: $cBackgroundVariant
+  color: $cPrimary
+  font-size: 150%
+  font-family: $fNormal
+  padding: 10px
+  width: 100%
+  margin: auto
+  border: none
+  border-radius: 12px
+  -webkit-appearance: none
+
+#guild-icon-container
+  padding: 10px 0 0 0
+
+#guild-icon
+  max-width: 100px
+  width: 50%
+  height: auto
+  border-radius: 25%
+
+#dj-songinfo
+  text-decoration: none
+  color: $cPrimary
+  padding: 10px
+
+#songinfo-container
+  background-color: $cBackgroundVariant
+  border-radius: 20px
+  padding: 10px
+
+#dj-songname
+  font-weight: bold
+  font-size: 120%
+
+#dj-songImg
+  width: 100%
+  height: auto
+  border-radius: 5%

web/http/scripts/query.js

@@ -1,4 +1,5 @@
 let latestLogs = [];
+let latestSongs = [];
 
 let status = {
     0: 'ready',
@@ -29,7 +30,7 @@ function postQuery(query) {
         $.post({
             url: "/graphql",
             headers: {
-                Authorization: `Bearer ${sessionStorage.apiToken}`
+                Authorization: `Bearer ${localStorage.apiToken}`
             },
             data: JSON.stringify({
                 query: query
@@ -57,6 +58,121 @@ function queryStatic() {
     })
 }
 
+function queryGuilds() {
+    let query = `{
+                client {
+                    guilds {
+                        id
+                        name
+                        dj {
+                            playing
+                        }
+                    }
+                }
+            }`;
+    postQuery(query).then((res) => {
+        for (let guild of res.data.client.guilds) {
+            let option = document.createElement('option');
+            option.setAttribute('value', guild.id);
+            option.innerText = guild.dj.playing? guild.name + ' 🎶' : guild.name;
+            let guildSelect = document.querySelector('#guild-select');
+            guildSelect.appendChild(option);
+        }
+    });
+}
+
+function queryGuild(guildId) {
+    let query = `{
+                client {
+                    guilds(id: "${guildId}") {
+                        name
+                        icon
+                        memberCount
+                        owner {
+                            id
+                            user {
+                                tag
+                            } 
+                        }
+                    }
+                }
+                config
+            }`;
+    postQuery(query).then((res) => {
+        let guild = res.data.client.guilds[0];
+        document.querySelector('#guild-icon').setAttribute('src', guild.icon);
+        document.querySelector('#guild-name').innerText = guild.name;
+        document.querySelector('#guild-owner').innerText = guild.owner.user.tag;
+        document.querySelector('#guild-owner').setAttribute('owner-id', guild.owner.id);
+        document.querySelector('#guild-memberCount').innerText = guild.memberCount;
+        queryGuildStatus(guildId);
+        let serverinfo = $('#guildinfo');
+        if (serverinfo.is(':hidden'))
+            serverinfo.show();
+    });
+}
+
+function queryGuildStatus(guildId) {
+    let query = `{
+                client {
+                    guilds(id: "${guildId}") {
+                        dj {
+                            playing
+                            repeat
+                            voiceChannel
+                            currentSong {
+                                name
+                                url
+                                thumbnail
+                            }
+                            queue(first: 5) {
+                                id
+                                name
+                                url
+                                thumbnail
+                            }
+                        }
+                    }
+                }
+                config
+            }`;
+    postQuery(query).then((res) => {
+        let guild = res.data.client.guilds[0];
+        document.querySelector('#guild-djStatus').innerText = guild.dj.playing? 'playing' : 'idle';
+        document.querySelector('#dj-repeat').innerText = guild.dj.repeat? 'on': 'off';
+        if (guild.dj.playing) {
+            $('#dj-songinfo').show();
+            document.querySelector('#dj-voiceChannel').innerText = guild.dj.voiceChannel;
+            document.querySelector('#dj-songinfo').setAttribute('href', guild.dj.currentSong.url);
+            document.querySelector('#dj-songname').innerText = guild.dj.currentSong.name;
+            document.querySelector('#dj-songImg').setAttribute('src', guild.dj.currentSong.thumbnail);
+            let songContainer = document.querySelector('#dj-songQueue');
+            for (let song of guild.dj.queue) {
+                if ($(`.songEntry[song-id=${song.id}]`).length === 0) {
+                    let songEntry = document.createElement('div');
+                    songEntry.setAttribute('class', 'songEntry');
+                    songEntry.setAttribute('song-id', song.id);
+                    let imageEntry = document.createElement('img');
+                    imageEntry.setAttribute('src', song.thumbnail);
+                    songEntry.appendChild(imageEntry);
+                    let nameEntry = document.createElement('a');
+                    nameEntry.setAttribute('href', song.url);
+                    nameEntry.innerText = song.name;
+                    songEntry.appendChild(nameEntry);
+                    songContainer.appendChild(songEntry);
+                }
+            }
+            let songEntries = $('.songEntry');
+            if (songEntries.length > 5) {
+                document.querySelector('#dj-songQueue').firstElementChild.remove();
+            }
+            let latestSongs = guild.dj.queue;
+        } else {
+            $('#dj-songinfo').hide();
+        }
+    });
+}
+
 function queryStatus() {
     let query = `{
                 client {
@@ -136,13 +252,32 @@ function queryLogs(count) {
 }
 
 function startUpdating() {
-    if (!sessionStorage.apiToken || sessionStorage.apiToken.length < 0) {
+    if (!localStorage.apiToken || localStorage.apiToken.length < 0) {
-        sessionStorage.apiToken = prompt('Please provide an api token: ');
+        localStorage.apiToken = prompt('Please provide an api token: ');
     }
     queryStatic();
-    setInterval(queryStatic, 360000);
+    setInterval(queryStatic, 3600000);
     queryStatus();
     setInterval(queryStatus, 2000);
     queryLogs(50);
     setInterval(queryLogs, 5000);
+    queryGuilds();
+    setInterval(queryGuilds, 60000);
+    setInterval(() => {
+        let gid = $('#guild-select')[0].value;
+        if (gid && gid !== 'select-default')
+            queryGuildStatus(gid);
+    }, 5000);
+    setInterval(() => {
+        let gid = $('#guild-select')[0].value;
+        if (gid && gid !== 'select-default')
+            queryGuild(gid);
+    }, 600000);
+    $('#guild-select').on('change', (ev) => {
+        let fch = document.querySelector('#guild-select').firstElementChild;
+        if (fch.getAttribute('value') === 'select-default')
+            fch.remove();
+        let guildId = ev.target.value;
+        queryGuild(guildId);
+    });
 }