jank/test
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

created partials

Browse Source
This commit is contained in:
Jan Klattenhoff 2024-01-26 10:45:58 +01:00
parent b16307c2d2
commit 54e64597e3
9 changed files with 296 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.idea/dataSources.xml
View File

@ -1,13 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<project version="4"> <project version="4">
<component name="DataSourceManagerImpl" format="xml" multifile-model="true"> <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> <driver-ref>mariadb</driver-ref>
<synchronize>true</synchronize> <synchronize>true</synchronize>
<configured-by-url>true</configured-by-url> <configured-by-url>true</configured-by-url>
<remarks>DDEV generated data source</remarks> <remarks>DDEV generated data source</remarks>
<jdbc-driver>org.mariadb.jdbc.Driver</jdbc-driver> <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> <working-dir>$ProjectFileDir$</working-dir>
</data-source> </data-source>
</component> </component>

2
src/Enum/ErrorMessages.php
View File

@ -1,4 +1,4 @@
<?php <?php declare(strict_types=1);
namespace App\Enum; namespace App\Enum;

5
src/Service/PrinterService.php
View File

@ -23,6 +23,7 @@ class PrinterService
public function createPrinter(string $jsonString): Printer public function createPrinter(string $jsonString): Printer
{ {
$printer = $this->serializer->deserialize($jsonString, Printer::class, 'json'); $printer = $this->serializer->deserialize($jsonString, Printer::class, 'json');
$this->entityManager->persist($printer); $this->entityManager->persist($printer);
$this->entityManager->flush(); $this->entityManager->flush();
@ -40,9 +41,9 @@ class PrinterService
$jsonArray = json_decode($json, true); $jsonArray = json_decode($json, true);
$printer->setName($jsonArray['name'] ?? $printer->getName()); $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->setBuildVolume($jsonArray['build_volume'] ?? $printer->getBuildVolume());
$printer->setMaxSpeed($jsonArray['max_speed'] ?? $printer->getMaxSpeed()); $printer->setMaxSpeed((float)($jsonArray['max_speed'] ?? $printer->getMaxSpeed()));
$this->entityManager->flush(); $this->entityManager->flush();

4
templates/base.html.twig
View File

@ -4,13 +4,15 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title> <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 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 %} {% block stylesheets %}
{% endblock %} {% endblock %}
{% block javascripts %} {% block javascripts %}
{% endblock %} {% endblock %}
</head> </head>
<body> <body data-bs-theme="dark">
{% block body %}{% endblock %} {% block body %}{% endblock %}
</body> </body>
</html> </html>

201
templates/frontend/index.html.twig
View File

@ -2,56 +2,207 @@
{% block javascripts %} {% block javascripts %}
<script> <script>
function addTableData(tableRow, data) { function addTableData(tableRow, data, id, printer) {
const tableData = document.createElement('td'); const tableData = document.createElement('td');
tableData.id = 'printer' + printer.id + ':' + id;
tableData.textContent = data; tableData.textContent = data;
tableRow.appendChild(tableData); 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) { function addPrinterToTable(tableBody, printer) {
const tableRow = document.createElement('tr'); const tableRow = document.createElement('tr');
addTableData(tableRow, printer.name); addTableData(tableRow, printer.name, 'name', printer);
addTableData(tableRow, printer.price.toFixed(2) + '$'); addTableData(tableRow, printer.price.toFixed(2) + '$', 'price', printer);
addTableData(tableRow, printer.build_volume); addTableData(tableRow, printer.build_volume, 'build_volume', printer);
addTableData(tableRow, printer.max_speed); addTableData(tableRow, printer.max_speed + 'mm/s', 'max_speed', printer);
addTableActions(tableRow, printer);
tableRow.id = 'printer' + printer.id;
tableBody.appendChild(tableRow); tableBody.appendChild(tableRow);
} }
function reloadTable() { function loadTable() {
fetch('/printer', {method: 'GET'}).then(response => { fetch('/printer', {method: 'GET'}).then(response => {
response.json().then(json => { response.json().then(json => {
const tableBody = document.getElementById('table-body');
tableBody.innerHTML = null;
for (printer of json) { for (printer of json) {
const tableBody = document.getElementById('table-body');
tableBody.innerHTML = null;
addPrinterToTable(tableBody, printer); 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> </script>
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<h1>Printers</h1> <div class="container mt-5">
<table id="table"> <h1>Printers</h1>
<thead> <button class="btn btn-primary" data-bs-target="#createModal" data-bs-toggle="modal">Create</button>
<tr> <table class="table">
<th>Name</th> <thead>
<th>Price</th> <tr>
<th>Build Volume</th> <th>Name</th>
<th>Max Speed</th> <th>Price</th>
<th>Actions</th> <th>Build Volume</th>
</tr> <th>Max Speed</th>
</thead> <th>Actions</th>
<tbody id="table-body"> </tr>
</thead>
<tbody id="table-body">
</tbody> </tbody>
</table> </table>
<script> </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 %} {% endblock %}

35
templates/frontend/partials/_createModal.html.twig Normal file
View File

@ -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>

17
templates/frontend/partials/_deleteModal.html.twig Normal file
View File

@ -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>

34
templates/frontend/partials/_editModal.html.twig Normal file
View File

@ -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>

25
templates/frontend/partials/_viewModal.html.twig Normal file
View File

@ -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>