Steven/SignatureCardFrontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix data consistancy in submitForm function

Browse Source
This commit is contained in:
Steven Tracey 2023-04-27 13:50:51 -04:00
parent eb012e6cdd
commit cab886e5ab
3 changed files with 70 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
index.html
View File

@ -42,7 +42,9 @@
<div class="container">
<h2 id="displayedUrl" class="text-center mt-5 h2">Current Backend Url: </h2>
<h1 class="text-center mt-5 h1">** DEV ENV** - VCard Creator - ** DEV ENV **</h1>
<form method="post" class="form-group mt-5">
<a id="vcard" href="#"></a>
<label for="vcard" class="text-center"></label>
<div class="form-group mt-5">
<div class="form-group">
<label for="full_name">Full Name &amp; Credentials</label>
<input type="text" class="form-control" id="full_name" name="full_name" maxlength="36" required="">
@ -57,15 +59,7 @@
</div>
<div class="form-group">
<label for="location">Location:</label>
<select class="form-control" id="location" name="location">
<option value="Capital Area Intermediate Unit">Capital Area Intermediate Unit</option>
<option value="Capital Area Early Learning Center">Capital Area Early Learning Center</option>
<option value="Hill Top Academy">Hill Top Academy</option>
</select>
<select class="form-control" id="location" name="location"></select>
</div>
<div class="form-group">
<input type="checkbox" id="directLineCheckbox" onclick="handleCheckbox()">
@ -83,8 +77,8 @@
<label for="cellNumber">Cell Number</label>
<input type="tel" class="form-control" id="cellNumber" name="cellNumber" maxlength="15" required="">
</div>
<button type="submit" class="btn btn-primary" id="formSubmit">Submit</button>
</form>
<button class="btn btn-primary" id="formSubmit">Generate VCard</button>
</div>
</div>
</section>
</main>

78
script.js
View File

@ -12,36 +12,69 @@ function handleCheckbox() {
}
}
function submitForm() {
let backendUrl = "http://127.0.0.1:8090"
let locations = JSON.parse("{}");
function submitForm() {
fetchWithTimeout(backendUrl + "/", {
timeout: 5000,
method: 'POST',
mode: 'cors',
headers: {
'Accept': 'image/png',
'Content-Type': 'application/json'
},
body: JSON.stringify(
"{" +
"\"name\":\"" + document.getElementById("full_name").value + "\"," +
"\"title\":\"" + document.getElementById("title").value + "\"," +
"\"email\":\"" + document.getElementById("email").value + "\"," +
"\"location\":\"" + document.getElementById("location").value + "\"," +
"\"extension\":\"" + document.getElementById("extension").value + "\"," +
"\"hasExtension\":\"" + document.getElementById("hasExtension").value + "\"," +
"\"cellNumber\":\"" + document.getElementById("cellNumber").value + "\"," +
"\"hasCell\":\"" + document.getElementById("hasCell").value + "\"" +
"}"
)
}).then(response => {
console.log(response);
});
}
function getLocations() {
//TODO use (backend)/data/locations and do `document.getElementById("location").innerHtml`
//TODO and add <option> tags with the appropriate names, then create a map of names to other data
//TODO find equivalent of object to make things easier?
}
let locationsList = document.getElementById("location");
let backendUrl = "http://127.0.0.1:8090"
fetchWithTimeout(backendUrl + "/data/locations", {
timeout: 5000,
method: 'GET',
mode: 'cors',
headers: {
'Accept': 'application/json'
}
}).then(response => {
response.text().then(text => {
locations = JSON.parse(text);
locationsList.innerText = "";
for (let i = 0; i < locations.length; i++) {
locationsList.options[locationsList.options.length] = new Option(locations[i].name, locations[i].id);
}
})
});
}
async function checkBackend() {
const statusCircle = document.getElementById("statusCircle");
const previousState = statusCircle.classList.contains("connected") ? "connected" : "disconnected";
statusCircle.classList.replace(previousState, "loading");
try {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000)
let response;
await fetch(backendUrl + "/heartbeat", {
const response = await fetchWithTimeout(backendUrl + "/heartbeat", {
timeout: 5000,
method: 'GET',
mode: 'cors',
headers: {
'Accept': 'application/json'
},
signal: controller.signal
}).then(res => {
response = res;
clearTimeout(timeoutId);
}
});
if (response.status === 200) {
console.log('Backend up with code ', response.status);
@ -53,6 +86,7 @@ async function checkBackend() {
console.log("Backend down with error ", err);
statusCircle.classList.replace("loading", "disconnected");
}
getLocations();
}
function saveBackendUrl() {
@ -80,4 +114,18 @@ function loadBackendUrl() {
console.log("Unable to load backendUrl from cookie, defaulting to 127.0.0.1:8090");
}
}
}
async function fetchWithTimeout(resource, options = {}) {
const { timeout = 8000 } = options;
const controller = new AbortController();
const id = setTimeout(() => controller.abort(), timeout);
const response = await fetch(resource, {
...options,
signal: controller.signal
});
clearTimeout(id);
return response;
}

2
stylesheet.css
View File

@ -32,7 +32,7 @@
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
animation: spin 2s linear infinite;
animation: spin 1.25s ease-in-out infinite;
}
@keyframes spin {