websocket powered visualisation

This commit is contained in:
Adrian Amaglio 2020-03-31 20:59:36 +02:00
parent 25507a8e08
commit 9c8de9a8f2
3 changed files with 83 additions and 1 deletions

22
index.html Normal file
View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="main.css" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</head>
<body>
<main id="educbot-status">
<p v-if="connection">Connecté !</p>
<p v-else="">Non connecté !</p>
<ul>
<li v-for="(value, key) in reactions">
<img src="https://discordapp.com/assets/08c0a077780263f3df97613e58e71744.svg" width="30px" />
{{value.prefix}}
<span v-for="person in value.people">{{person}}</span>
</li>
</ul>
</main>
</body>
</html>

View File

@ -62,8 +62,16 @@ const wsActions = {
} }
function wsInit (data, channel, ws) { function wsInit (data, channel, ws) {
channel.ws_clients.push(ws) channel.ws_clients.push(ws)
wsSendState(channel, ws)
}
function wsSendState(channel, ws) {
ws.send(JSON.stringify(channel.reactions)) ws.send(JSON.stringify(channel.reactions))
} }
function wsSendStateAll(channel) {
for (var index in channel.ws_clients) {
wsSendState(channel, channel.ws_clients[index])
}
}
function wsAddReaction (data, channel, ws) { function wsAddReaction (data, channel, ws) {
if (!('reaction' in data)) { if (!('reaction' in data)) {
ws.send('{"error":"No reaction supplied", "action":"add"}') ws.send('{"error":"No reaction supplied", "action":"add"}')
@ -173,13 +181,17 @@ client.on('message', msg => {
if(msg.content === '!educpop-reset') { if(msg.content === '!educpop-reset') {
educpopReset educpopReset
reply(channel) reply(channel)
} else if (msg.content === '!educpop-list') { }
else if (msg.content === '!educpop-list') {
var text = 'Tapez simplement le mot-clé ci-dessous pour être comptabilisé. Tapez un - immédiatement suivi du mot-clé pour être retiré du compte : -oui par exemple !' var text = 'Tapez simplement le mot-clé ci-dessous pour être comptabilisé. Tapez un - immédiatement suivi du mot-clé pour être retiré du compte : -oui par exemple !'
for (var index in reactions) { for (var index in reactions) {
text += '\n' + reactions[index].prefix + index + ' : ' + reactions[index].description text += '\n' + reactions[index].prefix + index + ' : ' + reactions[index].description
} }
msg.reply(text) msg.reply(text)
} }
else if (msg.content === '!educpop-web') {
msg.reply('?channel_id=' + msg.channel.id + '&web_token=' + channel.web_token)
}
/* save and ignore own messages */ /* save and ignore own messages */
else if(msg.author.username === process.env.BOT_USERNAME){ else if(msg.author.username === process.env.BOT_USERNAME){
if (msg.content.startsWith(':')) /* Save if its educpop summary */ if (msg.content.startsWith(':')) /* Save if its educpop summary */
@ -204,6 +216,7 @@ client.on('message', msg => {
/* Recap educ-pop state on discord. Delete action message and last educ-pop recap */ /* Recap educ-pop state on discord. Delete action message and last educ-pop recap */
/* This function refresh the display */
function reply (channel) { function reply (channel) {
var text = '' var text = ''
for (var index in channel.reactions) { for (var index in channel.reactions) {
@ -215,6 +228,7 @@ function reply (channel) {
} }
if(channel.last_msg) channel.last_msg.delete() if(channel.last_msg) channel.last_msg.delete()
channel.discord_channel.send(text) channel.discord_channel.send(text)
wsSendStateAll(channel)
} }

46
main.js Normal file
View File

@ -0,0 +1,46 @@
window.onload = function () {
var app = new Vue({
el: '#educbot-status',
data: {
web_token: '',
channel_id: '',
ws: null,
ws_url: 'ws://localhost:8080',
reactions: {},
connection: false,
},
created: function () {
var url = new URL(location.href)
this.web_token = url.searchParams.get('web_token')
this.channel_id = url.searchParams.get('channel_id')
if (this.web_token == '' || this.channel_id == '') {
console.err('missing parameters to vue instance')
return
}
this.ws = new WebSocket(this.ws_url)
this.ws.onmessage = (data) => {
this.reactions = JSON.parse(data.data)
console.log(this.reactions)
}
this.ws.onopen = () => {
this.sendWs('init')
this.connection = true
}
this.ws.onclose = () => {
this.connection = false
}
this.ws.onerror = () => {
this.connection = false
}
},
methods: {
sendWs: function (action) {
this.ws.send(JSON.stringify({
'action': action,
'web_token': this.web_token,
'channel': this.channel_id,
}))
}
}
})
}