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

61
site/alkali_metal.html
View file

@ -17,6 +17,15 @@
div#app { div#app {
display: flex; display: flex;
}
div#past-polls {
flex-grow: 1
}
div#poll-creator {
flex-grow: 2;
display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -46,6 +55,22 @@
<h2>CGE Poll Quick-Creator</h2> <h2>CGE Poll Quick-Creator</h2>
<hr> <hr>
<div id="app"> <div id="app">
<div id="past-polls">
<h2>Previous Polls</h2>
<button
@click.stop="get_past_polls"
>
Test Poll Fetch
</button>
<div
v-for="poll in pastPolls"
:key="poll.id"
>
<h4>{{poll.title}}</h4>
Winner: {{poll.winner.title}}
</div>
</div>
<div id="poll-creator">
<div <div
v-for="poll in polls" v-for="poll in polls"
class="poll-data" class="poll-data"
@ -69,25 +94,53 @@
</button> </button>
</div> </div>
</div> </div>
</div>
</body> </body>
<script> <script>
let app = new Vue({ let app = new Vue({
el: "#app", el: "#app",
methods: { 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) { async start_poll(poll_data) {
try { try {
await axios.post("/polls/twitch/alkali_metal/poll", poll_data); await axios.post("/polls/twitch/czechgamesedition/poll", poll_data);
let qs = new URLSearchParams(window.location.search); let qs = new URLSearchParams(window.location.search);
if (!qs.has("no_alert")) { if (!qs.has("no_alert")) {
alert("Poll should've been created successfully."); alert("Poll should've been created successfully.");
}; };
} catch (err) { } catch (err) {
console.error(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`].includes(p.status))
.map(p => {
return {
id: p.id,
winner: p.choices.sort((a, b) => a.votes > b.votes)[0],
title: p.title,
status: p.status,
};
});
},
},
mounted() {
this.get_past_polls();
// this.previous_poll_interval = setInterval(this.get_past_polls, 5_000);
}, },
data: { data: {
allPolls: [],
polls: [ polls: [
{ {
name: "Wavelength Region Choice (FIRST POLL)", name: "Wavelength Region Choice (FIRST POLL)",

101
site/czechgamesedition.html
View file

@ -13,14 +13,28 @@
background: #2c2f32; background: #2c2f32;
color: white; color: white;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
} }
div#app { div#app {
display: grid;
grid-template-columns: 30% 14px 100fr;
}
div#past-polls {
width: 100%;
}
div#poll-creator {
flex-grow: 2;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
div.poll-data { div.poll-data,
div.poll-info
{
margin: 5px; margin: 5px;
padding: 10px; padding: 10px;
background: #202225; background: #202225;
@ -31,6 +45,20 @@
border-color: transparent; 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 { .poll-data > h4 {
margin: 0; margin: 0;
margin-bottom: 5px; margin-bottom: 5px;
@ -43,9 +71,31 @@
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head> </head>
<body> <body>
<h2>CGE Poll Quick-Creator</h2>
<hr>
<div id="app"> <div id="app">
<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 <div
v-for="poll in polls" v-for="poll in polls"
class="poll-data" class="poll-data"
@ -69,11 +119,20 @@
</button> </button>
</div> </div>
</div> </div>
</div>
</body> </body>
<script> <script>
let app = new Vue({ let app = new Vue({
el: "#app", el: "#app",
methods: { 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) { async start_poll(poll_data) {
try { try {
await axios.post("/polls/twitch/czechgamesedition/poll", poll_data); await axios.post("/polls/twitch/czechgamesedition/poll", poll_data);
@ -83,11 +142,41 @@ let app = new Vue({
}; };
} catch (err) { } catch (err) {
console.error(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: { data: {
allPolls: [],
previous_poll_interval: null,
polls: [ polls: [
{ {
name: "Wavelength Region Choice (FIRST POLL)", name: "Wavelength Region Choice (FIRST POLL)",