colored orders + ping sound

backend/backend/urls.py

@@ -83,7 +83,7 @@ class OrderViewSet(viewsets.ModelViewSet):
     serializer_class = OrderSerializer
     filter_backends = [DjangoFilterBackend, filters.OrderingFilter]
     filterset_fields = ['waiter']
-    ordering = ['-updated_on']
+    ordering = ['-created_on']
 
     def get_queryset(self):
         five_minutes_ago = timezone.now() + datetime.timedelta(minutes=-5)

frontend/app/kitchen/page.tsx

@@ -3,6 +3,7 @@
 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;
@@ -11,15 +12,44 @@ type Order = {
   waiter: number;
   waiter_name: string;
   data: [{ item: string; additional_info: string; finished: boolean }];
-  status: string;
+  status: number;
   status_name: string;
 };
 
 export default function Home() {
+  const audioRef = useRef({} as HTMLAudioElement);
+  const [playedIDs, setPlayedIDs] = useState<number[]>([]);
+
   const { data, mutate, error, isLoading } = useSWR(`/api/orders`, fetcher, {
     refreshInterval: 1000,
   });
 
+  const play = () => {
+    if (audioRef.current) {
+      audioRef.current.play();
+    } else {
+      // Throw error
+    }
+  };
+
+  useEffect(() => {
+    if (!data) return;
+
+    const justPlayed = (data as Order[])
+      .filter(
+        (o) =>
+          new Date(o.updated_on).getTime() - new Date(o.created_on).getTime() <
+            10000 && o.status == 1
+      )
+      .map((o) => o.id)
+      .filter((id) => !playedIDs.includes(id));
+
+    if (justPlayed.length > 0) {
+      play();
+      setPlayedIDs(playedIDs.concat(justPlayed));
+    }
+  }, [data]);
+
   const update_finished = (o: number, i: number, v: boolean) => {
     let d = data;
     d[o].data[i].finished = v;
@@ -51,10 +81,21 @@ export default function Home() {
 
   return (
     <>
+      <audio ref={audioRef} src="/ping.wav"></audio>
       <p className="text-4xl">Zamówienia:</p>
       <ul className="max-w-screen-md w-full">
         {data?.map((order: Order, oi: number) => (
-          <li key={order.id} className="m-2 p-2 border-2 bg-gray-100">
+          <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]
+            }`}
+          >
             <h1 className="text-xl">
               <span className="font-mono">
                 {'['}
@@ -70,7 +111,7 @@ export default function Home() {
                 onChange={(e) =>
                   update_status(oi, e.target.value as unknown as number)
                 }
-                className='form'
+                className="form border-2 border-gray-500"
               >
                 <option value="1">Zamówienie złożone</option>
                 <option value="2">Zamówienie w trakcie przygotowywania</option>
@@ -83,7 +124,7 @@ export default function Home() {
                 {order.data.map((dish, i) => (
                   <li
                     key={dish.item}
-                    className="p-2 m-2 flex gap-4 bg-gray-200 border-2 border-gray-400"
+                    className={`p-2 m-2 flex gap-4 border-2 bg-white border-gray-400`}
                   >
                     <input
                       type="checkbox"

frontend/app/waiter/[id]/page.tsx

@@ -40,7 +40,17 @@ export default function Home() {
             status: string;
             status_name: string;
           }) => (
-            <li key={order.id} className="m-2 p-2 border-2 bg-gray-100">
+            <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]
+              }`}
+            >
               <h1 className="text-xl">
                 <span className="font-mono">
                   {'['}
@@ -56,7 +66,7 @@ export default function Home() {
                   {order.data.map((dish) => (
                     <li
                       key={dish.item}
-                      className="p-2 m-2 flex gap-4 bg-gray-200 border-2 border-gray-400"
+                      className="p-2 m-2 flex gap-4 bg-white border-2 border-gray-400"
                     >
                       <input type="checkbox" checked={dish.finished} readOnly />
                       <div>

frontend/tailwind.config.ts

@@ -1,7 +1,7 @@
 import type { Config } from "tailwindcss";
 
 export default {
-  darkMode: "class",
+  darkMode: "selector",
   content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",