feature: added some javascript

templates/frontend/index.html.twig

@@ -1,13 +1,167 @@
 {% extends 'base.html.twig' %}
 
 {% 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>
         <tr>
             <th>Name</th>
             <th>Price</th>
             <th>Build Volume</th>
             <th>Max Speed</th>
+            <th>Actions</th>
         </tr>
+        </thead>
+        <tbody id="table-body">
+
+        </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 %}