sfja/h4-projekt-gruppe-0-sm
1
0
Fork 0
mirror of https://github.com/Mercantec-GHC/h4-projekt-gruppe-0-sm.git synced 2025-04-27 16:24:07 +02:00
Code Issues Packages Projects Releases Wiki Activity

kort coords

Browse Source
This commit is contained in:
SimonFJ20 2025-03-21 12:05:09 +01:00
parent fb26face86
commit 6a4f965536
2 changed files with 59 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
backend/public/product_editor.html
View File

@ -62,6 +62,7 @@
#wrapper { #wrapper {
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-wrap: wrap;
gap: 2rem; gap: 2rem;
} }
#wrapper form { #wrapper form {
@ -78,6 +79,13 @@
height: 150px; height: 150px;
background-color: #fff; background-color: #fff;
} }
#coords {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 100%;
}
</style> </style>
</head> </head>
<body> <body>
@ -150,6 +158,30 @@
<button id="save">Save</button> <button id="save">Save</button>
</form> </form>
</fieldset> </fieldset>
<fieldset>
<legend>Coords</legend>
<form id="coords">
<table>
<tr>
<td><label for="product-id">id: </label></td>
<td>
<input id="product-id" type="text">
</td>
</tr>
<tr>
<td><label for="coords-x">x: </label></td>
<td><input id="coords-x" type="number"></td>
</tr>
<tr>
<td><label for="coords-y">y: </label></td>
<td><input id="coords-y" type="number"></td>
</tr>
</table>
<div><img id="preview" src="" alt=""></div>
<button id="save">Save</button>
</form>
</fieldset>
</div> </div>
</body> </body>
</html> </html>

28
backend/public/product_editor.js
View File

@ -18,6 +18,13 @@ const imageUploader = {
preview: document.querySelector("#image-uploader #preview"), preview: document.querySelector("#image-uploader #preview"),
fileInput: document.querySelector("#image-uploader #file"), fileInput: document.querySelector("#image-uploader #file"),
}; };
const coords = {
form: document.querySelector("#coords"),
idInput: document.querySelector("#coords #product-id"),
xInput: document.querySelector("#coords #coords-x"),
yInput: document.querySelector("#coords #coords-y"),
saveButton: document.querySelector("#coords #save"),
};
let products = []; let products = [];
@ -32,6 +39,9 @@ function selectProduct(product) {
editor.descriptionTextarea.value = product.description; editor.descriptionTextarea.value = product.description;
editor.coordInput.value = product.coord_id.toString(); editor.coordInput.value = product.coord_id.toString();
editor.barcodeInput.value = product.barcode.toString(); editor.barcodeInput.value = product.barcode.toString();
imageUploader.idInput.value = product.id;
coords.idInput.value = product.id;
} }
function loadProduct() { function loadProduct() {
@ -146,7 +156,7 @@ imageUploader.form
}); });
imageUploader.fileInput imageUploader.fileInput
.addEventListener("input", (e) => { .addEventListener("input", (e) => {
console.log(e); e.preventDefault();
const image = imageUploader.fileInput.files[0]; const image = imageUploader.fileInput.files[0];
const data = URL.createObjectURL(image); const data = URL.createObjectURL(image);
imageUploader.preview.src = data; imageUploader.preview.src = data;
@ -170,3 +180,19 @@ imageUploader.saveButton
body: buffer, body: buffer,
}).then((res) => res.json()); }).then((res) => res.json());
}); });
coords.form
.addEventListener("submit", (e) => {
e.preventDefault();
});
coords.saveButton
.addEventListener("click", async (_e) => {
const product_id = parseInt(coords.idInput.value);
const x = parseInt(coords.xInput.value);
const y = parseInt(coords.yInput.value);
await fetch(`/api/products/set_coords`, {
method: "post",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ product_id, x, y }),
}).then((res) => res.json());
});