OrderSets UI Improvement

generate.py

@@ -19,7 +19,7 @@ def pick_order(orders):
 
     for add_on in picked.add_ons:
         if add_on.probability > random.random():
-            result.append(add_on.name)
+            result.append(f"+ {add_on.name}")
 
     return (result, picked.repeat)
 

web/api.py

@@ -146,6 +146,8 @@ def sub_order_sets(username, sub):
       'time': op.time,
       'weekends': op.weekends,
       'weekdays': op.weekdays,
+      'probability': op.probability,
+      'punishment_pool_name': op.punishment_pool.name if op.punishment_pool is not None else None,
       'orders': [{
         'id': order.id,
       } for order in op.orders]

web/vite/src/OrderSets.tsx

@@ -1,5 +1,13 @@
 import React from "react";
-import { Title, Card, Text, Flex, Badge, Box } from "@mantine/core";
+import {
+  Title,
+  Card,
+  Text,
+  Flex,
+  Badge,
+  Box,
+  RingProgress,
+} from "@mantine/core";
 import { TimeValue } from "@mantine/dates";
 import { IconPencil, IconPlus, IconTrash } from "@tabler/icons-react";
 
@@ -10,8 +18,18 @@ import { useFetcher } from "react-router";
 export interface OrderSetProps {
   orderSets: (Pick<
     OrderSet,
-    "id" | "name" | "scheduled" | "time" | "weekends" | "weekdays" | "orders"
-  > & { orders: Pick<OrderSetOrder, "id" | "name"> })[];
+    | "id"
+    | "name"
+    | "scheduled"
+    | "time"
+    | "weekends"
+    | "weekdays"
+    | "orders"
+    | "probability"
+  > & {
+    orders: Pick<OrderSetOrder, "id" | "name">;
+    punishment_pool_name: string;
+  })[];
   username: string;
   linkBack?: React.ReactNode;
 }
@@ -41,7 +59,17 @@ export const OrderSets: React.FC<OrderSetProps> = ({
       <Flex gap="md" wrap="wrap">
         {orderSets
           ? orderSets.map(
-              ({ id, name, scheduled, orders, time, weekdays, weekends }) => (
+              ({
+                id,
+                name,
+                scheduled,
+                orders,
+                time,
+                weekdays,
+                weekends,
+                probability,
+                punishment_pool_name,
+              }) => (
                 <Card
                   key={id}
                   shadow="sm"
@@ -54,16 +82,33 @@ export const OrderSets: React.FC<OrderSetProps> = ({
                   <Flex direction="column" gap="md" h="100%">
                     <Title order={4}>{name}</Title>
                     {scheduled ? (
-                      <Flex gap="md" align="center">
+                      <>
                         <Text>
                           Scheduled: <TimeValue value={time} format="12h" />
                         </Text>
-                        {weekdays ? <Badge color="blue">Weekdays</Badge> : null}
-                        {weekends ? <Badge color="blue">Weekends</Badge> : null}
+                        <Flex gap="md" align="center">
+                          {weekdays ? (
+                            <Badge color="blue">Weekdays</Badge>
+                          ) : null}
+                          {weekends ? (
+                            <Badge color="blue">Weekends</Badge>
+                          ) : null}
+                          <RingProgress
+                            size={80}
+                            label={<Text size="xs">{probability * 100}%</Text>}
+                            sections={[
+                              { color: "cyan", value: probability * 100 },
+                            ]}
+                          />
                         </Flex>
+                      </>
                     ) : null}
                     <Text mb="md" flex={1}>
                       Orders: {orders.length}
+                      <br />
+                      {punishment_pool_name
+                        ? `Punishments: ${punishment_pool_name}`
+                        : null}
                     </Text>
                     <Flex gap="md" justify="end">
                       <ConfirmDialogButton