PRODUCTION
This commit is contained in:
parent
d8049ed8c3
commit
e4853c2585
28
index.html
28
index.html
@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="stylesheet" href="stylesheet.css">
|
||||
<title>*DEV* CAIU VCard Creator *DEV*</title>
|
||||
<title>CAIU Signature Card</title>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const inputs = Array.from(
|
||||
@ -22,18 +22,8 @@
|
||||
|
||||
<nav id="navbar" class="navbar navbar-light">
|
||||
<a class="navbar-brand" href="#">
|
||||
<img src="https://resources.finalsite.net/images/f_auto,q_auto/v1619001051/caiuorg/cjwogofoj9lsqxvuwnd8/Logo_CAIU_color1.png" alt="">
|
||||
<img src="logo.png" alt="CAIU Logo">
|
||||
</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" 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>
|
||||
<div class="connected nav-align circle" id="statusCircle"> </div>
|
||||
<button class="btn btn-primary nav-align" id="checkBackendButton">Reload</button>
|
||||
</div>
|
||||
<div class="nav-container">
|
||||
<label class="nav-align" for="existingFile">Edit Existing VCard</label>
|
||||
<input type="file" accept="image/png" class="nav-align" id="existingFile" name="existingFile">
|
||||
@ -62,9 +52,12 @@
|
||||
<main class="page contact-page">
|
||||
<section class="portfolio-block contact">
|
||||
<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>
|
||||
<a id="vcard" href="#"></a>
|
||||
<h1 class="text-center mt-5 mb-5 h1">Signature Card Creator</h1>
|
||||
<div class="card">
|
||||
<a id="vcard" href="#" style="display: none">
|
||||
<img class="card" id="cardImg"/>
|
||||
</a>
|
||||
</div>
|
||||
<label for="vcard" class="text-center"></label>
|
||||
<div class="form-group mt-5">
|
||||
<div class="form-group">
|
||||
@ -115,11 +108,8 @@
|
||||
<script src="script.js"></script>
|
||||
<script>
|
||||
refreshDarkMode();
|
||||
loadBackendUrl();
|
||||
checkBackend();
|
||||
loadLocations();
|
||||
|
||||
document.getElementById("changeBackendButton").addEventListener("click", saveBackendUrl, false);
|
||||
document.getElementById("checkBackendButton").addEventListener("click", checkBackend, false);
|
||||
document.getElementById("getFileDataBtn").addEventListener("click", loadFromExistingCard, false);
|
||||
document.getElementById("formSubmit").addEventListener("click", submitForm, false);
|
||||
document.getElementById("theme").addEventListener("click", toggleDarkMode, false);
|
||||
|
||||
154
script.js
154
script.js
@ -12,10 +12,30 @@ function handleCheckbox() {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let backendUrl = "http://127.0.0.1:8090"
|
||||
let backendUrl = "http://127.0.0.1:8080"
|
||||
let locations = JSON.parse("{}");
|
||||
|
||||
function loadLocations() {
|
||||
let locationsList = document.getElementById("location");
|
||||
|
||||
fetchWithTimeout(backendUrl + "/backend/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);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
function submitForm() {
|
||||
let body =
|
||||
"{" +
|
||||
@ -29,8 +49,6 @@ function submitForm() {
|
||||
"\"size\":" + document.querySelector('input[name = outlookVer]:checked').value +
|
||||
"}";
|
||||
|
||||
console.log(body);
|
||||
|
||||
fetchWithTimeout(backendUrl + "/backend/generate", {
|
||||
timeout: 5000,
|
||||
method: 'POST',
|
||||
@ -44,6 +62,21 @@ function submitForm() {
|
||||
});
|
||||
}
|
||||
|
||||
function downloadImage(arrayBuffer) {
|
||||
const blob = new Blob([arrayBuffer], { type: "image/png" });
|
||||
const cardElement = document.getElementById("vcard");
|
||||
const imgElement = document.getElementById("cardImg");
|
||||
|
||||
let urlCreator = window.URL || window.webkitURL;
|
||||
let imageUrl = urlCreator.createObjectURL(blob);
|
||||
|
||||
cardElement.href = imageUrl;
|
||||
cardElement.style.display = 'unset';
|
||||
imgElement.src = imageUrl;
|
||||
cardElement.download = "card.png";
|
||||
cardElement.click();
|
||||
}
|
||||
|
||||
function loadFromExistingCard() {
|
||||
const data = new FormData();
|
||||
data.append("card", document.getElementById("existingFile").files[0]);
|
||||
@ -73,77 +106,22 @@ function loadFromExistingCard() {
|
||||
});
|
||||
}
|
||||
|
||||
function getLocations() {
|
||||
let locationsList = document.getElementById("location");
|
||||
|
||||
fetchWithTimeout(backendUrl + "/backend/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);
|
||||
}
|
||||
})
|
||||
});
|
||||
function toggleDarkMode() {
|
||||
if (getCookie("darkMode") === "on") document.cookie = "darkMode=off";
|
||||
else document.cookie = "darkMode=on";
|
||||
refreshDarkMode();
|
||||
}
|
||||
|
||||
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 fetchWithTimeout(backendUrl + "/backend/heartbeat", {
|
||||
timeout: 5000,
|
||||
method: 'GET',
|
||||
mode: 'cors',
|
||||
headers: {
|
||||
'Accept': 'application/json'
|
||||
}
|
||||
});
|
||||
if (response.status === 200) {
|
||||
console.log('Backend up with code ', response.status);
|
||||
} else {
|
||||
console.log("Something weird happened: ", response.status);
|
||||
}
|
||||
statusCircle.classList.replace("loading", "connected");
|
||||
} catch (err) {
|
||||
console.log("Backend down with error ", err);
|
||||
statusCircle.classList.replace("loading", "disconnected");
|
||||
}
|
||||
getLocations();
|
||||
}
|
||||
|
||||
function saveBackendUrl() {
|
||||
let url = document.getElementById("newBackendUrlInput").value;
|
||||
document.getElementById("newBackendUrlInput").value = "";
|
||||
if (!(url.includes("http://") || url.includes("https://") && url !== "")) {
|
||||
url = "http://" + url;
|
||||
}
|
||||
backendUrl = url;
|
||||
document.cookie = "backendUrl=" + backendUrl;
|
||||
document.getElementById("displayedUrl").innerHTML = "Current Backend Url: " + backendUrl;
|
||||
console.log("Saved new backendUrl ", backendUrl);
|
||||
checkBackend().then();
|
||||
}
|
||||
|
||||
function loadBackendUrl() {
|
||||
let cookieArray = document.cookie.split(";");
|
||||
for (let i = 0; i < cookieArray.length; i++) {
|
||||
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");
|
||||
function refreshDarkMode() {
|
||||
let darkMode = getCookie("darkMode") === "on";
|
||||
if (darkMode) {
|
||||
document.body.classList.add("dark-theme");
|
||||
document.getElementById("theme").checked = true;
|
||||
} else {
|
||||
if (document.body.classList.contains("dark-theme")) {
|
||||
document.body.classList.remove("dark-theme");
|
||||
}
|
||||
document.getElementById("theme").checked = false;
|
||||
}
|
||||
}
|
||||
|
||||
@ -161,38 +139,6 @@ async function fetchWithTimeout(resource, options = {}) {
|
||||
return response;
|
||||
}
|
||||
|
||||
function downloadImage(arrayBuffer) {
|
||||
const blob = new Blob([arrayBuffer], { type: "image/png" });
|
||||
const link = document.createElement("a");
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = "vcard.png";
|
||||
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
|
||||
setTimeout(() => {
|
||||
URL.revokeObjectURL(link.href);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function toggleDarkMode() {
|
||||
if (getCookie("darkMode") === "on") document.cookie = "darkMode=off";
|
||||
else document.cookie = "darkMode=on";
|
||||
refreshDarkMode();
|
||||
}
|
||||
|
||||
function refreshDarkMode() {
|
||||
let darkMode = getCookie("darkMode") === "on";
|
||||
if (darkMode) {
|
||||
document.body.classList.add("dark-theme");
|
||||
} else {
|
||||
if (document.body.classList.contains("dark-theme")) {
|
||||
document.body.classList.remove("dark-theme");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getCookie(cookieName) {
|
||||
let cookieArray = document.cookie.split(";");
|
||||
for (let i = 0; i < cookieArray.length; i++) {
|
||||
|
||||
@ -155,7 +155,11 @@ input[type="checkbox"], input[type="radio"] {
|
||||
}
|
||||
|
||||
.mt-5, .my-5 {
|
||||
margin-top: 3rem !important;
|
||||
margin-top: 1rem !important;
|
||||
}
|
||||
|
||||
.mb-5 {
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
@ -192,6 +196,20 @@ input[type="checkbox"], input[type="radio"] {
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
||||
.navbar-brand{
|
||||
display:inline-block;
|
||||
padding-top:.3125rem;
|
||||
padding-bottom:.3125rem;
|
||||
margin-right:1rem;
|
||||
font-size:1.25rem;
|
||||
line-height:inherit;
|
||||
white-space:nowrap
|
||||
}
|
||||
|
||||
.navbar-brand:focus, .navbar-brand:hover {
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.nav-align {
|
||||
width: fit-content;
|
||||
vertical-align: middle;
|
||||
@ -208,6 +226,11 @@ input[type="checkbox"], input[type="radio"] {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: auto;
|
||||
width: 24em;
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user