Buildings and levels for the floor map, and make every identifier searchable

plugins/computers/frontend/views/PCForm.vue

@@ -261,9 +261,11 @@
           <div class="map-location-control">
             <div v-if="form.mapx !== null && form.mapy !== null" class="current-position">
               Position: {{ form.mapx }}, {{ form.mapy }}
+                <span v-if="form.levelid" class="position-level">on {{ levelName(form.levelid) }}</span>
+                <span v-else class="position-level position-level-missing">level not set</span>
               <button type="button" class="btn btn-sm btn-secondary" @click="clearMapPosition">Clear</button>
             </div>
-            <button type="button" class="btn btn-secondary" @click="showMapPicker = true">
+            <button type="button" class="btn btn-secondary" @click="openMapPicker">
               Set Location on Map
             </button>
           </div>
@@ -272,8 +274,19 @@
         <!-- Map Picker Modal -->
         <Modal v-model="showMapPicker" title="Select Location on Map" size="fullscreen">
           <div class="map-modal-content">
+            <div v-if="levelOptions().length > 1" class="map-level-picker">
+              <label>Level</label>
+              <select v-model.number="pickerLevelId" class="form-control">
+                <option v-for="option in levelOptions()" :key="option.levelid"
+                        :value="option.levelid">{{ option.label }}</option>
+              </select>
+              <span class="input-hint">
+                The position is pixels on this drawing, so pick the level first.
+              </span>
+            </div>
             <ShopFloorMap
               :pickerMode="true"
+              :levelid="pickerLevelId"
               :initialPosition="form.mapx !== null ? { left: form.mapx, top: form.mapy } : null"
               :theme="currentTheme"
               @positionPicked="handlePositionPicked"
@@ -306,6 +319,8 @@ import { ref, onMounted, computed, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { computersApi, assetsApi, vendorsApi, locationsApi, modelsApi, operatingsystemsApi } from '@/api'
 import ShopFloorMap from '@/components/ShopFloorMap.vue'
+import { loadMapConfig, levelOptions, levelName, state as mapConfig }
+  from '@/composables/mapConfig'
 import Modal from '@/components/Modal.vue'
 import CustomFieldsInputs from '@/components/CustomFieldsInputs.vue'
 import { currentTheme } from '@/stores/theme'
@@ -336,6 +351,10 @@ const loading = ref(true)
 const saving = ref(false)
 const error = ref('')
 const showMapPicker = ref(false)
+// Which drawing the picker shows, and therefore which level the coordinates it
+// returns belong to (ADR-017). Opens on the position's existing level so editing
+// a marker does not silently move it to the default one.
+const pickerLevelId = ref(null)
 const tempMapPosition = ref(null)
 
 const form = ref({
@@ -356,6 +375,7 @@ const form = ref({
   notes: '',
   mapx: null,
   mapy: null,
+  levelid: null,
   ipaddress: ''
 })
 
@@ -459,6 +479,7 @@ onMounted(async () => {
         notes: pc.notes || '',
         mapx: pc.mapx ?? null,
         mapy: pc.mapy ?? null,
+        levelid: pc.levelid ?? null,
         ipaddress: primaryComm?.ipaddress || ''
       }
     }
@@ -474,10 +495,21 @@ function handlePositionPicked(position) {
   tempMapPosition.value = position
 }
 
+function openMapPicker() {
+  loadMapConfig().then(() => {
+    pickerLevelId.value = form.value.levelid || mapConfig.defaultlevelid
+    showMapPicker.value = true
+  })
+}
+
 function confirmMapPosition() {
   if (tempMapPosition.value) {
     form.value.mapx = tempMapPosition.value.left
     form.value.mapy = tempMapPosition.value.top
+    // Never one without the other: coordinates saved with no level render as
+    // "level unknown", and coordinates saved against the wrong level render
+    // convincingly in the wrong place.
+    form.value.levelid = pickerLevelId.value
   }
   showMapPicker.value = false
 }
@@ -485,6 +517,7 @@ function confirmMapPosition() {
 function clearMapPosition() {
   form.value.mapx = null
   form.value.mapy = null
+  form.value.levelid = null
   tempMapPosition.value = null
 }