3324dbd91e
The map was one picture of one floor. A second floor was added, the blueprint changed size, and machines moved, so a position now records WHICH DRAWING its coordinates belong to. Buildings and levels (ADR-017). Each level owns its blueprint per theme and its own native pixel size; assets.mapx/mapy are pixels of assets.levelid, not of the site. A position whose level is unknown renders "level unknown" and is never drawn on the default level, because a marker on the wrong floor plan looks entirely correct while pointing at the wrong place. Repositioning in bulk: filter by unplaced, needs-review or level, search, place, confirm. Landmark recalibration solves the transform PER AXIS from landmark pairs and never from image dimensions - the canvas grew taller without rescaling, so a dimension-derived scale would stretch Y by 1.57 and be wrong everywhere. It defaults to a dry run, reports what would land off the drawing, snapshots before applying, and clears mapverifiedat because a transform is a guess awaiting review. Snapshots restore, including the level and the review state, and a restore snapshots first so an undo is undoable. Search: gaugelabreference was matched only for measuring tools and maintenancereference was matched nowhere at all, for any asset type, while Settings happily offers both identifiers on machines and PCs. A tag an operator is told to record has to be findable or it is a write-only field. USB devices and printed items were unreachable from search entirely - neither is an asset, so the generic asset search could not see them and no searcher existed; they now match on serial, asset tag, label, bin code and gage-lab tag, honouring isactive, with Settings toggles and result labels to match. The retired-application rule was half a rule: GET /api/knowledgebase hid articles whose topic application is retired while global search still returned them and printed the retired application as the subject. A filter is only real if every path that reaches the row applies it. Contract to 0.20.0 (additive): Asset gained levelid and mapverifiedat, Location gained levelid, and resolve_asset_position returns the levelid belonging to whichever source supplied the coordinates. The five plugins that write a map position are re-pinned. The install-list text format gained levelid as a NINTH field, appended, because the shipped Pascal installer reads fields 0-7 by index. That installer still compiles in one drawing's dimensions and bundles one blueprint, so its map is accurate for the default level only; /api/maplevels is deliberately unauthenticated so it can read both at runtime once rebuilt. Recorded in PRINTER-INSTALLER.md section 6 along with the other known gaps. Migration 7d33 converts an existing single-map site into one building and one default level carrying the old map_* settings, then assigns every placed asset and location to it. Nothing moves on screen. Old settings rows are kept so a rollback still finds them. Verified end to end on MySQL 5.6 from a production-shaped database.
241 lines
7.0 KiB
Vue
241 lines
7.0 KiB
Vue
<template>
|
|
<div class="printer-installer">
|
|
<div class="map-pane">
|
|
<div class="map-header">
|
|
<router-link to="/printers" class="back-link">← Printers</router-link>
|
|
<h1>Printer Installer</h1>
|
|
<span class="hint">Click printers on the map to select, then install.</span>
|
|
</div>
|
|
<div ref="mapContainer" class="map-canvas"></div>
|
|
</div>
|
|
|
|
<aside class="select-pane">
|
|
<h2>Selected <span class="count">{{ selectedList.length }}</span></h2>
|
|
|
|
<div v-if="!selectedList.length" class="empty">
|
|
No printers selected yet. Click a marker on the map.
|
|
</div>
|
|
<ul v-else class="selected-list">
|
|
<li v-for="p in selectedList" :key="p.printerid">
|
|
<span class="pname">{{ printerLabel(p) }}</span>
|
|
<span class="ploc" v-if="p.locationname">{{ p.locationname }}</span>
|
|
<button class="remove" title="Remove" @click="toggle(p.printerid)">×</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<button class="btn-install" :disabled="!selectedList.length" @click="downloadBatch">
|
|
Install {{ selectedList.length }} printer(s)
|
|
</button>
|
|
<button v-if="selectedList.length" class="btn-clear" @click="clearSelection">
|
|
Clear selection
|
|
</button>
|
|
|
|
<p class="note">
|
|
Downloads a .bat that installs the selected printers (universal
|
|
installer for HP/Xerox, the printer's own installer otherwise). Run it on
|
|
the target PC.
|
|
</p>
|
|
</aside>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
|
|
import L from 'leaflet'
|
|
import 'leaflet/dist/leaflet.css'
|
|
import { loadMapConfig, blueprintUrlFor, dimensionsFor, state as mapConfig } from '@/composables/mapConfig'
|
|
import { printersApi } from '@/api'
|
|
import { withBase } from '@/utils/basePath'
|
|
import { currentTheme } from '@/stores/theme'
|
|
|
|
const mapContainer = ref(null)
|
|
const printers = ref([])
|
|
const selected = ref({}) // printerid -> true
|
|
|
|
let map = null
|
|
let imageOverlay = null
|
|
let markers = {} // printerid -> circleMarker
|
|
// The level being shown. The installer map runs before anyone logs in, which is
|
|
// why /api/maplevels is public - without it there is no blueprint to draw.
|
|
let MAP_WIDTH = 0
|
|
let MAP_HEIGHT = 0
|
|
|
|
const SELECTED_COLOR = '#e53935'
|
|
const NORMAL_COLOR = '#4CAF50'
|
|
|
|
const selectedList = computed(() =>
|
|
printers.value.filter(p => selected.value[p.printerid]))
|
|
|
|
function printerLabel(p) {
|
|
return p.windowsname || p.sharename || p.name || p.machinenumber || ('#' + p.printerid)
|
|
}
|
|
|
|
function markerStyle(isSelected) {
|
|
return {
|
|
radius: isSelected ? 9 : 6,
|
|
color: '#222',
|
|
weight: 1,
|
|
fillColor: isSelected ? SELECTED_COLOR : NORMAL_COLOR,
|
|
fillOpacity: 0.95,
|
|
}
|
|
}
|
|
|
|
function toggle(printerid) {
|
|
if (selected.value[printerid]) {
|
|
delete selected.value[printerid]
|
|
} else {
|
|
selected.value[printerid] = true
|
|
}
|
|
const marker = markers[printerid]
|
|
if (marker) marker.setStyle(markerStyle(!!selected.value[printerid]))
|
|
}
|
|
|
|
function clearSelection() {
|
|
for (const id of Object.keys(selected.value)) {
|
|
if (markers[id]) markers[id].setStyle(markerStyle(false))
|
|
}
|
|
selected.value = {}
|
|
}
|
|
|
|
function downloadBatch() {
|
|
const ids = selectedList.value.map(p => p.printerid).join(',')
|
|
if (!ids) return
|
|
// install-batch is optional-auth, so a plain anchor download works (an anchor
|
|
// cannot carry the JWT bearer header). withBase keeps it under the mount.
|
|
const url = withBase('/api/printers/install-batch?printerids=' + encodeURIComponent(ids))
|
|
const link = document.createElement('a')
|
|
link.href = url
|
|
link.click()
|
|
}
|
|
|
|
function renderMarkers() {
|
|
for (const p of printers.value) {
|
|
if (p.mapx == null || p.mapy == null) continue
|
|
const leafletY = MAP_HEIGHT - p.mapy
|
|
const leafletX = p.mapx
|
|
const marker = L.circleMarker([leafletY, leafletX], markerStyle(false))
|
|
marker.bindTooltip(printerLabel(p), { direction: 'top' })
|
|
marker.on('click', () => toggle(p.printerid))
|
|
marker.addTo(map)
|
|
markers[p.printerid] = marker
|
|
}
|
|
}
|
|
|
|
watch(currentTheme, (theme) => {
|
|
if (imageOverlay) imageOverlay.setUrl(blueprintUrlFor(theme, mapConfig.currentlevelid))
|
|
})
|
|
|
|
onMounted(async () => {
|
|
await loadMapConfig()
|
|
MAP_WIDTH = dimensionsFor(mapConfig.currentlevelid).width
|
|
MAP_HEIGHT = dimensionsFor(mapConfig.currentlevelid).height
|
|
|
|
try {
|
|
const response = await printersApi.installList()
|
|
printers.value = response.data.data || []
|
|
} catch (e) {
|
|
printers.value = []
|
|
}
|
|
|
|
map = L.map(mapContainer.value, {
|
|
crs: L.CRS.Simple,
|
|
minZoom: -4,
|
|
maxZoom: 2,
|
|
attributionControl: false,
|
|
})
|
|
const bounds = [[0, 0], [MAP_HEIGHT, MAP_WIDTH]]
|
|
imageOverlay = L.imageOverlay(blueprintUrlFor(currentTheme.value, mapConfig.currentlevelid), bounds).addTo(map)
|
|
map.setView([MAP_HEIGHT / 2, MAP_WIDTH / 2], -2)
|
|
map.setMaxBounds(bounds)
|
|
renderMarkers()
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
if (map) map.remove()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.printer-installer {
|
|
display: flex;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
background: var(--bg);
|
|
}
|
|
.map-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; }
|
|
.map-header {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 1rem;
|
|
padding: 0.75rem 1rem;
|
|
border-bottom: 1px solid var(--border);
|
|
background: var(--bg-card);
|
|
}
|
|
.map-header h1 { font-size: 1.2rem; margin: 0; color: var(--text); }
|
|
.back-link { color: var(--link); text-decoration: none; font-size: 0.9rem; }
|
|
.hint { color: var(--text-light); font-size: 0.85rem; margin-left: auto; }
|
|
.map-canvas { flex: 1; background: var(--bg); }
|
|
|
|
.select-pane {
|
|
width: 320px;
|
|
flex-shrink: 0;
|
|
border-left: 1px solid var(--border);
|
|
background: var(--bg-card);
|
|
padding: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
}
|
|
.select-pane h2 { font-size: 1rem; margin: 0 0 0.75rem; color: var(--text); }
|
|
.count {
|
|
background: var(--primary);
|
|
color: #fff;
|
|
border-radius: 10px;
|
|
padding: 0.05rem 0.5rem;
|
|
font-size: 0.85rem;
|
|
margin-left: 0.25rem;
|
|
}
|
|
.empty { color: var(--text-light); font-size: 0.9rem; padding: 1rem 0; }
|
|
.selected-list { list-style: none; margin: 0 0 1rem; padding: 0; }
|
|
.selected-list li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
padding: 0.4rem 0;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.pname { color: var(--text); font-weight: 600; font-size: 0.85rem; }
|
|
.ploc { color: var(--text-light); font-size: 0.75rem; }
|
|
.remove {
|
|
margin-left: auto;
|
|
background: none;
|
|
border: none;
|
|
color: var(--danger);
|
|
font-size: 1.1rem;
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
}
|
|
.btn-install {
|
|
width: 100%;
|
|
padding: 0.6rem;
|
|
background: var(--primary);
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
.btn-install:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
.btn-clear {
|
|
width: 100%;
|
|
margin-top: 0.5rem;
|
|
padding: 0.4rem;
|
|
background: transparent;
|
|
color: var(--text-light);
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.note { color: var(--text-light); font-size: 0.75rem; margin-top: 1rem; line-height: 1.4; }
|
|
</style>
|