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

refactored strings

Browse source
This commit is contained in:
Jan Klattenhoff 2024-01-26 11:52:26 +01:00
parent 54e64597e3
commit 1f7e68953d
6 changed files with 255 additions and 180 deletions
Download patch file Download diff file Expand all files Collapse all files

179
templates/frontend/index.html.twig
View file

@ -1,184 +1,7 @@
{% extends 'base.html.twig' %}
{% block javascripts %}
<script>
function addTableData(tableRow, data, id, printer) {
const tableData = document.createElement('td');
tableData.id = 'printer' + printer.id + ':' + id;
tableData.textContent = data;
tableRow.appendChild(tableData);
}
function removePrinterFromTable(printerId) {
const tableBody = document.getElementById('printer' + printerId);
tableBody.remove();
}
function deletePrinter(printerId) {
fetch('/printer/' + printerId, {method: 'DELETE'}).then(response => {
if (response.ok) {
removePrinterFromTable(printerId);
}
});
}
function addDeleteButton(tableData, printer) {
const deleteButton = setButtonAttributes('btn-danger');
deleteButton.textContent = 'Delete';
deleteButton.onclick = function () {
document.getElementById('deleteModalText').textContent = 'Are you sure that you want to delete ' + printer.name + '?';
document.getElementById('deleteModalConfirm').setAttribute('onclick', 'deletePrinter(' + printer.id + ')');
}
tableData.appendChild(deleteButton);
}
function setButtonAttributes(buttonType) {
const button = document.createElement('button');
button.setAttribute('data-bs-target', '#viewModal');
button.setAttribute('data-bs-toggle', 'modal');
button.setAttribute('class', 'btn ' + buttonType);
return button;
}
function addViewButton(tableData, printer) {
const viewButton = setButtonAttributes('btn-primary');
viewButton.textContent = 'View';
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';
}
tableData.appendChild(viewButton);
}
function editPrinter(printerId) {
const nameInput = document.getElementById('editInputName').value;
const priceInput = document.getElementById('editInputPrice').value;
const buildVolumeInput = document.getElementById('editInputBuildVolume').value;
const maxSpeedInput = document.getElementById('editInputMaxSpeed').value;
fetch('/printer/' + printerId, {method: 'PUT', body: JSON.stringify({
name: nameInput,
price: Number(priceInput),
build_volume: buildVolumeInput,
max_speed: Number(maxSpeedInput),
})}).then(response => {
if (response.ok) {
response.json().then(printer => {
$printerRow = document.getElementById('printer' + 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;
//TODO: change edit button printer objects
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;
document.getElementById('editModalConfirm').setAttribute('onclick', 'editPrinter(' + printer.id + ')');
}
});
}
});
}
function addEditButton(tableData, printer) {
const editButton = document.createElement('button');
editButton.setAttribute('data-bs-target', '#editModal');
editButton.setAttribute('data-bs-toggle', 'modal');
editButton.setAttribute('class', 'btn btn-primary');
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 + ')');
}
tableData.appendChild(editButton);
}
function addTableActions(tableRow, printer) {
const tableData = document.createElement('td');
addViewButton(tableData, printer);
addEditButton(tableData, printer);
addDeleteButton(tableData, printer);
tableRow.appendChild(tableData);
}
function addPrinterToTable(tableBody, printer) {
const tableRow = document.createElement('tr');
addTableData(tableRow, printer.name, 'name', printer);
addTableData(tableRow, printer.price.toFixed(2) + '$', 'price', printer);
addTableData(tableRow, printer.build_volume, 'build_volume', printer);
addTableData(tableRow, printer.max_speed + 'mm/s', 'max_speed', printer);
addTableActions(tableRow, printer);
tableRow.id = 'printer' + printer.id;
tableBody.appendChild(tableRow);
}
function loadTable() {
fetch('/printer', {method: 'GET'}).then(response => {
response.json().then(json => {
const tableBody = document.getElementById('table-body');
tableBody.innerHTML = null;
for (printer of json) {
addPrinterToTable(tableBody, printer);
}
});
});
}
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;
document.getElementById('inputName').value = '';
document.getElementById('inputPrice').value = '';
document.getElementById('inputBuildVolume').value = '';
document.getElementById('inputMaxSpeed').value = '';
fetch('/printer', {method: 'POST', body: JSON.stringify({
name: nameInput,
price: Number(priceInput),
build_volume: buildVolumeInput,
max_speed: Number(maxSpeedInput),
})}).then(response => {
if (response.ok) {
const tableBody = document.getElementById('table-body');
response.json().then(printer => {
addPrinterToTable(tableBody, printer);
});
}
});
}
loadTable();
</script>
<script src="{{ asset('js/frontend.js') }}"></script>
{% endblock %}
{% block body %}