2785c0463e
The machine map preview was a bespoke popover. LocationMapTooltip already existed and is what the machine detail page uses, so the warranty tables now show the same thing. That is what was asked for - the preview zooms, as it does on the machine page - and it comes with behaviour the bespoke one did not have: scroll-wheel zoom, and staying open while the pointer is on the tooltip itself so it can actually be read and panned. It also solves the clipping properly. The previous commit reached for position: fixed with a hand-rolled flip because .table-container's overflow-x clipped an absolute child; LocationMapTooltip teleports to body, which avoids the clipping context altogether rather than escaping it. All of that positioning code, and the blueprint rendering, is deleted - 64 lines from 140. An unplaced machine keeps its chip and now says why in the native tooltip rather than showing an empty panel: 17 of the 142 linked machines have no map position, and those rows still need their number.
65 lines
2.1 KiB
Vue
65 lines
2.1 KiB
Vue
<template>
|
|
<!-- 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 || ''"
|
|
>
|
|
<span class="mmc-chip" :title="hoverTitle">
|
|
{{ machine.machinenumber || machine.name || '-' }}
|
|
</span>
|
|
</LocationMapTooltip>
|
|
|
|
<!-- 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 { computed } from 'vue'
|
|
import LocationMapTooltip from '@/components/LocationMapTooltip.vue'
|
|
|
|
const props = defineProps({
|
|
machine: { type: Object, default: null }
|
|
})
|
|
|
|
const hasPosition = computed(() =>
|
|
props.machine && props.machine.mapx != null && props.machine.mapy != null)
|
|
|
|
// 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-chip {
|
|
display: inline-block;
|
|
padding: 0.1rem 0.5rem;
|
|
border-radius: 999px;
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
color: var(--text);
|
|
font-size: 0.8rem;
|
|
font-family: ui-monospace, Menlo, Consolas, monospace;
|
|
white-space: nowrap;
|
|
cursor: default;
|
|
}
|
|
.mmc-chip:hover { border-color: var(--primary); }
|
|
</style>
|