GabrielTofvesson/streamchair-psychology
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Integrate backend with UI

Browse Source
This commit is contained in:
Gabriel Tofvesson 2022-10-22 07:11:00 +02:00
parent 400c11d3a7
commit 6efe880528
6 changed files with 165 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
functions/src/index.ts
View File

@ -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;

8
functions/src/route/admin.ts
View File

@ -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) => {

14
functions/src/route/voting.ts
View File

@ -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;

20
functions/src/types/vote.ts
View File

@ -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>) => {
const vote = await votesCollection.add({prompt, options});
export const createVote = async (
prompt: string,
description: string,
options: Array<string>
) => {
const vote = await votesCollection.add({
prompt,
description,
[optionsField]: options,
});
return vote.id;
};

15
public/controls.html
View File

@ -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
}));
}

114
public/index.html
View File

@ -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: 40%; background-color: var(--vote4);">/No (40%)</li>
<!--<li style="width: 60%; background-color: var(--vote1);">/Yes (60%)</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();
/*