test/templates/frontend/index.html.twig

{% extends 'base.html.twig' %}

{% block javascripts %}
    <script>
        function addTableData(tableRow, data) {
            const tableData = document.createElement('td');
            tableData.textContent = data;

            tableRow.appendChild(tableData);
        }

        function addPrinterToTable(tableBody, printer) {
            const tableRow = document.createElement('tr');
            addTableData(tableRow, printer.name);
            addTableData(tableRow, printer.price.toFixed(2) + '$');
            addTableData(tableRow, printer.build_volume);
            addTableData(tableRow, printer.max_speed);

            tableBody.appendChild(tableRow);
        }

        function reloadTable() {
            fetch('/printer', {method: 'GET'}).then(response => {
                response.json().then(json => {
                    for (printer of json) {
                        const tableBody = document.getElementById('table-body');
                        tableBody.innerHTML = null;
                        addPrinterToTable(tableBody, printer);
                    }
                });
            });
        }

        reloadTable();
    </script>
{% endblock %}

{% block body %}
    <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>
    <script>

    </script>
{% endblock %}