Works now (without edit)
This commit is contained in:
parent
a9f3be99cb
commit
9a0576b2a4
15
index.html
15
index.html
@ -18,6 +18,7 @@
|
||||
inputs.forEach(i => i.addEventListener('input', inputListener));
|
||||
});
|
||||
document.documentElement.dataset.theme = localStorage.getItem('theme') || 'light';
|
||||
let id;
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
@ -50,7 +51,6 @@
|
||||
<li><a class="active" href="#">Home</a></li>
|
||||
<li><a href="install/">Install</a></li>
|
||||
<li><a href="websocket/">WebSocket</a></li>
|
||||
<li class="float-right"><a href="javascript:getCardToEdit()">Edit Card</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
@ -117,19 +117,8 @@
|
||||
|
||||
<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="darkmode.js"></script>
|
||||
<script src="websocket.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -38,7 +38,6 @@
|
||||
<ul>
|
||||
<li><a href="../">Home</a></li>
|
||||
<li><a class="active" href="#">Install</a></li>
|
||||
<li><a href="../websocket/">WebSocket</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
133
script.js
133
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();
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
27
websocket.js
27
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);
|
||||
|
||||
@ -45,12 +45,12 @@
|
||||
<main>
|
||||
<div class="card">
|
||||
<a id="card" href="#">
|
||||
<img id="backgroundLayer" src="#" width="404" height="225" style="z-index: 0;">
|
||||
<img id="nameLayer" src="#" width="404" height="225" style="z-index: 1;">
|
||||
<img id="titleLayer" src="#" width="404" height="225" style="z-index: 2;">
|
||||
<img id="emailLayer" src="#" width="404" height="225" style="z-index: 3;">
|
||||
<img id="locationLayer" src="#" width="404" height="225" style="z-index: 4;">
|
||||
<img id="numbersLayer" src="#" width="404" height="225" style="z-index: 5;">
|
||||
<canvas id="backgroundLayer" width="404" height="225" style="z-index: 0;"></canvas>
|
||||
<canvas id="nameLayer" width="404" height="225" style="z-index: 1;"></canvas>
|
||||
<canvas id="titleLayer" width="404" height="225" style="z-index: 2;"></canvas>
|
||||
<canvas id="emailLayer" width="404" height="225" style="z-index: 3;"></canvas>
|
||||
<canvas id="locationLayer" width="404" height="225" style="z-index: 4;"></canvas>
|
||||
<canvas id="numbersLayer" width="404" height="225" style="z-index: 5;"></canvas>
|
||||
</a>
|
||||
</div>
|
||||
<div class="container">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user