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

feature: redoing all the javascript

Browse Source
This commit is contained in:
Jan Klattenhoff 2024-01-19 08:38:32 +01:00
parent 6792e031f2
commit cdd547247b
1 changed files with 20 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
templates/frontend/index.html.twig
View File

@ -1,46 +1,26 @@
{% extends 'base.html.twig' %}
{% block javascripts %}
<script>
function addPrinterToTable(printer) {
}
function reloadTable() {
fetch('/printer', {method: 'GET'}).then(response => {
response.json().then(json => {
for (printer of json) {
addPrinterToTable(printer);
}
});
});
}
reloadTable();
</script>
{% endblock %}
{% block body %}
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
<h1>Printers</h1>
<table id="table">
<thead>
@ -56,112 +36,7 @@
</tbody>
</table>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div id="modal-content" class="modal-content">
<span id="close-modal" class="close">&times;</span>
<button id="modal-accept"></button>
</div>
</div>
<!-- The View Modal -->
<div id="viewModal" class="modal">
<!-- Modal content -->
<div id="view-modal-content" class="modal-content">
<span id="close-view-modal" class="close">&times;</span>
</div>
</div>
<script>
let modalText = document.createTextNode('');
function createTableData(row, value) {
const td = document.createElement('td');
td.appendChild(document.createTextNode(value));
row.appendChild(td);
}
function deletePrinter(id) {
const modal = document.getElementById('myModal');
const modalAccept = document.getElementById('modal-accept');
modalText = document.createTextNode('Are you sure you want to delete this printer');
const modalContent = document.getElementById('modal-content');
modalContent.appendChild(modalText);
modal.style.display = 'block';
modalAccept.textContent = 'Delete';
modalAccept.onclick = function() {
fetch('/printer/' + id, {method: 'DELETE'}).then(response => {
if (response.ok) {
document.getElementById(id).remove();
}
modalAccept.onclick = null;
modalAccept.textContent = '';
modalText.remove();
modal.style.display = 'none';
});
}
}
function view(id) {
const modal = document.getElementById('viewModal');
modal.style.display = 'block';
}
function createAction(row, action, name) {
const button = document.createElement('button');
button.setAttribute('onclick', action);
button.textContent = name;
const td = document.createElement('td');
td.appendChild(button);
row.appendChild(td);
}
function createTableRow(printer) {
const row = document.createElement('tr');
createTableData(row, printer.name);
createTableData(row, printer.price.toFixed(2) + '$');
createTableData(row, printer.build_volume);
createTableData(row, printer.max_speed);
createAction(row, 'deletePrinter(' + printer.id + ');', 'delete');
createAction(row, 'view(' + printer.id + ')', 'View');
row.id = printer.id;
document.getElementById('table-body').appendChild(row);
}
function loadTable() {
fetch('printer', {method: 'GET'}).then(response => {
response.json().then(response => {
for (const printer of response) {
createTableRow(printer);
}
});
});
}
const viewModalSpan = document.getElementById('close-view-modal');
viewModalSpan.onclick = function () {
document.getElementById('viewModal').style.display = 'none';
}
const span = document.getElementById('close-modal');
span.onclick = function () {
const modalAccept = document.getElementById('modal-accept');
modalAccept.onclick = null;
modalAccept.textContent = '';
modalText.remove();
document.getElementById('myModal').style.display = 'none';
}
loadTable();
</script>
{% endblock %}