tools
/
death-notifier
1
0
Fork 0
Code Issues 4 Pull Requests Releases 8 Activity

Create table for listing trackings

This commit is contained in:
Florine W. Dekker 2022-08-12 16:38:17 +02:00
parent 9d3cf92a9d
commit 7d0b08e6b7
Signed by: FWDekker
GPG Key ID: D3DCFAA8A4560BE0
2 changed files with 176 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/main/index.php
View File

@ -88,31 +88,13 @@ $_SESSION["token"] = bin2hex(random_bytes(32));
<div class="row hidden" id="trackingRow"> <div class="row hidden" id="trackingRow">
<div class="column"> <div class="column">
<h2>Trackings</h2> <h2>Trackings</h2>
<pre id="trackings"></pre> TODO: Refresh button
</div> <p id="trackingsError"></p>
<div class="column"> <table id="trackings">
<h3>Add tracking</h3> <tr>
<form id="addTrackingForm" onsubmit="return false;"> <th>Test</th>
<p class="error"></p> </tr>
<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>" /> </table>
<label>
Person name
<input name="person_name" />
</label>
<button>Add tracking</button>
</form>
</div>
<div class="column">
<h3>Delete tracking</h3>
<form id="deleteTrackingForm" onsubmit="return false;">
<p class="error"></p>
<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>" />
<label>
Person name
<input name="person_name" />
</label>
<button>Delete tracking</button>
</form>
</div> </div>
</div> </div>

287
src/main/js/Main.ts
View File

