125 lines
4.0 KiB
Vue
125 lines
4.0 KiB
Vue
<template>
|
|
<span
|
|
v-if="machine"
|
|
class="mmc"
|
|
@mouseenter="open = true"
|
|
@mouseleave="open = false"
|
|
>
|
|
<!-- 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" class="mmc-pop">
|
|
<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>
|
|
|
|
<!-- 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" class="mmc-pop mmc-pop-plain">
|
|
<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>
|
|
</span>
|
|
<span v-else class="muted">-</span>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import { state as mapState, loadMapConfig, blueprintUrlFor } from '@/composables/mapConfig'
|
|
|
|
const props = defineProps({
|
|
machine: { type: Object, default: null }
|
|
})
|
|
|
|
const open = ref(false)
|
|
|
|
onMounted(() => { loadMapConfig() })
|
|
|
|
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}%`
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.mmc { position: relative; display: inline-block; }
|
|
.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;
|
|
text-decoration: none;
|
|
}
|
|
.mmc:hover .mmc-chip { border-color: var(--primary); }
|
|
|
|
.mmc-pop {
|
|
position: absolute;
|
|
z-index: 40;
|
|
left: 0;
|
|
top: calc(100% + 0.35rem);
|
|
display: flex;
|
|
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);
|
|
}
|
|
</style>
|