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

refactored strings

Browse Source
This commit is contained in:
Jan Klattenhoff 2024-01-26 11:52:26 +01:00
parent 54e64597e3
commit 1f7e68953d
6 changed files with 255 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.idea/php.xml
View File

@ -108,6 +108,7 @@
<path value="$PROJECT_DIR$/vendor/symfony/translation-contracts" />
<path value="$PROJECT_DIR$/vendor/symfony/twig-bridge" />
<path value="$PROJECT_DIR$/vendor/symfony/twig-bundle" />
<path value="$PROJECT_DIR$/vendor/symfony/asset" />
</include_path>
</component>
<component name="PhpInterpreters">

2
.idea/symfony_crud.iml
View File

@ -3,7 +3,6 @@
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<sourceFolder url="file://$MODULE_DIR$/src" isTestSource="false" packagePrefix="App\" />
<sourceFolder url="file://$MODULE_DIR$/tests" isTestSource="true" />
<sourceFolder url="file://$MODULE_DIR$/tests" isTestSource="true" packagePrefix="App\Tests\" />
<excludeFolder url="file://$MODULE_DIR$/var" />
<excludeFolder url="file://$MODULE_DIR$/vendor/composer" />
@ -102,6 +101,7 @@
<excludeFolder url="file://$MODULE_DIR$/vendor/symfony/twig-bridge" />
<excludeFolder url="file://$MODULE_DIR$/vendor/symfony/twig-bundle" />
<excludeFolder url="file://$MODULE_DIR$/vendor/twig/twig" />
<excludeFolder url="file://$MODULE_DIR$/vendor/symfony/asset" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />

1
composer.json
View File

@ -12,6 +12,7 @@
"doctrine/orm": "^2.17",
"phpdocumentor/reflection-docblock": "^5.3",
"phpstan/phpdoc-parser": "^1.25",
"symfony/asset": "7.0.*",
"symfony/console": "7.0.*",
"symfony/dotenv": "7.0.*",
"symfony/flex": "^2",

71
composer.lock generated
View File

@ -4,7 +4,7 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
"This file is @generated automatically"
],
"content-hash": "0adc3b632a4a91ce75e26a1d5abf763c",
"content-hash": "948a7d7c4f60d2cead1e331bc1f1c5b4",
"packages": [
{
"name": "doctrine/cache",
@ -1794,6 +1794,75 @@
},
"time": "2021-07-14T16:46:02+00:00"
},
{
"name": "symfony/asset",
"version": "v7.0.0",
"source": {
"type": "git",
"url": "https://github.com/symfony/asset.git",
"reference": "82cd3961bc7fc1b3c3f85e8f2b9a287a1dfd6f2f"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/symfony/asset/zipball/82cd3961bc7fc1b3c3f85e8f2b9a287a1dfd6f2f",
"reference": "82cd3961bc7fc1b3c3f85e8f2b9a287a1dfd6f2f",
"shasum": ""
},
"require": {
"php": ">=8.2"
},
"conflict": {
"symfony/http-foundation": "<6.4"
},
"require-dev": {
"symfony/http-client": "^6.4|^7.0",
"symfony/http-foundation": "^6.4|^7.0",
"symfony/http-kernel": "^6.4|^7.0"
},
"type": "library",
"autoload": {
"psr-4": {
"Symfony\\Component\\Asset\\": ""
},
"exclude-from-classmap": [
"/Tests/"
]
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Fabien Potencier",
"email": "fabien@symfony.com"
},
{
"name": "Symfony Community",
"homepage": "https://symfony.com/contributors"
}
],
"description": "Manages URL generation and versioning of web assets such as CSS stylesheets, JavaScript files and image files",
"homepage": "https://symfony.com",
"support": {
"source": "https://github.com/symfony/asset/tree/v7.0.0"
},
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2023-10-31T17:59:56+00:00"
},
{
"name": "symfony/cache",
"version": "v7.0.2",

181
public/js/frontend.js Normal file
View File

@ -0,0 +1,181 @@
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.id = `printer${printer.id}:viewButton`;
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 => {
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;
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;
}
const viewButton = document.getElementById(`printer${printer.id}:viewButton`);
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`;
}
});
}
});
}
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);
});
}
});
}
document.addEventListener("DOMContentLoaded", function() {
loadTable();
});

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

@ -1,184 +1,7 @@
{% 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>
<script src="{{ asset('js/frontend.js') }}"></script>
{% endblock %}
{% block body %}