From 7b0eb2ad53f99564e9bb9153f752a33e5d7891c6 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <oliver.akins1999@gmail.com>
Date: Thu, 13 Oct 2022 00:25:17 -0600
Subject: [PATCH] Tweak to allow poll history

---
 site/alkali_metal.html      |  97 +++++++++++++++++++------
 site/czechgamesedition.html | 141 +++++++++++++++++++++++++++++-------
 2 files changed, 190 insertions(+), 48 deletions(-)

diff --git a/site/alkali_metal.html b/site/alkali_metal.html
index 052d9ab..7009204 100644
--- a/site/alkali_metal.html
+++ b/site/alkali_metal.html
@@ -17,6 +17,15 @@
 
 		div#app {
 			display: flex;
+		}
+
+		div#past-polls {
+			flex-grow: 1
+		}
+
+		div#poll-creator {
+			flex-grow: 2;
+			display: flex;
 			flex-wrap: wrap;
 		}
 
@@ -46,27 +55,44 @@
 	<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>
+		<div id="past-polls">
+			<h2>Previous Polls</h2>
 			<button
-				@click.stop="start_poll(poll.data)"
+				@click.stop="get_past_polls"
 			>
-				Start Poll
+				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
+				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)"
+				>
+					Start Poll
+				</button>
+			</div>
 		</div>
 	</div>
 </body>
@@ -74,20 +100,47 @@
 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/alkali_metal/poll", poll_data);
+				await axios.post("/polls/twitch/czechgamesedition/poll", poll_data);
 				let qs = new URLSearchParams(window.location.search);
 				if (!qs.has("no_alert")) {
 					alert("Poll should've been created successfully.");
 				};
 			} 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`].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: {
+		allPolls: [],
 		polls: [
 			{
 				name: "Wavelength Region Choice (FIRST POLL)",
diff --git a/site/czechgamesedition.html b/site/czechgamesedition.html
index fbf9467..9f5e09f 100644
--- a/site/czechgamesedition.html
+++ b/site/czechgamesedition.html
@@ -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)",