mirror of
https://github.com/LD-Reborn/Berufsschule_HAM.git
synced 2025-12-20 06:51:55 +00:00
Added Inventory, Assets, Locations, Users pages
This commit is contained in:
@@ -22,7 +22,13 @@ public class HomeController : Controller
|
|||||||
[Authorize]
|
[Authorize]
|
||||||
[HttpGet("Index")]
|
[HttpGet("Index")]
|
||||||
[HttpGet("/")]
|
[HttpGet("/")]
|
||||||
public async Task<IActionResult> Index()
|
public ActionResult Index()
|
||||||
|
{
|
||||||
|
return View();
|
||||||
|
}
|
||||||
|
|
||||||
|
[HttpGet("Assets")]
|
||||||
|
public async Task<IActionResult> Assets()
|
||||||
{
|
{
|
||||||
IEnumerable<UserModel> users = await _ldap.ListUsersAsync();
|
IEnumerable<UserModel> users = await _ldap.ListUsersAsync();
|
||||||
IEnumerable<AssetModel> assets = await _ldap.ListDeviceAsync();
|
IEnumerable<AssetModel> assets = await _ldap.ListDeviceAsync();
|
||||||
@@ -41,6 +47,24 @@ public class HomeController : Controller
|
|||||||
return View(new HomeIndexViewModel() { AssetsTableViewModels = assetsTableViewModels });
|
return View(new HomeIndexViewModel() { AssetsTableViewModels = assetsTableViewModels });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[HttpGet("Inventory")]
|
||||||
|
public ActionResult Inventory()
|
||||||
|
{
|
||||||
|
return View();
|
||||||
|
}
|
||||||
|
|
||||||
|
[HttpGet("Locations")]
|
||||||
|
public ActionResult Locations()
|
||||||
|
{
|
||||||
|
return View();
|
||||||
|
}
|
||||||
|
|
||||||
|
[HttpGet("Users")]
|
||||||
|
public ActionResult Users()
|
||||||
|
{
|
||||||
|
return View();
|
||||||
|
}
|
||||||
|
|
||||||
[HttpPost("Login")]
|
[HttpPost("Login")]
|
||||||
public async Task<ActionResult> Login(string username, string password)
|
public async Task<ActionResult> Login(string username, string password)
|
||||||
{
|
{
|
||||||
|
|||||||
205
src/Views/Home/Assets.cshtml
Normal file
205
src/Views/Home/Assets.cshtml
Normal file
@@ -0,0 +1,205 @@
|
|||||||
|
@using Microsoft.AspNetCore.Mvc.Localization
|
||||||
|
@using Berufsschule_HAM.Models
|
||||||
|
@model HomeIndexViewModel
|
||||||
|
@inject IViewLocalizer T
|
||||||
|
@{
|
||||||
|
ViewData["Title"] = T["Assets"];
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container py-4">
|
||||||
|
<h2 class="mb-3">@T["Assets"]</h2>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="mb-4 d-flex flex-wrap gap-2">
|
||||||
|
<button class="btn btn-outline-primary">Create asset</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table table-striped align-middle">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>User</th>
|
||||||
|
<th>Asset ID</th>
|
||||||
|
<th>Asset Name</th>
|
||||||
|
<th>Location</th>
|
||||||
|
<th>Action</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
@{
|
||||||
|
foreach (AssetsTableViewModel assetsTableViewModel in Model.AssetsTableViewModels)
|
||||||
|
{
|
||||||
|
<tr>
|
||||||
|
<td>@assetsTableViewModel.UserUID</td>
|
||||||
|
<td>@assetsTableViewModel.AssetCn</td>
|
||||||
|
<td>@assetsTableViewModel.AssetName</td>
|
||||||
|
<td>@assetsTableViewModel.LocationName</td>
|
||||||
|
<td>
|
||||||
|
<div class="d-flex gap-2">
|
||||||
|
<button class="btn btn-sm btn-primary">Update</button>
|
||||||
|
<button class="btn btn-sm btn-danger btn-delete"
|
||||||
|
data-asset-id="@assetsTableViewModel.AssetCn"
|
||||||
|
data-bs-toggle="modal"
|
||||||
|
data-bs-target="#deleteModal">
|
||||||
|
🗑️ Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Asset Delete Confirmation Modal -->
|
||||||
|
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header bg-danger text-white">
|
||||||
|
<h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
|
||||||
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<p>Are you sure you want to delete the asset <strong id="assetName"></strong> (ID: <span id="assetId"></span>)?</p>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||||
|
<form id="deleteForm" method="post" action="">
|
||||||
|
<button type="submit" class="btn btn-danger">Yes, Delete</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const deleteModal = document.getElementById('deleteModal');
|
||||||
|
let currentButton = null; // The delete button that opened the modal
|
||||||
|
|
||||||
|
deleteModal.addEventListener('show.bs.modal', event => {
|
||||||
|
currentButton = event.relatedTarget; // Button that triggered the modal
|
||||||
|
const assetId = currentButton.getAttribute('data-asset-id');
|
||||||
|
const assetName = currentButton.getAttribute('data-asset-name');
|
||||||
|
|
||||||
|
deleteModal.querySelector('#assetId').textContent = assetId;
|
||||||
|
deleteModal.querySelector('#assetName').textContent = assetName;
|
||||||
|
|
||||||
|
// Store the delete URL for later use
|
||||||
|
deleteModal.querySelector('#deleteForm').dataset.url = `/Assets/Delete?cn=${assetId}`;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle submit of deleteForm via fetch()
|
||||||
|
const deleteForm = document.getElementById('deleteForm');
|
||||||
|
deleteForm.addEventListener('submit', async e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const url = deleteForm.dataset.url;
|
||||||
|
const assetId = deleteModal.querySelector('#assetId').textContent;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(url, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Accept': 'application/json'
|
||||||
|
}//,
|
||||||
|
//body: JSON.stringify({ id: assetId }) // Use this for Post requests with [FromBody] parameters like in /Groups/Update
|
||||||
|
});
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
// Close the modal
|
||||||
|
const modal = bootstrap.Modal.getInstance(deleteModal);
|
||||||
|
modal.hide();
|
||||||
|
|
||||||
|
// Remove the row from the table
|
||||||
|
const row = currentButton.closest('tr');
|
||||||
|
row.classList.add('table-danger');
|
||||||
|
setTimeout(() => row.remove(), 300);
|
||||||
|
|
||||||
|
showToast('Asset deleted successfully', 'success');
|
||||||
|
} else {
|
||||||
|
showToast(`❌ ${result.reason}: ${result.exception || 'Unknown error'}`, 'danger');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
showToast('Error contacting server', 'danger');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Simple toast helper
|
||||||
|
function showToast(message, type) {
|
||||||
|
const toastContainer = document.getElementById('toastContainer') || createToastContainer();
|
||||||
|
const toast = document.createElement('div');
|
||||||
|
toast.className = `toast align-items-center text-white bg-${type} border-0`;
|
||||||
|
toast.role = 'alert';
|
||||||
|
toast.innerHTML = `
|
||||||
|
<div class="d-flex">
|
||||||
|
<div class="toast-body">${message}</div>
|
||||||
|
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
toastContainer.appendChild(toast);
|
||||||
|
const bsToast = new bootstrap.Toast(toast, { delay: 3000 });
|
||||||
|
bsToast.show();
|
||||||
|
toast.addEventListener('hidden.bs.toast', () => toast.remove());
|
||||||
|
}
|
||||||
|
|
||||||
|
function createToastContainer() {
|
||||||
|
const container = document.createElement('div');
|
||||||
|
container.id = 'toastContainer';
|
||||||
|
container.className = 'toast-container position-fixed bottom-0 end-0 p-3';
|
||||||
|
document.body.appendChild(container);
|
||||||
|
return container;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
@* <script>
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
alert("DEBUG@1");
|
||||||
|
const deleteModal = document.getElementById('deleteModal');
|
||||||
|
deleteModal.addEventListener('show.bs.modal', event => {
|
||||||
|
alert("DEBUG@2");
|
||||||
|
const button = event.relatedTarget; // Button that triggered the modal
|
||||||
|
const assetId = button.getAttribute('data-asset-id');
|
||||||
|
const assetName = button.getAttribute('data-asset-name');
|
||||||
|
|
||||||
|
// Update modal content
|
||||||
|
deleteModal.querySelector('#assetId').textContent = assetId;
|
||||||
|
deleteModal.querySelector('#assetName').textContent = assetName;
|
||||||
|
|
||||||
|
// Set the form action dynamically
|
||||||
|
const form = deleteModal.querySelector('#deleteForm');
|
||||||
|
form.action = `/Assets/Delete/${assetId}`; // <-- adjust controller/action as needed
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script> *@
|
||||||
|
|
||||||
|
<!--
|
||||||
|
|
||||||
|
In case someone wants to reread this:
|
||||||
|
|
||||||
|
<div class="text-center">
|
||||||
|
<h1 class="display-4">Crashcourse zu "MVC"</h1>
|
||||||
|
<p>Die HTML, die grad gerendert wird, liegt in /Views/Home/ - dort sollte auch das Login später rein (bspw. als Login.cshtml)</p>
|
||||||
|
<p>Die Web-App folgt der MVC Struktur. D.h. man hat ein Model, ein View und einen Controller. (Wobei dieses View hier hat kein Model. Ist also mehr oder weniger optional.)</p>
|
||||||
|
<h2>McDonalds Vergleich:</h2>
|
||||||
|
<p>Der Controller ist der Kassierer; der nimmt die Informationen entgegen, verarbeitet diese und setzt eine Bestellnotiz zusammen.</p>
|
||||||
|
<p>Das Model ist die Bestellnotiz, die zur Küche weitergegeben wird mit den Informationen, wie es zubereitet werden muss.</p>
|
||||||
|
<p>Der View ist der Angestellte, der die Burger zusammensetzt; er kocht nichts und macht nichts groß kompliziertes, sondern tut nur die Teile in den Burger und gibt das Ergebnis zum Kassierer (d.h. Controller).</p>
|
||||||
|
<h2>Normale Erklärung:</h2>
|
||||||
|
<p>Ein Controller ist zwingend erforderlich und stellt den Endpoint unter einer Route bereit (d.h. das, was man im Browser eingibt, bspw. "/Home/Index")</p>
|
||||||
|
<p>Im Controller von diesem View ("/Controllers/HomeControllers.cs") findet man ein simples "return View();", was dafür sorgt, dass einfach diese .cshtml returned wird.</p>
|
||||||
|
<p>("Warum diese .cshtml?" - Bestimmt er selber anhand der Controller Route. Die Controller Route setzt er zusammen aus dem Namen der Klasse (wenn oberhalb der Klasse "[Route("[controller]")]" steht) und dem, was man vor eine Methode schreibt, bspw. "[HttpGet("Index")]" -> "/Home/Index" und "[HttpGet("/")]" -> "/".)</p>
|
||||||
|
<p>Wenn man Informationen vom Controller an das View übergeben will, tut man das mit einem Model; bspw. "return View(new AssetViewModel { cn = assetName, id = assetId });" </p>
|
||||||
|
<p>Ein Model ist ganz einfach eine Klasse, wie man sie kennt.</p>
|
||||||
|
<p>Logik kommt in den Controller und das HTML kommt in das View (... in der Praxis kommt ins View öfters mal auch bissl mehr Logik rein. Lässt sich nicht verhindern.)</p>
|
||||||
|
</div>
|
||||||
|
-->
|
||||||
@@ -9,203 +9,8 @@
|
|||||||
|
|
||||||
<div class="container py-4">
|
<div class="container py-4">
|
||||||
<h2 class="mb-3">@T["Overview"]</h2>
|
<h2 class="mb-3">@T["Overview"]</h2>
|
||||||
|
|
||||||
|
|
||||||
<div class="mb-4 d-flex flex-wrap gap-2">
|
<div class="mb-4 d-flex flex-wrap gap-2">
|
||||||
|
<button class="btn btn-outline-primary">Inventory asset</button>
|
||||||
<button class="btn btn-outline-primary">Create user</button>
|
<button class="btn btn-outline-primary">Create user</button>
|
||||||
<button class="btn btn-outline-secondary">Update user</button>
|
|
||||||
<button class="btn btn-outline-danger">Delete user</button>
|
|
||||||
<button class="btn btn-outline-primary">Create asset</button>
|
|
||||||
<button class="btn btn-outline-primary">Create location</button>
|
|
||||||
<button class="btn btn-outline-secondary">Update location</button>
|
|
||||||
<button class="btn btn-outline-danger">Delete location</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="table-responsive">
|
|
||||||
<table class="table table-striped align-middle">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>User</th>
|
|
||||||
<th>Asset ID</th>
|
|
||||||
<th>Asset Name</th>
|
|
||||||
<th>Location</th>
|
|
||||||
<th>Action</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
@{
|
|
||||||
foreach (AssetsTableViewModel assetsTableViewModel in Model.AssetsTableViewModels)
|
|
||||||
{
|
|
||||||
<tr>
|
|
||||||
<td>@assetsTableViewModel.UserUID</td>
|
|
||||||
<td>@assetsTableViewModel.AssetCn</td>
|
|
||||||
<td>@assetsTableViewModel.AssetName</td>
|
|
||||||
<td>@assetsTableViewModel.LocationName</td>
|
|
||||||
<td>
|
|
||||||
<div class="d-flex gap-2">
|
|
||||||
<button class="btn btn-sm btn-primary">Update</button>
|
|
||||||
<button class="btn btn-sm btn-danger btn-delete"
|
|
||||||
data-asset-id="@assetsTableViewModel.AssetCn"
|
|
||||||
data-bs-toggle="modal"
|
|
||||||
data-bs-target="#deleteModal">
|
|
||||||
🗑️ Delete
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Asset Delete Confirmation Modal -->
|
|
||||||
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
|
|
||||||
<div class="modal-dialog modal-dialog-centered">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header bg-danger text-white">
|
|
||||||
<h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
|
|
||||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<p>Are you sure you want to delete the asset <strong id="assetName"></strong> (ID: <span id="assetId"></span>)?</p>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
||||||
<form id="deleteForm" method="post" action="">
|
|
||||||
<button type="submit" class="btn btn-danger">Yes, Delete</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
const deleteModal = document.getElementById('deleteModal');
|
|
||||||
let currentButton = null; // The delete button that opened the modal
|
|
||||||
|
|
||||||
deleteModal.addEventListener('show.bs.modal', event => {
|
|
||||||
currentButton = event.relatedTarget; // Button that triggered the modal
|
|
||||||
const assetId = currentButton.getAttribute('data-asset-id');
|
|
||||||
const assetName = currentButton.getAttribute('data-asset-name');
|
|
||||||
|
|
||||||
deleteModal.querySelector('#assetId').textContent = assetId;
|
|
||||||
deleteModal.querySelector('#assetName').textContent = assetName;
|
|
||||||
|
|
||||||
// Store the delete URL for later use
|
|
||||||
deleteModal.querySelector('#deleteForm').dataset.url = `/Assets/Delete?cn=${assetId}`;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Handle submit of deleteForm via fetch()
|
|
||||||
const deleteForm = document.getElementById('deleteForm');
|
|
||||||
deleteForm.addEventListener('submit', async e => {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
const url = deleteForm.dataset.url;
|
|
||||||
const assetId = deleteModal.querySelector('#assetId').textContent;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(url, {
|
|
||||||
method: 'GET',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Accept': 'application/json'
|
|
||||||
}//,
|
|
||||||
//body: JSON.stringify({ id: assetId }) // Use this for Post requests with [FromBody] parameters like in /Groups/Update
|
|
||||||
});
|
|
||||||
|
|
||||||
const result = await response.json();
|
|
||||||
|
|
||||||
if (result.success) {
|
|
||||||
// Close the modal
|
|
||||||
const modal = bootstrap.Modal.getInstance(deleteModal);
|
|
||||||
modal.hide();
|
|
||||||
|
|
||||||
// Remove the row from the table
|
|
||||||
const row = currentButton.closest('tr');
|
|
||||||
row.classList.add('table-danger');
|
|
||||||
setTimeout(() => row.remove(), 300);
|
|
||||||
|
|
||||||
showToast('Asset deleted successfully', 'success');
|
|
||||||
} else {
|
|
||||||
showToast(`❌ ${result.reason}: ${result.exception || 'Unknown error'}`, 'danger');
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error);
|
|
||||||
showToast('Error contacting server', 'danger');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Simple toast helper
|
|
||||||
function showToast(message, type) {
|
|
||||||
const toastContainer = document.getElementById('toastContainer') || createToastContainer();
|
|
||||||
const toast = document.createElement('div');
|
|
||||||
toast.className = `toast align-items-center text-white bg-${type} border-0`;
|
|
||||||
toast.role = 'alert';
|
|
||||||
toast.innerHTML = `
|
|
||||||
<div class="d-flex">
|
|
||||||
<div class="toast-body">${message}</div>
|
|
||||||
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
toastContainer.appendChild(toast);
|
|
||||||
const bsToast = new bootstrap.Toast(toast, { delay: 3000 });
|
|
||||||
bsToast.show();
|
|
||||||
toast.addEventListener('hidden.bs.toast', () => toast.remove());
|
|
||||||
}
|
|
||||||
|
|
||||||
function createToastContainer() {
|
|
||||||
const container = document.createElement('div');
|
|
||||||
container.id = 'toastContainer';
|
|
||||||
container.className = 'toast-container position-fixed bottom-0 end-0 p-3';
|
|
||||||
document.body.appendChild(container);
|
|
||||||
return container;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@* <script>
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
alert("DEBUG@1");
|
|
||||||
const deleteModal = document.getElementById('deleteModal');
|
|
||||||
deleteModal.addEventListener('show.bs.modal', event => {
|
|
||||||
alert("DEBUG@2");
|
|
||||||
const button = event.relatedTarget; // Button that triggered the modal
|
|
||||||
const assetId = button.getAttribute('data-asset-id');
|
|
||||||
const assetName = button.getAttribute('data-asset-name');
|
|
||||||
|
|
||||||
// Update modal content
|
|
||||||
deleteModal.querySelector('#assetId').textContent = assetId;
|
|
||||||
deleteModal.querySelector('#assetName').textContent = assetName;
|
|
||||||
|
|
||||||
// Set the form action dynamically
|
|
||||||
const form = deleteModal.querySelector('#deleteForm');
|
|
||||||
form.action = `/Assets/Delete/${assetId}`; // <-- adjust controller/action as needed
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script> *@
|
|
||||||
|
|
||||||
<!--
|
|
||||||
|
|
||||||
In case someone wants to reread this:
|
|
||||||
|
|
||||||
<div class="text-center">
|
|
||||||
<h1 class="display-4">Crashcourse zu "MVC"</h1>
|
|
||||||
<p>Die HTML, die grad gerendert wird, liegt in /Views/Home/ - dort sollte auch das Login später rein (bspw. als Login.cshtml)</p>
|
|
||||||
<p>Die Web-App folgt der MVC Struktur. D.h. man hat ein Model, ein View und einen Controller. (Wobei dieses View hier hat kein Model. Ist also mehr oder weniger optional.)</p>
|
|
||||||
<h2>McDonalds Vergleich:</h2>
|
|
||||||
<p>Der Controller ist der Kassierer; der nimmt die Informationen entgegen, verarbeitet diese und setzt eine Bestellnotiz zusammen.</p>
|
|
||||||
<p>Das Model ist die Bestellnotiz, die zur Küche weitergegeben wird mit den Informationen, wie es zubereitet werden muss.</p>
|
|
||||||
<p>Der View ist der Angestellte, der die Burger zusammensetzt; er kocht nichts und macht nichts groß kompliziertes, sondern tut nur die Teile in den Burger und gibt das Ergebnis zum Kassierer (d.h. Controller).</p>
|
|
||||||
<h2>Normale Erklärung:</h2>
|
|
||||||
<p>Ein Controller ist zwingend erforderlich und stellt den Endpoint unter einer Route bereit (d.h. das, was man im Browser eingibt, bspw. "/Home/Index")</p>
|
|
||||||
<p>Im Controller von diesem View ("/Controllers/HomeControllers.cs") findet man ein simples "return View();", was dafür sorgt, dass einfach diese .cshtml returned wird.</p>
|
|
||||||
<p>("Warum diese .cshtml?" - Bestimmt er selber anhand der Controller Route. Die Controller Route setzt er zusammen aus dem Namen der Klasse (wenn oberhalb der Klasse "[Route("[controller]")]" steht) und dem, was man vor eine Methode schreibt, bspw. "[HttpGet("Index")]" -> "/Home/Index" und "[HttpGet("/")]" -> "/".)</p>
|
|
||||||
<p>Wenn man Informationen vom Controller an das View übergeben will, tut man das mit einem Model; bspw. "return View(new AssetViewModel { cn = assetName, id = assetId });" </p>
|
|
||||||
<p>Ein Model ist ganz einfach eine Klasse, wie man sie kennt.</p>
|
|
||||||
<p>Logik kommt in den Controller und das HTML kommt in das View (... in der Praxis kommt ins View öfters mal auch bissl mehr Logik rein. Lässt sich nicht verhindern.)</p>
|
|
||||||
</div>
|
|
||||||
-->
|
|
||||||
|
|||||||
22
src/Views/Home/Inventory.cshtml
Normal file
22
src/Views/Home/Inventory.cshtml
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
@using Microsoft.AspNetCore.Mvc.Localization
|
||||||
|
@using Berufsschule_HAM.Models
|
||||||
|
@model HomeIndexViewModel
|
||||||
|
@inject IViewLocalizer T
|
||||||
|
@{
|
||||||
|
ViewData["Title"] = T["Inventory"];
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container py-4">
|
||||||
|
<h2 class="mb-3">@T["Inventory"]</h2>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="mb-4 d-flex flex-wrap gap-2">
|
||||||
|
<button class="btn btn-outline-primary">Dummy button</button>
|
||||||
|
<button class="btn btn-outline-secondary">Dummy button</button>
|
||||||
|
<button class="btn btn-outline-danger">Dummy button</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
163
src/Views/Home/Locations.cshtml
Normal file
163
src/Views/Home/Locations.cshtml
Normal file
@@ -0,0 +1,163 @@
|
|||||||
|
@using Microsoft.AspNetCore.Mvc.Localization
|
||||||
|
@using Berufsschule_HAM.Models
|
||||||
|
@model HomeIndexViewModel
|
||||||
|
@inject IViewLocalizer T
|
||||||
|
@{
|
||||||
|
ViewData["Title"] = T["Locations"];
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container py-4">
|
||||||
|
<h2 class="mb-3">@T["Locations"]</h2>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="mb-4 d-flex flex-wrap gap-2">
|
||||||
|
<button class="btn btn-outline-primary">Create location</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table table-striped align-middle">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>User</th>
|
||||||
|
<th>Asset ID</th>
|
||||||
|
<th>Asset Name</th>
|
||||||
|
<th>Location</th>
|
||||||
|
<th>Action</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
@* @{
|
||||||
|
foreach (AssetsTableViewModel assetsTableViewModel in Model.AssetsTableViewModels)
|
||||||
|
{
|
||||||
|
<tr>
|
||||||
|
<td>@assetsTableViewModel.UserUID</td>
|
||||||
|
<td>@assetsTableViewModel.AssetCn</td>
|
||||||
|
<td>@assetsTableViewModel.AssetName</td>
|
||||||
|
<td>@assetsTableViewModel.LocationName</td>
|
||||||
|
<td>
|
||||||
|
<div class="d-flex gap-2">
|
||||||
|
<button class="btn btn-sm btn-primary">Update</button>
|
||||||
|
<button class="btn btn-sm btn-danger btn-delete"
|
||||||
|
data-asset-id="@assetsTableViewModel.AssetCn"
|
||||||
|
data-bs-toggle="modal"
|
||||||
|
data-bs-target="#deleteModal">
|
||||||
|
🗑️ Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
}
|
||||||
|
} *@
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Asset Delete Confirmation Modal -->
|
||||||
|
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header bg-danger text-white">
|
||||||
|
<h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
|
||||||
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<p>Are you sure you want to delete the asset <strong id="assetName"></strong> (ID: <span id="assetId"></span>)?</p>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||||
|
<form id="deleteForm" method="post" action="">
|
||||||
|
<button type="submit" class="btn btn-danger">Yes, Delete</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
@* <script>
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const deleteModal = document.getElementById('deleteModal');
|
||||||
|
let currentButton = null; // The delete button that opened the modal
|
||||||
|
|
||||||
|
deleteModal.addEventListener('show.bs.modal', event => {
|
||||||
|
currentButton = event.relatedTarget; // Button that triggered the modal
|
||||||
|
const assetId = currentButton.getAttribute('data-asset-id');
|
||||||
|
const assetName = currentButton.getAttribute('data-asset-name');
|
||||||
|
|
||||||
|
deleteModal.querySelector('#assetId').textContent = assetId;
|
||||||
|
deleteModal.querySelector('#assetName').textContent = assetName;
|
||||||
|
|
||||||
|
// Store the delete URL for later use
|
||||||
|
deleteModal.querySelector('#deleteForm').dataset.url = `/Assets/Delete?cn=${assetId}`;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle submit of deleteForm via fetch()
|
||||||
|
const deleteForm = document.getElementById('deleteForm');
|
||||||
|
deleteForm.addEventListener('submit', async e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const url = deleteForm.dataset.url;
|
||||||
|
const assetId = deleteModal.querySelector('#assetId').textContent;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(url, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Accept': 'application/json'
|
||||||
|
}//,
|
||||||
|
//body: JSON.stringify({ id: assetId }) // Use this for Post requests with [FromBody] parameters like in /Groups/Update
|
||||||
|
});
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
// Close the modal
|
||||||
|
const modal = bootstrap.Modal.getInstance(deleteModal);
|
||||||
|
modal.hide();
|
||||||
|
|
||||||
|
// Remove the row from the table
|
||||||
|
const row = currentButton.closest('tr');
|
||||||
|
row.classList.add('table-danger');
|
||||||
|
setTimeout(() => row.remove(), 300);
|
||||||
|
|
||||||
|
showToast('Asset deleted successfully', 'success');
|
||||||
|
} else {
|
||||||
|
showToast(`❌ ${result.reason}: ${result.exception || 'Unknown error'}`, 'danger');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
showToast('Error contacting server', 'danger');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Simple toast helper
|
||||||
|
function showToast(message, type) {
|
||||||
|
const toastContainer = document.getElementById('toastContainer') || createToastContainer();
|
||||||
|
const toast = document.createElement('div');
|
||||||
|
toast.className = `toast align-items-center text-white bg-${type} border-0`;
|
||||||
|
toast.role = 'alert';
|
||||||
|
toast.innerHTML = `
|
||||||
|
<div class="d-flex">
|
||||||
|
<div class="toast-body">${message}</div>
|
||||||
|
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
toastContainer.appendChild(toast);
|
||||||
|
const bsToast = new bootstrap.Toast(toast, { delay: 3000 });
|
||||||
|
bsToast.show();
|
||||||
|
toast.addEventListener('hidden.bs.toast', () => toast.remove());
|
||||||
|
}
|
||||||
|
|
||||||
|
function createToastContainer() {
|
||||||
|
const container = document.createElement('div');
|
||||||
|
container.id = 'toastContainer';
|
||||||
|
container.className = 'toast-container position-fixed bottom-0 end-0 p-3';
|
||||||
|
document.body.appendChild(container);
|
||||||
|
return container;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script> *@
|
||||||
163
src/Views/Home/Users.cshtml
Normal file
163
src/Views/Home/Users.cshtml
Normal file
@@ -0,0 +1,163 @@
|
|||||||
|
@using Microsoft.AspNetCore.Mvc.Localization
|
||||||
|
@using Berufsschule_HAM.Models
|
||||||
|
@model HomeIndexViewModel
|
||||||
|
@inject IViewLocalizer T
|
||||||
|
@{
|
||||||
|
ViewData["Title"] = T["Users"];
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container py-4">
|
||||||
|
<h2 class="mb-3">@T["Users"]</h2>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="mb-4 d-flex flex-wrap gap-2">
|
||||||
|
<button class="btn btn-outline-primary">Create location</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table table-striped align-middle">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>User</th>
|
||||||
|
<th>Asset ID</th>
|
||||||
|
<th>Asset Name</th>
|
||||||
|
<th>Location</th>
|
||||||
|
<th>Action</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
@* @{
|
||||||
|
foreach (AssetsTableViewModel assetsTableViewModel in Model.AssetsTableViewModels)
|
||||||
|
{
|
||||||
|
<tr>
|
||||||
|
<td>@assetsTableViewModel.UserUID</td>
|
||||||
|
<td>@assetsTableViewModel.AssetCn</td>
|
||||||
|
<td>@assetsTableViewModel.AssetName</td>
|
||||||
|
<td>@assetsTableViewModel.LocationName</td>
|
||||||
|
<td>
|
||||||
|
<div class="d-flex gap-2">
|
||||||
|
<button class="btn btn-sm btn-primary">Update</button>
|
||||||
|
<button class="btn btn-sm btn-danger btn-delete"
|
||||||
|
data-asset-id="@assetsTableViewModel.AssetCn"
|
||||||
|
data-bs-toggle="modal"
|
||||||
|
data-bs-target="#deleteModal">
|
||||||
|
🗑️ Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
}
|
||||||
|
} *@
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Asset Delete Confirmation Modal -->
|
||||||
|
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header bg-danger text-white">
|
||||||
|
<h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
|
||||||
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<p>Are you sure you want to delete the asset <strong id="assetName"></strong> (ID: <span id="assetId"></span>)?</p>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||||
|
<form id="deleteForm" method="post" action="">
|
||||||
|
<button type="submit" class="btn btn-danger">Yes, Delete</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
@* <script>
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const deleteModal = document.getElementById('deleteModal');
|
||||||
|
let currentButton = null; // The delete button that opened the modal
|
||||||
|
|
||||||
|
deleteModal.addEventListener('show.bs.modal', event => {
|
||||||
|
currentButton = event.relatedTarget; // Button that triggered the modal
|
||||||
|
const assetId = currentButton.getAttribute('data-asset-id');
|
||||||
|
const assetName = currentButton.getAttribute('data-asset-name');
|
||||||
|
|
||||||
|
deleteModal.querySelector('#assetId').textContent = assetId;
|
||||||
|
deleteModal.querySelector('#assetName').textContent = assetName;
|
||||||
|
|
||||||
|
// Store the delete URL for later use
|
||||||
|
deleteModal.querySelector('#deleteForm').dataset.url = `/Assets/Delete?cn=${assetId}`;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle submit of deleteForm via fetch()
|
||||||
|
const deleteForm = document.getElementById('deleteForm');
|
||||||
|
deleteForm.addEventListener('submit', async e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const url = deleteForm.dataset.url;
|
||||||
|
const assetId = deleteModal.querySelector('#assetId').textContent;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(url, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Accept': 'application/json'
|
||||||
|
}//,
|
||||||
|
//body: JSON.stringify({ id: assetId }) // Use this for Post requests with [FromBody] parameters like in /Groups/Update
|
||||||
|
});
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
// Close the modal
|
||||||
|
const modal = bootstrap.Modal.getInstance(deleteModal);
|
||||||
|
modal.hide();
|
||||||
|
|
||||||
|
// Remove the row from the table
|
||||||
|
const row = currentButton.closest('tr');
|
||||||
|
row.classList.add('table-danger');
|
||||||
|
setTimeout(() => row.remove(), 300);
|
||||||
|
|
||||||
|
showToast('Asset deleted successfully', 'success');
|
||||||
|
} else {
|
||||||
|
showToast(`❌ ${result.reason}: ${result.exception || 'Unknown error'}`, 'danger');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
showToast('Error contacting server', 'danger');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Simple toast helper
|
||||||
|
function showToast(message, type) {
|
||||||
|
const toastContainer = document.getElementById('toastContainer') || createToastContainer();
|
||||||
|
const toast = document.createElement('div');
|
||||||
|
toast.className = `toast align-items-center text-white bg-${type} border-0`;
|
||||||
|
toast.role = 'alert';
|
||||||
|
toast.innerHTML = `
|
||||||
|
<div class="d-flex">
|
||||||
|
<div class="toast-body">${message}</div>
|
||||||
|
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
toastContainer.appendChild(toast);
|
||||||
|
const bsToast = new bootstrap.Toast(toast, { delay: 3000 });
|
||||||
|
bsToast.show();
|
||||||
|
toast.addEventListener('hidden.bs.toast', () => toast.remove());
|
||||||
|
}
|
||||||
|
|
||||||
|
function createToastContainer() {
|
||||||
|
const container = document.createElement('div');
|
||||||
|
container.id = 'toastContainer';
|
||||||
|
container.className = 'toast-container position-fixed bottom-0 end-0 p-3';
|
||||||
|
document.body.appendChild(container);
|
||||||
|
return container;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script> *@
|
||||||
@@ -26,6 +26,21 @@
|
|||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link text" asp-area="" asp-controller="Home" asp-action="Index">@T["Home"]</a>
|
<a class="nav-link text" asp-area="" asp-controller="Home" asp-action="Index">@T["Home"]</a>
|
||||||
</li>
|
</li>
|
||||||
|
@if (User.Identity.IsAuthenticated)
|
||||||
|
{
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link text" asp-area="" asp-controller="Home" asp-action="Inventory">@T["Inventory"]</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link text" asp-area="" asp-controller="Home" asp-action="Assets">@T["Assets"]</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link text" asp-area="" asp-controller="Home" asp-action="Locations">@T["Locations"]</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link text" asp-area="" asp-controller="Home" asp-action="Users">@T["Users"]</a>
|
||||||
|
</li>
|
||||||
|
}
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
@if (User.Identity.IsAuthenticated)
|
@if (User.Identity.IsAuthenticated)
|
||||||
{
|
{
|
||||||
|
|||||||
Reference in New Issue
Block a user