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

Works now (without edit)

Browse Source
This commit is contained in:
Steven Tracey 2023-06-07 14:51:30 -04:00
parent a9f3be99cb
commit 9a0576b2a4
6 changed files with 41 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
index.html
View File

@ -18,6 +18,7 @@
inputs.forEach(i => i.addEventListener('input', inputListener)); inputs.forEach(i => i.addEventListener('input', inputListener));
}); });
document.documentElement.dataset.theme = localStorage.getItem('theme') || 'light'; document.documentElement.dataset.theme = localStorage.getItem('theme') || 'light';
let id;
</script> </script>
</head> </head>
<body> <body>
@ -50,7 +51,6 @@
<li><a class="active" href="#">Home</a></li> <li><a class="active" href="#">Home</a></li>
<li><a href="install/">Install</a></li> <li><a href="install/">Install</a></li>
<li><a href="websocket/">WebSocket</a></li> <li><a href="websocket/">WebSocket</a></li>
<li class="float-right"><a href="javascript:getCardToEdit()">Edit Card</a></li>
</ul> </ul>
</nav> </nav>
@ -117,19 +117,8 @@
<footer>Made by the best intern!</footer> <footer>Made by the best intern!</footer>
<div class="hidden fade" id="fade"></div>
<div class="upload hidden" id="uploadDiv">
<a class="x h3" href="javascript:exitUpload()">
<div>x</div>
</a>
<div class="dotted" id="dottedDiv">
<label for="existingFile" id="uploadLabel">Click or drag here to edit existing card</label>
<img src="" alt="card" class="hidden" id="previewImg">
</div>
<button class="btn btn-primary disabled" id="editCardBtn">Edit Signature Card</button>
</div>
<input style="display: none" id="existingFile" type="file" accept="image/png" name="existingFile">
<script src="script.js"></script> <script src="script.js"></script>
<script src="darkmode.js"></script> <script src="darkmode.js"></script>
<script src="websocket.js"></script>
</body> </body>
</html> </html>

1
install/index.html
View File

@ -38,7 +38,6 @@
<ul> <ul>
<li><a href="../">Home</a></li> <li><a href="../">Home</a></li>
<li><a class="active" href="#">Install</a></li> <li><a class="active" href="#">Install</a></li>
<li><a href="../websocket/">WebSocket</a></li>
</ul> </ul>
</nav> </nav>

133
script.js
View File

