ge-aerospace/shopdb-flask
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

warranty machine preview uses the shared LocationMapTooltip

Browse Source
This commit is contained in:
Cameron Proudlock
2026-08-10 10:06:54 -04:00
parent aa856ba98b
commit 41a4a96f1e
1 changed files with 32 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
plugins/warranty/frontend/components/MachineMapChip.vue
View File

@@ -1,115 +1,53 @@
<template>
<span
v-if="machine"
class="mmc"
ref="hostEl"
@mouseenter="show"
@mouseleave="open = false"
<!-- Placed machine: reuse the same hover map the machine detail page uses, so
the zoom, scroll-wheel behaviour and teleport-out-of-clipping-containers
are identical everywhere instead of reimplemented here. -->
<LocationMapTooltip
v-if="machine && hasPosition"
:left="machine.mapx"
:top="machine.mapy"
:machineName="machine.machinenumber || machine.name || ''"
>
<!-- Deliberately not a link. /machines/:id is keyed by machineid, not
assetid, and resolving one to the other here would make the warranty
plugin import the machines plugin (ADR-014). The number plus the map
is what someone needs to walk to the bay. -->
<span class="mmc-chip">{{ machine.machinenumber || machine.name || '-' }}</span>
<!-- Hover preview: where to walk to. Rendered only while hovered so a
table of 200 rows does not build 200 blueprints. -->
<span v-if="open && hasPosition" ref="popEl" class="mmc-pop" :style="popStyle">
<span class="mmc-pop-title">{{ machine.name || machine.machinenumber }}</span>
<span v-if="machine.locationname" class="mmc-pop-loc">{{ machine.locationname }}</span>
<span class="mmc-map">
<img :src="blueprint" alt="" class="mmc-map-img" />
<span class="mmc-marker" :style="markerStyle"></span>
</span>
<span class="mmc-chip" :title="hoverTitle">
{{ machine.machinenumber || machine.name || '-' }}
</span>
</LocationMapTooltip>
<!-- A machine with a number but no map position still deserves the chip;
say why there is no picture rather than showing an empty box. -->
<span v-else-if="open" ref="popEl" class="mmc-pop mmc-pop-plain" :style="popStyle">
<span class="mmc-pop-title">{{ machine.name || machine.machinenumber }}</span>
<span class="mmc-pop-loc">{{ machine.locationname || 'Not placed on the floor map' }}</span>
</span>
<!-- Known machine, never placed on the floor map. Still worth its number:
against real data 17 of 142 linked machines have no position, and
dropping them would silently lose the column for those rows. -->
<span v-else-if="machine" class="mmc-chip" :title="hoverTitle">
{{ machine.machinenumber || machine.name || '-' }}
</span>
<span v-else class="muted">-</span>
</template>
<script setup>
import { ref, computed, onMounted, nextTick } from 'vue'
import { state as mapState, loadMapConfig, blueprintUrlFor } from '@/composables/mapConfig'
import { computed } from 'vue'
import LocationMapTooltip from '@/components/LocationMapTooltip.vue'
const props = defineProps({
machine: { type: Object, default: null }
})
const open = ref(false)
const hostEl = ref(null)
const popEl = ref(null)
// Starts hidden: the first tick renders before show() can measure, and an
// unpositioned fixed element would flash in the corner of the screen.
const popStyle = ref({ visibility: 'hidden' })
onMounted(() => { loadMapConfig() })
// position: fixed, placed from the chip's rect. The table sits in a
// .table-container with overflow-x: auto, and ANY non-visible overflow clips
// absolutely-positioned children - which cut the last row's preview off behind
// the pagination. Fixed escapes that clip entirely.
async function show() {
popStyle.value = { visibility: 'hidden' }
open.value = true
await nextTick()
const host = hostEl.value
if (!host) return
const rect = host.getBoundingClientRect()
const gap = 6
// Measure the real popover rather than guessing: its height depends on the
// blueprint's aspect ratio, which differs per site.
const popHeight = popEl.value ? popEl.value.offsetHeight : 260
const popWidth = popEl.value ? popEl.value.offsetWidth : 288
// Flip above when there is not room below, so the bottom row stays readable.
const roomBelow = window.innerHeight - rect.bottom
const top = (roomBelow < popHeight + gap && rect.top > popHeight + gap)
? rect.top - popHeight - gap
: rect.bottom + gap
// Keep it on screen horizontally too - the column sits well right on a wide
// table and the preview is nearly 300px.
const left = Math.max(8, Math.min(rect.left, window.innerWidth - popWidth - 8))
popStyle.value = {
position: 'fixed', top: `${top}px`, left: `${left}px`, visibility: 'visible'
}
}
const hasPosition = computed(() =>
props.machine && props.machine.mapx != null && props.machine.mapy != null)
// Follow the viewer's theme the same way the full map does, so the preview is
// not a white rectangle on a dark page.
const blueprint = computed(() => {
const dark = document.documentElement.dataset.theme === 'dark'
|| (!document.documentElement.dataset.theme
&& window.matchMedia('(prefers-color-scheme: dark)').matches)
return blueprintUrlFor(dark ? 'dark' : 'light')
})
// mapx/mapy are pixel coordinates in the blueprint's own space, so they have to
// be expressed as a percentage of its configured dimensions - the preview is a
// few hundred pixels wide, not the full plan.
const markerStyle = computed(() => {
if (!hasPosition.value) return {}
const width = mapState.width || 3300
const height = mapState.height || 2550
return {
left: `${(props.machine.mapx / width) * 100}%`,
top: `${(props.machine.mapy / height) * 100}%`
}
// The name and location are not in the chip (it has to stay narrow in a table
// column), so they go in the native tooltip. An unplaced machine says so, since
// otherwise hovering it does nothing and looks broken.
const hoverTitle = computed(() => {
if (!props.machine) return ''
const parts = []
if (props.machine.name) parts.push(props.machine.name)
if (props.machine.locationname) parts.push(props.machine.locationname)
if (!hasPosition.value) parts.push('not placed on the floor map')
return parts.join(' - ')
})
</script>
<style scoped>
.mmc { position: relative; display: inline-block; }
.mmc-chip {
display: inline-block;
padding: 0.1rem 0.5rem;
@@ -119,47 +57,8 @@ const markerStyle = computed(() => {
color: var(--text);
font-size: 0.8rem;
font-family: ui-monospace, Menlo, Consolas, monospace;
text-decoration: none;
}
.mmc:hover .mmc-chip { border-color: var(--primary); }
.mmc-pop {
/* Placement is computed in show(); these are only the fallback for the tick
before it runs. */
position: fixed;
z-index: 1000;
display: flex;
/* .table-container sets white-space: nowrap for the table; the preview text
must not inherit it or the location line runs off the panel. */
white-space: normal;
flex-direction: column;
gap: 0.25rem;
padding: 0.5rem;
width: 18rem;
background: var(--bg-card-solid);
border: 1px solid var(--border);
border-radius: 6px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.mmc-pop-plain { width: 14rem; }
.mmc-pop-title { font-weight: 600; font-size: 0.85rem; color: var(--text); }
.mmc-pop-loc { font-size: 0.78rem; color: var(--text-light); }
.mmc-map { position: relative; display: block; line-height: 0; }
.mmc-map-img {
width: 100%;
height: auto;
border-radius: 4px;
border: 1px solid var(--border);
}
.mmc-marker {
position: absolute;
width: 12px;
height: 12px;
margin: -6px 0 0 -6px;
border-radius: 50%;
background: var(--danger);
border: 2px solid #fff;
box-shadow: 0 0 0 2px var(--danger);
white-space: nowrap;
cursor: default;
}
.mmc-chip:hover { border-color: var(--primary); }
</style>