feat : plan du site (WIP)
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
<div class="flex flex-wrap justify-center pb-16 gap-12">
|
||||
<card-link label="NOUVELLE RÉCEPTION" link="/reception" iconName="mdi:truck-outline" />
|
||||
<card-link label="NOUVELLE EXPÉDITION" link="/shipment" iconName="mdi:truck-fast-outline" />
|
||||
<card-link label="PLAN DE SITE" link="/" iconName="material-symbols:warehouse-outline-rounded" />
|
||||
<card-link label="PLAN DE SITE" link="/infrastructure/batiment" iconName="material-symbols:warehouse-outline-rounded" />
|
||||
<card-link link="/reception/waiting-reception" iconName="mdi:truck-remove-outline">
|
||||
<template #label>
|
||||
Réceptions<br>EN ATTENTE
|
||||
@@ -15,7 +15,7 @@
|
||||
EXPÉDITIONS<br>EN ATTENTE
|
||||
</template>
|
||||
</card-link>
|
||||
<card-link label="CASES" link="/" iconName="material-symbols:bottom-sheets-outline" />
|
||||
<card-link label="CASES" link="/infrastructure/case" iconName="material-symbols:bottom-sheets-outline" />
|
||||
<card-link label="RÉCEPTIONS FINIES" link="/reception/finish-reception" iconName="mdi:truck-check-outline" />
|
||||
<card-link label="EXPÉDITIONS FINIES" link="/shipment/finish-shipment" iconName="mdi:truck-delivery-outline" />
|
||||
<card-link link="/" iconName="mdi:cow">
|
||||
|
||||
199
frontend/pages/infrastructure/batiment.vue
Normal file
199
frontend/pages/infrastructure/batiment.vue
Normal file
@@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<div class="min-h-screen">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-10">
|
||||
<Icon
|
||||
@click="router.push('/')"
|
||||
name="gg:arrow-left-o"
|
||||
size="44"
|
||||
class="cursor-pointer text-primary-500"
|
||||
/>
|
||||
<h1 class="text-3xl font-bold uppercase text-primary-500">bâtiments</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-[86px]">
|
||||
<div class="mt-6 border border-slate-200 mb-16">
|
||||
<div
|
||||
v-for="entry in buildingLayouts"
|
||||
:key="entry.building.id"
|
||||
class="border-t border-slate-200 first:border-t-0"
|
||||
>
|
||||
<div class="bg-slate-100 px-4 py-3 font-semibold tracking-wide">
|
||||
{{ entry.building.label || `Bâtiment ${entry.building.id}` }}
|
||||
</div>
|
||||
|
||||
<div class="px-4 py-4">
|
||||
<div v-if="!entry.layout" class="text-sm text-slate-400">
|
||||
Aucun plan de bâtiment.
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div class="overflow-auto">
|
||||
<div
|
||||
class="grid"
|
||||
:style="getGridStyle(entry.layout, entry.columnsTemplate)"
|
||||
>
|
||||
<template v-for="cell in entry.cells" :key="cell.key">
|
||||
<div
|
||||
v-if="cell.isEmpty"
|
||||
class="w-[26px] h-[50px]"
|
||||
:style="getCellSpanStyle(cell)"
|
||||
></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)"
|
||||
:to="cell.caseId ? `/infrastructure/case?id=${cell.caseId}` : '/infrastructure/case'"
|
||||
>
|
||||
{{ cell.display }}
|
||||
</NuxtLink>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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 { getBuildingList } from "~/services/building"
|
||||
|
||||
definePageMeta({ layout: "default" })
|
||||
|
||||
const router = useRouter()
|
||||
const buildingList = ref<BuildingData[]>([])
|
||||
const buildingLayouts = computed(() => {
|
||||
return buildingList.value.map((building) => {
|
||||
const layout = getDisplayLayout(building)
|
||||
const view = layout ? buildLayoutView(layout) : null
|
||||
return {
|
||||
building,
|
||||
layout,
|
||||
cells: view?.cells ?? [],
|
||||
columnsTemplate: view?.columnsTemplate
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
type LayoutCell = {
|
||||
key: string
|
||||
x: number
|
||||
y: number
|
||||
w: number
|
||||
h: number
|
||||
isEmpty: boolean
|
||||
caseNumber: number | null
|
||||
caseId: number | null
|
||||
display: string
|
||||
rawId?: number | 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 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 => {
|
||||
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
|
||||
const covered = Array.from({ length: totalRows }, () => Array.from({ length: totalCols }, () => false))
|
||||
|
||||
// map positions by (x,y)
|
||||
const map = new Map<string, BuildingCasePositionData>()
|
||||
const occupiedColumns = new Set<number>()
|
||||
|
||||
for (const p of positions) {
|
||||
const rawX = p.x ?? 1
|
||||
const rawY = p.y ?? 1
|
||||
const key = `${rawX}-${rawY}`
|
||||
if (!map.has(key)) map.set(key, p)
|
||||
occupiedColumns.add(rawX)
|
||||
}
|
||||
const cells: LayoutCell[] = []
|
||||
const gapColumns: number[] = []
|
||||
for (let x = 1; x <= totalCols; x++) {
|
||||
if (!occupiedColumns.has(x)) gapColumns.push(x)
|
||||
}
|
||||
|
||||
for (let y = 1; y <= totalRows; y++) {
|
||||
for (let x = 1; x <= totalCols; x++) {
|
||||
if (covered[y - 1][x - 1]) continue
|
||||
const p = map.get(`${x}-${y}`)
|
||||
if (!p) continue
|
||||
const w = p.w ?? 1
|
||||
const h = p.h ?? 1
|
||||
for (let dy = 0; dy < h; dy++) {
|
||||
for (let dx = 0; dx < w; dx++) {
|
||||
const ty = y - 1 + dy
|
||||
const tx = x - 1 + dx
|
||||
if (ty < totalRows && tx < totalCols) covered[ty][tx] = true
|
||||
}
|
||||
}
|
||||
const caseNumber = (p.buildingCase?.caseNumber ?? null) as number | null
|
||||
const caseId = (p.buildingCase?.id ?? null) as number | null
|
||||
cells.push({
|
||||
key: `case-${layout.id}-${p.id}`,
|
||||
x,
|
||||
y,
|
||||
w,
|
||||
h,
|
||||
isEmpty: false,
|
||||
caseNumber,
|
||||
caseId,
|
||||
display: caseNumber !== null ? String(caseNumber) : "Case",
|
||||
rawId: p.id
|
||||
})
|
||||
}
|
||||
|
||||
for (const gapX of gapColumns) {
|
||||
cells.push({
|
||||
key: `gap-${layout.id}-${y}-${gapX}`,
|
||||
x: gapX,
|
||||
y,
|
||||
w: 1,
|
||||
h: 1,
|
||||
isEmpty: true,
|
||||
caseNumber: null,
|
||||
caseId: null,
|
||||
display: "",
|
||||
rawId: undefined
|
||||
})
|
||||
}
|
||||
}
|
||||
const columnsTemplate = Array.from({ length: totalCols }, (_, idx) =>
|
||||
gapColumns.includes(idx + 1) ? "24px" : "minmax(0, 1fr)"
|
||||
).join(" ")
|
||||
|
||||
return { cells, columnsTemplate }
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
buildingList.value = await getBuildingList()
|
||||
})
|
||||
</script>
|
||||
6
frontend/pages/infrastructure/case.vue
Normal file
6
frontend/pages/infrastructure/case.vue
Normal file
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user