test/templates/frontend/index.html.twig

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