test/templates/frontend/index.html.twig

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

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

            tableRow.appendChild(tableData);
        }

        function removePrinterFromTable(printerId) {
            const tableBody = document.getElementById('printer' + printerId);
            tableBody.remove();
        }

        function deletePrinter(printerId) {
            fetch('/printer/' + printerId, {method: 'DELETE'}).then(response => {
                if (response.ok) {
                    removePrinterFromTable(printerId);
                }
            });
        }


        function addDeleteButton(tableData, printer) {
            const deleteButton = setButtonAttributes('btn-danger');
            deleteButton.textContent = 'Delete';

            deleteButton.onclick = function () {
                document.getElementById('deleteModalText').textContent = 'Are you sure that you want to delete ' + printer.name + '?';
                document.getElementById('deleteModalConfirm').setAttribute('onclick', 'deletePrinter(' + printer.id + ')');
            }

            tableData.appendChild(deleteButton);
        }

        function setButtonAttributes(buttonType) {
            const button = document.createElement('button');
            button.setAttribute('data-bs-target', '#viewModal');
            button.setAttribute('data-bs-toggle', 'modal');
            button.setAttribute('class', 'btn ' + buttonType);
            return button;
        }

        function addViewButton(tableData, printer) {
            const viewButton = setButtonAttributes('btn-primary');
            viewButton.textContent = 'View';

            viewButton.onclick = function() {
                document.getElementById('viewModalName').textContent = 'Name: ' + printer.name;
                document.getElementById('viewModalPrice').textContent = 'Price: ' + printer.price.toFixed(2) + '$';
                document.getElementById('viewModalBuildVolume').textContent = 'Build Volume: ' + printer.build_volume;
                document.getElementById('viewModalMaxSpeed').textContent = 'Max Speed: ' + printer.max_speed + 'mm/s';

            }

            tableData.appendChild(viewButton);
        }

        function editPrinter(printerId) {
            const nameInput = document.getElementById('editInputName').value;
            const priceInput = document.getElementById('editInputPrice').value;
            const buildVolumeInput = document.getElementById('editInputBuildVolume').value;
            const maxSpeedInput = document.getElementById('editInputMaxSpeed').value;

            fetch('/printer/' + printerId, {method: 'PUT', body: JSON.stringify({
                    name: nameInput,
                    price: Number(priceInput),
                    build_volume: buildVolumeInput,
                    max_speed: Number(maxSpeedInput),
                })}).then(response => {
                if (response.ok) {
                    response.json().then(printer => {
                        $printerRow = document.getElementById('printer' + printerId);

                        document.getElementById('printer' + printer.id + ':name').textContent = printer.name;
                        document.getElementById('printer' + printer.id + ':price').textContent = printer.price;
                        document.getElementById('printer' + printer.id + ':build_volume').textContent = printer.build_volume;
                        document.getElementById('printer' + printer.id + ':max_speed').textContent = printer.max_speed;

                        //TODO: change edit button printer objects
                        const editButton = document.getElementById('printer' + printer.id + ':editButton');
                        editButton.onclick = function() {
                            document.getElementById('editInputName').value = printer.name;
                            document.getElementById('editInputPrice').value = printer.price;
                            document.getElementById('editInputBuildVolume').value = printer.build_volume;
                            document.getElementById('editInputMaxSpeed').value = printer.max_speed;

                            document.getElementById('editModalConfirm').setAttribute('onclick', 'editPrinter(' + printer.id + ')');
                        }
                    });
                }
            });
        }

        function addEditButton(tableData, printer) {
            const editButton = document.createElement('button');
            editButton.setAttribute('data-bs-target', '#editModal');
            editButton.setAttribute('data-bs-toggle', 'modal');
            editButton.setAttribute('class', 'btn btn-primary');
            editButton.id = 'printer' + printer.id + ':editButton'
            editButton.textContent = 'Edit';

            editButton.onclick = function() {
                document.getElementById('editInputName').value = printer.name;
                document.getElementById('editInputPrice').value = printer.price;
                document.getElementById('editInputBuildVolume').value = printer.build_volume;
                document.getElementById('editInputMaxSpeed').value = printer.max_speed;

                document.getElementById('editModalConfirm').setAttribute('onclick', 'editPrinter(' + printer.id + ')');
            }

            tableData.appendChild(editButton);
        }

        function addTableActions(tableRow, printer) {

            const tableData = document.createElement('td');

            addViewButton(tableData, printer);
            addEditButton(tableData, printer);
            addDeleteButton(tableData, printer);

            tableRow.appendChild(tableData);
        }

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

            addTableActions(tableRow, printer);

            tableRow.id = 'printer' + printer.id;
            tableBody.appendChild(tableRow);
        }

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

        function createPrinter() {
            const nameInput = document.getElementById('inputName').value;
            const priceInput = document.getElementById('inputPrice').value;
            const buildVolumeInput = document.getElementById('inputBuildVolume').value;
            const maxSpeedInput = document.getElementById('inputMaxSpeed').value;

            document.getElementById('inputName').value = '';
            document.getElementById('inputPrice').value = '';
            document.getElementById('inputBuildVolume').value = '';
            document.getElementById('inputMaxSpeed').value = '';

            fetch('/printer', {method: 'POST', body: JSON.stringify({
                    name: nameInput,
                    price: Number(priceInput),
                    build_volume: buildVolumeInput,
                    max_speed: Number(maxSpeedInput),
                })}).then(response => {
                if (response.ok) {
                    const tableBody = document.getElementById('table-body');
                    response.json().then(printer => {
                        addPrinterToTable(tableBody, printer);
                    });
                }
            });
        }

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

{% block body %}
    <div class="container mt-5">
        <h1>Printers</h1>
        <button class="btn btn-primary" data-bs-target="#createModal" data-bs-toggle="modal">Create</button>
        <table class="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>
    </div>

    {% include "frontend/partials/_deleteModal.html.twig" %}
    {% include "frontend/partials/_viewModal.html.twig" %}
    {% include "frontend/partials/_createModal.html.twig" %}
    {% include "frontend/partials/_editModal.html.twig" %}
{% endblock %}