Twitch/Poll-Manager
0
0
Fork 0
Code Issues 8 Pull requests Activity

Tweak to allow poll history

Browse source
This commit is contained in:
Oliver-Akins 2022-10-13 00:25:17 -06:00
parent cb98228147
commit 7b0eb2ad53
2 changed files with 190 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

141
site/czechgamesedition.html
View file

@ -13,14 +13,28 @@
background: #2c2f32;
color: white;
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
}
div#app {
display: grid;
grid-template-columns: 30% 14px 100fr;
}
div#past-polls {
width: 100%;
}
div#poll-creator {
flex-grow: 2;
display: flex;
flex-wrap: wrap;
}
div.poll-data {
div.poll-data,
div.poll-info
{
margin: 5px;
padding: 10px;
background: #202225;
@ -31,6 +45,20 @@
border-color: transparent;
}
div.poll-data {
display: flex;
flex-direction: column;
}
div.poll-data > ul {
flex-grow: 1;
}
div.vertical-divider {
width: 2px;
background: white;
margin: 0 6px;
}
.poll-data > h4 {
margin: 0;
margin-bottom: 5px;
@ -43,30 +71,53 @@
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<h2>CGE Poll Quick-Creator</h2>
<hr>
<div id="app">
<div
v-for="poll in polls"
class="poll-data"
:class="poll.important ? 'important' : ''"
>
<h4>{{poll.name}}</h4>
<p>
Duration: {{poll.data.duration}} seconds
<br>
Choices:
</p>
<ul>
<li v-for="choice in poll.data.choices">
{{choice.title}}
</li>
</ul>
<button
@click.stop="start_poll(poll.data)"
<div id="past-polls">
<h2>Previous Polls</h2>
<div v-if="pastPolls.length > 0">
<div
v-for="poll in pastPolls"
:key="poll.id"
>
<div class="poll-info">
<h4>{{poll.title}}</h4>
Winner(s):
<ul>
<li v-for="winner in poll.winners">
{{winner.title}} ({{winner.votes}} votes)
</li>
</ul>
</div>
</div>
</div>
<div v-else>
Waiting for the past polls to load...
</div>
</div>
<div class="vertical-divider"></div>
<div id="poll-creator">
<div
v-for="poll in polls"
class="poll-data"
:class="poll.important ? 'important' : ''"
>
Start Poll
</button>
<h4>{{poll.name}}</h4>
<p>
Duration: {{poll.data.duration}} seconds
<br>
Choices:
</p>
<ul>
<li v-for="choice in poll.data.choices">
{{choice.title}}
</li>
</ul>
<button
@click.stop="start_poll(poll.data)"
>
Start Poll
</button>
</div>
</div>
</div>
</body>
@ -74,6 +125,14 @@
let app = new Vue({
el: "#app",
methods: {
async get_past_polls() {
try {
let r = await axios.get("/polls/twitch/czechgamesedition/poll");
this.allPolls = r.data;
} catch (err) {
console.error(err);
};
},
async start_poll(poll_data) {
try {
await axios.post("/polls/twitch/czechgamesedition/poll", poll_data);
@ -83,11 +142,41 @@ let app = new Vue({
};
} catch (err) {
console.error(err);
alert("Something went wrong starting the poll, check to see if one is made already.")
}
}
alert("Something went wrong starting the poll, check to see if one is made already.");
};
},
},
computed: {
pastPolls() {
return this.allPolls
.filter(p => [`completed`, `terminated`, `invalid`, `archived`].includes(p.status.toLowerCase()))
.slice(0, 3)
.map(p => {
let winners = [];
let maxVotes = -1;
for (const choice of p.choices) {
if (choice.votes > maxVotes) {
winners = [choice];
maxVotes = choice.votes;
} else if (choice.votes == maxVotes) {
winners.push(choice);
};
};
return {
id: p.id,
winners,
title: p.title,
status: p.status,
};
});
},
},
mounted() {
this.previous_poll_interval = setInterval(this.get_past_polls, 5_000);
},
data: {
allPolls: [],
previous_poll_interval: null,
polls: [
{
name: "Wavelength Region Choice (FIRST POLL)",