Compare commits
3 Commits
acc38d13b4
...
57f427845c
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
57f427845c | ||
| f6cbc88acd | |||
| 17b9a5e5b4 |
@ -8,7 +8,7 @@ import Arrangement from '@/app/ui/arrangements/arrangement';
|
||||
import ArrangementsTable from '@/app/ui/arrangements/arrangements-table';
|
||||
import { classNames } from '@/app/ui/components/button';
|
||||
import { Toast } from 'primereact/toast';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
|
||||
export default function Page() {
|
||||
const toast = useRef<Toast>(null);
|
||||
|
||||
@ -13,6 +13,8 @@ export function loadTableSimulations(onLoad?: (tableSimulations: TableArrangemen
|
||||
name: record.name,
|
||||
discomfort: record.discomfort,
|
||||
valid: record.valid,
|
||||
progress: record.progress,
|
||||
status : record.status
|
||||
});
|
||||
}));
|
||||
}, (error) => {
|
||||
|
||||
@ -14,6 +14,8 @@ export type TableArrangement = {
|
||||
guests?: Guest[];
|
||||
discomfort?: number;
|
||||
valid?: boolean;
|
||||
progress: number;
|
||||
status: 'in_progress' | 'completed' | 'not_started';
|
||||
}
|
||||
|
||||
export type User = {
|
||||
|
||||
@ -22,10 +22,12 @@ export type Table = {
|
||||
export class TableSimulation implements Entity {
|
||||
id?: string;
|
||||
tables: Table[];
|
||||
progress: number;
|
||||
|
||||
constructor(id?: string, tables?: Table[]) {
|
||||
constructor(id?: string, tables?: Table[], progress?: number) {
|
||||
this.id = id;
|
||||
this.tables = tables || [];
|
||||
this.progress = progress || 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -43,7 +45,7 @@ export class TableSimulationSerializer implements Serializable<TableSimulation>
|
||||
}
|
||||
},
|
||||
}
|
||||
}));
|
||||
}), data.progress);
|
||||
}
|
||||
|
||||
toJson(simulation: TableSimulation): string {
|
||||
|
||||
@ -10,11 +10,21 @@ import { loadTableSimulations } from "@/app/api/tableSimulations";
|
||||
import { ArchiveBoxXMarkIcon, CheckBadgeIcon } from "@heroicons/react/24/outline";
|
||||
import { Tooltip } from "primereact/tooltip";
|
||||
import clsx from "clsx";
|
||||
import { ProgressBar } from "primereact/progressbar";
|
||||
import { useEffect } from "react";
|
||||
import { TableSimulation, TableSimulationSerializer } from "@/app/lib/tableSimulation";
|
||||
import { AbstractApi } from "@/app/api/abstract-api";
|
||||
|
||||
export default function ArrangementsTable({ onArrangementSelected }: { onArrangementSelected: (arrangementId: string) => void }) {
|
||||
const [arrangements, setArrangements] = useState<Array<TableArrangement>>([]);
|
||||
const [arrangementsLoaded, setArrangementsLoaded] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
refreshSimulations();
|
||||
const interval = setInterval(refreshSimulations, 10000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
function refreshSimulations() {
|
||||
loadTableSimulations((arrangements) => {
|
||||
setArrangements(arrangements);
|
||||
@ -26,11 +36,9 @@ export default function ArrangementsTable({ onArrangementSelected }: { onArrange
|
||||
onArrangementSelected(e.currentTarget.getAttribute('data-arrangement-id') || '');
|
||||
}
|
||||
|
||||
!arrangementsLoaded && refreshSimulations();
|
||||
|
||||
return (
|
||||
<TableOfContents
|
||||
headers={['Name', 'Discomfort', 'Actions', 'Status']}
|
||||
headers={['Name', 'Discomfort', 'Status', 'Actions']}
|
||||
caption='Simulations'
|
||||
elements={arrangements}
|
||||
rowRender={(arrangement) => (
|
||||
@ -44,17 +52,18 @@ export default function ArrangementsTable({ onArrangementSelected }: { onArrange
|
||||
<td className="px-6 py-4">
|
||||
{arrangement.discomfort}
|
||||
</td>
|
||||
<td>
|
||||
<button data-arrangement-id={arrangement.id} onClick={arrangementClicked} className={classNames('primary')}>Load</button>
|
||||
</td>
|
||||
<td>
|
||||
<td className="px-4">
|
||||
<Tooltip target=".tooltip-status" />
|
||||
|
||||
{
|
||||
arrangement.valid ?
|
||||
<CheckBadgeIcon className='size-6 tooltip-status' data-pr-position="right" data-pr-tooltip="Simulation is valid" /> :
|
||||
<ArchiveBoxXMarkIcon className='size-6 tooltip-status' data-pr-position="right" data-pr-tooltip="Simulation is expired due to attendance or affinity changes" />
|
||||
}
|
||||
<>
|
||||
{ arrangement.valid && arrangement.status === 'not_started' && <ProgressBar mode="indeterminate" style={{ height: '6px' }}></ProgressBar> }
|
||||
{ arrangement.valid && arrangement.status !== 'not_started' && <ProgressBar value={(100 * arrangement.progress).toFixed(2) }></ProgressBar> }
|
||||
|
||||
{ !arrangement.valid && 'The list of potential guests has changed since this simulation.' }
|
||||
</>
|
||||
</td>
|
||||
<td>
|
||||
<button data-arrangement-id={arrangement.id} onClick={arrangementClicked} className={classNames('primary')}>Load</button>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
8
pnpm-lock.yaml
generated
8
pnpm-lock.yaml
generated
@ -73,7 +73,7 @@ importers:
|
||||
version: 11.1.0
|
||||
zod:
|
||||
specifier: ^4.0.0
|
||||
version: 4.0.10
|
||||
version: 4.1.9
|
||||
devDependencies:
|
||||
'@playwright/test':
|
||||
specifier: ^1.52.0
|
||||
@ -1381,8 +1381,8 @@ packages:
|
||||
engines: {node: '>= 14'}
|
||||
hasBin: true
|
||||
|
||||
zod@4.0.10:
|
||||
resolution: {integrity: sha512-3vB+UU3/VmLL2lvwcY/4RV2i9z/YU0DTV/tDuYjrwmx5WeJ7hwy+rGEEx8glHp6Yxw7ibRbKSaIFBgReRPe5KA==}
|
||||
zod@4.1.9:
|
||||
resolution: {integrity: sha512-HI32jTq0AUAC125z30E8bQNz0RQ+9Uc+4J7V97gLYjZVKRjeydPgGt6dvQzFrav7MYOUGFqqOGiHpA/fdbd0cQ==}
|
||||
|
||||
snapshots:
|
||||
|
||||
@ -2645,4 +2645,4 @@ snapshots:
|
||||
|
||||
yaml@2.4.3: {}
|
||||
|
||||
zod@4.0.10: {}
|
||||
zod@4.1.9: {}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user