pos /master /serve 杯数の表示＆色分けなど見やすく

cafeore-tkb · Oct 6, 2024 · fa5f8c8 · fa5f8c8
1 parent 7a3ca17
commit fa5f8c8
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 8 deletions.
diff --git a/app/routes/_header.serve.tsx b/app/routes/_header.serve.tsx
@@ -31,7 +31,7 @@ export default function Serve() {
   const submit = useSubmit();
   const { data: orders } = useSWRSubscription(
     "orders",
-    collectionSub({ converter: orderConverter }, orderBy("orderId", "desc")),
+    collectionSub({ converter: orderConverter }, orderBy("orderId", "asc")),
   );
 
   const unserved = orders?.reduce((acc, cur) => {
@@ -69,6 +69,9 @@ export default function Serve() {
                   <CardHeader>
                     <div className="flex justify-between">
                       <CardTitle>{`No. ${order.orderId}`}</CardTitle>
+                      <CardTitle className="flex h-10 w-10 items-center justify-center rounded-full border-2 border-stone-500">
+                        {order.items.length}
+                      </CardTitle>
                       <p>{order.createdAt.toLocaleTimeString()}</p>
                     </div>
                   </CardHeader>
@@ -82,11 +85,13 @@ export default function Serve() {
                                 "pt-6",
                                 item.type === "milk" && "bg-yellow-200",
                                 item.type === "hotOre" && "bg-orange-300",
-                                item.type === "iceOre" && "bg-blue-300",
+                                item.type === "iceOre" && "bg-sky-300",
                               )}
                             >
                               <h3>{item.name}</h3>
-                              <p>{type2label[item.type]}</p>
+                              <p className="text-sm text-stone-400">
+                                {type2label[item.type]}
+                              </p>
                             </CardContent>
                           </Card>
                         </div>

diff --git a/app/routes/master.tsx b/app/routes/master.tsx
@@ -4,6 +4,7 @@ import useSWRSubscription from "swr/subscription";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import { orderConverter } from "~/firebase/converter";
 import { collectionSub } from "~/firebase/subscription";
+import { cn } from "~/lib/utils";
 import { type2label } from "~/models/item";
 
 export const meta: MetaFunction = () => {
@@ -13,7 +14,7 @@ export const meta: MetaFunction = () => {
 export default function FielsOfMaster() {
   const { data: orders } = useSWRSubscription(
     "orders",
-    collectionSub({ converter: orderConverter }, orderBy("orderId", "desc")),
+    collectionSub({ converter: orderConverter }, orderBy("orderId", "asc")),
   );
 
   return (
@@ -32,6 +33,9 @@ export default function FielsOfMaster() {
                   <CardHeader>
                     <div className="flex justify-between">
                       <CardTitle>{`No. ${order.orderId}`}</CardTitle>
+                      <CardTitle className="flex h-10 w-10 items-center justify-center rounded-full border-2 border-stone-500">
+                        {order.items.length}
+                      </CardTitle>
                       <p>{order.createdAt.toLocaleTimeString()}</p>
                     </div>
                   </CardHeader>
@@ -40,10 +44,23 @@ export default function FielsOfMaster() {
                       {order.items.map((item) => (
                         <div key={item.id}>
                           <Card>
-                            <CardContent className="pt-6">
-                              <h3>{item.name}</h3>
-                              <p>{type2label[item.type]}</p>
-                              <p>指名:{item.assignee ?? "なし"}</p>
+                            <CardContent
+                              className={cn(
+                                "pt-6",
+                                item.type === "hot" && "bg-red-300",
+                                item.type === "ice" && "bg-blue-300",
+                                item.type === "hotOre" && "bg-orange-300",
+                                item.type === "iceOre" && "bg-sky-300",
+                                item.type === "milk" && "bg-yellow-200",
+                              )}
+                            >
+                              <h3 className="font-bold">{item.name}</h3>
+                              <p className="text-sm text-stone-500">
+                                {type2label[item.type]}
+                              </p>
+                              {item.assignee && (
+                                <p className="text-sm">指名:{item.assignee}</p>
+                              )}
                             </CardContent>
                           </Card>
                         </div>