feature: redoing all the javascript

templates/frontend/index.html.twig

@@ -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 %}