MALIO-DEV/Ferme
4
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases 80 Wiki Activity

[#278] Plan du site #33

Merged
tristan merged 10 commits from feat/278-plan-du-site into develop 2026-02-25 14:16:11 +00:00
Conversation 0 Commits 10 Files Changed 31 +144 -78
2 changed files with 144 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 527fb77668 - Show all commits

157
frontend/pages/infrastructure/building.vue
View File

@@ -1,6 +1,7 @@
<template>
<div class="min-h-screen">
<div class="flex items-center justify-between mb-4">
<!-- En-tête de page avec retour et titre -->
<div class="flex items-center justify-between mb-8">
<div class="flex items-center gap-10">
<Icon
@click="router.push('/')"
@@ -12,49 +13,62 @@
</div>
</div>
<div class="px-[86px]">
<div>
<div class="px-[86px] 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">
<div class="font-semibold tracking-wide">
{{ entry.building.label || `Bâtiment ${entry.building.id}` }}
</div>
<div class="px-4 py-4">
<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>
<div v-else>
<div class="overflow-auto">
<!-- 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 flex items-center justify-center h-[50px] border-y-2 border-y-black hover:opacity-85 focus-visible:outline-none"
:class="activeLegendStatutId !== null && cell.caseStatusId !== activeLegendStatutId ? 'opacity-35 hover:opacity-70' : ''"
:style="[cell.spanStyle, cell.caseStyle]"
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, activeLegendStatutId !== null && cell.caseStatusId !== activeLegendStatutId ? '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>
</div>
</div>
<div class="px-4 py-4">
<div class="flex flex-wrap gap-3">
<!-- Légende : survol d'un statut => atténue les autres cases -->
<div class="py-4">
<!-- 3 zones fixes pour forcer gauche / centre / droite sur toute la largeur -->
<div class="grid w-full grid-cols-3 gap-3">
<div
v-for="statut in statutLegend"
v-for="(statut, index) in statutLegend"
:key="statut.id"
class="inline-flex cursor-pointer items-center gap-2 px-2 py-1"
class="flex min-w-0 cursor-pointer items-center gap-2 py-1"
:class="[
index === 0 ? 'justify-self-start' : '',
index === statutLegend.length - 1 ? 'justify-self-end' : '',
index > 0 && index < statutLegend.length - 1 ? 'justify-self-center' : ''
]"
@mouseenter="activeLegendStatutId = statut.id"
@mouseleave="activeLegendStatutId = null"
>
@@ -62,37 +76,39 @@
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 class="truncate text-sm uppercase text-slate-700">
{{ statut.label }}
</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
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 type { BuildingCaseStatusData } from "~/services/dto/building-case-status-data"
import { getBuildingList } from "~/services/building"
import { getStatutList } from "~/services/statut"
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 type {BuildingCaseStatusData} from "~/services/dto/building-case-status-data"
import {getBuildingList} from "~/services/building"
import {getStatutList} from "~/services/statut"
definePageMeta({ layout: "default" })
definePageMeta({layout: "default"})
const router = useRouter()
// Données brutes chargées depuis l'API
const buildingList = ref<BuildingData[]>([])
const statutLegend = ref<BuildingCaseStatusData[]>([])
// Statut actuellement survolé dans la légende (pour filtrage visuel)
const activeLegendStatutId = ref<number | null>(null)
// Modèle de vue prêt pour le template (layout + cellules + styles de grille)
const buildingLayouts = computed(() =>
buildingList.value.map((building) => {
// On affiche uniquement le premier layout du bâtiment
const layout = building.layouts?.[0] ?? null
const view = layout ? buildLayoutView(layout) : null
return { building, layout, cells: view?.cells ?? [], gridStyle: view?.gridStyle ?? {} }
return {building, layout, cells: view?.cells ?? [], gridStyle: view?.gridStyle ?? {}}
})
)
@@ -102,22 +118,46 @@ type GridCell = {
display: string
caseStatusId: number | null
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
}
const BASE_GRID_STYLE = { gridAutoRows: "1fr", rowGap: "18px", columnGap: "0px", width: "100%" } as const
const buildLayoutView = (layout: BuildingLayoutData): { cells: GridCell[]; gridStyle: Record<string, string> } | 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 cells: GridCell[] = []
const cellDrafts: GridCellDraft[] = []
// Tri visuel : de haut en bas, puis de gauche à droite
const positionsSorted = [...positions].sort((a, b) => (a.y ?? 1) - (b.y ?? 1) || (a.x ?? 1) - (b.x ?? 1))
for (const position of positionsSorted) {
const x = position.x ?? 1
@@ -125,38 +165,75 @@ const buildLayoutView = (layout: BuildingLayoutData): { cells: GridCell[]; gridS
const coordinateKey = `${x}-${y}`
if (seenCoordinates.has(coordinateKey)) continue
seenCoordinates.add(coordinateKey)
occupiedColumns.add(x)
// 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 caseStatusId = position.buildingCase?.statut?.id ?? null
const caseStatusLabel = position.buildingCase?.statut?.label ?? null
const statusColor = normalizeCaseStatusColor(position.buildingCase?.statut?.couleur)
cells.push({
cellDrafts.push({
key: `case-${layout.id}-${position.id}`,
x,
columnSpan,
caseId,
display: caseNumber !== null ? String(caseNumber) : "Case",
caseStatusId,
caseStatusLabel,
caseStyle: statusColor ? { backgroundColor: statusColor } : undefined,
spanStyle: { gridColumn: `${x} / span ${columnSpan}`, gridRow: `${y} / span ${rowSpan}` }
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}`}
})
}
const gapColumns = Array.from({ length: cols }, (_, i) => i + 1).filter((x) => !occupiedColumns.has(x))
// 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)
const columnsTemplate = Array.from({ length: cols }, (_, i) => (gapSet.has(i + 1) ? "24px" : "minmax(0, 1fr)")).join(" ")
return { cells, gridStyle: { gridTemplateColumns: columnsTemplate, ...BASE_GRID_STYLE } }
// 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 () => {
// Chargement initial des bâtiments et de la légende des statuts
const buildings = await getBuildingList()
const statuts = await getStatutList()
buildingList.value = buildings
// Tri alphabétique FR pour une légende stable
statutLegend.value = [...statuts].sort((a, b) =>
(a.label ?? "").localeCompare(b.label ?? "", "fr", { sensitivity: "base" })
(a.label ?? "").localeCompare(b.label ?? "", "fr", {sensitivity: "base"})
)
})
</script>

11
frontend/services/dto/building-layout-data.ts
View File

@@ -7,14 +7,3 @@ export interface BuildingLayoutData {
rows: number | null
casePositions?: BuildingCasePositionData[] | null
}
export type LayoutCell = {
key: string
isEmpty: boolean
caseId: number | null
display: string
caseStatusId: number | null
caseStatusLabel: string | null
caseStyle?: Record<string, string>
spanStyle: Record<string, string>
baseClass: string
}