Skip to content

Commit 60ab3d5

Browse files
author
Ola Horg Jacobsen
committed
✨Bedre oppførsel av kolonnene og spredning av plattformer
1 parent 46b859e commit 60ab3d5

1 file changed

Lines changed: 161 additions & 59 deletions

File tree

‎tavla/app/(admin)/tavler/[id]/rediger/components/TileCard/components/SetVisibleLines.tsx‎

Lines changed: 161 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -194,6 +194,56 @@ function SetVisibleLines({
194194
return keysInMode.some((key) => checkedLineIds.has(key))
195195
}
196196

197+
type ColumnItem =
198+
| { type: 'mode_group'; data: (typeof quaysByTransportMode)[0] }
199+
| { type: 'quay'; mode: TTransportMode; data: TQuay }
200+
201+
const columns: ColumnItem[][] = [[], [], []]
202+
const columnHeights = [0, 0, 0]
203+
204+
const itemsToDistribute: ColumnItem[] = []
205+
206+
if (quaysByTransportMode.length < 3) {
207+
// distribute individual quays
208+
quaysByTransportMode.forEach((group) => {
209+
group.quays.forEach((quay) => {
210+
itemsToDistribute.push({
211+
type: 'quay',
212+
mode: group.mode,
213+
data: quay,
214+
})
215+
})
216+
})
217+
} else {
218+
// distribute by mode group
219+
quaysByTransportMode.forEach((group) => {
220+
itemsToDistribute.push({ type: 'mode_group', data: group })
221+
})
222+
}
223+
224+
itemsToDistribute.forEach((item) => {
225+
let height = 0
226+
if (item.type === 'mode_group') {
227+
height =
228+
2 +
229+
item.data.quays.reduce(
230+
(acc, q) => acc + 1 + q.lines.length,
231+
0,
232+
) +
233+
item.data.quays.length * 2
234+
} else {
235+
height = 1 + item.data.lines.length + 2
236+
}
237+
238+
const minHeight = Math.min(...columnHeights)
239+
const colIndex = columnHeights.indexOf(minHeight)
240+
241+
if (columns[colIndex] && typeof columnHeights[colIndex] === 'number') {
242+
columns[colIndex].push(item)
243+
columnHeights[colIndex] += height
244+
}
245+
})
246+
197247
return (
198248
<>
199249
<Heading4>Plattformer og linjer</Heading4>
@@ -205,8 +255,8 @@ function SetVisibleLines({
205255

206256
return (
207257
<button
208-
key={mode}
209258
type="button"
259+
key={mode}
210260
onClick={() => {
211261
posthog.capture('stop_place_edit_interaction', {
212262
location: trackingLocation,
@@ -246,65 +296,117 @@ function SetVisibleLines({
246296
})}
247297
</div>
248298

249-
<div
250-
className={
251-
(
252-
{
253-
1: 'flex flex-col gap-8',
254-
2: 'grid grid-cols-1 gap-8 lg:grid-cols-2',
255-
3: 'grid grid-cols-1 gap-8 lg:grid-cols-2 xl:grid-cols-3',
256-
4: 'grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3',
257-
5: 'grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3',
258-
} as Record<number, string>
259-
)[quaysByTransportMode.length]
260-
}
261-
>
262-
{quaysByTransportMode.map(({ mode, quays }) => (
263-
<div
264-
key={mode}
265-
className={
266-
quaysByTransportMode.length === 1
267-
? 'grid grid-cols-1 gap-8 lg:grid-cols-3'
268-
: 'flex flex-col gap-4'
269-
}
270-
>
271-
{quays
272-
.sort((a, b) =>
273-
(a.publicCode || '').localeCompare(
274-
b.publicCode || '',
275-
'nb-NO',
276-
{ numeric: true },
277-
),
278-
)
279-
.map((quay) => {
280-
const modes = quayModesMap.get(quay.id) || []
281-
const title =
282-
quay.name && quay.publicCode
283-
? `${modes.includes('metro') || modes.includes('rail') ? 'Spor' : 'Plattform'} ${quay.publicCode}`
284-
: quay.name || 'Ukjent'
285-
286-
return (
287-
<div key={quay.id}>
288-
<PlatformAndLines
289-
tile={tile}
290-
quayId={quay.id}
291-
groupKey={
292-
quay.publicCode || quay.id
293-
}
294-
title={title}
295-
description={quay.description}
296-
lines={quay.lines}
297-
trackingLocation={trackingLocation}
298-
transportModes={modes}
299-
selectedLineIds={checkedLineIds}
300-
onToggleLine={handleToggleLine}
301-
onToggleGroup={handleGroupToggle}
302-
/>
303-
</div>
304-
)
299+
<div className="flex flex-col gap-8 lg:flex-row lg:items-start">
300+
{columns.map((colItems, index) => {
301+
if (colItems.length === 0) return null
302+
303+
return (
304+
<div key={index} className="flex flex-1 flex-col gap-4">
305+
{colItems.map((item) => {
306+
if (item.type === 'mode_group') {
307+
const { mode, quays } = item.data
308+
return (
309+
<div
310+
key={mode}
311+
className="flex flex-col gap-4"
312+
>
313+
{quays
314+
.sort((a, b) =>
315+
(
316+
a.publicCode || ''
317+
).localeCompare(
318+
b.publicCode || '',
319+
'nb-NO',
320+
{ numeric: true },
321+
),
322+
)
323+
.map((quay) => {
324+
const modes =
325+
quayModesMap.get(
326+
quay.id,
327+
) || []
328+
const title =
329+
quay.name &&
330+
quay.publicCode
331+
? `${modes.includes('metro') || modes.includes('rail') ? 'Spor' : 'Plattform'} ${quay.publicCode}`
332+
: quay.name ||
333+
'Ukjent'
334+
335+
return (
336+
<div key={quay.id}>
337+
<PlatformAndLines
338+
tile={tile}
339+
quayId={quay.id}
340+
groupKey={
341+
quay.publicCode ||
342+
quay.id
343+
}
344+
title={title}
345+
description={
346+
quay.description
347+
}
348+
lines={
349+
quay.lines
350+
}
351+
trackingLocation={
352+
trackingLocation
353+
}
354+
transportModes={
355+
modes
356+
}
357+
selectedLineIds={
358+
checkedLineIds
359+
}
360+
onToggleLine={
361+
handleToggleLine
362+
}
363+
onToggleGroup={
364+
handleGroupToggle
365+
}
366+
/>
367+
</div>
368+
)
369+
})}
370+
</div>
371+
)
372+
} else {
373+
// Render individual quay
374+
const quay = item.data
375+
const modes =
376+
quayModesMap.get(quay.id) || []
377+
const title =
378+
quay.name && quay.publicCode
379+
? `${modes.includes('metro') || modes.includes('rail') ? 'Spor' : 'Plattform'} ${quay.publicCode}`
380+
: quay.name || 'Ukjent'
381+
382+
return (
383+
<div key={quay.id}>
384+
<PlatformAndLines
385+
tile={tile}
386+
quayId={quay.id}
387+
groupKey={
388+
quay.publicCode || quay.id
389+
}
390+
title={title}
391+
description={quay.description}
392+
lines={quay.lines}
393+
trackingLocation={
394+
trackingLocation
395+
}
396+
transportModes={modes}
397+
selectedLineIds={checkedLineIds}
398+
onToggleLine={handleToggleLine}
399+
onToggleGroup={
400+
handleGroupToggle
401+
}
402+
/>
403+
</div>
404+
)
405+
}
305406
})}
306-
</div>
307-
))}
407+
</div>
408+
)
409+
})}
308410
</div>
309411
<HiddenInput id="count" value={totalQuayLinePairs.toString()} />
310412
</>

0 commit comments

Comments
 (0)