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

Listen to document changes instead of polling

Browse Source
This commit is contained in:
Gabriel Tofvesson 2022-10-22 14:10:10 +02:00
parent 8457ce9979
commit 038457f02d
8 changed files with 274 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
firestore.rules
View File

@ -1,6 +1,10 @@
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /state/{document=**} {
allow read, write: if true;
}
match /{document=**} {
allow read, write: if false;
}

3
functions/src/index.ts
View File

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

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

@ -1,6 +1,8 @@
import * as functions from "firebase-functions";
import express, {Request, Response} from "express";
import cors from "cors";
import {createVote, setActiveVote} from "../types/vote";
import {createVote, setActiveVote, getAllVotes} from "../types/vote";
import { setState, updateState } from "../types/state";
const app = express();
@ -26,7 +28,12 @@ app.post("/create", async (req: Request, res: Response) => {
return;
}
res.json({id: await createVote(prompt, description, options)});
const id = await createVote(prompt, description, options);
await setState(id);
console.log("set state")
res.json({id});
});
app.put("/setActive", async (req: Request, res: Response) => {
@ -37,7 +44,12 @@ app.put("/setActive", async (req: Request, res: Response) => {
return;
}
res.json({success: await setActiveVote(voteId)});
const success = await setActiveVote(voteId);
if (success) {
await updateState();
}
res.json({success});
});
app.put("/closeVote", async (req: Request, res: Response) => {
@ -48,7 +60,19 @@ app.put("/closeVote", async (req: Request, res: Response) => {
return;
}
res.json({success: await setActiveVote(voteId, false)});
const success = await setActiveVote(voteId, false);
if (success) {
await updateState();
}
res.json({success});
});
export const getAllVotesCall = functions.https.onCall(async () =>
(await getAllVotes()).docs.map((vote) => ({
...vote.data(),
id: vote.id,
}))
);
export default app;

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

@ -10,6 +10,7 @@ import {
getVote,
getActiveVote,
} from "../types/vote";
import { updateVoteCount } from "../types/state";
const app = express();
@ -47,11 +48,13 @@ app.post("/", async (req: Request, res: Response) => {
const entry = await getVoteEntry(vote.ref, voter);
if (!entry) {
await makeVoteEntry(vote.ref, voter, voteIndex);
await updateVoteCount();
res.json({success: true});
return;
}
await updateVoteEntry(entry, voteIndex);
await updateVoteCount();
res.json({success: true});
});

27
functions/src/types/state.ts Normal file
View File

@ -0,0 +1,27 @@
import {
FieldValue,
getFirestore,
} from "firebase-admin/firestore";
const db = getFirestore();
export type State = {
currentVote: string | null
voteChanges: number
changes: number
};
const stateCollection = db.collection("state");
export const setState = (currentVote: string | null) =>
stateCollection.doc("currentVote").set({
currentVote,
changes: 0,
voteChanges: 0
});
export const updateState = () =>
stateCollection.doc("currentVote").update({changes: FieldValue.increment(1)});
export const updateVoteCount = () =>
stateCollection.doc("currentVote").update({voteChanges: FieldValue.increment(1)});

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

@ -28,6 +28,7 @@ export type Vote = {
export const getEntriesCollection = (vote: DocumentReference<Vote>) =>
vote.collection(entriesCollectionName);
export const getAllVotes = async () => await votesCollection.get();
export const getVoteSnapshot = async (id: string) =>
votesCollection

240
public/controls.html
View File

@ -23,6 +23,13 @@
<script defer src="/__/firebase/init.js?useEmulator=true"></script>
<style media="screen">
:root {
--voteCardColor: #e5e5e5;
}
#createVote {
display: flex;
width: 50%;
}
.form-inputs {
padding: 40px;
flex: 60%;
@ -85,52 +92,95 @@
*:focus {
outline: none;
}
#splitpage {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 100vh;
}
#votes {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 50%;
}
.btn-activate {
margin: 20px;
background-color: #f6fe00;
color: black;
padding: 10px 40px;
font-weight: 700;
border: none;
cursor: pointer;
}
.btn-close {
margin: 20px;
background-color: red;
color: black;
padding: 10px 40px;
font-weight: 700;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Controls</h1>
<!-- Form for creating a vote with a prompt and between 2 and 4 options -->
<div class="form-inputs">
<form action="" method="POST" id="createVoteForm">
<div class="form-row">
<span class="form-row-number"></span>
<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>
<input type="text" class="form-row-field-input" placeholder=" " name="POST-opt1">
<label for="POST-opt1" class="form-row-field">Option 1</label>
</div>
<div class="form-row">
<span class="form-row-number"></span>
<input type="text" class="form-row-field-input" placeholder=" " name="POST-opt2">
<label for="POST-opt2" class="form-row-field">Option 2</label>
</div>
<div class="form-row">
<span class="form-row-number"></span>
<input type="text" class="form-row-field-input" placeholder=" " name="POST-opt3">
<label for="POST-opt3" class="form-row-field">Option 3</label>
</div>
<div class="form-row">
<span class="form-row-number"></span>
<input type="text" class="form-row-field-input" placeholder=" " name="POST-opt4">
<label for="POST-opt4" class="form-row-field">Option 4</label>
</div>
<input class="form-btn" type="submit" value="Create vote">
</form>
<div id="splitpage">
<!-- Form for creating a vote with a prompt and between 2 and 4 options -->
<div id="createVote" class="form-inputs">
<form action="" method="POST" id="createVoteForm">
<div class="form-row">
<span class="form-row-number"></span>
<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>
<input type="text" class="form-row-field-input" placeholder=" " name="POST-opt1">
<label for="POST-opt1" class="form-row-field">Option 1</label>
</div>
<div class="form-row">
<span class="form-row-number"></span>
<input type="text" class="form-row-field-input" placeholder=" " name="POST-opt2">
<label for="POST-opt2" class="form-row-field">Option 2</label>
</div>
<div class="form-row">
<span class="form-row-number"></span>
<input type="text" class="form-row-field-input" placeholder=" " name="POST-opt3">
<label for="POST-opt3" class="form-row-field">Option 3</label>
</div>
<div class="form-row">
<span class="form-row-number"></span>
<input type="text" class="form-row-field-input" placeholder=" " name="POST-opt4">
<label for="POST-opt4" class="form-row-field">Option 4</label>
</div>
<input class="form-btn" type="submit" value="Create vote">
</form>
</div>
<div id="votes">
<ul id="votelist">
</ul>
</div>
</div>
<script>
@ -140,6 +190,88 @@
document.addEventListener('DOMContentLoaded', function() {
const createVoteForm = document.querySelector('#createVoteForm');
function createVoteEntry(vote) {
const li = document.createElement('li');
li.style.display = "flex";
li.style.flexDirection = "column";
li.style.width = "100%";
li.style.margin = "20px";
li.style.backgroundColor = "var(--voteCardColor)";
li.style.borderRadius = "10px";
li.style.padding = "20px";
const title = document.createElement('h3');
title.innerText = vote.prompt;
li.appendChild(title);
const ul = document.createElement('ul');
ul.style.listStyleType = "none";
for (let i = 0; i < vote.options.length; i++) {
const option = vote.options[i];
const li = document.createElement('li');
li.innerText = option;
ul.appendChild(li);
}
li.appendChild(ul);
const div = document.createElement('div');
div.style.display = "flex";
div.style.flexDirection = "row";
div.style.justifyContent = "space-between";
const buttonSetActive = document.createElement('button');
buttonSetActive.innerText = "Set active";
buttonSetActive.addEventListener('click', () => {
fetch(target + 'admin/setActive', {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
voteId: vote.id
})
});
});
buttonSetActive.classList.add('btn-activate');
div.appendChild(buttonSetActive);
const buttonClose = document.createElement('button');
buttonClose.innerText = "Close";
buttonClose.addEventListener('click', () => {
fetch(target + 'admin/closeVote', {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
voteId: vote.id
})
});
});
buttonClose.classList.add('btn-close');
div.appendChild(buttonClose);
li.appendChild(div);
return li;
}
const getAllVotes = firebase.functions().httpsCallable('getAllVotes');
function updateVoteList() {
getAllVotes().then((result) => {
const votelist = document.querySelector('#votelist');
while (votelist.firstChild) {
votelist.removeChild(votelist.firstChild);
}
for (let i = 0; i < result.data.length; i++) {
votelist.appendChild(createVoteEntry(result.data[i]));
}
});
}
function processCreateVote(e) {
e.preventDefault();
@ -171,15 +303,6 @@
}
const req = new XMLHttpRequest();
req.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText);
} else {
console.log(this.readyState, this.status);
}
};
req.open("POST", target + "admin/create");
req.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
req.send(JSON.stringify({
@ -195,6 +318,8 @@
createVoteForm.addEventListener("submit", processCreateVote);
}
updateVoteList();
//const loadEl = document.querySelector('#load');
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
// // The Firebase SDK is initialized and available here!
@ -211,6 +336,19 @@
//
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
let currentState = undefined;
function onChange(change) {
change.docs.forEach(doc => {
const changeData = doc.data();
if (currentState === undefined || changeData.currentVote !== currentState.currentVote || changeData.changes !== currentState.changes)
updateVoteList();
currentState = changeData;
});
}
firebase.firestore().collection('state').onSnapshot(onChange);
try {
let app = firebase.app();
/*

31
public/index.html
View File

@ -61,7 +61,7 @@
text-align: center;
font-size: 14px;
z-index: 100;
height: 33%;
height: 35%;
display: flex;
flex-direction: row;
background-color: #ffffff;
@ -136,7 +136,7 @@
#voteprompt {
margin-bottom: 1px;
margin-top: 5px;
margin-top: 2px;
}
#votes {
@ -147,6 +147,7 @@
padding: 0px;
width: 100%;
height: 35px;
margin: 5px 0px;
overflow: hidden;
/* background-color: #ffa100; */
}
@ -223,28 +224,31 @@
flex-wrap: wrap;
display: flex;
list-style: none;
align-items: center;
align-items: stretch;
justify-content: space-evenly;
padding: 0px;
}
#voteopts > li {
flex: 1 0 50%;
padding: 0px;
flex: 1 0 35%;
display: flex;
align-items: center;
justify-content: center;
margin: 1%;
border-color: black;
border-style: solid;
border-width: 2px;
}
#voteopts > li > strong {
width: auto;
margin: 0px;
padding: 4px 25%;
margin: 5px 0px;
padding: 2px 0px;
color: var(--titleColor);
}
/* General styles */
#voteopts > li > strong, .outlinebox {
.outlinebox {
outline-color: black;
outline-style: solid;
outline-width: 2px;
@ -301,8 +305,10 @@
<p style="text-align: start; color: var(--infoColor);">Vote by typing one of the following options in chat.</p>
<div id="optsandinfo">
<ul id="voteopts">
<!--
<li><strong>/Yes</strong></li>
<li><strong>/No</strong></li>
-->
</ul>
<p style="margin: 0px; align-self: center; color: var(--infoColor);">23 votes registered</p>
</div>
@ -406,22 +412,25 @@
function updateVote() {
activeVote().then((data) => {
if (data && data.data) {
if (!activeVoteData || activeVoteData.id !== data.id) {
console.log(activeVoteData, data);
if (!activeVoteData || activeVoteData.voteId !== data.data.voteId) {
activeVoteData = data.data;
console.log("Full update");
updateVoteUI(true);
} else {
activeVoteData = data.data;
console.log("Partial update");
updateVoteUI(false);
}
}
setTimeout(updateVote, voteUpdateInterval);
});
}
updateVoteUI(true);
updateVote();
firebase.firestore().collection('state').onSnapshot(updateVote);
try {
let app = firebase.app();
/*