refactor javascript
This commit is contained in:
Jan Klattenhoff
parent
345e207328
commit
83cc9ab082
13 changed files with 547 additions and 192 deletions
27
public/js/buttonActions.js
Normal file
27
public/js/buttonActions.js
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
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 setButtonAttributes(buttonType, modal) {
|
||||
const button = document.createElement('button');
|
||||
button.setAttribute('data-bs-target', modal);
|
||||
button.setAttribute('data-bs-toggle', 'modal');
|
||||
button.setAttribute('class', `btn ${buttonType}`);
|
||||
return button;
|
||||
}
|
||||
|
||||
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`;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,193 +1,3 @@
|
|||
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 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 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,
|
||||
price: Number(priceInput),
|
||||
build_volume: buildVolumeInput,
|
||||
max_speed: Number(maxSpeedInput),
|
||||
})}).then(response => {
|
||||
if (response.ok) {
|
||||
response.json().then(printer => {
|
||||
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`);
|
||||
setEditButtonOnClick(editButton, printer);
|
||||
|
||||
const viewButton = document.getElementById(`printer${printer.id}:viewButton`);
|
||||
setViewButtonOnClick(viewButton, printer);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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';
|
||||
|
||||
setEditButtonOnClick(editButton, printer);
|
||||
|
||||
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 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,
|
||||
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);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
loadTable();
|
||||
});
|
||||
22
public/js/modals.js
Normal file
22
public/js/modals.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
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 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};
|
||||
}
|
||||
54
public/js/printerApi.js
Normal file
54
public/js/printerApi.js
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
function createPrinter() {
|
||||
const {nameInput, priceInput, buildVolumeInput, maxSpeedInput} = getCreateModalValues();
|
||||
|
||||
clearCreateModalValues();
|
||||
|
||||
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);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function editPrinter(printerId) {
|
||||
const {nameInput, priceInput, buildVolumeInput, maxSpeedInput} = getEditModalValues();
|
||||
|
||||
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 => {
|
||||
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`);
|
||||
setEditButtonOnClick(editButton, printer);
|
||||
|
||||
const viewButton = document.getElementById(`printer${printer.id}:viewButton`);
|
||||
setViewButtonOnClick(viewButton, printer);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function deletePrinter(printerId) {
|
||||
fetch(`/printer/${printerId}`, {method: 'DELETE'}).then(response => {
|
||||
if (response.ok) {
|
||||
removePrinterFromTable(printerId);
|
||||
}
|
||||
});
|
||||
}
|
||||
79
public/js/tableActions.js
Normal file
79
public/js/tableActions.js
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
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 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 addTableActions(tableRow, printer) {
|
||||
const tableData = document.createElement('td');
|
||||
|
||||
addViewButton(tableData, printer);
|
||||
addEditButton(tableData, printer);
|
||||
addDeleteButton(tableData, printer);
|
||||
|
||||
tableRow.appendChild(tableData);
|
||||
}
|
||||
|
||||
function addEditButton(tableData, printer) {
|
||||
const editButton = setButtonAttributes('btn-primary', '#editModal');
|
||||
editButton.id = `printer${printer.id}:editButton`
|
||||
editButton.textContent = 'Edit';
|
||||
|
||||
setEditButtonOnClick(editButton, printer);
|
||||
|
||||
tableData.appendChild(editButton);
|
||||
}
|
||||
|
||||
function addViewButton(tableData, printer) {
|
||||
const viewButton = setButtonAttributes('btn-primary', '#viewModal');
|
||||
viewButton.textContent = 'View';
|
||||
viewButton.id = `printer${printer.id}:viewButton`;
|
||||
|
||||
setViewButtonOnClick(viewButton, printer);
|
||||
|
||||
tableData.appendChild(viewButton);
|
||||
}
|
||||
|
||||
function addDeleteButton(tableData, printer) {
|
||||
const deleteButton = setButtonAttributes('btn-danger', '#deleteModal');
|
||||
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 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();
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue