Merge pull request 'Display the discomfort breakdown in the tables diagram' (#154) from discomfort-breakdown into main

Reviewed-on: #154

app/api/abstract-api.tsx

@@ -5,6 +5,7 @@ import { getCsrfToken, getSlug } from '@/app/lib/utils';
 
 export interface Api<T extends Entity> {
   getAll(serializable: Serializable<T> ,callback: (objets: T[]) => void): void;
+  get(serializable: Serializable<T>, id: string, callback: (object: T) => void): void;
   create(serializable: Serializable<T>, object: T, callback: () => void): void;
   update(serializable: Serializable<T>, object: T, callback: () => void): void;
   destroy(serializable: Serializable<T>, object: T, callback: () => void): void;
@@ -29,6 +30,16 @@ export class AbstractApi<T extends Entity> implements Api<T> {
       });
   }
 
+  get(serializable: Serializable<T>, id: string, callback: (object: T) => void): void {
+    fetch(`/api/${getSlug()}/${serializable.apiPath()}/${id}`)
+      .then((response) => response.json())
+      .then((data) => {
+        callback(serializable.fromJson(data));
+      }, (error) => {
+        return [];
+      });
+  }
+
   update(serializable: Serializable<T>, object: T, callback: () => void): void {
     fetch(`/api/${getSlug()}/${serializable.apiPath()}/${object.id}`, {
       method: 'PUT',

app/lib/definitions.ts

@@ -15,17 +15,6 @@ export type TableArrangement = {
   discomfort?: number
 }
 
-export type guestsTable = {
-  id: string;
-  customer_id: string;
-  name: string;
-  email: string;
-  image_url: string;
-  date: string;
-  amount: number;
-  status: 'pending' | 'paid';
-};
-
 export type User = {
   id: string;
   email: string;

app/lib/tableSimulation.tsx

@@ -0,0 +1,71 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import { Serializable } from "../api/abstract-api";
+import { Entity } from "./definitions";
+import { Guest } from "./guest";
+
+export type Discomfort = {
+  discomfort: number;
+  breakdown: {
+    tableSizePenalty: number;
+    cohesionPenalty: number;
+  }
+}
+
+export type Table = {
+  number: number;
+  guests: Guest[];
+  discomfort: Discomfort;
+}
+
+export class TableSimulation implements Entity {
+  id: string;
+  tables: Table[];
+
+  constructor(id: string, tables: Table[]) {
+    this.id = id;
+    this.tables = tables;
+  }
+}
+
+export class TableSimulationSerializer implements Serializable<TableSimulation> {
+  fromJson(data: any): TableSimulation {
+    return new TableSimulation(data.id, data.tables.map((table: any) => {
+      return {
+        number: table.number,
+        guests: table.guests.map((guest: any) => new Guest(guest.id, guest.name, guest.group?.name, guest.group?.id, guest.color)),
+        discomfort: {
+          discomfort: table.discomfort.discomfort,
+          breakdown: {
+            tableSizePenalty: table.discomfort.breakdown.table_size_penalty,
+            cohesionPenalty: table.discomfort.breakdown.cohesion_penalty,
+          }
+        },
+      }
+    }));
+  }
+
+  toJson(simulation: TableSimulation): string {
+    return JSON.stringify({ simulation: { tables: simulation.tables.map((table) => {
+      return {
+        number: table.number,
+        guests: table.guests.map((guest) => {
+          return {
+            id: guest.id,
+            name: guest.name,
+            group_id: guest.groupId,
+            color: guest.color,
+            status: guest.status,
+            children: guest.children,
+          }
+        }),
+        discomfort: table.discomfort,
+      }
+    }) } });
+  }
+
+  apiPath(): string {
+    return 'tables_arrangements';
+  }
+}
+

app/ui/arrangements/arrangement.tsx

@@ -2,44 +2,37 @@
 
 'use client';
 
-import React, { useState } from 'react';
+import { AbstractApi } from '@/app/api/abstract-api';
 import { TableArrangement } from '@/app/lib/definitions';
-import { lusitana } from '@/app/ui/fonts';
+import { TableSimulation, TableSimulationSerializer } from '@/app/lib/tableSimulation';
-import { Table } from '@/app/ui/components/table';
 import { getSlug } from '@/app/lib/utils';
+import { Table } from '@/app/ui/components/table';
+import { lusitana } from '@/app/ui/fonts';
+import { useState, useEffect } from 'react';
 
 export default function Arrangement({ id }: { id: string }) {
 
-    const [tables, setTables] = useState<Array<TableArrangement>>([]);
+  const [simulation, setSimulation] = useState<TableSimulation | undefined>(undefined);
 
-    function loadTables() {
+  function loadSimulation() {
-        fetch(`/api/${getSlug()}/tables_arrangements/${id}`)
+    new AbstractApi<TableSimulation>().get(new TableSimulationSerializer(), id, (object: TableSimulation) => {
-            .then((response) => response.json())
+      setSimulation(object);
-            .then((data) => {
+    });
-                setTables(data.map((record: any) => {
+  }
-                    return ({
-                        id: record.number,
-                        guests: record.guests
-                    });
-                }));
-            }, (error) => {
-                return [];
-            });
-    }
 
-    tables.length === 0 && loadTables();
+  useEffect(loadSimulation, []);
 
-    return (
+  return (
-        <div className="w-full">
+    <div className="w-full">
-            <div className="w-full items-center justify-between">
+      <div className="w-full items-center justify-between">
-                <h1 className={`${lusitana.className} text-2xl my-5`}>Table distributions</h1>
+        <h1 className={`${lusitana.className} text-2xl my-5`}>Table distributions</h1>
-                <div className="flex flex-row flex-wrap justify-around">
+        <div className="flex flex-row flex-wrap justify-around">
-                    {tables.map((table) => (
+          {simulation && simulation.tables.map((table) => (
-                        <Table key={table.number} guests={table.guests || []} style="rounded" />
+            <Table key={table.number} table={table} style="rounded" />
-                    ))}
+          ))}
-                </div>
-            </div>
         </div>
-    )
+      </div>
+    </div>
+  )
 
 }

app/ui/components/table.tsx

@@ -1,69 +1,107 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
 import { Guest } from "@/app/lib/guest";
+import { Table as TableType } from "@/app/lib/tableSimulation";
+import { RectangleGroupIcon, UserGroupIcon } from "@heroicons/react/24/outline";
+import { v4 as uuidv4 } from 'uuid';
+import { Tooltip } from "primereact/tooltip";
+import clsx from "clsx";
 
 
 function Dish({ guest, rotation }: { guest: Guest, rotation?: number }) {
-    rotation = rotation || 0
+  rotation = rotation || 0
-    return (
+  return (
-        <div className={`m-3 w-24 h-24 rounded-full content-center text-center cursor-default`} style={{
+    <div className={`m-3 w-24 h-24 rounded-full content-center text-center cursor-default`} style={{
-            rotate: `${360 - rotation}deg`,
+      rotate: `${360 - rotation}deg`,
-            backgroundColor: guest.color,
+      backgroundColor: guest.color,
-        }}>
+    }}>
-            {guest.name}
+      {guest.name}
-        </div>
+    </div>
-    )
+  )
 }
 
-
 function GuestRow({ guests }: { guests: Guest[] }) {
-    return (
+  return (
-        <div className="justify-around flex flex-row">
+    <div className="justify-around flex flex-row">
-            {guests.map((guest) => <Dish key={guest.id} guest={guest} />)}
+      {guests.map((guest) => <Dish key={guest.id} guest={guest} />)}
-        </div>
+    </div>
-    )
+  )
 }
 
-function RectangularTable({ guests }: { guests: Guest[] }) {
+function RectangularTable({ table }: { table: TableType }) {
-    const halfwayThrough = Math.floor(guests.length / 2)
+  const guests = table.guests;
-    const arrayFirstHalf = guests.slice(0, halfwayThrough);
+  const halfwayThrough = Math.floor(guests.length / 2)
-    const arraySecondHalf = guests.slice(halfwayThrough, guests.length);
+  const arrayFirstHalf = guests.slice(0, halfwayThrough);
+  const arraySecondHalf = guests.slice(halfwayThrough, guests.length);
 
-    return (
+  return (
-        <div className="m-12 h-64 bg-cyan-800 flex flex-col justify-between">
+    <div className="m-12 h-64 bg-cyan-800 flex flex-col justify-between">
-            <GuestRow guests={arrayFirstHalf} />
+      <GuestRow guests={arrayFirstHalf} />
-            <GuestRow guests={arraySecondHalf} />
+      <GuestRow guests={arraySecondHalf} />
-        </div>
+    </div>
-    )
+  )
 }
 
-function RoundedTable({ guests }: { guests: Guest[] }) {
+function RoundedTable({ table }: { table: TableType }) {
-    const size = 500
+  const guests = table.guests;
-    const rotation = 360 / guests.length
+  const size = 500
-    return (
+  const rotation = 360 / guests.length
-        <div className={`m-12 rounded-full bg-cyan-800 relative z-0`} style={{ width: `${size}px`, height: `${size}px` }}>
+
-            {
+  const className = (penalty: number) => {
-                guests.map((guest, index) => {
+    return clsx("px-2 tooltip-cohesion", {
-                    return (
+      "hidden": penalty === 0,
-                        <div key={guest.id} className={`border-dashed grid justify-items-center absolute inset-0`} style={{
+      "text-orange-300": penalty <= 5,
-                            rotate: `${index * rotation}deg`,
+      "text-orange-500": penalty > 5 && penalty <= 10,
-                            height: `${size}px`,
+      "text-orange-700": penalty > 10,
-                            width: `${size}px`,
+    })
-                        }}>
+  }
-                            <Dish guest={guest} rotation={index * rotation} />
+
-                        </div>
+
-                    )
+  return (
-                })
+    <div className={`m-12 rounded-full bg-cyan-800 relative z-0 grid flex items-center justify-items-center`} style={{ width: `${size}px`, height: `${size}px` }}>
-            }
+
-        </div>
+      {
-    )
+        guests.map((guest, index) => {
+          return (
+            <div key={guest.id} className={`border-dashed grid justify-items-center absolute inset-0`} style={{
+              rotate: `${index * rotation}deg`,
+              height: `${size}px`,
+              width: `${size}px`,
+            }}>
+              <Dish guest={guest} rotation={index * rotation} />
+            </div>
+          )
+        })
+      }
+
+      <div className="bg-zinc-200 w-48 h-12 p-3 flex flex-row rounded z-10">
+        <div className="px-2 text-slate-800">{`Table #${table.number}`}</div>
+
+
+        <Tooltip target=".tooltip-cohesion" />
+        <Tooltip target=".tooltip-size" />
+
+        <RectangleGroupIcon
+          className={className(table.discomfort.breakdown.cohesionPenalty)}
+          data-pr-tooltip={`Cohesion penalty: ${Math.round(table.discomfort.breakdown.cohesionPenalty)}`}
+          data-pr-position="top"
+        />
+
+        <UserGroupIcon
+          className={className(table.discomfort.breakdown.tableSizePenalty)}
+          data-pr-tooltip={`Table size penalty: ${Math.round(table.discomfort.breakdown.tableSizePenalty)}`}
+          data-pr-position="top"
+        />
+      </div>
+    </div>
+  )
 }
 
-export function Table({ guests, style }: { guests: Guest[], style: "rectangular" | "rounded" }) {
+export function Table({ table, style }: { table: TableType, style: "rectangular" | "rounded" }) {
-    return (
+  return (
-        <>
+    <>
-            {style === "rectangular" && <RectangularTable guests={guests} />}
+      {style === "rectangular" && <RectangularTable table={table} />}
-            {style === "rounded" && <RoundedTable guests={guests} />}
+      {style === "rounded" && <RoundedTable table={table} />}
-        </>
+    </>
-    )
+  )
 }

package.json

@@ -21,6 +21,7 @@
     "tailwindcss": "3.4.16",
     "typescript": "5.7.2",
     "use-debounce": "^10.0.1",
+    "uuid": "11.0.3",
     "zod": "^3.23.8"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -53,6 +53,9 @@ importers:
       use-debounce:
         specifier: ^10.0.1
         version: 10.0.4(react@19.0.0-rc-f38c22b244-20240704)
+      uuid:
+        specifier: 11.0.3
+        version: 11.0.3
       zod:
         specifier: ^3.23.8
         version: 3.24.1
@@ -1117,6 +1120,10 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
+  uuid@11.0.3:
+    resolution: {integrity: sha512-d0z310fCWv5dJwnX1Y/MncBAqGMKEzlBb1AOf7z9K8ALnd0utBX/msg/fA0+sbyN1ihbMsLhrBlnl1ak7Wa0rg==}
+    hasBin: true
+
   webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
 
@@ -2116,6 +2123,8 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
+  uuid@11.0.3: {}
+
   webidl-conversions@3.0.1: {}
 
   whatwg-url@5.0.0: