Integrate backend with UI

functions/src/index.ts

@@ -3,8 +3,9 @@ import {initializeApp} from "firebase-admin/app";
 
 initializeApp();
 
-import votingRoute from "./route/voting";
+import votingRoute, {activeVoteState} from "./route/voting";
 import adminRoute from "./route/admin";
 
 export const vote = functions.https.onRequest(votingRoute);
 export const admin = functions.https.onRequest(adminRoute);
+export const activeVote = activeVoteState;

functions/src/route/admin.ts

@@ -9,6 +9,7 @@ app.use(cors());
 app.post("/create", async (req: Request, res: Response) => {
   const prompt = req.body.prompt as string | undefined;
   const options = req.body.options as Array<string> | undefined;
+  const description = req.body.description as string | undefined;
 
   if (!prompt) {
     res.status(400).json({error: "Missing prompt"});
@@ -20,7 +21,12 @@ app.post("/create", async (req: Request, res: Response) => {
     return;
   }
 
-  res.json({id: await createVote(prompt, options)});
+  if (!description) {
+    res.status(400).json({error: "Missing description"});
+    return;
+  }
+
+  res.json({id: await createVote(prompt, description, options)});
 });
 
 app.put("/setActive", async (req: Request, res: Response) => {

functions/src/route/voting.ts

@@ -1,3 +1,4 @@
+import * as functions from "firebase-functions";
 import express, {Request, Response} from "express";
 import {
   getEntriesFromSnapshot,
@@ -122,4 +123,17 @@ app.get("/active", async (req: Request, res: Response) => {
   res.json({id: (await getActiveVote())?.id});
 });
 
+export const activeVoteState = functions.https.onCall(async () => {
+  const vote = await getActiveVote();
+  if (!vote) return undefined;
+
+  const voteData = await vote.get();
+  return {
+    ...voteData.data(),
+    voteId: vote.id,
+    votes: (await Promise.all(getVoteCounts(voteData)))
+        .map((query) => query.size),
+  };
+});
+
 export default app;

functions/src/types/vote.ts

@@ -20,6 +20,7 @@ export type VoteEntry = {
 
 export type Vote = {
     prompt: string
+    description: string
     [optionsField]: Array<string>
     [activeField]?: boolean
 };
@@ -44,14 +45,17 @@ export const updateVoteEntry = async (
     vote: DocumentReference<VoteEntry>,
     voteIndex: number
 ) =>
-  vote.update({voteIndex});
+  vote.update({[voteIndexField]: voteIndex});
 export const makeVoteEntry = async (
     vote: DocumentReference<Vote>,
     username: string,
     voteIndex: number
 ) =>
   vote.collection(entriesCollectionName)
-      .add({username, voteIndex}) as Promise<DocumentReference<VoteEntry>>;
+      .add({
+        [usernameField]: username,
+        [voteIndexField]: voteIndex,
+      }) as Promise<DocumentReference<VoteEntry>>;
 
 export const getVoteCounts = (
     vote: DocumentSnapshot<Vote>
@@ -80,8 +84,16 @@ export const getEntriesFromSnapshot = async (
   ).docs.map((doc) => doc.data() as VoteEntry);
 };
 
-export const createVote = async (prompt: string, options: Array<string>) => {
+export const createVote = async (
-  const vote = await votesCollection.add({prompt, options});
+    prompt: string,
+    description: string,
+    options: Array<string>
+) => {
+  const vote = await votesCollection.add({
+    prompt,
+    description,
+    [optionsField]: options,
+  });
   return vote.id;
 };
 

public/controls.html

@@ -99,6 +99,12 @@
                 <input type="text" class="form-row-field-input" placeholder=" " name="POST-prompt">
                 <label for="POST-prompt" class="form-row-field">Prompt</label>
             </div>
+            <div class="form-row">
+                <span class="form-row-number"></span>
+             
+                <input type="text" class="form-row-field-input" placeholder=" " name="POST-description">
+                <label for="POST-prompt" class="form-row-field">Description</label>
+            </div>
             <div class="form-row">
                 <span class="form-row-number"></span>
         
@@ -129,7 +135,7 @@
 
     <script>
         const DEBUG = true;
-        const target = (DEBUG ? "http://127.0.0.1:5001/" : "https://us-central1-streamchair-psychology.cloudfunctions.net/") + "streamchair-psychology/us-central1/";
+        const target = DEBUG ? "http://127.0.0.1:5001/streamchair-psychology/us-central1/" : "https://us-central1-streamchair-psychology.cloudfunctions.net/";
         
       document.addEventListener('DOMContentLoaded', function() {
         const createVoteForm = document.querySelector('#createVoteForm');
@@ -139,12 +145,18 @@
             
             const formData = new FormData(createVoteForm);
             const prompt = formData.get("POST-prompt");
+            const description = formData.get("POST-description");
 
             if (!prompt) {
                 alert("Please enter a prompt");
                 return;
             }
 
+            if (!description) {
+                alert("Please enter a description");
+                return;
+            }
+
             const options = [];
             for (let i = 1; i <= 4; i++) {
                 const option = formData.get(`POST-opt${i}`);
@@ -172,6 +184,7 @@
             req.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
             req.send(JSON.stringify({
                 prompt,
+                description,
                 options
             }));
         }

public/index.html

@@ -123,6 +123,17 @@
         /* background: #123123; */
       }
 
+      #novote {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        flex: 1;
+        width: 80%;
+        padding: 8px 16px;
+        margin: 8px;
+      }
+
       #voteprompt {
         margin-bottom: 1px;
         margin-top: 5px;
@@ -132,8 +143,10 @@
         list-style: none;
         display: flex;
         flex-direction: row;
+        align-items: center;
         padding: 0px;
         width: 100%;
+        overflow-x: hidden;
         /* background-color: #ffa100; */
       }
 
@@ -235,6 +248,10 @@
         outline-style: solid;
         outline-width: 2px;
       }
+
+      .hidden {
+        display: none !important;
+      }
     </style>
   </head>
   <body>
@@ -265,8 +282,8 @@
       <div id="voteinfo" class="outlinebox">
         <h1 id="voteprompt">Is OP the asshole?</h1>
         <ul id="votes" class="outlinebox">
-          <li style="width: 60%; background-color: var(--vote1);">/Yes (60%)</li>
+          <!--<li style="width: 60%; background-color: var(--vote1);">/Yes (60%)</li>
-          <li style="width: 40%; background-color: var(--vote4);">/No (40%)</li>
+          <li style="width: 40%; background-color: var(--vote4);">/No (40%)</li>-->
         </ul>
         <div id="voteextrainfo">
           <div id="votedetails">
@@ -291,9 +308,14 @@
           </div>
         </div>
       </div>
+
+      <div id="novote" class="outlinebox hidden">
+        <h1>There is currently no vote going on!</h1>
+      </div>
     </div>
 
     <script>
+      const voteUpdateInterval = 1000;
       document.addEventListener('DOMContentLoaded', function() {
         //const loadEl = document.querySelector('#load');
         // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
@@ -311,6 +333,94 @@
         //
         // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
 
+        let activeVoteData = undefined;
+        function updateVoteUI(fullRefresh) {
+          if (activeVoteData === undefined) {
+            document.getElementById("voteinfo").classList.add("hidden");
+            document.getElementById("novote").classList.remove("hidden");
+            return;
+          }
+
+          document.getElementById("novote").classList.add("hidden");
+          document.getElementById("voteinfo").classList.remove("hidden");
+
+          if (fullRefresh) {
+            document.getElementById("voteprompt").innerText = activeVoteData.prompt;
+            document.getElementById("postdescription").innerText = activeVoteData.description;
+          }
+
+          let totalVotes = 0;
+          for (let i = 0; i < activeVoteData.votes.length; i++) {
+            totalVotes += activeVoteData.votes[i];
+          }
+
+          const voteOpts = document.getElementById("voteopts");
+          const votes = document.getElementById("votes");
+          if (fullRefresh) {
+            // Remove all existing vote options
+            while (voteOpts.firstChild) {
+              voteOpts.removeChild(voteOpts.firstChild);
+            }
+
+            for (let i = 0; i < activeVoteData.options.length; i++) {
+              const newOpt = document.createElement("li");
+              const newOptText = document.createElement("strong");
+              newOptText.innerText = activeVoteData.options[i];
+              newOpt.appendChild(newOptText);
+              voteOpts.appendChild(newOpt);
+            }
+
+            while (votes.firstChild) {
+              votes.removeChild(votes.firstChild);
+            }
+
+            for (let i = 0; i < activeVoteData.options.length; i++) {
+              const newVote = document.createElement("li");
+              newVote.style.width = totalVotes == 0 ? `${100/activeVoteData.options.length}%` : `${(activeVoteData.votes[i] / totalVotes * 100)}%`;
+              newVote.style.backgroundColor = `var(--vote${i + 1})`;
+              newVote.innerHTML = activeVoteData.options[i] + " (" + (totalVotes == 0 ? `${+(100/activeVoteData.options.length).toFixed(2)}%` : +(activeVoteData.votes[i] / totalVotes * 100).toFixed(2)) + "%)";
+              votes.appendChild(newVote);
+            }
+          } else {
+            const voteOptsChildren = voteOpts.children;
+            for (let i = 0; i < voteOptsChildren.length; i++) {
+              const voteOpt = voteOptsChildren[i];
+              const voteOptText = voteOpt.children[0];
+              voteOptText.innerText = activeVoteData.options[i];
+            }
+
+            // Update votes list
+            const votesChildren = votes.children;
+            for (let i = 0; i < votesChildren.length; i++) {
+              const vote = votesChildren[i];
+              vote.innerHTML = activeVoteData.options[i] + " (" + (totalVotes == 0 ? `${+(100/activeVoteData.options.length).toFixed(2)}%` : +(activeVoteData.votes[i] / totalVotes * 100).toFixed(2)) + "%)";
+              vote.style.width = totalVotes == 0 ? `${100/activeVoteData.options.length}%` : (activeVoteData.votes[i] / totalVotes * 100) + "%";
+            }
+          }
+
+          document.getElementById("optsandinfo").children[1].innerText = totalVotes + " votes registered";
+        }
+
+        const activeVote = firebase.functions().httpsCallable('activeVote');
+        function updateVote() {
+          activeVote().then((data) => {
+            if (data && data.data) {
+              if (!activeVoteData || activeVoteData.id !== data.id) {
+                activeVoteData = data.data;
+                updateVoteUI(true);
+              } else {
+                activeVoteData = data.data;
+                updateVoteUI(false);
+              }
+            }
+
+            setTimeout(updateVote, voteUpdateInterval);
+          });
+        }
+
+        updateVoteUI(true);
+        updateVote();
+
         try {
           let app = firebase.app();
           /*