From 9a0576b2a43bff9605d9d5ed63ae0af223ad7786 Mon Sep 17 00:00:00 2001 From: Steven Tracey Date: Wed, 7 Jun 2023 14:51:30 -0400 Subject: [PATCH] Works now (without edit) --- index.html | 15 +---- install/index.html | 1 - script.js | 133 ++++--------------------------------------- stylesheet.css | 2 +- websocket.js | 27 ++++++--- websocket/index.html | 12 ++-- 6 files changed, 41 insertions(+), 149 deletions(-) diff --git a/index.html b/index.html index 33940b4..3ff57e4 100644 --- a/index.html +++ b/index.html @@ -18,6 +18,7 @@ inputs.forEach(i => i.addEventListener('input', inputListener)); }); document.documentElement.dataset.theme = localStorage.getItem('theme') || 'light'; + let id; @@ -50,7 +51,6 @@
  • Home
  • Install
  • WebSocket
    • -
  • Edit Card
    • @@ -117,19 +117,8 @@ - - - + \ No newline at end of file diff --git a/install/index.html b/install/index.html index d347c07..910f01d 100644 --- a/install/index.html +++ b/install/index.html @@ -38,7 +38,6 @@ diff --git a/script.js b/script.js index 34a410d..70cc9a9 100644 --- a/script.js +++ b/script.js @@ -6,8 +6,6 @@ const locationSelector = document.getElementById("location"); loadLocations(); clearForm(); -document.body.addEventListener("dragover", dragOverHandler, false); -document.body.addEventListener("dragleave", dragLeaveHandler, false); document.querySelectorAll('input[name = outlookVer]').forEach((element) => { element.addEventListener("click", (e) => { document.getElementById("outlookDiv").classList.remove("missing-info"); @@ -19,11 +17,7 @@ locationSelector.addEventListener("click", (e) => { document.getElementById("dottedDiv").addEventListener("click", (e) => { document.getElementById("existingFile").click(); }, false); -document.getElementById("fade").addEventListener("click", exitUpload, false); -document.getElementById("editCardBtn").addEventListener("click", loadFromExistingCard, false); document.getElementById("formSubmit").addEventListener("click", submitForm, false); -document.getElementById("existingFile").addEventListener("input", handleInput, false); -document.getElementById("uploadDiv").addEventListener("drop", dropHandler, false); function handleCheckbox() { const extensionInput = document.getElementById("extensionInput"); @@ -84,137 +78,34 @@ function submitForm() { if (missing) { return; } - - let body = - "{" + - "\"name\":\"" + document.getElementById("full_name").value + "\"," + - "\"title\":\"" + document.getElementById("title").value + "\"," + - "\"email\":\"" + document.getElementById("email").value + "\"," + - "\"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 + fetchWithTimeout(backendUrl + "/backend/generate?id=" + id, { + timeout: 5000, + method: 'POST', + mode: 'cors', + Headers: { + 'Accept': 'image/png', + } }).then(async response => { + if (response.headers.get("Content-Type") === "text/plain") { + response.text().then(res => console.error(res)); + return; + } downloadImage(await response.arrayBuffer()); }); - clearForm(); } function downloadImage(arrayBuffer) { const blob = new Blob([arrayBuffer], { type: "image/png" }); const cardElement = document.getElementById("card"); - const imgElement = document.getElementById("cardImg"); let urlCreator = window.URL || window.webkitURL; - let imageUrl = urlCreator.createObjectURL(blob); - - cardElement.href = imageUrl; + cardElement.href = urlCreator.createObjectURL(blob); cardElement.style.display = 'unset'; - imgElement.src = imageUrl; cardElement.download = "card.png"; 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 = {}) { const { timeout = 8000 } = options; const controller = new AbortController(); diff --git a/stylesheet.css b/stylesheet.css index 03f1a9b..b9237db 100644 --- a/stylesheet.css +++ b/stylesheet.css @@ -301,7 +301,7 @@ input[type="checkbox"], input[type="radio"] { height: 225px; border: solid 2px var(--theme-gray) } -.card img { +.card canvas { position: absolute; height: auto; } diff --git a/websocket.js b/websocket.js index 4fe6fd9..ed854db 100644 --- a/websocket.js +++ b/websocket.js @@ -27,15 +27,20 @@ liveGenWS.addEventListener("message", (e) => { if (e.data instanceof ArrayBuffer) { blob = new Blob([e.data], { type: "image/png" }); } - let urlCreator = window.URL || window.webkitURL; - let imageUrl = urlCreator.createObjectURL(blob); - updateLayer(constDataType, imageUrl).then(() => console.log("Updated Layer: " + constDataType)); + createImageBitmap(blob, 0, 0, 1080, 602, { resizeWidth: 404, resizeHeight: 225 }).then(img => { + updateLayer(constDataType, img); + }); } 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; } }, false); -async function updateLayer(type, imageUrl) { +function updateLayer(type, img) { let workingLayer; switch (type) { case "location": { @@ -58,19 +63,27 @@ async function updateLayer(type, imageUrl) { workingLayer = emailLayer; break; } - case "extension" || "directNumber" || "cellNumber": { + case "extension": + case "directNumber": { workingLayer = numbersLayer; 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) { liveGenWS.send(val + ";" + elem.value); } -loc.addEventListener("selectionchange", (e) => { +loc.addEventListener("change", (e) => { handleUpdate("location", loc); handleUpdate("background", loc); }, false); diff --git a/websocket/index.html b/websocket/index.html index 0649555..2abda92 100644 --- a/websocket/index.html +++ b/websocket/index.html @@ -45,12 +45,12 @@
    - - - - - - + + + + + +