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"?>
<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>

2
src/Enum/ErrorMessages.php
View File

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

5
src/Service/PrinterService.php
View File

@ -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();

4
templates/base.html.twig
View File

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

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

@ -2,42 +2,190 @@
{% 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 => {
for (printer of json) {
const tableBody = document.getElementById('table-body');
tableBody.innerHTML = null;
for (printer of json) {
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 %}
<div class="container mt-5">
<h1>Printers</h1>
<table id="table">
<button class="btn btn-primary" data-bs-target="#createModal" data-bs-toggle="modal">Create</button>
<table class="table">
<thead>
<tr>
<th>Name</th>
@ -51,7 +199,10 @@
</tbody>
</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 %}

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>