Fixed locations dropdown in Assets view

src/Views/Home/Assets.cshtml

@@ -5,6 +5,8 @@
 @{
     ViewData["Title"] = T["Assets"];
 }
+<link href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.bootstrap5.min.css" rel="preload" as="style" />
+<script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js" defer></script>
 
 <partial name="_BatchButton"/>
 
@@ -768,5 +770,33 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 </script>
+<!-- TomSelect locations dropdowns -->
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+    const createSelect = document.getElementById('createLocationSelect');
+    const updateSelect = document.getElementById('updateLocationSelect');
+
+    async function initLocationSelect(selectElement) {
+        if (!selectElement) return;
+        await loadLocationsIntoSelect(selectElement);
+        new TomSelect(selectElement, {
+            plugins: ['clear_button'],
+            create: false,
+            sortField: { field: 'text', direction: 'asc' },
+            placeholder: '@T["Select location"]',
+            maxOptions: 500, // avoid performance hit if there are many
+            render: {
+                no_results: function(data, escape) {
+                    return `<div class="no-results">@T["No locations found"]</div>`;
+                }
+            }
+        });
+    }
+
+    initLocationSelect(createSelect);
+    initLocationSelect(updateSelect);
+});
+</script>
+
 
 <partial name="_Batch"/>

src/wwwroot/css/site.css

@@ -41,3 +41,26 @@ body {
   height: 2rem;
   float: right;
 }
+
+/* Tomselect dark mode theme */
+[data-bs-theme="dark"] .ts-control,
+[data-bs-theme="dark"] .ts-dropdown {
+  color: #f8f9fa !important;
+  border-color: #444 !important;
+}
+
+[data-bs-theme="dark"] .ts-control input,
+[data-bs-theme="dark"] .ts-dropdown .option,
+[data-bs-theme="dark"] .ts-dropdown .item {
+  color: #f8f9fa !important;
+}
+
+[data-bs-theme="dark"] .ts-dropdown .option:hover,
+[data-bs-theme="dark"] .ts-dropdown .active {
+  color: #ffffff !important;
+}
+
+[data-bs-theme="dark"] .ts-control .item {
+  color: #f8f9fa !important;
+  border-color: #666 !important;
+}

src/wwwroot/js/site.js

@@ -126,7 +126,7 @@ async function loadLocationsIntoSelect(selectElement, selectedValue = null) {
         selectElement.innerHTML = `<option value="">${appTranslations.selectLocation}</option>`;
 
         locations.forEach(loc => {
-            const text = `${loc.description.Location}, Room ${loc.description.RoomNumber}, Seat ${loc.description.Seat}`;
+            const text = `${loc.location}`;
             const option = document.createElement('option');
             option.value = loc.location;
             option.textContent = text;