Compare commits
3 Commits
23783d4868
...
da0d1fe90a
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
da0d1fe90a | ||
| f6cbc88acd | |||
| 17b9a5e5b4 |
@ -8,7 +8,7 @@ import Arrangement from '@/app/ui/arrangements/arrangement';
|
|||||||
import ArrangementsTable from '@/app/ui/arrangements/arrangements-table';
|
import ArrangementsTable from '@/app/ui/arrangements/arrangements-table';
|
||||||
import { classNames } from '@/app/ui/components/button';
|
import { classNames } from '@/app/ui/components/button';
|
||||||
import { Toast } from 'primereact/toast';
|
import { Toast } from 'primereact/toast';
|
||||||
import React, { useRef, useState } from 'react';
|
import React, { useEffect, useRef, useState } from 'react';
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
const toast = useRef<Toast>(null);
|
const toast = useRef<Toast>(null);
|
||||||
|
|||||||
@ -13,6 +13,8 @@ export function loadTableSimulations(onLoad?: (tableSimulations: TableArrangemen
|
|||||||
name: record.name,
|
name: record.name,
|
||||||
discomfort: record.discomfort,
|
discomfort: record.discomfort,
|
||||||
valid: record.valid,
|
valid: record.valid,
|
||||||
|
progress: record.progress,
|
||||||
|
status : record.status
|
||||||
});
|
});
|
||||||
}));
|
}));
|
||||||
}, (error) => {
|
}, (error) => {
|
||||||
|
|||||||
@ -14,6 +14,8 @@ export type TableArrangement = {
|
|||||||
guests?: Guest[];
|
guests?: Guest[];
|
||||||
discomfort?: number;
|
discomfort?: number;
|
||||||
valid?: boolean;
|
valid?: boolean;
|
||||||
|
progress: number;
|
||||||
|
status: 'in_progress' | 'completed' | 'not_started';
|
||||||
}
|
}
|
||||||
|
|
||||||
export type User = {
|
export type User = {
|
||||||
|
|||||||
@ -22,10 +22,12 @@ export type Table = {
|
|||||||
export class TableSimulation implements Entity {
|
export class TableSimulation implements Entity {
|
||||||
id?: string;
|
id?: string;
|
||||||
tables: Table[];
|
tables: Table[];
|
||||||
|
progress: number;
|
||||||
|
|
||||||
constructor(id?: string, tables?: Table[]) {
|
constructor(id?: string, tables?: Table[], progress?: number) {
|
||||||
this.id = id;
|
this.id = id;
|
||||||
this.tables = tables || [];
|
this.tables = tables || [];
|
||||||
|
this.progress = progress || 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -43,7 +45,7 @@ export class TableSimulationSerializer implements Serializable<TableSimulation>
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}));
|
}), data.progress);
|
||||||
}
|
}
|
||||||
|
|
||||||
toJson(simulation: TableSimulation): string {
|
toJson(simulation: TableSimulation): string {
|
||||||
|
|||||||
@ -10,11 +10,21 @@ import { loadTableSimulations } from "@/app/api/tableSimulations";
|
|||||||
import { ArchiveBoxXMarkIcon, CheckBadgeIcon } from "@heroicons/react/24/outline";
|
import { ArchiveBoxXMarkIcon, CheckBadgeIcon } from "@heroicons/react/24/outline";
|
||||||
import { Tooltip } from "primereact/tooltip";
|
import { Tooltip } from "primereact/tooltip";
|
||||||
import clsx from "clsx";
|
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 }) {
|
export default function ArrangementsTable({ onArrangementSelected }: { onArrangementSelected: (arrangementId: string) => void }) {
|
||||||
const [arrangements, setArrangements] = useState<Array<TableArrangement>>([]);
|
const [arrangements, setArrangements] = useState<Array<TableArrangement>>([]);
|
||||||
const [arrangementsLoaded, setArrangementsLoaded] = useState(false);
|
const [arrangementsLoaded, setArrangementsLoaded] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
refreshSimulations();
|
||||||
|
const interval = setInterval(refreshSimulations, 10000);
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, []);
|
||||||
|
|
||||||
function refreshSimulations() {
|
function refreshSimulations() {
|
||||||
loadTableSimulations((arrangements) => {
|
loadTableSimulations((arrangements) => {
|
||||||
setArrangements(arrangements);
|
setArrangements(arrangements);
|
||||||
@ -26,11 +36,9 @@ export default function ArrangementsTable({ onArrangementSelected }: { onArrange
|
|||||||
onArrangementSelected(e.currentTarget.getAttribute('data-arrangement-id') || '');
|
onArrangementSelected(e.currentTarget.getAttribute('data-arrangement-id') || '');
|
||||||
}
|
}
|
||||||
|
|
||||||
!arrangementsLoaded && refreshSimulations();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TableOfContents
|
<TableOfContents
|
||||||
headers={['Name', 'Discomfort', 'Actions', 'Status']}
|
headers={['Name', 'Discomfort', 'Status', 'Actions']}
|
||||||
caption='Simulations'
|
caption='Simulations'
|
||||||
elements={arrangements}
|
elements={arrangements}
|
||||||
rowRender={(arrangement) => (
|
rowRender={(arrangement) => (
|
||||||
@ -44,17 +52,18 @@ export default function ArrangementsTable({ onArrangementSelected }: { onArrange
|
|||||||
<td className="px-6 py-4">
|
<td className="px-6 py-4">
|
||||||
{arrangement.discomfort}
|
{arrangement.discomfort}
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td className="px-4">
|
||||||
<button data-arrangement-id={arrangement.id} onClick={arrangementClicked} className={classNames('primary')}>Load</button>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<Tooltip target=".tooltip-status" />
|
<Tooltip target=".tooltip-status" />
|
||||||
|
|
||||||
{
|
<>
|
||||||
arrangement.valid ?
|
{ arrangement.valid && arrangement.status === 'not_started' && <ProgressBar mode="indeterminate" style={{ height: '6px' }}></ProgressBar> }
|
||||||
<CheckBadgeIcon className='size-6 tooltip-status' data-pr-position="right" data-pr-tooltip="Simulation is valid" /> :
|
{ arrangement.valid && arrangement.status !== 'not_started' && <ProgressBar value={(100 * arrangement.progress).toFixed(2) }></ProgressBar> }
|
||||||
<ArchiveBoxXMarkIcon className='size-6 tooltip-status' data-pr-position="right" data-pr-tooltip="Simulation is expired due to attendance or affinity changes" />
|
|
||||||
}
|
{ !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>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@ -24,7 +24,7 @@
|
|||||||
"react": "19.0.0-rc-f38c22b244-20240704",
|
"react": "19.0.0-rc-f38c22b244-20240704",
|
||||||
"react-dom": "19.0.0-rc-f38c22b244-20240704",
|
"react-dom": "19.0.0-rc-f38c22b244-20240704",
|
||||||
"tailwindcss": "3.4.17",
|
"tailwindcss": "3.4.17",
|
||||||
"typescript": "5.8.3",
|
"typescript": "5.9.2",
|
||||||
"use-debounce": "^10.0.1",
|
"use-debounce": "^10.0.1",
|
||||||
"uuid": "11.1.0",
|
"uuid": "11.1.0",
|
||||||
"zod": "^4.0.0"
|
"zod": "^4.0.0"
|
||||||
|
|||||||
10
pnpm-lock.yaml
generated
10
pnpm-lock.yaml
generated
@ -63,8 +63,8 @@ importers:
|
|||||||
specifier: 3.4.17
|
specifier: 3.4.17
|
||||||
version: 3.4.17
|
version: 3.4.17
|
||||||
typescript:
|
typescript:
|
||||||
specifier: 5.8.3
|
specifier: 5.9.2
|
||||||
version: 5.8.3
|
version: 5.9.2
|
||||||
use-debounce:
|
use-debounce:
|
||||||
specifier: ^10.0.1
|
specifier: ^10.0.1
|
||||||
version: 10.0.5(react@19.0.0-rc-f38c22b244-20240704)
|
version: 10.0.5(react@19.0.0-rc-f38c22b244-20240704)
|
||||||
@ -1320,8 +1320,8 @@ packages:
|
|||||||
tslib@2.8.1:
|
tslib@2.8.1:
|
||||||
resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
|
resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
|
||||||
|
|
||||||
typescript@5.8.3:
|
typescript@5.9.2:
|
||||||
resolution: {integrity: sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==}
|
resolution: {integrity: sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==}
|
||||||
engines: {node: '>=14.17'}
|
engines: {node: '>=14.17'}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
|
|
||||||
@ -2591,7 +2591,7 @@ snapshots:
|
|||||||
|
|
||||||
tslib@2.8.1: {}
|
tslib@2.8.1: {}
|
||||||
|
|
||||||
typescript@5.8.3: {}
|
typescript@5.9.2: {}
|
||||||
|
|
||||||
uc.micro@2.1.0: {}
|
uc.micro@2.1.0: {}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user