chopster44/GiacPoints
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: chopster44:46cc0237ce4f6a26c80abb468b77f255c29626c1
Branches Tags
chopster44:main
..
compare: chopster44:main
Branches Tags
chopster44:main

6 Commits
46cc0237ce ... main

Author SHA1 Message Date
chopster44
479044d4ea Added quickLog™ 2023-07-29 20:41:17 +01:00
chopster44
fd58f130a0 Add task blanks input fields, actually 2023-07-29 19:34:12 +01:00
chopster44
4dcf065501 Add task blanks input fields 2023-07-29 19:28:16 +01:00
chopster44
75413b2c5e Added 'add task' functionality 2023-07-29 19:25:37 +01:00
chopster44
453f62cfae Displays 'such empty' if no task exists 2023-07-29 19:13:19 +01:00
chopster44
fde246ecb7 Displays 'such empty' if no task has been completed 2023-07-29 19:11:50 +01:00
3 changed files with 98 additions and 27 deletions
Expand all files Collapse all files

4
frontend/index.css
View File

@@ -60,4 +60,8 @@ pre {
padding: 0; padding: 0;
background: white; background: white;
border-radius: 0; border-radius: 0;
}
#taskCard {
margin-top: 45%;
} }

19
frontend/index.html
View File

@@ -8,7 +8,6 @@
<link rel="stylesheet" href="/frontend/index.css"> <link rel="stylesheet" href="/frontend/index.css">
</head> </head>
<body> <body>
<script src="/frontend/index.js"></script>
<div id="login"> <div id="login">
<div class="flex three demo" style="height: 100%; width: 100%"> <div class="flex three demo" style="height: 100%; width: 100%">
<div class="fourth two-fifth-1000"></div> <div class="fourth two-fifth-1000"></div>
@@ -40,7 +39,18 @@
</div> </div>
<div id="historyContent"></div> <div id="historyContent"></div>
</div> </div>
<div id="addTask" class="screen" style="display: none;">Add Task</div> <div id="addTask" class="screen" style="display: none;">
<article class="card" id="taskCard">
<header>
<h1>New task</h1> <br>
<label for="newTaskName">Task name</label>
<input type="text" id="newTaskName"> <br>
<label for="newTaskPoints">Task points</label>
<input type="number" id="newTaskPoints" min="1" max="5"> <br>
<input onclick="newTask()" value="Create" type="submit"> <br>
</header>
</article>
</div>
</div> </div>
<div id="menu" class="flex three demo"> <div id="menu" class="flex three demo">
<div class="third" id="taskButton"> <div class="third" id="taskButton">
@@ -50,10 +60,11 @@
<span class="button" onclick="switchScreen('history')">History</span> <span class="button" onclick="switchScreen('history')">History</span>
</div> </div>
<div class="third" id="addButton"> <div class="third" id="addButton">
<!-- <span class="button tooltip-top" onclick="switchScreen('add')" disabled data-tooltip="In construction">+ Task</span>--> <span class="button tooltip-top" onclick="switchScreen('add')" >+ Task</span>
<span class="button tooltip-top" disabled data-tooltip="In construction">+ Task</span> <!-- <span class="button tooltip-top" disabled data-tooltip="In construction">+ Task</span>-->
</div> </div>
</div> </div>
</div> </div>
<script src="/frontend/index.js"></script>
</body> </body>
</html> </html>

102
frontend/index.js
View File

@@ -1,3 +1,7 @@
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function login() { async function login() {
// tell the user the app is loading // tell the user the app is loading
document.getElementById("loginSubmit").value = "Loading"; document.getElementById("loginSubmit").value = "Loading";
@@ -30,12 +34,12 @@ async function login() {
// store user data in session storage // store user data in session storage
let data = await response.json(); let data = await response.json();
sessionStorage.setItem("uid", data.uid); localStorage.setItem("uid", data.uid);
sessionStorage.setItem("name", data.name); localStorage.setItem("name", data.name);
sessionStorage.setItem("role", data.role); localStorage.setItem("role", data.role);
// if role is admin, keep auto styling // if role is admin, keep auto styling
if (sessionStorage.getItem("role") !== "admin") { if (localStorage.getItem("role") !== "admin") {
document.getElementById("addButton").setAttribute("style", "display: none;"); document.getElementById("addButton").setAttribute("style", "display: none;");
document.getElementById("taskButton").classList.value = "half"; document.getElementById("taskButton").classList.value = "half";
document.getElementById("historyButton").classList.value = "half"; document.getElementById("historyButton").classList.value = "half";
@@ -69,41 +73,55 @@ async function populateScreen() {
// if it is a user make the tasks add points // if it is a user make the tasks add points
// or if admin make it do nothing // or if admin make it do nothing
if (sessionStorage.getItem("role") === "user") { if (localStorage.getItem("role") === "user") {
for (let i = 0; i < tasks.length; i++) { try {
taskPage.innerHTML += ` for (let i = 0; i < tasks.length; i++) {
taskPage.innerHTML += `
<div id="${tasks[i].tid}" class="half" style="height: fit-content"> <div id="${tasks[i].tid}" class="half" style="height: fit-content">
<div class="button" onclick="completeTask(${tasks[i].tid})"> <div class="button" onclick="completeTask(${tasks[i].tid})">
<p id="taskName">${tasks[i].name}</p> <p id="taskName">${tasks[i].name}</p>
<p id="${tasks[i].tid}-p">${tasks[i].points} points</p> <p id="${tasks[i].tid}-p">${tasks[i].points} points</p>
</div> </div>
</div>` </div>`
}
} catch (e) {
taskPage.innerHTML +=`<sub>such empty</sub>`
} }
} else if (sessionStorage.getItem("role") === "admin") { } else if (localStorage.getItem("role") === "admin") {
for (let i = 0; i < tasks.length; i++) { try {
taskPage.innerHTML += ` for (let i = 0; i < tasks.length; i++) {
taskPage.innerHTML += `
<div id="${tasks[i].tid}" class="half" style="height: fit-content"> <div id="${tasks[i].tid}" class="half" style="height: fit-content">
<div class="button" disabled data-tooltip="Admins can't get points"> <div class="button" disabled data-tooltip="Admins can't get points">
<p id="taskName">${tasks[i].name}</p> <p id="taskName">${tasks[i].name}</p>
<p id="${tasks[i].tid}-p">${tasks[i].points} points</p> <p id="${tasks[i].tid}-p">${tasks[i].points} points</p>
</div> </div>
</div>` </div>`
}
} catch (e) {
taskPage.innerHTML +=`<sub>such empty</sub>`
} }
} }
for (let i = (history.length -1); i >= 0; i-=1) { try {
for (let i = (history.length -1); i >= 0; i-=1) {
historyPage.innerHTML += `
<div class="full">
<article class="card">
<header>
<p>User: ${history[i].user}</p>
<p>Task: ${history[i].task}</p>
<p>Time: ${history[i].time}</p>
<p>Points gained: ${history[i].pointsGained}</p>
</header>
</article>
</div>`
}
} catch (e) {
historyPage.innerHTML += ` historyPage.innerHTML += `
<div class="full"> <sub>Such empty</sub>`
<article class="card">
<header>
<p>User: ${history[i].user}</p>
<p>Task: ${history[i].task}</p>
<p>Time: ${history[i].time}</p>
<p>Points gained: ${history[i].pointsGained}</p>
</header>
</article>
</div>`
} }
for (let i = 0; i < stats.length; i++) { for (let i = 0; i < stats.length; i++) {
// put user points in box // put user points in box
statsPage.innerText += `${stats[i].name}: ${stats[i].points} \n` statsPage.innerText += `${stats[i].name}: ${stats[i].points} \n`
@@ -113,7 +131,7 @@ async function populateScreen() {
async function completeTask(taskID) { async function completeTask(taskID) {
let points = document.getElementById(`${taskID}-p`).innerText.split(" ")[0]; let points = document.getElementById(`${taskID}-p`).innerText.split(" ")[0];
let time = new Date().toISOString().split(".")[0]; let time = new Date().toISOString().split(".")[0];
let uid = sessionStorage.getItem("uid"); let uid = localStorage.getItem("uid");
await fetch("/completeTask", { await fetch("/completeTask", {
method: "POST", method: "POST",
headers: { headers: {
@@ -141,4 +159,42 @@ async function switchScreen(button) {
} else if (button === "add") { } else if (button === "add") {
document.getElementById("addTask").setAttribute("style", ""); document.getElementById("addTask").setAttribute("style", "");
} }
} }
async function newTask() {
let points = document.getElementById(`newTaskPoints`);
let name = document.getElementById(`newTaskName`);
await fetch("/addTask", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
tid: 0,
name: name.value,
points: Number(points.value),
})
});
points.value = "";
name.value = "";
}
async function fastLog() {
sleep(500);
if (localStorage.getItem("uid") != null && localStorage.getItem("name") != null && localStorage.getItem("role") != null) {
document.getElementById("login").setAttribute("style", "display: none;");
document.getElementById("mainPage").setAttribute("style", "");
if (localStorage.getItem("role") !== "admin") {
document.getElementById("addButton").setAttribute("style", "display: none;");
document.getElementById("taskButton").classList.value = "half";
document.getElementById("historyButton").classList.value = "half";
document.getElementById("menu").classList.value = "flex two";
}
await populateScreen();
} else {
// do nothing
}
}
fastLog();