Tweak to allow poll history

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)",