From e2b1b0a9078040d1515658214a67d09184d03210 Mon Sep 17 00:00:00 2001
From: Roman Mazur <roman@rmazur.io>
Date: Thu, 26 Oct 2023 13:39:37 +0200
Subject: [PATCH] cmd/pollsvc: Update UI

---
 cmd/pollsvc/www/chart.html | 14 +++---
 cmd/pollsvc/www/index.html | 88 ++++++++++++++++++++++++++++----------
 2 files changed, 73 insertions(+), 29 deletions(-)

diff --git a/cmd/pollsvc/www/chart.html b/cmd/pollsvc/www/chart.html
index bd5f21d..448d2b7 100644
--- a/cmd/pollsvc/www/chart.html
+++ b/cmd/pollsvc/www/chart.html
@@ -7,13 +7,11 @@
 
   <style>
     .chart {
-        width: 100%;
-        height: 75%;
-        margin: 10px auto;
-    }
-    body {
-        width: 100%;
-        height: 100%;
+        width: 1000px;
+        height: 550px;
+        margin: 0 auto;
+        padding: 0;
+        overflow: hidden;
     }
   </style>
 </head>
@@ -49,6 +47,8 @@
       chart.draw(table, {
         title: 'Audience feedback',
         legend: {position: 'bottom'},
+        width: 1000,
+        height: 550,
       });
     }
 
diff --git a/cmd/pollsvc/www/index.html b/cmd/pollsvc/www/index.html
index bd741e3..676e068 100644
--- a/cmd/pollsvc/www/index.html
+++ b/cmd/pollsvc/www/index.html
@@ -18,7 +18,11 @@
     }
 
     .card-action a {
-      margin: 0 20px;
+      margin: 20px;
+    }
+
+    .feedback-block {
+      display: none;
     }
   </style>
 </head>
@@ -29,14 +33,17 @@
     <h1 id="talk-title" class="center">Presentation title</h1>
   </section>
 
-  <section class="poll card blue-grey darken-1">
-    <div class="card-content white-text">
+  <section id="poll" class="poll card blue-grey darken-1">
+    <div class="question-block card-content white-text">
       <h2 class="card-title center" id="question">Do you agree with the speaker?</h2>
       <div class="card-action center">
         <a id="choice-negative" href="#" class="btn-large">No</a>
         <a id="choice-positive" href="#" class="btn-large">Yes</a>
       </div>
     </div>
+    <div class="feedback-block card-content center white-text">
+      <h2>Thank you. You can vote again in <span class="timer">30</span>s.</h2>
+    </div>
   </section>
 
   <section class="the-end card deep-orange" id="the-end">
@@ -55,13 +62,15 @@ <h3>Thanks for your participation!</h3>
 
     const deadline = Date.now() + 1000*60*60;
 
+    let initTicker = 0;
+
     function init(talkId) {
-      if (Date.now() >= deadline) {
-        let pollElements = document.getElementsByClassName('poll');
-        for (let i = 0; i < pollElements.length; i++) {
-          pollElements[i].style.display = 'none';
-        }
+      if (!talkId || Date.now() >= deadline) {
+        const pollElement = document.getElementById('poll');
+        pollElement.style.display = 'none';
         document.getElementById('the-end').style.display = 'block';
+        clearInterval(initTicker);
+        return;
       }
 
       const idx = Math.floor(Math.random()*questions.length);
@@ -72,21 +81,57 @@ <h3>Thanks for your participation!</h3>
 
       const choiceNeg = document.getElementById('choice-negative');
       choiceNeg.innerText = variant.neg;
-      choiceNeg.onclick = () => {
-        submitChoice(talkId, 1);
+      choiceNeg.onclick = async () => {
+        await submitChoice(talkId, 1);
+        showFeedback(talkId);
       };
 
       const choicePos = document.getElementById('choice-positive');
       choicePos.innerText = variant.pos;
-      choicePos.onclick = () => {
-        submitChoice(talkId, 10);
+      choicePos.onclick = async () => {
+        await submitChoice(talkId, 10);
+        showFeedback(talkId);
+      };
+    }
+
+    const minPeriod = 10000;
+
+    let timerUpdate = 0;
+
+    function showFeedback(talkId) {
+      console.log("Vote submitted. Showing feedback.");
+      const pollElement = document.getElementById('poll');
+      const showQuestion = questionVisible => {
+        if (questionVisible) {
+          window.clearInterval(timerUpdate);
+        }
+        pollElement.getElementsByClassName('question-block')[0].style.display = questionVisible ? 'block' : 'none';
+        pollElement.getElementsByClassName('feedback-block')[0].style.display = questionVisible ? 'none' : 'block';
+      };
+
+      showQuestion(false);
+
+      const duration = minPeriod*2;
+
+      setTimeout(() => {
+        console.log("Showing question again.");
+        showQuestion(true);
+        init(talkId);
+      }, duration);
+
+      const setTimerText = () => {
+        const timeLeft = Math.max(Math.round((lastSubmit + duration - Date.now())/1000), 0);
+        pollElement.getElementsByClassName('timer')[0].innerText = `${timeLeft}`;
       };
+
+      setTimerText();
+      timerUpdate = setInterval(setTimerText, 1000);
     }
 
     let lastSubmit = 0;
 
     async function submitChoice(talk, val) {
-      if (Date.now() - lastSubmit < 5000) {
+      if (Date.now() - lastSubmit < minPeriod) {
         return;
       }
 
@@ -104,8 +149,9 @@ <h3>Thanks for your participation!</h3>
     }
 
     async function currentTalkId() {
-      const sp = new URLSearchParams(window.location.search);
-      return sp.get('id').trim();
+      const inputId = (new URLSearchParams(window.location.search)).get('id').trim();
+      const configId = (await (await fetch('/config/current')).text()).trim();
+      return inputId === configId ? inputId : '';
     }
     function currentTalkName() {
       const sp = new URLSearchParams(window.location.search);
@@ -123,16 +169,14 @@ <h3>Thanks for your participation!</h3>
     }
 
     currentTalkId().then(id => {
-      if (!id) {
-        return;
-      }
+      const reInit = () => init(id);
 
+      reInit();
       document.getElementById('talk-title').innerText = currentTalkName();
 
-      const reInit = () => init(id);
-      reInit();
-      const period = 1000*60*3;
-      window.setInterval(reInit, period);
+      if (id) {
+        initTicker = window.setInterval(reInit, 1000*60);
+      }
     });
 
   </script>