tristan
bebfabcacc
All checks were successful
Auto Tag Develop / tag (push) Successful in 9s
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
232 lines
11 KiB
Vue
232 lines
11 KiB
Vue
<template>
|
|
<div class="px-[86px]">
|
|
<div class="flex items-center justify-between relative">
|
|
<div class="flex flex-row absolute -left-[60px]">
|
|
<Icon
|
|
@click="router.push('/')"
|
|
name="gg:arrow-left-o"
|
|
size="44"
|
|
class="cursor-pointer text-primary-500"
|
|
/>
|
|
</div>
|
|
<h1 class="text-3xl font-bold uppercase text-primary-500">bâtiments</h1>
|
|
</div>
|
|
|
|
<div class="mt-6 space-y-6">
|
|
<!-- Liste des bâtiments + rendu du plan de chaque bâtiment -->
|
|
<div
|
|
v-for="entry in buildingLayouts"
|
|
:key="entry.building.id"
|
|
>
|
|
<div class="font-semibold tracking-wide text-primary-500">
|
|
{{ entry.building.label || `Bâtiment ${entry.building.id}` }}
|
|
</div>
|
|
|
|
<div class="py-4">
|
|
<!-- Aucun layout disponible pour ce bâtiment -->
|
|
<div v-if="!entry.layout" class="text-sm text-slate-400">
|
|
Aucun plan de bâtiment.
|
|
</div>
|
|
|
|
<!-- Grille CSS : les cases sont positionnées via spanStyle -->
|
|
<div v-else class="overflow-auto">
|
|
<div class="grid" :style="entry.gridStyle">
|
|
<NuxtLink
|
|
v-for="cell in entry.cells"
|
|
:key="cell.key"
|
|
class="relative text-white flex h-[50px] items-center justify-center border-y-[3px] border-y-black bg-white hover:opacity-85 focus-visible:outline-none"
|
|
:class="[cell.sideBorderClass, activeLegendLabel !== null && cell.caseStatusLabel !== activeLegendLabel ? 'opacity-35 hover:opacity-70' : '']"
|
|
:style="[cell.spanStyle, cell.sideBorderStyle]"
|
|
:to="cell.caseId ? `/infrastructure/case?id=${cell.caseId}` : '/infrastructure/case'"
|
|
:title="cell.caseStatusLabel ?? undefined"
|
|
>
|
|
<!-- Le blanc latéral est géré sur ce bloc interne (conditionnel par voisinage) -->
|
|
<div
|
|
class="flex h-full w-full items-center justify-center bg-white"
|
|
:class="cell.contentInsetClass"
|
|
:style="cell.caseStyle"
|
|
>
|
|
<!-- Numéro de case -->
|
|
{{ cell.display }}
|
|
</div>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Légende : survol d'un statut => atténue les autres cases -->
|
|
<div class="py-4">
|
|
<div class="flex gap-6">
|
|
<div
|
|
v-for="statut in statutLegend"
|
|
:key="statut.label"
|
|
class="flex cursor-pointer items-center gap-2 py-1"
|
|
@mouseenter="activeLegendLabel = statut.label"
|
|
@mouseleave="activeLegendLabel = null"
|
|
>
|
|
<span
|
|
class="h-5 w-5 border border-slate-300"
|
|
:style="statut.couleur ? { backgroundColor: statut.couleur } : {}"
|
|
></span>
|
|
<span class="text-sm uppercase text-slate-700">
|
|
{{ statut.label }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
useHead({ title: 'Bâtiments' })
|
|
|
|
import type {BuildingData} from "~/services/dto/building-data"
|
|
import type {BuildingLayoutData} from "~/services/dto/building-layout-data"
|
|
import type {BuildingCasePositionData} from "~/services/dto/building-case-position-data"
|
|
import {getBuildingList} from "~/services/building"
|
|
|
|
definePageMeta({layout: "default"})
|
|
|
|
const router = useRouter()
|
|
// Données brutes chargées depuis l'API
|
|
const buildingList = ref<BuildingData[]>([])
|
|
const statutLegend = [
|
|
{ label: 'Libre', couleur: '#A3B18A' },
|
|
{ label: 'Occupé', couleur: '#3A506B' },
|
|
{ label: 'Malade', couleur: '#E07A5F' },
|
|
]
|
|
// Statut actuellement survolé dans la légende (pour filtrage visuel)
|
|
const activeLegendLabel = ref<string | null>(null)
|
|
// Modèle de vue prêt pour le template (layout + cellules + styles de grille)
|
|
const buildingLayouts = computed(() =>
|
|
buildingList.value
|
|
.filter((building) => building.layouts && building.layouts.length > 0)
|
|
.map((building) => {
|
|
const layout = building.layouts![0]
|
|
const view = buildLayoutView(layout)
|
|
return {building, layout, cells: view?.cells ?? [], gridStyle: view?.gridStyle ?? {}}
|
|
})
|
|
)
|
|
|
|
type GridCell = {
|
|
key: string
|
|
caseId: number | null
|
|
display: string
|
|
caseStatusLabel: string | null
|
|
// Couleur de fond de la case (dépend du statut)
|
|
caseStyle?: Record<string, string>
|
|
// Placement dans la grille CSS (colonne/ligne de départ + span)
|
|
spanStyle: Record<string, string>
|
|
// Bordures latérales pointillées si la case touche un gap ou le bord du plan
|
|
sideBorderClass: string
|
|
// Couleur des bordures pointillées latérales (reprend la couleur de la cellule)
|
|
sideBorderStyle?: Record<string, string>
|
|
// Espace blanc interne uniquement côté(s) adjacent(s) à une autre case
|
|
contentInsetClass: string
|
|
}
|
|
// Type intermédiaire : garde des infos utiles au calcul des bordures, retirées ensuite
|
|
type GridCellDraft = Omit<GridCell, "sideBorderClass" | "sideBorderStyle" | "contentInsetClass"> & { x: number; columnSpan: number}
|
|
|
|
|
|
// Nettoie la couleur de statut pour éviter les chaînes vides / espaces
|
|
const normalizeCaseStatusColor = (value: string | null | undefined): string | null => {
|
|
const color = (value ?? "").trim()
|
|
return color.length > 0 ? color : null
|
|
}
|
|
|
|
// Styles de base communs à toutes les grilles de bâtiments
|
|
const BASE_GRID_STYLE = {gridAutoRows: "1fr", rowGap: "18px", columnGap: "0px", width: "100%"} as const
|
|
|
|
// Transforme un layout API en structure de rendu (cellules + style de grille)
|
|
const buildLayoutView = (layout: BuildingLayoutData): {
|
|
cells: GridCell[];
|
|
gridStyle: Record<string, string>
|
|
} | null => {
|
|
const rows = layout.rows ?? 0, cols = layout.columns ?? 0
|
|
if (rows <= 0 || cols <= 0) return null
|
|
|
|
// Liste des positions de cases (filtre de sécurité sur les valeurs nulles)
|
|
const positions = (layout.casePositions ?? []).filter(Boolean) as BuildingCasePositionData[]
|
|
// Colonnes occupées par au moins une case (sert à détecter les gaps)
|
|
const occupiedColumns = new Set<number>()
|
|
// Sécurité : si deux positions ont le même x/y, on garde la première
|
|
const seenCoordinates = new Set<string>()
|
|
const cellDrafts: GridCellDraft[] = []
|
|
|
|
// Tri visuel : de haut en bas, puis de gauche à droite
|
|
const positionsSorted = [...positions].sort(
|
|
(leftPosition, rightPosition) =>
|
|
(leftPosition.y ?? 1) - (rightPosition.y ?? 1) || (leftPosition.x ?? 1) - (rightPosition.x ?? 1)
|
|
)
|
|
for (const position of positionsSorted) {
|
|
const x = position.x ?? 1
|
|
const y = position.y ?? 1
|
|
const coordinateKey = `${x}-${y}`
|
|
if (seenCoordinates.has(coordinateKey)) continue
|
|
seenCoordinates.add(coordinateKey)
|
|
|
|
// w/h = nombre de colonnes / lignes occupées par la case dans la grille
|
|
const columnSpan = position.w ?? 1
|
|
const rowSpan = position.h ?? 1
|
|
|
|
// Une case peut couvrir plusieurs colonnes : on les marque toutes comme occupées
|
|
for (let column = x; column < x + columnSpan; column++) {
|
|
if (column <= cols) occupiedColumns.add(column)
|
|
}
|
|
|
|
// Métadonnées utiles au rendu / navigation / légende
|
|
const caseId = (position.buildingCase?.id ?? null) as number | null
|
|
const caseNumber = (position.buildingCase?.caseNumber ?? null) as number | null
|
|
const caseStatusLabel = position.buildingCase?.statut?.label ?? null
|
|
const statusColor = normalizeCaseStatusColor(position.buildingCase?.statut?.couleur)
|
|
|
|
cellDrafts.push({
|
|
key: `case-${layout.id}-${position.id}`,
|
|
x,
|
|
columnSpan,
|
|
caseId,
|
|
display: caseNumber !== null ? String(caseNumber) : "Case",
|
|
caseStatusLabel,
|
|
caseStyle: statusColor ? {backgroundColor: statusColor} : undefined,
|
|
// Exemple : "14 / span 1" => commence en colonne 14 et occupe 1 colonne
|
|
spanStyle: {gridColumn: `${x} / span ${columnSpan}`, gridRow: `${y} / span ${rowSpan}`}
|
|
})
|
|
}
|
|
|
|
// Colonnes vides = gaps visuels (plus étroites dans la grille)
|
|
const gapColumns = Array.from({length: cols}, (_, i) => i + 1).filter((x) => !occupiedColumns.has(x))
|
|
const gapSet = new Set(gapColumns)
|
|
|
|
// Ajoute les bordures latérales pointillées pour les cases au contact d'un gap ou d'un bord
|
|
const cells: GridCell[] = cellDrafts.map(({x, columnSpan, ...cell}) => {
|
|
const touchesLeftGapOrEdge = x === 1 || gapSet.has(x - 1)
|
|
const touchesRightGapOrEdge = x + columnSpan - 1 === cols || gapSet.has(x + columnSpan)
|
|
const sideBorderClass = [
|
|
touchesLeftGapOrEdge ? "border-l-[3px] [border-left-style:dashed]" : "",
|
|
touchesRightGapOrEdge ? "border-r-[3px] [border-right-style:dashed]" : ""
|
|
].filter(Boolean).join(" ")
|
|
// Les pointillés latéraux reprennent la couleur de la cellule (si un statut en fournit une)
|
|
const sideBorderStyle = {
|
|
...(cell.caseStyle?.backgroundColor && touchesLeftGapOrEdge ? {borderLeftColor: cell.caseStyle.backgroundColor} : {}),
|
|
...(cell.caseStyle?.backgroundColor && touchesRightGapOrEdge ? {borderRightColor: cell.caseStyle.backgroundColor} : {})
|
|
}
|
|
// Le "blanc" n'est ajouté qu'entre deux cellules adjacentes (pas sur bord/gap)
|
|
const contentInsetClass = [
|
|
!touchesLeftGapOrEdge ? "ml-[4px]" : "",
|
|
!touchesRightGapOrEdge ? "mr-[4px]" : ""
|
|
].filter(Boolean).join(" ")
|
|
return {...cell, sideBorderClass, sideBorderStyle, contentInsetClass}
|
|
})
|
|
|
|
// Les colonnes de gap sont rendues en 24px, les autres occupent l'espace restant
|
|
const columnsTemplate = Array.from({length: cols}, (_, i) => (gapSet.has(i + 1) ? "24px" : "minmax(0, 1fr)")).join(" ")
|
|
return {cells, gridStyle: {gridTemplateColumns: columnsTemplate, ...BASE_GRID_STYLE}}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
buildingList.value = await getBuildingList()
|
|
})
|
|
</script>
|