jank/test
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

small refactor

Browse source
This commit is contained in:
Jan Klattenhoff 2024-01-31 10:09:57 +01:00
parent 1f7e68953d
commit 345e207328
2 changed files with 48 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

80
public/js/frontend.js
View file

@ -40,26 +40,46 @@ function setButtonAttributes(buttonType) {
return button;
}
function addViewButton(tableData, printer) {
const viewButton = setButtonAttributes('btn-primary');
viewButton.textContent = 'View';
viewButton.id = `printer${printer.id}:viewButton`;
viewButton.onclick = function() {
function setViewButtonOnClick(viewButton, printer) {
viewButton.onclick = function () {
document.getElementById('viewModalName').textContent = `Name: ${printer.name}`;
document.getElementById('viewModalPrice').textContent = `Price: ${printer.price.toFixed(2)}$`;
document.getElementById('viewModalBuildVolume').textContent = `Build Volume: ${printer.build_volume}`;
document.getElementById('viewModalMaxSpeed').textContent = `Max Speed: ${printer.max_speed}mm/s`;
}
}
function addViewButton(tableData, printer) {
const viewButton = setButtonAttributes('btn-primary');
viewButton.textContent = 'View';
viewButton.id = `printer${printer.id}:viewButton`;
setViewButtonOnClick(viewButton, printer);
tableData.appendChild(viewButton);
}
function editPrinter(printerId) {
function setEditButtonOnClick(editButton, printer) {
editButton.onclick = function () {
document.getElementById('editInputName').value = printer.name;
document.getElementById('editInputPrice').value = printer.price;
document.getElementById('editInputBuildVolume').value = printer.build_volume;
document.getElementById('editInputMaxSpeed').value = printer.max_speed;
document.getElementById('editModalConfirm').setAttribute('onclick', `editPrinter(${printer.id})`);
}
}
function getEditModalValues() {
const nameInput = document.getElementById('editInputName').value;
const priceInput = document.getElementById('editInputPrice').value;
const buildVolumeInput = document.getElementById('editInputBuildVolume').value;
const maxSpeedInput = document.getElementById('editInputMaxSpeed').value;
return {nameInput, priceInput, buildVolumeInput, maxSpeedInput};
}
function editPrinter(printerId) {
const {nameInput, priceInput, buildVolumeInput, maxSpeedInput} = getEditModalValues();
fetch(`/printer/${printerId}`, {method: 'PUT', body: JSON.stringify({
name: nameInput,
@ -72,23 +92,14 @@ function editPrinter(printerId) {
document.getElementById(`printer${printer.id}:name`).textContent = printer.name;
document.getElementById(`printer${printer.id}:price`).textContent = printer.price;
document.getElementById(`printer${printer.id}:build_volume`).textContent = printer.build_volume;
document.getElementById(`printer${printer.id}:max_speed`).textContent = printer.max_speed;
const editButton = document.getElementById(`printer${printer.id}:editButton`);
editButton.onclick = function() {
document.getElementById('editInputName').value = printer.name;
document.getElementById('editInputPrice').value = printer.price;
document.getElementById('editInputBuildVolume').value = printer.build_volume;
document.getElementById('editInputMaxSpeed').value = printer.max_speed;
}
setEditButtonOnClick(editButton, printer);
const viewButton = document.getElementById(`printer${printer.id}:viewButton`);
viewButton.onclick = function() {
document.getElementById('viewModalName').textContent = `Name: ${printer.name}`;
document.getElementById('viewModalPrice').textContent = `Price: ${printer.price.toFixed(2)}$`;
document.getElementById('viewModalBuildVolume').textContent = 'Build Volume: ' + printer.build_volume;
document.getElementById('viewModalMaxSpeed').textContent = `Max Speed: ${printer.max_speed}mm/s`;
}
setViewButtonOnClick(viewButton, printer);
});
}
});
@ -102,20 +113,12 @@ function addEditButton(tableData, printer) {
editButton.id = `printer${printer.id}:editButton`
editButton.textContent = 'Edit';
editButton.onclick = function() {
document.getElementById('editInputName').value = printer.name;
document.getElementById('editInputPrice').value = printer.price;
document.getElementById('editInputBuildVolume').value = printer.build_volume;
document.getElementById('editInputMaxSpeed').value = printer.max_speed;
document.getElementById('editModalConfirm').setAttribute('onclick', `editPrinter(${printer.id})`);
}
setEditButtonOnClick(editButton, printer);
tableData.appendChild(editButton);
}
function addTableActions(tableRow, printer) {
const tableData = document.createElement('td');
addViewButton(tableData, printer);
@ -150,16 +153,25 @@ function loadTable() {
});
}
function createPrinter() {
const nameInput = document.getElementById('inputName').value;
const priceInput = document.getElementById('inputPrice').value;
const buildVolumeInput = document.getElementById('inputBuildVolume').value;
const maxSpeedInput = document.getElementById('inputMaxSpeed').value;
function clearCreateModalValues() {
document.getElementById('inputName').value = '';
document.getElementById('inputPrice').value = '';
document.getElementById('inputBuildVolume').value = '';
document.getElementById('inputMaxSpeed').value = '';
}
function getCreateModalValues() {
const nameInput = document.getElementById('inputName').value;
const priceInput = document.getElementById('inputPrice').value;
const buildVolumeInput = document.getElementById('inputBuildVolume').value;
const maxSpeedInput = document.getElementById('inputMaxSpeed').value;
return {nameInput, priceInput, buildVolumeInput, maxSpeedInput};
}
function createPrinter() {
const {nameInput, priceInput, buildVolumeInput, maxSpeedInput} = getCreateModalValues();
clearCreateModalValues();
fetch('/printer', {method: 'POST', body: JSON.stringify({
name: nameInput,