From fb45b3beb841b842dddaeccd3fee68cf67a51cc5 Mon Sep 17 00:00:00 2001
From: LD-Reborn <lucretia.dietz@gmx.de>
Date: Sun, 12 Oct 2025 23:08:22 +0200
Subject: [PATCH] Added detail view to /Home/Assets

---
 src/Resources/Views.Home.Assets.de.resx |   9 ++
 src/Views/Home/Assets.cshtml            | 139 +++++++++++++++++++++++-
 2 files changed, 147 insertions(+), 1 deletion(-)

diff --git a/src/Resources/Views.Home.Assets.de.resx b/src/Resources/Views.Home.Assets.de.resx
index 8cdb457..b0b7bf9 100644
--- a/src/Resources/Views.Home.Assets.de.resx
+++ b/src/Resources/Views.Home.Assets.de.resx
@@ -139,4 +139,13 @@
     <data name="Error updating asset" xml:space="preserve">
         <value>Fehler beim Anpassen des Assets</value>
     </data>
+    <data name="Asset Details" xml:space="preserve">
+        <value>Asset Details</value>
+    </data>
+    <data name="Loading..." xml:space="preserve">
+        <value>Laden...</value>
+    </data>
+    <data name="Close" xml:space="preserve">
+        <value>Schließen</value>
+    </data>
 </root>
diff --git a/src/Views/Home/Assets.cshtml b/src/Views/Home/Assets.cshtml
index 481bd6c..3a580d3 100644
--- a/src/Views/Home/Assets.cshtml
+++ b/src/Views/Home/Assets.cshtml
@@ -40,7 +40,7 @@
             @{
                 foreach (AssetsTableViewModel assetsTableViewModel in Model.AssetsTableViewModels)
                 {
-                <tr>
+                <tr class="asset-row" data-asset-id="@assetsTableViewModel.AssetCn">
                     <td>@assetsTableViewModel.UserUID</td>
                     <td>@assetsTableViewModel.AssetCn</td>
                     <td>@assetsTableViewModel.AssetName</td>
@@ -640,4 +640,141 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     });
 });
+</script>
+
+<!-- Detail view -->
+<div class="modal fade" id="viewAssetModal" tabindex="-1" aria-labelledby="viewAssetModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header bg-info text-white">
+                <h5 class="modal-title" id="viewAssetModalLabel">@T["Asset Details"]</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+
+            <div class="modal-body">
+                <div id="viewAssetContent">
+                    <p class="text-center text-muted">@T["Loading..."]</p>
+                </div>
+            </div>
+
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">@T["Close"]</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+.asset-row > td:not(:last-child) {
+    cursor: pointer;
+}
+.asset-row > td {    
+    transition: 0.1s ease;
+}
+.asset-row:hover > td {
+    background-color: #17a2b8;
+}
+</style>
+
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+    const rows = document.querySelectorAll('.asset-row');
+    const viewModal = document.getElementById('viewAssetModal');
+    const viewContent = document.getElementById('viewAssetContent');
+
+    rows.forEach(row => {
+        row.addEventListener('click', async (e) => {
+            // Avoid clicks on buttons inside the row
+            if (e.target.closest('button')) return;
+
+            const assetId = row.getAttribute('data-asset-id');
+            viewContent.innerHTML = '<p class="text-center text-muted">@T["Loading..."]</p>';
+
+            const modal = new bootstrap.Modal(viewModal);
+            modal.show();
+
+            try {
+                const response = await fetch(`/Assets/Get?cn=${assetId}`);
+                const json = await response.json();
+                const asset = json.assetsModel;
+
+                if (!asset) {
+                    viewContent.innerHTML = `<p class="text-danger text-center">@T["Asset not found."]</p>`;
+                    return;
+                }
+
+                const html = `
+                    <div class="row g-3">
+                        <div class="col-md-6">
+                            <label class="form-label">@T["Name"]</label>
+                            <input type="text" class="form-control" name="Name" value="${asset.Name || ''}" disabled />
+                        </div>
+                        <div class="col-md-6">
+                            <label class="form-label">@T["Location"]</label>
+                            <input type="text" class="form-control" name="Location" value="${asset.Location || ''}" disabled />
+                        </div>
+                        <div class="col-md-6">
+                            <label class="form-label">@T["Owner"]</label>
+                            <input type="text" class="form-control" name="Owner" value="${asset.Owner || ''}" disabled />
+                        </div>
+                        <div class="col-md-6">
+                            <label class="form-label">@T["Serial Number"]</label>
+                            <input type="text" class="form-control" name="SerialNumber" value="${asset.SerialNumber || ''}" disabled />
+                        </div>
+
+                    <hr class="my-3" />
+
+                    <h6 class="fw-bold">@T["Description"]</h6>
+                    <div class="col-md-6">
+                        <label class="form-label">@T["Type"]</label>
+                        <input type="text" class="form-control" name="Description.Type" value="${asset.Description?.Type || ''}" disabled />
+                    </div>
+                    <div class="col-md-6">
+                        <label class="form-label">@T["Make"]</label>
+                        <input type="text" class="form-control" name="Description.Make" value="${asset.Description?.Make || ''}" disabled />
+                    </div>
+                    <div class="col-md-6">
+                        <label class="form-label">@T["Model"]</label>
+                        <input type="text" class="form-control" name="Description.Model" value="${asset.Description?.Model || ''}" disabled />
+                    </div>
+
+                    ${asset.Description?.Attributes ? `
+                        <h6 class="fw-bold">@T["Attributes"]</h6>
+                            ${Object.entries(asset.Description.Attributes)
+                                .map(([k,v]) => `
+                                <div class="d-flex gap-2 align-items-center attribute-row">
+                                    <input type="text" class="form-control w-50" placeholder="@T["Attribute name"]" data-attr-name disabled value="${k}" />:
+                                    <input type="text" class="form-control" placeholder="@T["Attribute value"]" data-attr-value disabled value="${v}" />
+                                </div>`)
+                                .join('')}
+                        ` : ''}
+                                
+                    ${asset.Description?.Purchase ? `
+                        <h6 class="fw-bold">@T["Purchase Information"]</h6>
+                            <div class="col-md-6">
+                                <label class="form-label">@T["Purchase Date"]</label>
+                                <input type="date" class="form-control" name="Description.Purchase.PurchaseDate" value="${asset.Description.Purchase.PurchaseDate || ''}" disabled />
+                            </div>
+                            <div class="col-md-6">
+                                <label class="form-label">@T["Purchase Value"]</label>
+                                <input type="text" class="form-control" name="Description.Purchase.PurchaseValue" value="${asset.Description.Purchase.PurchaseValue || ''}" disabled />
+                            </div>
+                            <div class="col-md-6">
+                                <label class="form-label">@T["Purchased At"]</label>
+                                <input type="text" class="form-control" name="Description.Purchase.PurchaseAt" value="${asset.Description.Purchase.PurchaseAt || ''}" disabled />
+                            </div>
+                            <div class="col-md-6">
+                                <label class="form-label">@T["Purchased By"]</label>
+                                <input type="text" class="form-control" name="Description.Purchase.PurchaseBy" value="${asset.Description.Purchase.PurchaseBy || ''}" disabled />
+                            </div>` : ''}
+                </div>`;
+
+                viewContent.innerHTML = html;
+            } catch (err) {
+                console.error(err);
+                viewContent.innerHTML = `<p class="text-danger text-center">@T["Error loading asset details"]</p>`;
+            }
+        });
+    });
+});
 </script>
\ No newline at end of file