@ -4,8 +4,93 @@ const {$, doAfterLoad, footer, header, nav} = window.fwdekker;
function refreshTrackings() { function refreshTrackings() {
fetch("api.php?action=list-trackings") fetch("api.php?action=list-trackings")
.then(it => it.text()) .then(it => it.json())
.then(it => $("#trackings").innerText = it); .then(trackings => {
$("#trackings tbody").remove();
$("#trackings").append(document.createElement("tbody"));
const headerRow = document.createElement("tr");
const headerPersonName = document.createElement("th");
headerPersonName.innerText = "Person name";
const headerIsDeceased = document.createElement("th");
headerIsDeceased.innerText = "Deceased?";
const headerDelete = document.createElement("th");
headerRow.append(headerPersonName, headerIsDeceased, headerDelete);
$("#trackings tbody").append(headerRow);
trackings.forEach((tracking: any) => {
const trackingRow = document.createElement("tr");
const trackingPersonName = document.createElement("td");
trackingPersonName.innerText = tracking["person_name"];
const trackingIsDeceased = document.createElement("td");
trackingIsDeceased.innerText = tracking["is_deceased"] === 1 ? "yes" : "no";
const trackingDelete = document.createElement("td");
const trackingDeleteButton = document.createElement("button");
trackingDeleteButton.innerText = "remove";
trackingDeleteButton.addEventListener("click", () => {
$("#trackingsError").innerText = "";
fetch("api.php",
{
method: "post",
headers: {
"Accept": "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({
action: "delete-tracking",
token: $("#loginForm input[name=token]").value,
person_name: tracking["person_name"],
})
})
.then(it => it.json())
.then(it => {
if (it !== true) {
$("#trackingsError").innerText = it;
return;
}
refreshTrackings();
});
});
trackingDelete.append(trackingDeleteButton);
trackingRow.append(trackingPersonName, trackingIsDeceased, trackingDelete);
$("#trackings tbody").append(trackingRow);
});
const createRow = document.createElement("tr");
const createPersonName = document.createElement("td");
const createPersonInput = document.createElement("input");
const createPersonSubmit = document.createElement("button");
createPersonSubmit.innerText = "add";
createPersonSubmit.addEventListener("click", () => {
$("#trackingsError").innerText = "";
fetch("api.php",
{
method: "post",
headers: {
"Accept": "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({
action: "add-tracking",
token: $("#loginForm input[name=token]").value,
person_name: createPersonInput.value,
})
})
.then(it => it.json())
.then(it => {
if (it !== true) {
$("#trackingsError").innerText = it;
return;
}
refreshTrackings();
});
});
createPersonName.append(createPersonInput, createPersonSubmit);
const createIsDeceased = document.createElement("td");
const createDelete = document.createElement("td");
createRow.append(createPersonName, createIsDeceased, createDelete);
$("#trackings tbody").append(createRow);
});
} }
@ -32,133 +117,99 @@ doAfterLoad(async () => {
$("#loginForm").addEventListener("submit", async () => { $("#loginForm").addEventListener("submit", async () => {
$("#loginForm .error").innerText = ""; $("#loginForm .error").innerText = "";
const response = await fetch("api.php", { fetch("api.php",
method: "post", {
headers: { method: "post",
"Accept": "application/json", headers: {
"Content-Type": "application/json", "Accept": "application/json",
}, "Content-Type": "application/json",
body: JSON.stringify({ },
action: "login", body: JSON.stringify({
// TODO: Deal with tokens in a smarter way. Allow refreshing them! Also remove duplication... action: "login",
token: $("#loginForm input[name=token]").value, // TODO: Deal with tokens in a smarter way. Allow refreshing them! Also remove duplication...
email: $("#loginForm input[name=email]").value, token: $("#loginForm input[name=token]").value,
password: $("#loginForm input[name=password]").value, email: $("#loginForm input[name=email]").value,
password: $("#loginForm input[name=password]").value,
})
}) })
}).then(it => it.json()); .then(it => it.json())
.then(it => {
if (response !== true) { if (it !== true) {
$("#loginForm .error").innerText = response; $("#loginForm .error").innerText = it;
return; return;
} }
$("#loginForm").reset(); $("#loginForm").reset();
loginRow.classList.add("hidden"); loginRow.classList.add("hidden");
trackingRow.classList.remove("hidden"); trackingRow.classList.remove("hidden");
accountRow.classList.remove("hidden"); accountRow.classList.remove("hidden");
refreshTrackings(); refreshTrackings();
});
}); });
$("#registerForm").addEventListener("submit", async () => { $("#registerForm").addEventListener("submit", async () => {
$("#registerForm .error").innerText = ""; $("#registerForm .error").innerText = "";
const response = await fetch("api.php", { fetch("api.php",
method: "post", {
headers: { method: "post",
"Accept": "application/json", headers: {
"Content-Type": "application/json", "Accept": "application/json",
}, "Content-Type": "application/json",
body: JSON.stringify({ },
action: "register", body: JSON.stringify({
token: $("#registerForm input[name=token]").value, action: "register",
email: $("#registerForm input[name=email]").value, token: $("#registerForm input[name=token]").value,
password: $("#registerForm input[name=password]").value, email: $("#registerForm input[name=email]").value,
password_confirm: $("#registerForm input[name=password_confirm]").value, password: $("#registerForm input[name=password]").value,
password_confirm: $("#registerForm input[name=password_confirm]").value,
})
}) })
}).then(it => it.json()); .then(it => it.json())
.then(it => {
if (response !== true) { if (it !== true) {
$("#registerForm .error").innerText = response; $("#registerForm .error").innerText = it;
return; return;
} }
$("#registerForm").reset(); $("#registerForm").reset();
$("#registerForm .error").innerText = "Account created successfully! You may now log in."; $("#registerForm .error").innerText = "Account created successfully! You may now log in.";
}); });
$("#addTrackingForm").addEventListener("submit", async () => {
$("#addTrackingForm .error").innerText = "";
const response = await fetch("api.php", {
method: "post",
headers: {
"Accept": "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({
action: "add-tracking",
token: $("#addTrackingForm input[name=token]").value,
person_name: $("#addTrackingForm input[name=person_name]").value,
})
}).then(it => it.json());
if (response !== true) {
$("#addTrackingForm .error").innerText = response;
return;
}
$("#addTrackingForm").reset();
refreshTrackings();
});
$("#deleteTrackingForm").addEventListener("submit", async () => {
$("#deleteTrackingForm .error").innerText = "";
const response = await fetch("api.php", {
method: "post",
headers: {
"Accept": "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({
action: "delete-tracking",
token: $("#deleteTrackingForm input[name=token]").value,
person_name: $("#deleteTrackingForm input[name=person_name]").value,
})
}).then(it => it.json());
if (response !== true) {
$("#deleteTrackingForm .error").innerText = response;
return;
}
$("#deleteTrackingForm").reset();
refreshTrackings();
}); });
$("#logoutForm").addEventListener("submit", async () => { $("#logoutForm").addEventListener("submit", async () => {
$("#logoutForm .error").innerText = ""; $("#logoutForm .error").innerText = "";
const response = await fetch("api.php", { fetch("api.php",
method: "post", {
headers: { method: "post",
"Accept": "application/json", headers: {
"Content-Type": "application/json", "Accept": "application/json",
}, "Content-Type": "application/json",
body: JSON.stringify({ },
action: "logout", body: JSON.stringify({
token: $("#logoutForm input[name=token]").value, action: "logout",
token: $("#logoutForm input[name=token]").value,
})
}) })
}).then(it => it.json()); .then(it => it.json())
.then(it => {
if (response !== true) { if (it !== true) {
$("#logoutForm .error").innerText = response; $("#logoutForm .error").innerText = it;
return; return;
} }
$("#logoutForm").reset(); $("#logoutForm").reset();
loginRow.classList.remove("hidden"); loginRow.classList.remove("hidden");
trackingRow.classList.add("hidden"); trackingRow.classList.add("hidden");
accountRow.classList.add("hidden"); accountRow.classList.add("hidden");
});
}); });
const userData = await fetch("api.php?action=get-user-data").then(it => it.text()); fetch("api.php?action=get-user-data")
if (userData === "\"not logged in\"") { .then(it => it.text())
loginRow.classList.remove("hidden"); .then(it => {
} else { if (it === "\"not logged in\"") {
trackingRow.classList.remove("hidden"); loginRow.classList.remove("hidden");
accountRow.classList.remove("hidden"); } else {
refreshTrackings(); trackingRow.classList.remove("hidden");
} accountRow.classList.remove("hidden");
refreshTrackings();
}
});
}); });