Dashboard modifications

- finished most functionalities of the dashboard
- fixed some bugs
pull/33/head
Trivernis 6 years ago
parent c46f34fd59
commit bfe29e0ef4

@ -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.`);
}
}

@ -60,12 +60,12 @@ exports.WebServer = class {
* @returns {Promise<any>}
*/
stop() {
return new Promise((resolve) => {
if (this.server)
this.server.close(() => resolve());
else
resolve();
})
return new Promise((resolve) => {
if (this.server)
this.server.close(() => resolve());
else
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) {
logger.warn(err.message);
reject(err);
} else {
resolve(token);
}
})
if (err) {
logger.warn(err.message);
reject(err);
} else {
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)
.map((x) => new Guild(x, objects.getGuildHandler(x)))
.slice(args.offset, args.offset + args.first);
try {
return Array.from(dcGuilds)
.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
}
}

@ -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>

@ -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%

@ -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) {
sessionStorage.apiToken = prompt('Please provide an api token: ');
if (!localStorage.apiToken || localStorage.apiToken.length < 0) {
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);
});
}
Loading…
Cancel
Save