Create table for listing trackings
This commit is contained in:
parent
9d3cf92a9d
commit
7d0b08e6b7
GPG Key ID:
D3DCFAA8A4560BE0
|
|
@ -88,31 +88,13 @@ $_SESSION["token"] = bin2hex(random_bytes(32));
|
|||
<div class="row hidden" id="trackingRow">
|
||||
<div class="column">
|
||||
<h2>Trackings</h2>
|
||||
<pre id="trackings"></pre>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h3>Add tracking</h3>
|
||||
<form id="addTrackingForm" onsubmit="return false;">
|
||||
<p class="error"></p>
|
||||
<input type="hidden" name="token" value="<?= $_SESSION["token"] ?>" />
|
||||
<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>
|
||||
TODO: Refresh button
|
||||
<p id="trackingsError"></p>
|
||||
<table id="trackings">
|
||||
<tr>
|
||||
<th>Test</th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,8 +4,93 @@ const {$, doAfterLoad, footer, header, nav} = window.fwdekker;
|
|||
|
||||
function refreshTrackings() {
|
||||
fetch("api.php?action=list-trackings")
|
||||
.then(it => it.text())
|
||||
.then(it => $("#trackings").innerText = it);
|
||||
.then(it => it.json())
|
||||
.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 .error").innerText = "";
|
||||
|
||||
const response = await fetch("api.php", {
|
||||
method: "post",
|
||||
headers: {
|
||||
"Accept": "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
action: "login",
|
||||
// TODO: Deal with tokens in a smarter way. Allow refreshing them! Also remove duplication...
|
||||
token: $("#loginForm input[name=token]").value,
|
||||
email: $("#loginForm input[name=email]").value,
|
||||
password: $("#loginForm input[name=password]").value,
|
||||
fetch("api.php",
|
||||
{
|
||||
method: "post",
|
||||
headers: {
|
||||
"Accept": "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
action: "login",
|
||||
// TODO: Deal with tokens in a smarter way. Allow refreshing them! Also remove duplication...
|
||||
token: $("#loginForm input[name=token]").value,
|
||||
email: $("#loginForm input[name=email]").value,
|
||||
password: $("#loginForm input[name=password]").value,
|
||||
})
|
||||
})
|
||||
}).then(it => it.json());
|
||||
|
||||
if (response !== true) {
|
||||
$("#loginForm .error").innerText = response;
|
||||
return;
|
||||
}
|
||||
$("#loginForm").reset();
|
||||
loginRow.classList.add("hidden");
|
||||
trackingRow.classList.remove("hidden");
|
||||
accountRow.classList.remove("hidden");
|
||||
refreshTrackings();
|
||||
.then(it => it.json())
|
||||
.then(it => {
|
||||
if (it !== true) {
|
||||
$("#loginForm .error").innerText = it;
|
||||
return;
|
||||
}
|
||||
$("#loginForm").reset();
|
||||
loginRow.classList.add("hidden");
|
||||
trackingRow.classList.remove("hidden");
|
||||
accountRow.classList.remove("hidden");
|
||||
refreshTrackings();
|
||||
});
|
||||
});
|
||||
$("#registerForm").addEventListener("submit", async () => {
|
||||
$("#registerForm .error").innerText = "";
|
||||
|
||||
const response = await fetch("api.php", {
|
||||
method: "post",
|
||||
headers: {
|
||||
"Accept": "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
action: "register",
|
||||
token: $("#registerForm input[name=token]").value,
|
||||
email: $("#registerForm input[name=email]").value,
|
||||
password: $("#registerForm input[name=password]").value,
|
||||
password_confirm: $("#registerForm input[name=password_confirm]").value,
|
||||
fetch("api.php",
|
||||
{
|
||||
method: "post",
|
||||
headers: {
|
||||
"Accept": "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
action: "register",
|
||||
token: $("#registerForm input[name=token]").value,
|
||||
email: $("#registerForm input[name=email]").value,
|
||||
password: $("#registerForm input[name=password]").value,
|
||||
password_confirm: $("#registerForm input[name=password_confirm]").value,
|
||||
})
|
||||
})
|
||||
}).then(it => it.json());
|
||||
|
||||
if (response !== true) {
|
||||
$("#registerForm .error").innerText = response;
|
||||
return;
|
||||
}
|
||||
$("#registerForm").reset();
|
||||
$("#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();
|
||||
.then(it => it.json())
|
||||
.then(it => {
|
||||
if (it !== true) {
|
||||
$("#registerForm .error").innerText = it;
|
||||
return;
|
||||
}
|
||||
$("#registerForm").reset();
|
||||
$("#registerForm .error").innerText = "Account created successfully! You may now log in.";
|
||||
});
|
||||
});
|
||||
$("#logoutForm").addEventListener("submit", async () => {
|
||||
$("#logoutForm .error").innerText = "";
|
||||
|
||||
const response = await fetch("api.php", {
|
||||
method: "post",
|
||||
headers: {
|
||||
"Accept": "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
action: "logout",
|
||||
token: $("#logoutForm input[name=token]").value,
|
||||
fetch("api.php",
|
||||
{
|
||||
method: "post",
|
||||
headers: {
|
||||
"Accept": "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
action: "logout",
|
||||
token: $("#logoutForm input[name=token]").value,
|
||||
})
|
||||
})
|
||||
}).then(it => it.json());
|
||||
|
||||
if (response !== true) {
|
||||
$("#logoutForm .error").innerText = response;
|
||||
return;
|
||||
}
|
||||
$("#logoutForm").reset();
|
||||
loginRow.classList.remove("hidden");
|
||||
trackingRow.classList.add("hidden");
|
||||
accountRow.classList.add("hidden");
|
||||
.then(it => it.json())
|
||||
.then(it => {
|
||||
if (it !== true) {
|
||||
$("#logoutForm .error").innerText = it;
|
||||
return;
|
||||
}
|
||||
$("#logoutForm").reset();
|
||||
loginRow.classList.remove("hidden");
|
||||
trackingRow.classList.add("hidden");
|
||||
accountRow.classList.add("hidden");
|
||||
});
|
||||
});
|
||||
|
||||
const userData = await fetch("api.php?action=get-user-data").then(it => it.text());
|
||||
if (userData === "\"not logged in\"") {
|
||||
loginRow.classList.remove("hidden");
|
||||
} else {
|
||||
trackingRow.classList.remove("hidden");
|
||||
accountRow.classList.remove("hidden");
|
||||
refreshTrackings();
|
||||
}
|
||||
fetch("api.php?action=get-user-data")
|
||||
.then(it => it.text())
|
||||
.then(it => {
|
||||
if (it === "\"not logged in\"") {
|
||||
loginRow.classList.remove("hidden");
|
||||
} else {
|
||||
trackingRow.classList.remove("hidden");
|
||||
accountRow.classList.remove("hidden");
|
||||
refreshTrackings();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue