mirror of
https://github.com/zigzap/zap.git
synced 2025-10-21 07:34:08 +00:00
306 lines
9.7 KiB
HTML
306 lines
9.7 KiB
HTML
<html lang='en'>
|
|
|
|
<head>
|
|
<meta charset='utf-8'>
|
|
<meta name='viewport' content='width=device-width'>
|
|
<title>ZAP Demo</title>
|
|
<style>
|
|
body {
|
|
background-color: #0d1117;
|
|
}
|
|
|
|
h1 {
|
|
color: #cdb4db;
|
|
text-align: center;
|
|
}
|
|
|
|
h2 {
|
|
color: #ffafcc;
|
|
text-align: center;
|
|
}
|
|
|
|
h3 {
|
|
color: #ffc8dd;
|
|
text-align: center;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.brighter {
|
|
color: #bde0fe;
|
|
}
|
|
|
|
p {
|
|
color: #ffc927;
|
|
padding-left: 50px;
|
|
margin-right: 50px;
|
|
}
|
|
|
|
label {
|
|
color: #B0B0B0;
|
|
}
|
|
|
|
a {
|
|
color: #ffc927;
|
|
padding-left: 15px;
|
|
}
|
|
|
|
input {
|
|
color: #B06060;
|
|
margin-bottom: 20px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
textarea {
|
|
background-color: #181818;
|
|
color: #cdb4db;
|
|
font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
|
|
font-size: 1em;
|
|
border-radius: 12px;
|
|
border: 2px solid #cdb4db;
|
|
padding: 15px;
|
|
margin-top: 10px;
|
|
width: 80%;
|
|
height: 18rem;
|
|
}
|
|
|
|
form {
|
|
border: 2px solid #cdb4db;
|
|
border-radius: 12px;
|
|
padding: 15px;
|
|
margin-top: 10px;
|
|
font-size: 1em;
|
|
width: 400px;
|
|
text-align: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tdform {
|
|
border: none;
|
|
border-radius: none;
|
|
padding: 2px;
|
|
margin-top: 0px;
|
|
font-size: 1em;
|
|
width: auto;
|
|
text-align: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
button {
|
|
background-color: #ffafcc;
|
|
border-radius: 12px;
|
|
border: 2px solid #cdb4db;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.updatebutton {
|
|
background-color: #B0B0B0;
|
|
color: #181818;
|
|
}
|
|
|
|
.delbutton {
|
|
background-color: #B06060;
|
|
color: white;
|
|
}
|
|
|
|
.center {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
table {
|
|
background-color: #181818;
|
|
border-radius: 12px;
|
|
padding: 12px;
|
|
}
|
|
|
|
th {
|
|
color: #B06060;
|
|
padding: 15px;
|
|
}
|
|
|
|
td {
|
|
color: #B0B0B0;
|
|
}
|
|
</style>
|
|
<html>
|
|
|
|
<body>
|
|
<div class="center">
|
|
<form>
|
|
<div>
|
|
<label>First name:</label><br>
|
|
<input id="first_name"></input>
|
|
</div>
|
|
<div>
|
|
<label>Last name:</label><br>
|
|
<input id="last_name"></input>
|
|
</div>
|
|
<div>
|
|
<button type="button" onclick="onNewUser();">Add new user!</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="center">
|
|
<table id="usertable">
|
|
</table>
|
|
</div>
|
|
<div class="center">
|
|
<p><a href="/users">Show JSON for all users</a></p>
|
|
</div>
|
|
<div style="padding:20px; margin-top: 1rem;">
|
|
<label style="margin-bottom: 10px;">Log Output:</label>
|
|
<a id="logtoggler" onclick="toggleLog();" href="#">(show)</a>
|
|
<div class="center">
|
|
<textarea id="log" style="display:none"></textarea>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var eL = document.getElementById("log");
|
|
var eLt = document.getElementById("logtoggler");
|
|
|
|
var showLog = false;
|
|
|
|
function toggleLog() {
|
|
if (showLog) {
|
|
eL.style.display = "none";
|
|
eLt.textContent = "(show)";
|
|
} else {
|
|
eL.style.display = "block";
|
|
eLt.textContent = "(hide)";
|
|
}
|
|
showLog = !showLog;
|
|
}
|
|
function log(s) {
|
|
eL.value += s.toString();
|
|
eL.value += "\n"
|
|
eL.scrollTop = eL.scrollHeight;
|
|
}
|
|
|
|
function sendJSON(data, slug, method = "POST") {
|
|
json = JSON.stringify(data);
|
|
log("SENDING: " + json);
|
|
const response = fetch(slug, {
|
|
method: method,
|
|
body: json,
|
|
headers: {
|
|
"Content-Type": "application/json; charset=UTF-8"
|
|
}
|
|
});
|
|
return response;
|
|
}
|
|
|
|
function onNewUser() {
|
|
var first_name = document.getElementById("first_name").value;
|
|
var last_name = document.getElementById("last_name").value;
|
|
data = {
|
|
first_name: first_name,
|
|
last_name: last_name,
|
|
}
|
|
sendJSON(data, "/users", "POST")
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
log("SUCCESS: " + JSON.stringify(data));
|
|
getUserList();
|
|
})
|
|
.catch((error) => {
|
|
log("Error posting data");
|
|
});
|
|
}
|
|
|
|
function deleteUser(id) {
|
|
fetch("/users/" + id, { method: "DELETE", })
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
log("SUCCESS: " + JSON.stringify(data));
|
|
getUserList();
|
|
})
|
|
.catch((error) => {
|
|
log("Error deleting data");
|
|
});
|
|
}
|
|
|
|
function changeUser(id) {
|
|
const firstname = document.getElementById("first_" + id).value;
|
|
const lastname = document.getElementById("last_" + id).value;
|
|
data = {
|
|
first_name: firstname,
|
|
last_name: lastname,
|
|
}
|
|
sendJSON(data, "/users/" + id, "PATCH")
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
log("SUCCESS: " + JSON.stringify(data));
|
|
getUserList();
|
|
})
|
|
.catch((error) => {
|
|
log("Error updating data");
|
|
});
|
|
}
|
|
|
|
function addHeaderCell(tr, text) {
|
|
var th = document.createElement('TH');
|
|
th.innerHTML = text;
|
|
tr.appendChild(th);
|
|
}
|
|
|
|
function showTable(users) {
|
|
var t = document.getElementById("usertable");
|
|
var new_t = document.createElement("TABLE");
|
|
var header = new_t.createTHead();
|
|
var tr = header.insertRow();
|
|
// insertCell creates TD, we want TH
|
|
addHeaderCell(tr, 'id');
|
|
addHeaderCell(tr, 'first name');
|
|
addHeaderCell(tr, 'last name');
|
|
addHeaderCell(tr, '');
|
|
addHeaderCell(tr, '');
|
|
|
|
console.log("showTable()");
|
|
console.log(users);
|
|
// add the data rows
|
|
for (var i = 0; i < users.length; i++) {
|
|
var row = new_t.insertRow();
|
|
var c1 = row.insertCell();
|
|
c1.innerHTML = users[i].id;
|
|
var c2 = row.insertCell();
|
|
c2.innerHTML = '<input id="first_' + users[i].id + '" value="' + users[i].first_name + '"></input>';
|
|
var c3 = row.insertCell();
|
|
c3.innerHTML = '<input id="last_' + users[i].id + '" value="' + users[i].last_name + '"></input>';
|
|
var c4 = row.insertCell();
|
|
c4.innerHTML = ''
|
|
+ '<form class="tdform"><button class="updatebutton" type="button" onclick="changeUser(' + users[i].id + ');">change</button></form>'
|
|
;
|
|
var c5 = row.insertCell();
|
|
c5.innerHTML = ''
|
|
+ '<form class="tdform"><button class="delbutton" type="button" onclick="deleteUser(' + users[i].id + ');">del</button></form>'
|
|
;
|
|
}
|
|
console.log("before replace");
|
|
t.innerHTML = new_t.innerHTML;
|
|
console.log("after replace");
|
|
}
|
|
|
|
|
|
function getUserList() {
|
|
fetch("/users", { method: "GET", })
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
log("SUCCESS: " + JSON.stringify(data));
|
|
showTable(data);
|
|
})
|
|
.catch((error) => {
|
|
log("Error fetching data");
|
|
});
|
|
}
|
|
|
|
function init() {
|
|
getUserList();
|
|
}
|
|
init();
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|