created partials
This commit is contained in:
Jan Klattenhoff
parent
b16307c2d2
commit
54e64597e3
@ -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&password=db</jdbc-url>
|
||||
<jdbc-url>jdbc:mariadb://127.0.0.1:12526/db?user=db&password=db</jdbc-url>
|
||||
<working-dir>$ProjectFileDir$</working-dir>
|
||||
</data-source>
|
||||
</component>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<?php
|
||||
<?php declare(strict_types=1);
|
||||
|
||||
namespace App\Enum;
|
||||
|
||||
|
||||
@ -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,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>
|
||||
|
||||
@ -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 %}
|
||||
35
templates/frontend/partials/_createModal.html.twig
Normal file
35
templates/frontend/partials/_createModal.html.twig
Normal 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
17
templates/frontend/partials/_deleteModal.html.twig
Normal 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
34
templates/frontend/partials/_editModal.html.twig
Normal 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
25
templates/frontend/partials/_viewModal.html.twig
Normal 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>
|
||||
Loading…
Reference in New Issue
Block a user