Fix bug where seat occupation was calculated wrong

package.json

@@ -34,6 +34,7 @@
     "ol": "^7.3.0",
     "postcss": "8.4.21",
     "react": "18.2.0",
+    "react-async": "^10.0.1",
     "react-dom": "18.2.0",
     "react-i18next": "^12.2.0",
     "react-leaflet": "^4.2.1",

src/components/Database.tsx

@@ -41,7 +41,10 @@ export interface ISeat {
 export interface ISeatOccupation {
     id: number,
     occupied: number,
-    left: number
+    left: number,
+
+    /// Guests IDs
+    guests: number[] | null
 }
 
 export async function initDatabase(db: Database, databaseName: string, schematics: IFloor[]): Promise<boolean> {
@@ -336,38 +339,53 @@ export async function toggleGuestStatus(db: Database, guestId: number) {
 export async function getSeatOccupations(db: Database): Promise<ISeatOccupation[]> {
     try {
         let queryResult: any[] = await db.select(`SELECT
-        s.id,
-        s.capacity,
-        (CASE WHEN p.id IS NULL THEN s.capacity ELSE s.capacity - (p.guests_amount + 1) END) AS \`left\`
+            s.id AS s_id,
+            p.id AS u_id,
+            s.capacity,
+            p.guests_amount
         FROM seat AS s
         LEFT JOIN participant AS p ON p.seat_id = s.id`)
 
         // Id seen at index
-        let seenIds = new Map<number, number>()
+        let indexed = new Map<number, { capacity: number, left: number, guests: number[] | null }>()
 
-        queryResult = queryResult.filter((x, i) => {
-            if (seenIds.has(x.id)) {
-                let seenIndex = seenIds.get(x.id)!
-                queryResult[seenIndex].left -= x.left
+        console.time("db")
 
-                return false
+        // Copy results into mapü
+        for (let i = 0; i < queryResult.length; i++) {
+            const x = queryResult[i];
+            if (indexed.has(x.s_id)) {
+                let table = indexed.get(x.s_id)!
+                table.left -= x.guests_amount + 1
+
+                if (table.guests === null ) {
+                    table.guests = [x.u_id]
+                } else {
+                    table.guests.push(x.u_ui)
+                }
+
+                indexed.set(x.s_id, table)
+                continue
             }
 
-            seenIds.set(x.id, i)
-            return true
-        })
-
+            indexed.set(x.s_id, {
+                capacity: x.capacity,
+                left: x.capacity - (x.guests_amount + 1),
+                guests: null
+            })
+        }
+        console.timeEnd("db")
         let result: ISeatOccupation[] = []
 
-        for (let i = 0; i < queryResult.length; i++) {
-            const element = queryResult[i];
-
+        // Map to array
+        for (const [key, value] of indexed.entries()) {            
             result.push({
-                id: element.id,
-                left: element.left,
-                occupied: element.capacity - element.left
+                id: key,
+                left: value.left,
+                occupied: value.capacity - value.left,
+                guests: value.guests
             })
-        }
+        }        
 
         return result
     } catch (err) {

src/components/Map.tsx

@@ -12,12 +12,14 @@ import { DeleteIcon } from './icons/DeleteIcon';
 import { TFunction } from 'next-i18next';
 import { UsersIcon } from './icons/UsersIcon';
 import Database from 'tauri-plugin-sql-api';
+import { useAsync } from 'react-async';
 
 interface IMapSeat extends ISeat {
     bounds?: LatLngBounds,
     divIcon?: L.DivIcon,
     textPosition?: LatLng,
-    fillColor?: string
+    fillColor?: string,
+    occupation?: ISeatOccupation
 }
 
 export type MapProps = {
@@ -28,6 +30,7 @@ export type MapProps = {
     mapHeight: number,
     enableSeatEdit?: boolean,
     seats: ISeat[],
+    guests: IGuest[],
 
     /// Stores amount of needed occupation space
     assignGuest?: IGuest,
@@ -71,22 +74,24 @@ const SeatViewer: React.FC<SeatViewerProps> = ({ seats, addNewSeat, enableSeatEd
     let mapSeats: IMapSeat[] = seats
     mapSeats.map(x => {
         x.bounds = latLngBounds([x.lat1, x.lng1], [x.lat2, x.lng2])
-        x.divIcon = L.divIcon({ html: "Sitz " + x.name, className: "map-marker", iconSize: L.point(128, 32) })
 
         let textPosition = x.bounds.getCenter().clone()
         textPosition.lng -= 0
 
         x.textPosition = textPosition
         x.fillColor = "#4BB2F2"
 
-        if (assignGuest !== undefined && occupations !== undefined) {
-            // Occupation of this seat
+        if (occupations !== undefined) {
             let occupation = occupations.find(o => o.id == x.id)
-            if (occupation === undefined) {
-                return
-            }
+            x.occupation = occupation
+            x.divIcon = L.divIcon({ html: `<p>Sitz ${x.name}</p><br /><small>${x.occupation!.left} Plätze frei</small>`, className: "map-marker", iconSize: L.point(128, 32) })
+        } else {
+            x.divIcon = L.divIcon({ html: `<p>Sitz ${x.name}</p>`, className: "map-marker", iconSize: L.point(128, 32) })
+        }
 
-            if (occupation?.left < (assignGuest.additionalGuestAmount + 1)) {
+        if (assignGuest !== undefined && occupations !== undefined) {
+            // Occupation of this seat
+            if (x.occupation!.left < (assignGuest.additionalGuestAmount + 1)) {
                 x.fillColor = "#F23838"
             }
         }
@@ -96,16 +101,12 @@ const SeatViewer: React.FC<SeatViewerProps> = ({ seats, addNewSeat, enableSeatEd
         click(e) {
             if (assignGuest !== undefined && occupations !== undefined) {
                 const seat = getSeatAt(map, mapSeats, e.containerPoint)
-                let occupation = occupations.find(o => o.id == seat?.id)
-                if (occupation === undefined) {
-                    return
-                }
 
-                if (occupation?.left < (assignGuest.additionalGuestAmount + 1)) {
+                if (seat === null) {
                     return
                 }
 
-                if (seat === null) {
+                if (seat.occupation?.left! < (assignGuest.additionalGuestAmount + 1)) {
                     return
                 }
 
@@ -203,7 +204,21 @@ const SeatDropdown: React.FC<SeatDropdownProps> = ({ t, db, seats, occupations,
     let [showContextMenu, setShowContextMenu] = useState(false)
     let [contextMenuCoords, setContextMenuCoords] = useState<number[]>([])
     let [targetSeat, setTargetSeat] = useState<IMapSeat | null>()
-    let [seatedGuests, setSeatedGuests] = useState<IGuest[] | null>(null)
+
+    // If we click on a seat, we store guests sitting at target seat here.
+    let { data } = useAsync({ promiseFn: async () => {
+        let g = occupations?.find(x => x.id == targetSeat)?.guests
+
+        // Fake guest to display total occupation in dropdown.
+        g.push({
+            id: -1,
+            additionalGuestAmount: 0,
+            additionalGuestCheckedin: 0,
+            checkedIn: false,
+            firstName: "",
+            lastName: ""
+        })
+    }})
 
     const map = useMapEvents({
         click(e) {
@@ -218,15 +233,6 @@ const SeatDropdown: React.FC<SeatDropdownProps> = ({ t, db, seats, occupations,
                 return (<></>)
             }
 
-            getGuestsOnSeat(db, targetSeat?.id!).then(g => {
-                if (g.length === 0) {
-                    setSeatedGuests(null)
-                    return
-                }
-
-                setSeatedGuests(g)
-            })
-
             setContextMenuCoords([e.containerPoint.x, e.containerPoint.y])
             setShowContextMenu(true)
 
@@ -254,23 +260,23 @@ const SeatDropdown: React.FC<SeatDropdownProps> = ({ t, db, seats, occupations,
             <Dropdown.Menu
                 variant="light"
                 aria-label="Actions"
-                disabledKeys={["people"]}
+                disabledKeys={["people", "loading"]}
+                items={data || []}
                 onAction={(key) => {
                     if (key.toString() == "delete") {
 
                     }
                 }}
             >
-                <Dropdown.Item key="people" icon={<UsersIcon />}>
-                    {t("seats")}: {thisSeat.occupied} {t("of")} {targetSeat?.capacity}
-                </Dropdown.Item>
-                {/*seatedGuests !== null &&
-                    seatedGuests.map(x => {
-                        <Dropdown.Item>
-                            { x.firstName } { x.lastName } + { x.additionalGuestAmount }
+                {(item: any) =>
+                    item.id === -1 ?
+                        <Dropdown.Item key="people" icon={<UsersIcon />} withDivider={data!.length > 1}>
+                            {t("seats")}: {thisSeat.occupied} {t("of")} {targetSeat?.capacity}
+                        </Dropdown.Item> :
+                        <Dropdown.Item key={"i" + item.id}>
+                            {item.firstName} {item.lastName} + {item.additionalGuestAmount}
                         </Dropdown.Item>
-                    })
-                */}
+                }
             </Dropdown.Menu>
         </Dropdown>
     </>)

src/pages/[locale]/editor/index.tsx

@@ -136,7 +136,6 @@ export default function Router() {
     setGuestEdit(false)
     setAssignGuest(guest)
     setOccupations(await getSeatOccupations(database!))
-    console.log(occupations);
   }
 
   /// Later called by map after startGuestOccupation() has been called.
@@ -234,6 +233,7 @@ export default function Router() {
             mapWidth={mapWidth}
             enableSeatEdit={seatEdit}
             seats={seats}
+            guests={guests}
             assignGuest={assignGuest}
             occupations={occupations}
             addNewSeat={addNewSeat}

src/styles/editor.css

@@ -37,6 +37,7 @@
     text-shadow: 
         0px 0px 3px rgba(0, 0, 0, 1);
     font-size: 14pt !important;
+    line-height: 0;
 }
 
 @keyframes edit-begin {

tsconfig.json

@@ -10,6 +10,7 @@
     "skipLibCheck": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
+    "downlevelIteration": true,
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",