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

feat : plan du site (WIP)

Browse Source
This commit is contained in:
Mattéo Dunoyer
2026-02-20 11:32:51 +01:00
parent 7d80795ae3
commit 30b065b69f
6 changed files with 310 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
frontend/pages/infrastructure/batiment.vue
View File

@@ -30,21 +30,26 @@
<div v-else>
<div class="overflow-auto">
<div
class="grid"
:style="getGridStyle(entry.layout, entry.columnsTemplate)"
>
<div class="grid" :style="entry.gridStyle">
<template v-for="cell in entry.cells" :key="cell.key">
<div
v-if="cell.isEmpty"
class="w-[26px] h-[50px]"
:style="getCellSpanStyle(cell)"
class="h-[50px] border-l-[2.5px] border-r-[2.5px] border-slate-300 [border-left-style:dotted] [border-right-style:dotted]"
:style="cell.spanStyle"
></div>
<NuxtLink
v-else
class="flex items-center justify-center border border-slate-200 border-y-black hover:bg-primary-500/15 h-[50px]"
:style="getCellSpanStyle(cell)"
:class="[
!cell.caseId ? 'border-l-[2.5px] border-r-[2.5px] border-slate-300 [border-left-style:dotted] [border-right-style:dotted]' : '',
cell.hasGapLeft ? 'border-l-0' : '',
cell.hasGapRight ? 'border-r-0' : '',
cell.isOuterLeft ? '[border-left-style:dotted] border-l-[2.5px] border-l-slate-300' : '',
cell.isOuterRight ? '[border-right-style:dotted] border-r-[2.5px] border-r-slate-300' : ''
]"
:style="[cell.spanStyle, cell.caseStyle]"
:to="cell.caseId ? `/infrastructure/case?id=${cell.caseId}` : '/infrastructure/case'"
:title="cell.caseStatusLabel ?? undefined"
>
{{ cell.display }}
</NuxtLink>
@@ -55,6 +60,32 @@
</div>
</div>
</div>
<div class="mb-16 border border-slate-200">
<div class="bg-slate-100 px-4 py-3 font-semibold tracking-wide uppercase">
legendes
</div>
<div class="px-4 py-4">
<div v-if="statutLegend.length === 0" class="text-sm text-slate-400">
Aucun statut disponible.
</div>
<div v-else class="flex flex-wrap gap-3">
<div
v-for="statut in statutLegend"
:key="statut.id"
class="inline-flex items-center gap-2 rounded border border-slate-200 bg-white px-3 py-2"
>
<span
class="h-4 w-4 rounded border border-slate-300"
:style="statut.couleur ? { backgroundColor: statut.couleur } : {}"
></span>
<span class="text-sm uppercase text-slate-700">
{{ statut.label || "Sans libellé" }}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
@@ -63,21 +94,25 @@
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" })
const router = useRouter()
const buildingList = ref<BuildingData[]>([])
const statutLegend = ref<BuildingCaseStatusData[]>([])
const buildingLayouts = computed(() => {
return buildingList.value.map((building) => {
const layout = getDisplayLayout(building)
const layout = building.layouts?.[0] ?? null
const view = layout ? buildLayoutView(layout) : null
return {
building,
layout,
cells: view?.cells ?? [],
columnsTemplate: view?.columnsTemplate
columnsTemplate: view?.columnsTemplate,
gridStyle: view?.gridStyle ?? {}
}
})
})
@@ -93,35 +128,27 @@ type LayoutCell = {
caseId: number | null
display: string
rawId?: number | string
hasGapLeft: boolean
hasGapRight: boolean
isOuterLeft: boolean
isOuterRight: boolean
caseStatusLabel: string | null
caseStyle?: Record<string, string>
spanStyle: Record<string, string>
}
const getDisplayLayout = (building: BuildingData): BuildingLayoutData | null => {
const layouts = (building.layouts ?? []).filter(Boolean) as BuildingLayoutData[]
if (layouts.length === 0) return null
return layouts[0] ?? null
const normalizeCaseStatusColor = (value: string | null | undefined): string | null => {
const color = (value ?? "").trim()
return color.length > 0 ? color : null
}
const getGridStyle = (layout: BuildingLayoutData, columnsTemplate?: string) => {
const cols = Math.max(0, layout.columns ?? 0)
return {
gridTemplateColumns: columnsTemplate ?? `repeat(${cols}, minmax(0, 1fr))`,
gridAutoRows: "1fr",
rowGap: "18.5px",
columnGap: "0px",
width: "100%"
}
}
const getCellSpanStyle = (cell: LayoutCell) => ({
gridColumn: `${cell.x} / span ${cell.w}`,
gridRow: `${cell.y} / span ${cell.h}`
})
const buildLayoutView = (
layout: BuildingLayoutData
): { cells: LayoutCell[]; columnsTemplate: string } | null => {
): { cells: LayoutCell[]; columnsTemplate: string; gridStyle: Record<string, string> } | null => {
const totalRows = layout.rows ?? 0
const totalCols = layout.columns ?? 0
if (totalRows <= 0 || totalCols <= 0) return null
const positions = (layout.casePositions ?? []).filter(Boolean) as BuildingCasePositionData[]
// marque les cases couvertes par un span pour ne pas générer du "vide" dessus
// éviter des doublons/chevauchements dans la grille pour les spans.
const covered = Array.from({ length: totalRows }, () => Array.from({ length: totalCols }, () => false))
// map positions by (x,y)
@@ -140,6 +167,7 @@ const buildLayoutView = (
for (let x = 1; x <= totalCols; x++) {
if (!occupiedColumns.has(x)) gapColumns.push(x)
}
const gapColumnsSet = new Set(gapColumns)
for (let y = 1; y <= totalRows; y++) {
for (let x = 1; x <= totalCols; x++) {
@@ -157,6 +185,20 @@ const buildLayoutView = (
}
const caseNumber = (p.buildingCase?.caseNumber ?? null) as number | null
const caseId = (p.buildingCase?.id ?? null) as number | null
const statusLabel = p.buildingCase?.statut?.label ?? null
const statusColor = normalizeCaseStatusColor(p.buildingCase?.statut?.couleur)
const caseStatusLabel = statusLabel
const caseStyle = statusColor
? { backgroundColor: statusColor }
: undefined
const spanStyle = {
gridColumn: `${x} / span ${w}`,
gridRow: `${y} / span ${h}`
}
const hasGapLeft = gapColumnsSet.has(x - 1)
const hasGapRight = gapColumnsSet.has(x + w)
const isOuterLeft = x === 1
const isOuterRight = x + w - 1 === totalCols
cells.push({
key: `case-${layout.id}-${p.id}`,
x,
@@ -167,11 +209,22 @@ const buildLayoutView = (
caseNumber,
caseId,
display: caseNumber !== null ? String(caseNumber) : "Case",
rawId: p.id
rawId: p.id,
hasGapLeft,
hasGapRight,
isOuterLeft,
isOuterRight,
caseStatusLabel,
caseStyle,
spanStyle
})
}
for (const gapX of gapColumns) {
const spanStyle = {
gridColumn: `${gapX} / span 1`,
gridRow: `${y} / span 1`
}
cells.push({
key: `gap-${layout.id}-${y}-${gapX}`,
x: gapX,
@@ -182,18 +235,40 @@ const buildLayoutView = (
caseNumber: null,
caseId: null,
display: "",
rawId: undefined
rawId: undefined,
hasGapLeft: false,
hasGapRight: false,
isOuterLeft: gapX === 1,
isOuterRight: gapX === totalCols,
caseStatusLabel: null,
caseStyle: undefined,
spanStyle
})
}
}
const columnsTemplate = Array.from({ length: totalCols }, (_, idx) =>
gapColumns.includes(idx + 1) ? "24px" : "minmax(0, 1fr)"
gapColumnsSet.has(idx + 1) ? "24px" : "minmax(0, 1fr)"
).join(" ")
const cols = Math.max(0, layout.columns ?? 0)
const gridStyle = {
gridTemplateColumns: columnsTemplate ?? `repeat(${cols}, minmax(0, 1fr))`,
gridAutoRows: "1fr",
rowGap: "18px",
columnGap: "0px",
width: "100%"
}
return { cells, columnsTemplate }
return { cells, columnsTemplate, gridStyle }
}
onMounted(async () => {
buildingList.value = await getBuildingList()
const buildingsPromise = getBuildingList()
const statutsPromise = getStatutList()
const buildings = await buildingsPromise
const statuts = await statutsPromise
buildingList.value = buildings
statutLegend.value = [...statuts].sort((a, b) =>
(a.label ?? "").localeCompare(b.label ?? "", "fr", { sensitivity: "base" })
)
})
</script>