From 54e64597e3563aa3f693ccd9f9d844c22ad21e15 Mon Sep 17 00:00:00 2001
From: Jan Klattenhoff <j.klattenhoff@neusta.de>
Date: Fri, 26 Jan 2024 10:45:58 +0100
Subject: [PATCH] created partials

---
 .idea/dataSources.xml                         |   4 +-
 src/Enum/ErrorMessages.php                    |   2 +-
 src/Service/PrinterService.php                |   5 +-
 templates/base.html.twig                      |   4 +-
 templates/frontend/index.html.twig            | 201 +++++++++++++++---
 .../frontend/partials/_createModal.html.twig  |  35 +++
 .../frontend/partials/_deleteModal.html.twig  |  17 ++
 .../frontend/partials/_editModal.html.twig    |  34 +++
 .../frontend/partials/_viewModal.html.twig    |  25 +++
 9 files changed, 296 insertions(+), 31 deletions(-)
 create mode 100644 templates/frontend/partials/_createModal.html.twig
 create mode 100644 templates/frontend/partials/_deleteModal.html.twig
 create mode 100644 templates/frontend/partials/_editModal.html.twig
 create mode 100644 templates/frontend/partials/_viewModal.html.twig

diff --git a/.idea/dataSources.xml b/.idea/dataSources.xml
index 64a9475..a97d305 100644
--- a/.idea/dataSources.xml
+++ b/.idea/dataSources.xml
@@ -1,13 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="DataSourceManagerImpl" format="xml" multifile-model="true">
-    <data-source source="LOCAL" name="DDEV" uuid="11dee234-3cff-45c8-be13-0ecab2b9c755">
+    <data-source source="LOCAL" name="DDEV" uuid="4e41cde9-514c-4972-ba5c-ef4322763eb5">
       <driver-ref>mariadb</driver-ref>
       <synchronize>true</synchronize>
       <configured-by-url>true</configured-by-url>
       <remarks>DDEV generated data source</remarks>
       <jdbc-driver>org.mariadb.jdbc.Driver</jdbc-driver>
-      <jdbc-url>jdbc:mariadb://127.0.0.1:32794/db?user=db&amp;password=db</jdbc-url>
+      <jdbc-url>jdbc:mariadb://127.0.0.1:12526/db?user=db&amp;password=db</jdbc-url>
       <working-dir>$ProjectFileDir$</working-dir>
     </data-source>
   </component>
diff --git a/src/Enum/ErrorMessages.php b/src/Enum/ErrorMessages.php
index 8470652..93abe60 100644
--- a/src/Enum/ErrorMessages.php
+++ b/src/Enum/ErrorMessages.php
@@ -1,4 +1,4 @@
-<?php
+<?php declare(strict_types=1);
 
 namespace App\Enum;
 
diff --git a/src/Service/PrinterService.php b/src/Service/PrinterService.php
index 94945f9..f6dae75 100644
--- a/src/Service/PrinterService.php
+++ b/src/Service/PrinterService.php
@@ -23,6 +23,7 @@ class PrinterService
     public function createPrinter(string $jsonString): Printer
     {
         $printer = $this->serializer->deserialize($jsonString, Printer::class, 'json');
+
         $this->entityManager->persist($printer);
         $this->entityManager->flush();
 
@@ -40,9 +41,9 @@ class PrinterService
         $jsonArray = json_decode($json, true);
 
         $printer->setName($jsonArray['name'] ?? $printer->getName());
-        $printer->setPrice($jsonArray['price'] ?? $printer->getPrice());
+        $printer->setPrice((float)($jsonArray['price'] ?? $printer->getPrice()));
         $printer->setBuildVolume($jsonArray['build_volume'] ?? $printer->getBuildVolume());
-        $printer->setMaxSpeed($jsonArray['max_speed'] ?? $printer->getMaxSpeed());
+        $printer->setMaxSpeed((float)($jsonArray['max_speed'] ?? $printer->getMaxSpeed()));
 
         $this->entityManager->flush();
 
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 67598ac..a9e9d71 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -4,13 +4,15 @@
         <meta charset="UTF-8">
         <title>{% block title %}Welcome!{% endblock %}</title>
         <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
         {% block stylesheets %}
         {% endblock %}
 
         {% block javascripts %}
         {% endblock %}
     </head>
-    <body>
+    <body data-bs-theme="dark">
         {% block body %}{% endblock %}
     </body>
 </html>
diff --git a/templates/frontend/index.html.twig b/templates/frontend/index.html.twig
index d8ca910..7a90719 100644
--- a/templates/frontend/index.html.twig
+++ b/templates/frontend/index.html.twig
@@ -2,56 +2,207 @@
 
 {% block javascripts %}
     <script>
-        function addTableData(tableRow, data) {
+        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);
-            addTableData(tableRow, printer.price.toFixed(2) + '$');
-            addTableData(tableRow, printer.build_volume);
-            addTableData(tableRow, printer.max_speed);
+            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 reloadTable() {
+        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) {
-                        const tableBody = document.getElementById('table-body');
-                        tableBody.innerHTML = null;
                         addPrinterToTable(tableBody, printer);
                     }
                 });
             });
         }
 
