More work an webgui

This commit is contained in:
2024-04-10 20:13:37 +02:00
parent 4b5ba85a77
commit aaa452cbb5
20 changed files with 842 additions and 359 deletions
+294
View File
@@ -0,0 +1,294 @@
<?php
/******************************************************************************
* YMS - Yacht Management Software
* Copyright (C) 2024 Thomas Hooge
*
* SPDX-License-Identifier: WTFPL
******************************************************************************/
require 'globals.inc';
$pagetitle=_('Equipment');
$id = gpc_get_int($_REQUEST, 'id', 0);
// ========== ACTIONS START ===================================================
switch ($submit = form_get_action()) {
case NULL: break;
case 'add': $action = ACT_ADD; break;
case 'view': $action = ACT_VIEW; break;
case 'edit': $action = ACT_EDIT; break;
case 'del': $action = ACT_DELETE; break;
case 'insert':
break;
case 'update':
$action = ACT_VIEW;
break;
case 'delete':
$action = ACT_DEFAULT;
break;
default:
$g_error->Add("Unbekannte Funktion!");
$valid = FALSE;
}
// ========== ACTIONS END =====================================================
require 'header.php';
// ========== PAGE CONTENT ====================================================
if ($action == ACT_DEFAULT):
// ========== VARIANT: default behavior =======================================
echo "<h1>$pagetitle</h1>\n";
$sql = "SELECT eid, ename, make, model, serial, remarks "
. "FROM equipment "
. "ORDER BY eid";
$sth = $pdo->query($sql);
$res = $sth->fetchAll();
echo '<table class="table table-striped">', "\n";
echo "<thead>\n";
echo "<tr>";
echo "<th>" . _('Description') . "</th>";
echo "<th>" . _('Make') . "</th>";
echo "<th>" . _('Model') . "</th>";
echo "<th>" . _('Serial') . "</th>";
echo "<th>" . _('Remarks') . "</th>";
echo "<th>&nbsp;</th>";
echo "</tr>\n";
echo "</thead>\n";
foreach ($res as $row) {
echo "<tr>\n";
echo "<td>". $row['ename'] ."</td>\n";
echo "<td>". $row['make'] ."</td>\n";
echo "<td>". $row['model'] ."</td>\n";
echo "<td>". $row['serial'] ."</td>\n";
echo "<td>". $row['remarks'] ."</td>\n";
// Action buttons
echo "<td>";
echo '<a href="', $g_scriptname, '?f=view&id=', $row['eid'], '">View</a>&nbsp;';
echo '<a href="">Edit</a>';
echo "</td>\n";
echo "</tr>\n";
}
// Table summary
echo "<tfoot>\n";
echo '<tr><td colspan="6">', sprintf(_('%d records'), count($res)), '</td></tr>', "\n";
echo "</tfoot>\n";
echo "</table>\n";
echo '<a href="', $g_scriptname, '?f=add" class="btn btn-info" role="button">', _('Add'), "</a>\n";
elseif ($action == ACT_ADD):
// ========== VARIANT: add record =============================================
?>
<h2><?=_('Add Equipment')?></h2>
<form method="post">
<div class="mb-3">
<label for="ename" class="form-label"><?=_('Name')?></label>
<input type="text" class="form-control" id="ename" name="ename">
</div>
<div class="mb-3">
<label for="make" class="form-label"><?=_('Make')?></label>
<input type="text" class="form-control" id="make" name="make">
</div>
<div class="mb-3">
<label for="model" class="form-label"><?=_('Model')?></label>
<input type="text" class="form-control" id="model" name="make">
</div>
<div class="mb-3">
<label for="serial" class="form-label"><?=_('Serial')?></label>
<input type="text" class="form-control" id="serial" name="serial">
</div>
<button type="submit" class="btn btn-primary"><?=_('Save')?></button>
<a href="<?=$g_scriptname?>" class="btn btn-secondary"><?=_('Back')?></a>
</form>
<?php
elseif ($action == ACT_VIEW):
// ========== VARIANT: view single record =====================================
$sql = "SELECT eid, ename, make, model, serial, remarks "
. "FROM equipment "
. "WHERE eid=?";
$sth = $pdo->prepare($sql);
$sth->execute([$id]);
$equipment = $sth->fetch(PDO::FETCH_OBJ);
echo "<h2>", $equipment->ename, "</h2>\n";
// Bootstrap grid
echo '<div class="container">';
echo '<div class="row">';
echo '<div class="col">';
echo "<table>\n";
echo "<tr><td>", _('Make'),"</td><td>", $equipment->make, "</td></tr>\n";
echo "<tr><td>", _('Model'),"</td><td>", $equipment->model, "</td></tr>\n";
echo "<tr><td>", _('Serial'),"</td><td>", $equipment->serial, "</td></tr>\n";
echo "</table>\n";
echo '</div>'; // Column break
echo '<div class="col">';
?>
<p>Images and documents go here</p>
<form id="uploadform" method="post" enctype="multipart/form-data">
<div class="card">
<div class="card-body">
<div id="drop-area" class="border rounded d-flex justify-content-center align-items-center"
style="height: 200px; cursor: pointer;">
<div class="text-center" id="result">
<p>Drag and drop your image here or click to select a file.</p>
</div>
</div>
<input type="file" id="fileElem" multiple accept="image/*" class="d-none" capture="camera">
<input type="submit" name="submit" value="Upload">
</div>
</div>
</form>
<progress id="progress" value="100" max="100" style="display: none;"></progress>
<script>
let dropArea = document.getElementById("drop-area");
["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => {
dropArea.addEventListener(eventName, preventDefaults, false);
document.body.addEventListener(eventName, preventDefaults, false);
});
["dragenter", "dragover"].forEach((eventName) => {
dropArea.addEventListener(eventName, highlight, false);
});
["dragleave", "drop"].forEach((eventName) => {
dropArea.addEventListener(eventName, unhighlight, false);
});
dropArea.addEventListener("drop", handleDrop, false);
function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}
function highlight(e) {
dropArea.classList.add("highlight");
}
function unhighlight(e) {
dropArea.classList.remove("highlight");
}
function handleDrop(e) {
let dt = e.dataTransfer;
let files = dt.files;
handleFiles(files);
}
function handleFiles(files) {
[...files].forEach(uploadFile);
}
function uploadFile(file) {
console.log("Uploading", file.name);
const form = document.querySelector("#uploadform");
const formData = new FormData();
formData.append('files[]', file);
fetch("fileupload.php", { method: "POST", body: formData }).then(
(response) => {
console.log(response);
if (response.status === 200) {
document.querySelector("#result").innerHTML = "Dateien wurden geladen";
}
});
}
dropArea.addEventListener("click", () => {
fileElem.click();
});
let fileElem = document.getElementById("fileElem");
fileElem.addEventListener("change", function (e) {
handleFiles(this.files);
});
// Previes
document.querySelector("#files").addEventListener ("change", function (evt) {
let files = event.target.files;
for (let i = 0, f; f = files[i]; i++) {
let reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
let span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join('');
document.querySelector ('.filelist').insertBefore(span, null);
};
})(f);
reader.readAsDataURL(f);
}
})
</script>
<?php
echo '</div>'; // col
echo '</div>'; // row
echo '</div>'; // container
// Buttons at bottom of data area
echo '<div class="container">', "\n";
echo '<a href="', $g_scriptname, '?f=edit&id=', $id, '" class="btn btn-info" role="button">', _('Edit'), "</a>\n";
echo '&nbsp;';
echo '<a href="', $g_scriptname, '?f=del&id=', $id, '" class="btn btn-info" role="button">', _('Delete'), "</a>\n";
echo '&nbsp;';
echo '<a href="', $g_scriptname, '" class="btn btn-secondary" role="button">', _('Back'), "</a>\n";
echo "</div>\n";
elseif ($action == ACT_EDIT):
// ========== VARIANT: edit single record =====================================
$sql = "SELECT eid, ename, make, model, serial, remarks "
. "FROM equipment "
. "WHERE eid=?";
$sth = $pdo->prepare($sql);
$sth->execute([$id]);
$equipment = $sth->fetch(PDO::FETCH_OBJ);
?>
<h2><?=_('Edit Equipment')?></h2>
<form method="post">
<div class="mb-3">
<label for="ename" class="form-label"><?=_('Name')?></label>
<input type="text" class="form-control" id="ename" name="ename" value="<?=$equipment->ename ?>">
</div>
<div class="mb-3">
<label for="make" class="form-label"><?=_('Make')?></label>
<input type="text" class="form-control" id="make" name="make" value="<?=$equipment->make ?>">
</div>
<div class="mb-3">
<label for="model" class="form-label"><?=_('Model')?></label>
<input type="text" class="form-control" id="model" name="make" value="<?=$equipment->model ?>">
</div>
<div class="mb-3">
<label for="serial" class="form-label"><?=_('Serial')?></label>
<input type="text" class="form-control" id="serial" name="serial" value="<?=$equipment->serial ?>">
</div>
<button type="submit" class="btn btn-primary"><?=_('Save')?></button>
<a href="<?=$g_scriptname?>?f=view&id=<?=$id?>" class="btn btn-secondary"><?=_('Back')?></a>
</form>
<?php
elseif ($action == ACT_DELETE):
// ========== VARIANT: delete record ==========================================
else:
// ========== ERROR UNKNOWN VARIANT ===========================================
echo "<p>", _('Unknown function call: Please report to system development!'), "</p>\n";
endif; // $action == ...
// ========== END OF VARIANTS =================================================
include 'footer.php';