Modified Dashboard

- added Song timer
- added active VC count
- improved layout
- added querying for VC count to graphql

bot.js

@@ -112,7 +112,8 @@ class Bot {
             presences: this.presences,
             maindb: this.maindb,
             prefix: prefix,
-            getGuildHandler: (guild) => this.getGuildHandler(guild, prefix)
+            getGuildHandler: (guild) => this.getGuildHandler(guild, prefix),
+            guildHandlers: this.guildHandlers
         });
     }
 

lib/webapi.js

@@ -166,6 +166,20 @@ exports.WebServer = class {
                 uptime: () => {
                     return objects.client.uptime;
                 },
+                voiceConnectionCount: () => {
+                    let dcGuilds = Array.from(objects.client.guilds.values());
+                    return dcGuilds.filter((x) => {
+                        let gh = objects.guildHandlers[x.id];
+                        if (gh) {
+                            if (gh.dj)
+                                return gh.dj.playing;
+                            else
+                                return false;
+                        } else {
+                            return false;
+                        }
+                    }).length;;
+                }
             },
             prefix: objects.prefix,
             presences: objects.presences,

web/graphql/schema.graphql

@@ -55,6 +55,7 @@ type Guild {
 type Client {
     guilds(first: Int = 10, offset: Int = 0, id: String): [Guild]
     guildCount: Int
+    voiceConnectionCount: Int
     user: User
     ping: Float
     status: Int

web/http/index.html

@@ -39,15 +39,20 @@
 				<span class="label text-right">Guild Count: </span>
 				<span class="text-left" id="client-guildCount"></span>
 			</div>
+			<div class="cell">
+				<span class="label text-right">Active Voice Connections: </span>
+				<span class="text-left" id="client-vcCount"></span>
+			</div>
 		</div>
 		<div class="column" id="column-right">
 			<select class="cell" id="guild-select">
 				<option value="select-default">-Select a guild-</option>
 			</select>
 			<div id="guildinfo" style="display: none">
+				<div class="listContainer">
 					<div class="cell" id="guild-icon-container">
 						<img id="guild-icon" src="" alt="Icon"/>
-					<div class="listContainer">
+						<div class="listContainer" id="guild-nameAndIcon">
 							<h2 class="cell" id="guild-name"></h2>
 							<p class="cell">by</p>
 							<h3 class="cell" id="guild-owner"></h3>
@@ -73,7 +78,8 @@
 						<span class="label text-right">Voice Channel: </span>
 						<span class="text-left" id="dj-voiceChannel"></span>
 					</div>
-				<div class="cell listContainer" id="dj-songinfo" style="display: none">
+				</div>
+				<div class="listContainer" id="dj-songinfo" style="display: none">
 					<a id="songinfo-container">
 						<span id="dj-songname"></span>
 						<img id="dj-songImg" src="" alt=""/>

web/http/sass/style.sass

@@ -25,7 +25,7 @@ body
   margin: 0 auto
   text-align: center
   max-height: 100vh
-  height: 100%
+  height: 100vh
 
 .cell
   display: list-item
@@ -63,11 +63,10 @@ div.cell > *
   font-weight: bold
 
 .listContainer
-  display: block
+  display: grid
   width: 100%
   text-align: left
   overflow: auto
-  display: inline-block
   position: relative
   max-height: 90vh
 
@@ -115,6 +114,7 @@ div.cell > *
   display: table-cell
 
 .songEntry
+  display: flex
   display: flex
   background: lighten($cBackgroundVariant, 5)
   padding: 2px
@@ -147,11 +147,16 @@ div.cell > *
 
 #column-left, #column-middle, #column-right
   width: 33%
-  height: 100%
 
 #column-middle
   background: $cBackgroundVariant
   border-radius: 20px
+  height: 100%
+
+#column-right
+  padding: 0 20px 20px
+  display: grid
+  align-content: start
 
 #user-avatar
   max-width: 300px
@@ -196,11 +201,13 @@ div.cell > *
   width: 100%
   margin: auto
   border: none
+  height: 52px
   border-radius: 12px
   -webkit-appearance: none
 
 #guild-icon-container
   padding: 10px 0 0 0
+  display: flex
 
 #guild-icon
   max-width: 100px
@@ -208,10 +215,13 @@ div.cell > *
   height: auto
   border-radius: 25%
 
+#guild-nameAndIcon
+  width: 50%
+
 #dj-songinfo
-  display: block
   background-color: $cBackgroundVariant
   border-radius: 20px
+  overflow-x: hidden
 
 #songinfo-container
   display: list-item
@@ -220,14 +230,26 @@ div.cell > *
   padding: 10px
   width: calc(100% - 20px)
 
-dj-queue-container
+#dj-queue-container
-  display: list-item
+  display: grid
+  padding: 0 5px 5px
 
 #dj-songname
+  font-weight: bold
   font-weight: bold
   font-size: 120%
 
 #dj-songImg
-  width: 100%
+  align-self: center
+  width: 80%
   height: auto
+  margin:  0 10%
   border-radius: 5%
+
+#guildinfo
+  max-height: 90vh
+  overflow-y: auto
+
+#dj-songQueue
+  display: grid
+  max-height: 100%

web/http/scripts/query.js

@@ -193,6 +193,7 @@ function queryStatus() {
                     status
                     uptime
                     guildCount
+                    voiceConnectionCount
                     user {
                         presence {
                             game
@@ -211,6 +212,7 @@ function queryStatus() {
             .innerText = `${sd.days}d ${sd.hours}h ${sd.minutes}min ${sd.seconds}s`;
 
         document.querySelector('#client-guildCount').innerText = d.client.guildCount;
+        document.querySelector('#client-vcCount').innerText = d.client.voiceConnectionCount;
         if (d.client.status !== 0) {
             document.querySelector('#status-indicator').setAttribute('status', 'offline');
         } else {