From b1642167f45c667ac8e3b76d88b65059250746ff Mon Sep 17 00:00:00 2001
From: "R. Tyler Croy" <rtyler@brokenco.de>
Date: Thu, 17 Sep 2020 15:49:30 -0700
Subject: [PATCH] Make some admin facilities for starting the timer

---
 views/index.hbs | 72 +++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 58 insertions(+), 14 deletions(-)
diff --git a/views/index.hbs b/views/index.hbs
index 1787ebf..ab447c1 100644
--- a/views/index.hbs
+++ b/views/index.hbs
@@ -2,7 +2,6 @@
     <head>
         <title>Charcuterie</title>
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
-    </head>
         <script type="text/javascript">
         <!--
             let username = "Unknown Ape";
@@ -11,20 +10,27 @@
                 const http = new XMLHttpRequest();
                 http.open("POST", `${window.location.origin}/play/${sound}`);
                 http.send();
+                let action = `${sound}'ed`;
+                displayMessage(`You ${action}`);
                 socket.send(JSON.stringify({
-                    action: `${sound}'ed`,
+                    action: action,
                     show: true,
                     actor: username,
                 }));
                 return false;
             }
 
-            var timeoutHandle;
+            let timeoutHandle;
+            let runTimer = false;
             function countdown(minutes) {
                 document.getElementById("timer").className = "text-success";
+                runTimer = true;
                 var seconds = 60;
                 var mins = minutes
                 function tick() {
+                    if (!runTimer) {
+                        return;
+                    }
                     var counter = document.getElementById("timer");
                     var current_minutes = mins-1
 
@@ -80,18 +86,55 @@
 
                 socket.onmessage = (event) => {
                     const data = JSON.parse(event.data)
+                    console.log(data);
+
+                    if (data.action == "start_timer") {
+                        countdown(data.time);
+                        displayMessage(`${data.actor} started the timer`);
+                    }
+                    if (data.action == "stop_timer") {
+                        runTimer = false;
+                        displayMessage(`${data.actor} stopped the timer`);
+                    }
 
                     if (data.show) {
-                        const messages = document.getElementById("messages");
-                        let m = document.createElement('div');
-                        m.innerHTML = `${data.actor} ${data.action}`;
-                        messages.insertBefore(m, messages.firstChild);
+                        displayMessage(`${data.actor} ${data.action}`);
                     }
                 };
             }
+            function displayMessage(message) {
+                const messages = document.getElementById("messages");
+                let m = document.createElement('div');
+                m.appendChild(document.createTextNode(message));
+                messages.insertBefore(m, messages.firstChild);
+            }
 
         -->
         </script>
+
+        {{#if admin}}
+            <script type="text/javascript">
+            <!--
+            function startTimer() {
+                window.socket.send(JSON.stringify({
+                    actor: username,
+                    action: 'start_timer',
+                    time: 5,
+                }));
+                countdown(5);
+            }
+            function stopTimer() {
+                window.socket.send(JSON.stringify({
+                    actor: username,
+                    action: 'stop_timer',
+                }));
+                runTimer = false;
+            }
+            -->
+            </script>
+        {{else}}
+        {{/if}}
+    </head>
     <body>
         <div class="container">
             <center>
@@ -128,14 +171,15 @@
                         </div>
                     </div>
                 </div>
-            </div>
 
-            {{#if admin}}
-                <div class="mt-5 container">
-                    <input class="btn btn-danger" type="button" onclick="return playSound('factorywhistle');" value="Time is up"/>
-                </div>
-            {{else}}
-            {{/if}}
+                {{#if admin}}
+                    <div class="mt-5 container">
+                        <input class="btn btn-danger" type="button" onclick="startTimer();" value="Start time"/>
+                        <input class="btn btn-danger" type="button" onclick="stopTimer();" value="Stop time"/>
+                    </div>
+                {{else}}
+                {{/if}}
+            </div>
         </div>
     </body>
 </html>
