376 lines
13 KiB
HTML
376 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<!-- update the version number as needed -->
|
|
<script defer src="/__/firebase/9.12.1/firebase-app-compat.js"></script>
|
|
<!-- include only the Firebase features as you need -->
|
|
<script defer src="/__/firebase/9.12.1/firebase-auth-compat.js"></script>
|
|
<script defer src="/__/firebase/9.12.1/firebase-database-compat.js"></script>
|
|
<script defer src="/__/firebase/9.12.1/firebase-firestore-compat.js"></script>
|
|
<script defer src="/__/firebase/9.12.1/firebase-functions-compat.js"></script>
|
|
<script defer src="/__/firebase/9.12.1/firebase-messaging-compat.js"></script>
|
|
<script defer src="/__/firebase/9.12.1/firebase-storage-compat.js"></script>
|
|
<script defer src="/__/firebase/9.12.1/firebase-analytics-compat.js"></script>
|
|
<script defer src="/__/firebase/9.12.1/firebase-remote-config-compat.js"></script>
|
|
<script defer src="/__/firebase/9.12.1/firebase-performance-compat.js"></script>
|
|
<!--
|
|
initialize the SDK after all desired features are loaded, set useEmulator to false
|
|
to avoid connecting the SDK to running emulators.
|
|
-->
|
|
<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%;
|
|
display: flex;
|
|
width: 20%;
|
|
flex-direction: column;
|
|
align-content: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
.form-btn {
|
|
margin: 20px 0px;
|
|
background-color: #f6fe00;
|
|
color: black;
|
|
padding: 10px 40px;
|
|
font-weight: 700;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.form-row {
|
|
border-bottom: 1px solid grey;
|
|
padding: 10px 0px;
|
|
position: relative;
|
|
margin: 10px 0px;
|
|
}
|
|
|
|
.form-row-number {
|
|
color: #8f63ff;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.form-row-field {
|
|
color: red;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
transition: 0.5s;
|
|
top: 10px;
|
|
margin-left: 1em;
|
|
}
|
|
|
|
.form-row-field-input {
|
|
background-color: inherit;
|
|
border: none;
|
|
display: block;
|
|
position: absolute;
|
|
top: 10px;
|
|
transition: 0.5s;
|
|
margin-left: 1.5em;
|
|
}
|
|
|
|
.form-row-field-input:focus~label, input:not(:placeholder-shown)~label {
|
|
top: -5px;
|
|
font-size: 12px;
|
|
color: #003333;
|
|
font-weight: bold;
|
|
}
|
|
|
|
*: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>
|
|
<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>
|
|
const DEBUG = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
|
|
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');
|
|
|
|
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();
|
|
|
|
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}`);
|
|
if (option) {
|
|
options.push(option);
|
|
}
|
|
}
|
|
|
|
if (options.length < 2) {
|
|
alert("Please enter at least 2 options");
|
|
return;
|
|
}
|
|
|
|
const req = new XMLHttpRequest();
|
|
req.open("POST", target + "admin/create");
|
|
req.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
|
|
req.send(JSON.stringify({
|
|
prompt,
|
|
description,
|
|
options
|
|
}));
|
|
}
|
|
|
|
if (createVoteForm.attachEvent) {
|
|
createVoteForm.attachEvent("submit", processCreateVote);
|
|
} else {
|
|
createVoteForm.addEventListener("submit", processCreateVote);
|
|
}
|
|
|
|
updateVoteList();
|
|
|
|
//const loadEl = document.querySelector('#load');
|
|
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
|
|
// // The Firebase SDK is initialized and available here!
|
|
//
|
|
// firebase.auth().onAuthStateChanged(user => { });
|
|
// firebase.database().ref('/path/to/ref').on('value', snapshot => { });
|
|
// firebase.firestore().doc('/foo/bar').get().then(() => { });
|
|
// firebase.functions().httpsCallable('yourFunction')().then(() => { });
|
|
// firebase.messaging().requestPermission().then(() => { });
|
|
// firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
|
|
// firebase.analytics(); // call to activate
|
|
// firebase.analytics().logEvent('tutorial_completed');
|
|
// firebase.performance(); // call to activate
|
|
//
|
|
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
|
|
|
|
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();
|
|
/*
|
|
let features = [
|
|
'auth',
|
|
'database',
|
|
'firestore',
|
|
'functions',
|
|
'messaging',
|
|
'storage',
|
|
'analytics',
|
|
'remoteConfig',
|
|
'performance',
|
|
].filter(feature => typeof app[feature] === 'function');
|
|
loadEl.textContent = `Firebase SDK loaded with ${features.join(', ')}`;
|
|
*/
|
|
} catch (e) {
|
|
console.error(e);
|
|
//loadEl.textContent = 'Error loading the Firebase SDK, check the console.';
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|