Significant progress
This commit is contained in:
parent
046f588359
commit
eb012e6cdd
29
index.html
29
index.html
@ -27,15 +27,12 @@
|
||||
</a>
|
||||
<div class="nav-container">
|
||||
<label class="nav-align" for="newBackendUrlInput">Change Backend Url</label>
|
||||
<input type="text" class="form-control nav-align" id="newBackendUrlInput" name="newBackendUrlInput">
|
||||
<input type="text" class="form-control nav-align" id="newBackendUrlInput" name="newBackendUrlInput" onfocus="this.value=''" value="127.0.0.1:8090">
|
||||
<button class="btn btn-primary nav-align" id="changeBackendButton">Change Backend Url</button>
|
||||
</div>
|
||||
<div class="nav-container">
|
||||
<p class="nav-align">Backend Status</p>
|
||||
<svg class="nav-align connected" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle r="1" cx="1" cy="1" />
|
||||
</svg>
|
||||
<!--<span class="connected nav-align backend-status-indicator">●</span>-->
|
||||
<div class="connected nav-align circle" id="statusCircle"> </div>
|
||||
<button class="btn btn-primary nav-align" id="checkBackendButton">Reload</button>
|
||||
</div>
|
||||
</nav>
|
||||
@ -43,7 +40,7 @@
|
||||
<main class="page contact-page">
|
||||
<section class="portfolio-block contact">
|
||||
<div class="container">
|
||||
<h2 class="text-center mt-5 h2">Current Backend Url: 127.0.0.1:8090</h2>
|
||||
<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">
|
||||
<div class="form-group">
|
||||
@ -62,22 +59,12 @@
|
||||
<label for="location">Location:</label>
|
||||
<select class="form-control" id="location" name="location">
|
||||
|
||||
<option value="Capital Area Early Learning Center">Capital Area Early Learning Center</option>
|
||||
|
||||
<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>
|
||||
|
||||
<option value="Hershey Elementary/Derry PS">Hershey Elementary/Derry PS</option>
|
||||
|
||||
<option value="Londonderry Elementary">Londonderry Elementary</option>
|
||||
|
||||
<option value="Upper Dauphin Elementary School">Upper Dauphin Elementary School</option>
|
||||
|
||||
<option value="PA STEAM">PA STEAM</option>
|
||||
|
||||
<option value="Conewago Elementary">Conewago Elementary</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
@ -88,7 +75,7 @@
|
||||
<label for="directLine">Direct Line:</label>
|
||||
<input type="text" class="form-control" id="directLine" name="directLine" maxlength="15" required="">
|
||||
</div>
|
||||
<div class="form-group" ,="" id="extensioninput">
|
||||
<div class="form-group" id="extensionInput">
|
||||
<label for="extension">Extension</label>
|
||||
<input type="tel" class="form-control" id="extension" name="extension" required="">
|
||||
</div>
|
||||
@ -96,7 +83,7 @@
|
||||
<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">Submit</button>
|
||||
<button type="submit" class="btn btn-primary" id="formSubmit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@ -105,9 +92,11 @@
|
||||
<script src="script.js"></script>
|
||||
<script>
|
||||
loadBackendUrl();
|
||||
checkBackend();
|
||||
|
||||
document.getElementById("changeBackendButton").addEventListener("click", saveBackendUrl, false);
|
||||
document.getElementById("checkBackendButton").addEventListener("click", checkBackend, false);
|
||||
document.getElementById("formSubmit").addEventListener("click", submitForm, false);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
45
script.js
45
script.js
@ -9,29 +9,63 @@ function handleCheckbox() {
|
||||
extensionInput.style.display = "block";
|
||||
directLineInput.style.display = "none";
|
||||
document.getElementById("directLine").value = "";
|
||||
}
|
||||
}
|
||||
|
||||
function submitForm() {
|
||||
|
||||
}
|
||||
|
||||
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 backendUrl = "http://127.0.0.1:8090"
|
||||
|
||||
async function checkBackend() {
|
||||
const statusCircle = document.getElementById("statusCircle");
|
||||
const previousState = statusCircle.classList.contains("connected") ? "connected" : "disconnected";
|
||||
statusCircle.classList.replace(previousState, "loading");
|
||||
try {
|
||||
const response = await fetch(backendUrl);
|
||||
const controller = new AbortController();
|
||||
const timeoutId = setTimeout(() => controller.abort(), 5000)
|
||||
let response;
|
||||
await fetch(backendUrl + "/heartbeat", {
|
||||
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);
|
||||
console.log(response);
|
||||
} else {
|
||||
console.log("Something weird happened: ", response.status);
|
||||
}
|
||||
statusCircle.classList.replace("loading", "connected");
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
console.log("Backend down with error ", err);
|
||||
statusCircle.classList.replace("loading", "disconnected");
|
||||
}
|
||||
}
|
||||
|
||||
function saveBackendUrl() {
|
||||
let url = document.getElementById("newBackendUrlInput").value;
|
||||
document.getElementById("newBackendUrlInput").value = "";
|
||||
if (!(url.includes("http://") || url.includes("https://") && url !== "")) {
|
||||
url = "http://" + url;
|
||||
}
|
||||
document.cookie = "backendUrl=" + url;
|
||||
console.log("Saved new backendUrl ", url);
|
||||
backendUrl = url;
|
||||
document.cookie = "backendUrl=" + backendUrl;
|
||||
document.getElementById("displayedUrl").innerHTML = "Current Backend Url: " + backendUrl;
|
||||
console.log("Saved new backendUrl ", backendUrl);
|
||||
checkBackend();
|
||||
}
|
||||
|
||||
function loadBackendUrl() {
|
||||
@ -40,6 +74,7 @@ function loadBackendUrl() {
|
||||
let cookie = cookieArray[i].split("=");
|
||||
if (cookie[0] === "backendUrl") {
|
||||
backendUrl = cookie[1];
|
||||
document.getElementById("displayedUrl").innerHTML = "Current Backend Url: " + backendUrl;
|
||||
console.log("Set backendUrl to ", backendUrl);
|
||||
} else {
|
||||
console.log("Unable to load backendUrl from cookie, defaulting to 127.0.0.1:8090");
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
@ -13,10 +14,36 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
-webkit-border-radius: 50%;
|
||||
margin-right: 15px;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.loading {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 5px solid #f3f3f3;
|
||||
border-top: 5px solid #0069d9;
|
||||
border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
-webkit-border-radius: 50%;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg) }
|
||||
100% { transform: rotate(360deg) }
|
||||
}
|
||||
|
||||
.connected {
|
||||
color: #28a745;
|
||||
background: #28a745;
|
||||
}
|
||||
|
||||
.disconnected {
|
||||
color: #dc3545;
|
||||
background: #dc3545;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user