From fe52aca384ace8f358dde4f07fe305fdda6d2abe Mon Sep 17 00:00:00 2001
From: will <greenwoodw50@gmail.com>
Date: Wed, 28 Aug 2024 15:47:50 +0100
Subject: [PATCH] Added % left to the autocue

---
 auth/index.php     |  6 ++++--
 autocue/index.html | 25 +++++++++++++++++--------
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/auth/index.php b/auth/index.php
index 9b169cf..3bdccab 100644
--- a/auth/index.php
+++ b/auth/index.php
@@ -157,7 +157,9 @@ fieldtext > .split {
 	border: 2px solid red;
 	background-color: rgba(255, 255, 255, 0.7);
 }
-s {color: green;}
+s {
+	color: green;
+}
 .clock {
 	position: relative;
 	width: 100%;
@@ -515,7 +517,7 @@ for ($i = 0; $i < 360; $i += $clockIncrement) {
 				<li><s>Make this notes section a little better? it might actually be useful during the show. Although the arrow is quite difficult to click on</s></li>
 				<li><s>Add the controls for persentage sold and the relevant display on the GFX side of things</s></li>
 				<li><s>Add 2 more timers on both the controls and the GFX page</s></li>
-				<li>Add the <s>timers and the</s> % sold to the autocue so the presenter can atually see what theyre doing</li>
+				<li><s>Add the timers and the % sold to the autocue so the presenter can atually see what theyre doing</s></li>
 				<li>Add a clock display to the GFX page and the autocue (could just be a gereric time?)</li>
 				<li><s>Make the top banner look better</s></li>
 				<li><s>Add some kind of rating into the item file and make it display</s></li>
diff --git a/autocue/index.html b/autocue/index.html
index 4d7a858..cb23a14 100644
--- a/autocue/index.html
+++ b/autocue/index.html
@@ -22,6 +22,7 @@ body {
 		</style>
 		<script>
 var itemId = 0;
+var unsold = 1;
 
 function makeTime(t, o, s) {
 	let current = Math.round((Date.now() + o) / 1000);
@@ -51,21 +52,28 @@ function frame() {
 }
 
 function update() {
-        fetch("../data.json", {cache: "no-store"})
-                .then(data => data.json())
-                .then(data => {
+	fetch("../data.json", {cache: "no-store"})
+		.then(data => data.json())
+		.then(data => {
 			itemId = data.itemId;
 			var timers = document.getElementsByClassName("time");
 			timers[0].innerHTML = makeTime(data.timer1End, data.timerOffset, data.showingTimer1);
 			timers[1].innerHTML = makeTime(data.timer2End, data.timerOffset, data.showingTimer2);
 			timers[2].innerHTML = makeTime(data.timer3End, data.timerOffset, data.showingTimer3);
+			unsold = data.percentLeft / 100;
 		})
 	fetch("../items.json", {cache: "no-store"})
-                .then(data => data.json())
-                .then(data => {
-                        const noteContainer = document.getElementById("notes");
+		.then(data => data.json())
+		.then(data => {
+			const noteContainer = document.getElementById("notes");
 			noteContainer.innerHTML = data[itemId].notes;
-                })
+
+			const left = document.getElementById("left");
+			const stock = document.getElementById("stock");
+			left.innerHTML = Math.round(data[itemId].stockCount * unsold);
+			stock.innerHTML = data[itemId].stockCount;
+
+		})
 }
 
 setInterval(frame, 50);
@@ -78,7 +86,8 @@ setInterval(update, 1000);
 		<div id="timer">
 			T1: <span style="background-color: red;" class="time"></span> -
 			T2: <span style="background-color: green;" class="time"></span> -
-			T3: <span style="background-color: blue;" class="time"></span>
+			T3: <span style="background-color: blue; margin-right: 40px;" class="time"></span>
+			Left: <span id="left"></span>/<span id="stock"></span>
 		</div>
 	</body>
 </html>
-- 
2.39.2