color changes, client, realization time

frontend/app/kitchen/page.tsx

@@ -2,19 +2,9 @@
 
 import { fetcher } from '@/app/api/tools';
 import useSWR from 'swr';
-import Link from 'next/link';
 import { useEffect, useRef, useState } from 'react';
-
-type Order = {
-  id: number;
-  created_on: string;
-  updated_on: string;
-  waiter: number;
-  waiter_name: string;
-  data: [{ item: string; additional_info: string; finished: boolean }];
-  status: number;
-  status_name: string;
-};
+import { getDishBg, getOrderBg, Order } from '../tools';
+import { OrderID } from '../components';
 
 export default function Home() {
   const audioRef = useRef({} as HTMLAudioElement);
@@ -25,11 +15,7 @@ export default function Home() {
   });
 
   const play = () => {
-    if (audioRef.current) {
-      audioRef.current.play();
-    } else {
-      // Throw error
-    }
+    if (audioRef.current) audioRef.current.play();
   };
 
   useEffect(() => {
@@ -48,12 +34,11 @@ export default function Home() {
       play();
       setPlayedIDs(playedIDs.concat(justPlayed));
     }
-  }, [data]);
+  }, [playedIDs, data]);
 
   const update_finished = (o: number, i: number, v: boolean) => {
-    let d = data;
+    const d = data;
     d[o].data[i].finished = v;
-    console.log(v);
     fetch(`/api/orders?id=${d[o].id}`, {
       method: 'PUT',
       body: JSON.stringify(d[o]),
@@ -64,9 +49,8 @@ export default function Home() {
   };
 
   const update_status = (o: number, v: number) => {
-    let d = data;
+    const d = data;
     d[o].status = v;
-    console.log(v);
     fetch(`/api/orders?id=${d[o].id}`, {
       method: 'PUT',
       body: JSON.stringify(d[o]),
@@ -87,36 +71,23 @@ export default function Home() {
         {data?.map((order: Order, oi: number) => (
           <li
             key={order.id}
-            className={`m-2 p-2 rounded-md border-2 ${
-              {
-                1: 'bg-red-200 border-red-400',
-                2: 'bg-purple-200 border-purple-400',
-                3: 'bg-green-200 border-green-400',
-                4: 'bg-gray-100 border-gray-400',
-              }[order.status]
-            }`}
+            className={`m-2 p-2 rounded-md border-2 ${getOrderBg(order)}`}
           >
-            <h1 className="text-xl">
-              <span className="font-mono">
-                {'['}
-                {String(order.id % 1000).padStart(3, '0')}
-                {']'}
-              </span>{' '}
-              - {new Date(order.updated_on).toLocaleTimeString('pl-PL')}
-            </h1>
+            <OrderID order={order} />
             <h2 className="text-xl">{order.waiter_name}</h2>
+            { (order.client) ? <h2 className="text-xl">Klient: {order.client}</h2> : <></>}
             <h3>
               <select
                 value={order.status}
                 onChange={(e) =>
                   update_status(oi, e.target.value as unknown as number)
                 }
-                className="form border-2 border-gray-500"
+                className="form border-2 my-2 border-gray-500"
               >
                 <option value="1">Zamówienie złożone</option>
                 <option value="2">Zamówienie w trakcie przygotowywania</option>
                 <option value="3">Zamówienie gotowe</option>
-                <option value="4">Zamówienie skończone</option>
+                <option value="4">Zamówienie zrealizowane</option>
               </select>
             </h3>
             <div className="">
@@ -124,7 +95,7 @@ export default function Home() {
                 {order.data.map((dish, i) => (
                   <li
                     key={dish.item}
-                    className={`p-2 m-2 flex gap-4 border-2 bg-white border-gray-400`}
+                    className={`p-2 m-2 flex gap-4 border-2 ${getDishBg(dish)}`}
                   >
                     <input
                       type="checkbox"
@@ -132,7 +103,7 @@ export default function Home() {
                       onChange={(e) => update_finished(oi, i, e.target.checked)}
                     />
                     <div>
-                      <p className="text-lg">{dish.item}</p>
+                      <p className="text-lg">{dish.item} - {dish.takeout ? 'Na wynos' : 'Na miejscu'}</p>
                       <div>{dish.additional_info}</div>
                     </div>
                   </li>