-        reloadTable();
+        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 %}
-    <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">
+    <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>
-    <script>
+            </tbody>
+        </table>
+    </div>
 
-    </script>
+    {% 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 %}
\ No newline at end of file
diff --git a/templates/frontend/partials/_createModal.html.twig b/templates/frontend/partials/_createModal.html.twig
new file mode 100644
index 0000000..a86cee4
--- /dev/null
+++ b/templates/frontend/partials/_createModal.html.twig
@@ -0,0 +1,35 @@
+<!-- createModal -->
+<div class="modal fade" id="createModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h1 class="modal-title fs-5" id="exampleModalLabel">Create</h1>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body" id="createModalBody">
+                <div class="input-group mb-3">
+                    <span class="input-group-text" id="inputGroup-sizing-default">Name</span>
+                    <input id="inputName" type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
+                </div>
+                <div class="input-group mb-3">
+                    <span class="input-group-text" id="inputGroup-sizing-default">Price</span>
+                    <input id="inputPrice" type="number" step=".01" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
+                    <span class="input-group-text" id="inputGroup-sizing-default">$</span>
+                </div>
+                <div class="input-group mb-3">
+                    <span class="input-group-text" id="inputGroup-sizing-default">Build Volume</span>
+                    <input id="inputBuildVolume" type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
+                </div>
+                <div class="input-group mb-3">
+                    <span class="input-group-text" id="inputGroup-sizing-default">Max Speed</span>
+                    <input id="inputMaxSpeed" type="number" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
+                    <span class="input-group-text" id="inputGroup-sizing-default">mm/s</span>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" id="createModalClose" data-bs-dismiss="modal">Close</button>
+                <button onclick="createPrinter()" type="button" class="btn btn-primary" id="createModalConfirm" data-bs-dismiss="modal">Create</button>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/frontend/partials/_deleteModal.html.twig b/templates/frontend/partials/_deleteModal.html.twig
new file mode 100644
index 0000000..baeed63
--- /dev/null
+++ b/templates/frontend/partials/_deleteModal.html.twig
@@ -0,0 +1,17 @@
+<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h1 class="modal-title fs-5" id="exampleModalLabel">Delete</h1>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body" id="deleteModalText">
+                ...
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" id="deleteModalClose" data-bs-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-danger" id="deleteModalConfirm" data-bs-dismiss="modal">Delete</button>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/frontend/partials/_editModal.html.twig b/templates/frontend/partials/_editModal.html.twig
new file mode 100644
index 0000000..b565380
--- /dev/null
+++ b/templates/frontend/partials/_editModal.html.twig
@@ -0,0 +1,34 @@
+<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h1 class="modal-title fs-5" id="exampleModalLabel">Edit</h1>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body" id="editModalBody">
+                <div class="input-group mb-3">
+                    <span class="input-group-text" id="inputGroup-sizing-default">Name</span>
+                    <input id="editInputName" type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
+                </div>
+                <div class="input-group mb-3">
+                    <span class="input-group-text" id="inputGroup-sizing-default">Price</span>
+                    <input id="editInputPrice" type="number" step=".01" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
+                    <span class="input-group-text" id="inputGroup-sizing-default">$</span>
+                </div>
+                <div class="input-group mb-3">
+                    <span class="input-group-text" id="inputGroup-sizing-default">Build Volume</span>
+                    <input id="editInputBuildVolume" type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
+                </div>
+                <div class="input-group mb-3">
+                    <span class="input-group-text" id="inputGroup-sizing-default">Max Speed</span>
+                    <input id="editInputMaxSpeed" type="number" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
+                    <span class="input-group-text" id="inputGroup-sizing-default">mm/s</span>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" id="editModalClose" data-bs-dismiss="modal">Close</button>
+                <button onclick="" type="button" class="btn btn-primary" id="editModalConfirm" data-bs-dismiss="modal">Save</button>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/frontend/partials/_viewModal.html.twig b/templates/frontend/partials/_viewModal.html.twig
new file mode 100644
index 0000000..d049888
--- /dev/null
+++ b/templates/frontend/partials/_viewModal.html.twig
@@ -0,0 +1,25 @@
+<div class="modal fade" id="viewModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h1 class="modal-title fs-5" id="exampleModalLabel">View</h1>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body" id="viewModalName">
+                [Name]
+            </div>
+            <div class="modal-body" id="viewModalPrice">
+                [Price]
+            </div>
+            <div class="modal-body" id="viewModalBuildVolume">
+                [BuildVolume]
+            </div>
+            <div class="modal-body" id="viewModalMaxSpeed">
+                [MaxSpeed]
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" id="viewModalClose" data-bs-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file