@ -6,8 +6,6 @@ const locationSelector = document.getElementById("location");
loadLocations(); loadLocations();
clearForm(); clearForm();
document.body.addEventListener("dragover", dragOverHandler, false);
document.body.addEventListener("dragleave", dragLeaveHandler, false);
document.querySelectorAll('input[name = outlookVer]').forEach((element) => { document.querySelectorAll('input[name = outlookVer]').forEach((element) => {
element.addEventListener("click", (e) => { element.addEventListener("click", (e) => {
document.getElementById("outlookDiv").classList.remove("missing-info"); document.getElementById("outlookDiv").classList.remove("missing-info");
@ -19,11 +17,7 @@ locationSelector.addEventListener("click", (e) => {
document.getElementById("dottedDiv").addEventListener("click", (e) => { document.getElementById("dottedDiv").addEventListener("click", (e) => {
document.getElementById("existingFile").click(); document.getElementById("existingFile").click();
}, false); }, false);
document.getElementById("fade").addEventListener("click", exitUpload, false);
document.getElementById("editCardBtn").addEventListener("click", loadFromExistingCard, false);
document.getElementById("formSubmit").addEventListener("click", submitForm, false); document.getElementById("formSubmit").addEventListener("click", submitForm, false);
document.getElementById("existingFile").addEventListener("input", handleInput, false);
document.getElementById("uploadDiv").addEventListener("drop", dropHandler, false);
function handleCheckbox() { function handleCheckbox() {
const extensionInput = document.getElementById("extensionInput"); const extensionInput = document.getElementById("extensionInput");
@ -84,137 +78,34 @@ function submitForm() {
if (missing) { if (missing) {
return; return;
} }
fetchWithTimeout(backendUrl + "/backend/generate?id=" + id, {
let body = timeout: 5000,
"{" + method: 'POST',
"\"name\":\"" + document.getElementById("full_name").value + "\"," + mode: 'cors',
"\"title\":\"" + document.getElementById("title").value + "\"," + Headers: {
"\"email\":\"" + document.getElementById("email").value + "\"," + 'Accept': 'image/png',
"\"locationId\":\"" + document.getElementById("location").value + "\"," + }
"\"extension\":\"" + document.getElementById("extension").value + "\"," +
"\"directNumber\":\"" + document.getElementById("directNumber").value + "\"," +
"\"cellNumber\":\"" + document.getElementById("cellNumber").value + "\"," +
"\"size\":" + document.querySelector('input[name = outlookVer]:checked').value +
"}";
fetchWithTimeout(backendUrl + "/backend/generate", {
timeout: 5000,
method: 'POST',
mode: 'cors',
Headers: {
'Accept': 'image/png',
},
body: body
}).then(async response => { }).then(async response => {
if (response.headers.get("Content-Type") === "text/plain") {
response.text().then(res => console.error(res));
return;
}
downloadImage(await response.arrayBuffer()); downloadImage(await response.arrayBuffer());
}); });
clearForm(); clearForm();
} }
function downloadImage(arrayBuffer) { function downloadImage(arrayBuffer) {
const blob = new Blob([arrayBuffer], { type: "image/png" }); const blob = new Blob([arrayBuffer], { type: "image/png" });
const cardElement = document.getElementById("card"); const cardElement = document.getElementById("card");
const imgElement = document.getElementById("cardImg");
let urlCreator = window.URL || window.webkitURL; let urlCreator = window.URL || window.webkitURL;
let imageUrl = urlCreator.createObjectURL(blob); cardElement.href = urlCreator.createObjectURL(blob);
cardElement.href = imageUrl;
cardElement.style.display = 'unset'; cardElement.style.display = 'unset';
imgElement.src = imageUrl;
cardElement.download = "card.png"; cardElement.download = "card.png";
cardElement.click(); cardElement.click();
} }
function getCardToEdit() {
let uploadDiv = document.getElementById("uploadDiv");
let fadeDiv = document.getElementById("fade");
uploadDiv.classList.remove("hidden");
fadeDiv.classList.remove("hidden");
}
function exitUpload() {
document.getElementById("fade").classList.add("hidden");
document.getElementById("uploadDiv").classList.add("hidden");
}
function dragOverHandler(e) {
e.preventDefault();
document.getElementById("dottedDiv").classList.add("hovering");
}
function dragLeaveHandler(e) {
e.preventDefault();
document.getElementById("dottedDiv").classList.remove("hovering");
}
function dropHandler(e) {
let fileInput = document.getElementById("existingFile");
e.preventDefault();
document.getElementById("dottedDiv").classList.remove("hovering");
if (e.dataTransfer.items) {
if (e.dataTransfer.items[0].type === "image/png") {
let uploadedFile = e.dataTransfer.items[0].getAsFile();
let previewImg = document.getElementById("previewImg");
document.getElementById("uploadLabel").classList.add("with-img");
fileInput.files[0] = uploadedFile;
document.getElementById("uploadLabel").innerText = "Card To Edit:\n" + uploadedFile.name;
previewImg.src = URL.createObjectURL(uploadedFile);
previewImg.classList.remove("hidden");
document.getElementById("editCardBtn").classList.remove("disabled");
}
}
}
function handleInput() {
let fileInput = document.getElementById("existingFile");
let previewImg = document.getElementById("previewImg");
document.getElementById("uploadLabel").classList.add("with-img");
document.getElementById("uploadLabel").innerText = "Card To Edit:\n" + fileInput.files[0].name;
previewImg.src = URL.createObjectURL(fileInput.files[0]);
previewImg.classList.remove("hidden");
document.getElementById("editCardBtn").classList.remove("disabled");
}
function loadFromExistingCard() {
if (document.getElementById("editCardBtn").classList.contains("disabled")) {
return;
}
exitUpload();
const data = new FormData();
data.append("card", document.getElementById("existingFile").files[0]);
fetchWithTimeout(backendUrl + "/backend/edit", {
timeout: 5000,
method: 'POST',
mode: 'cors',
headers: {
'Accept': 'application/json'
},
body: data
}).then(response => response.json()).then(json => {
document.getElementById("full_name").value = json.Name;
document.getElementById("title").value = json.Title;
document.getElementById("email").value = json.Email;
document.getElementById("location").value = json.Location;
if (json.Extension === "") {
let directNumberCheckbox = document.getElementById("directNumberCheckbox");
if (directNumberCheckbox.value === "on") {
document.getElementById("directNumber").value = json.DirectNumber;
}
} else {
document.getElementById("extension").value = json.Extension;
}
document.getElementById("cellNumber").value = json.CellNumber;
});
document.getElementById("previewImg").classList.add("hidden");
let uploadLabel = document.getElementById("uploadLabel");
uploadLabel.innerText = "Click or drag here to edit existing card";
uploadLabel.classList.remove("with-img");
}
async function fetchWithTimeout(resource, options = {}) { async function fetchWithTimeout(resource, options = {}) {
const { timeout = 8000 } = options; const { timeout = 8000 } = options;
const controller = new AbortController(); const controller = new AbortController();

2
stylesheet.css
View File

@ -301,7 +301,7 @@ input[type="checkbox"], input[type="radio"] {
height: 225px; height: 225px;
border: solid 2px var(--theme-gray) border: solid 2px var(--theme-gray)
} }
.card img { .card canvas {
position: absolute; position: absolute;
height: auto; height: auto;
} }

27
websocket.js
View File

@ -27,15 +27,20 @@ liveGenWS.addEventListener("message", (e) => {
if (e.data instanceof ArrayBuffer) { if (e.data instanceof ArrayBuffer) {
blob = new Blob([e.data], { type: "image/png" }); blob = new Blob([e.data], { type: "image/png" });
} }
let urlCreator = window.URL || window.webkitURL; createImageBitmap(blob, 0, 0, 1080, 602, { resizeWidth: 404, resizeHeight: 225 }).then(img => {
let imageUrl = urlCreator.createObjectURL(blob); updateLayer(constDataType, img);
updateLayer(constDataType, imageUrl).then(() => console.log("Updated Layer: " + constDataType)); });
} else if (typeof e.data === "string") { } else if (typeof e.data === "string") {
let dataArray = e.data.split(";");
if (dataArray[0] === "success") {
console.log(dataArray[1]);
id = dataArray[1];
}
dataType = e.data; dataType = e.data;
} }
}, false); }, false);
async function updateLayer(type, imageUrl) { function updateLayer(type, img) {
let workingLayer; let workingLayer;
switch (type) { switch (type) {
case "location": { case "location": {
@ -58,19 +63,27 @@ async function updateLayer(type, imageUrl) {
workingLayer = emailLayer; workingLayer = emailLayer;
break; break;
} }
case "extension" || "directNumber" || "cellNumber": { case "extension":
case "directNumber": {
workingLayer = numbersLayer; workingLayer = numbersLayer;
break; break;
} }
case "cellNumber": {
workingLayer = numbersLayer;
handleUpdate("email", email);
handleUpdate("location", loc);
}
} }
workingLayer.src = imageUrl; let ctx = workingLayer.getContext("2d");
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(img, 0, 0);
} }
function handleUpdate(val, elem) { function handleUpdate(val, elem) {
liveGenWS.send(val + ";" + elem.value); liveGenWS.send(val + ";" + elem.value);
} }
loc.addEventListener("selectionchange", (e) => { loc.addEventListener("change", (e) => {
handleUpdate("location", loc); handleUpdate("location", loc);
handleUpdate("background", loc); handleUpdate("background", loc);
}, false); }, false);

12
websocket/index.html
View File

@ -45,12 +45,12 @@
<main> <main>
<div class="card"> <div class="card">
<a id="card" href="#"> <a id="card" href="#">
<img id="backgroundLayer" src="#" width="404" height="225" style="z-index: 0;"> <canvas id="backgroundLayer" width="404" height="225" style="z-index: 0;"></canvas>
<img id="nameLayer" src="#" width="404" height="225" style="z-index: 1;"> <canvas id="nameLayer" width="404" height="225" style="z-index: 1;"></canvas>
<img id="titleLayer" src="#" width="404" height="225" style="z-index: 2;"> <canvas id="titleLayer" width="404" height="225" style="z-index: 2;"></canvas>
<img id="emailLayer" src="#" width="404" height="225" style="z-index: 3;"> <canvas id="emailLayer" width="404" height="225" style="z-index: 3;"></canvas>
<img id="locationLayer" src="#" width="404" height="225" style="z-index: 4;"> <canvas id="locationLayer" width="404" height="225" style="z-index: 4;"></canvas>
<img id="numbersLayer" src="#" width="404" height="225" style="z-index: 5;"> <canvas id="numbersLayer" width="404" height="225" style="z-index: 5;"></canvas>
</a> </a>
</div> </div>
<div class="container"> <div class="container">