Catalog seeding, blank-unique fix, slides rotation, console repair

plugins/network/frontend/views/NetworkDeviceForm.vue

@@ -205,30 +205,41 @@
         <!-- Map Position (optional) -->
         <fieldset>
           <legend>Map Position (Optional)</legend>
-          <div class="form-row">
-            <div class="form-group">
-              <label for="mapx">Map X Position</label>
-              <input
-                id="mapx"
-                v-model.number="form.mapx"
-                type="number"
-                class="form-control"
-                min="0"
-              />
-            </div>
-            <div class="form-group">
-              <label for="mapy">Map Y Position</label>
-              <input
-                id="mapy"
-                v-model.number="form.mapy"
-                type="number"
-                class="form-control"
-                min="0"
-              />
+          <!--
+            Picked on the floor plan, the same way machines, PCs and printers do
+            it. This form used to ask for the X and Y as raw numbers, which meant
+            reading coordinates off another screen and typing them in.
+          -->
+          <div class="form-group">
+            <label>Map Location</label>
+            <div class="map-location-control">
+              <div v-if="form.mapx !== null && form.mapy !== null" class="current-position">
+                Position: {{ form.mapx }}, {{ form.mapy }}
+                <button type="button" class="btn btn-sm btn-secondary" @click="clearMapPosition">Clear</button>
+              </div>
+              <button type="button" class="btn btn-secondary" @click="showMapPicker = true">
+                Set Location on Map
+              </button>
             </div>
           </div>
         </fieldset>
 
+        <!-- Map Picker Modal -->
+        <Modal v-model="showMapPicker" title="Select Location on Map" size="fullscreen">
+          <div class="map-modal-content">
+            <ShopFloorMap
+              :pickerMode="true"
+              :initialPosition="form.mapx !== null ? { left: form.mapx, top: form.mapy } : null"
+              :theme="currentTheme"
+              @positionPicked="handlePositionPicked"
+            />
+          </div>
+          <template #footer>
+            <button class="btn btn-secondary" @click="showMapPicker = false">Cancel</button>
+            <button class="btn btn-primary" @click="confirmMapPosition">Confirm Location</button>
+          </template>
+        </Modal>
+
         <!-- Notes -->
         <fieldset>
           <legend>Notes</legend>
@@ -274,11 +285,16 @@ import {
   businessunitsApi
 } from '@/api'
 import CustomFieldsInputs from '@/components/CustomFieldsInputs.vue'
+import ShopFloorMap from '@/components/ShopFloorMap.vue'
+import Modal from '@/components/Modal.vue'
+import { currentTheme } from '@/stores/theme'
 import { useIdentifierFlags } from '@/composables/identifierSettings'
 import { apiError } from '@/utils/apiError'
 
 const { isEnabled } = useIdentifierFlags()
 
+const showMapPicker = ref(false)
+const tempMapPosition = ref(null)
 const route = useRoute()
 const router = useRouter()
 
@@ -483,6 +499,24 @@ function cancel() {
     router.push('/network')
   }
 }
+function handlePositionPicked(position) {
+  tempMapPosition.value = position
+}
+
+function confirmMapPosition() {
+  if (tempMapPosition.value) {
+    form.value.mapx = tempMapPosition.value.left
+    form.value.mapy = tempMapPosition.value.top
+  }
+  showMapPicker.value = false
+}
+
+function clearMapPosition() {
+  form.value.mapx = null
+  form.value.mapy = null
+  tempMapPosition.value = null
+}
+
 </script>
 
 <style scoped>