Add actual orders to the screen

website/orders/api/v1/filters.py

@@ -54,6 +54,7 @@ class Meta:
             ),
             "ready": ("exact",),
             "paid": ("exact",),
+            "picked_up": ("exact",),
             "type": ("exact",),
             "product": ("exact",),
         }

website/orders/api/v1/views.py

@@ -42,10 +42,9 @@ class OrderListCreateAPIView(ListCreateAPIView):
         "GET": ["orders:order"],
         "POST": ["orders:manage"],
     }
-    filter_backends = [
-        django_filters.rest_framework.DjangoFilterBackend,
-    ]
+    filter_backends = [django_filters.rest_framework.DjangoFilterBackend, filters.OrderingFilter]
     filterset_class = OrderFilter
+    ordering_fields = ["paid_at", "ready_at", "picked_up_at"]
     queryset = Order.objects.select_related("user", "product")
 
     def get_queryset(self):
@@ -107,9 +106,8 @@ class OrderRetrieveUpdateDestroyAPIView(LoggedRetrieveUpdateDestroyAPIView):
             "properties": {
                 "ready": {"type": "boolean"},
                 "paid": {"type": "boolean"},
-                "priority": {"type": "number"},
                 "picked_up": {"type": "boolean"},
-                "deprioritize": {"type": "boolean"},
+                "priority": {"type": "number"},
             },
         }
     )

website/orders/migrations/0008_order_picked_up_order_picked_up_at.py → website/orders/migrations/0009_order_picked_up_order_picked_up_at.py

@@ -1,28 +1,22 @@
-# Generated by Django 4.2.4 on 2023-11-12 09:32
+# Generated by Django 4.2.9 on 2024-03-10 09:10
 
 from django.db import migrations, models
 
 
 class Migration(migrations.Migration):
-
     dependencies = [
-        ("orders", "0007_order_deprioritize"),
+        ("orders", "0008_order_priority"),
     ]
 
     operations = [
         migrations.AddField(
             model_name="order",
             name="picked_up",
-            field=models.BooleanField(default=True),
+            field=models.BooleanField(default=False),
         ),
         migrations.AddField(
             model_name="order",
             name="picked_up_at",
             field=models.DateTimeField(blank=True, null=True),
         ),
-        migrations.AlterField(
-            model_name="order",
-            name="picked_up",
-            field=models.BooleanField(default=False),
-        ),
     ]

website/orders/models.py

@@ -550,7 +550,7 @@ class Order(models.Model):
     picked_up = models.BooleanField(default=False)
     picked_up_at = models.DateTimeField(null=True, blank=True)
 
-    type = models.PositiveIntegerField(choices=TYPES, default=0)
+    type = models.PositiveIntegerField(choices=TYPES, default=TYPE_ORDERED)
 
     priority = models.PositiveIntegerField(choices=PRIORITIES, default=PRIORITY_NORMAL)
 

website/orders/services.py

@@ -156,7 +156,6 @@ def add_user_order(
         user_association=user.association,
         paid=paid,
         ready=ready,
-        priority=priority,
         picked_up=picked_up,
         priority=priority,
     )

website/tosti/static/tosti/css/status-screen.css → website/orders/static/orders/css/status-screen.css

@@ -2,6 +2,13 @@
     height: 84px;
 }
 
+.order-list {
+    font-size: 30pt;
+    list-style-type: none;
+    padding-inline-start: unset;
+    padding: unset;
+}
+
 @media screen and (max-width: 992px) {
     .site-header {
         height: 59px;

website/orders/templates/orders/status_screen.html

@@ -2,7 +2,7 @@
 {% load static %}
 
 {% block styles %}
-    <link rel="stylesheet" href="{% static 'tosti/css/status-screen.css' %}"/>
+    <link rel="stylesheet" href="{% static 'orders/css/status-screen.css' %}"/>
 {% endblock %}
 
 {% block header %}
@@ -26,12 +26,39 @@
         <div class="row">
             <div class="col-md-6 p-2">
                 <h2>In progress</h2>
+                <transition-group name="orders_in_progress" tag="ul" class="order-list orders-in-progress px-5">
+                    <li v-for="order in orders_in_progress" :key="`orders_in_progress_order_${order.id}`">
+                        #${ order.id }$ - ${ order.product.name }$
+                    </li>
+                </transition-group>
             </div>
             <div class="col-md-6 p-2">
                 <h2>Ready</h2>
+                <transition-group name="orders_ready" tag="ul" class="order-list orders-ready px-5">
+                    <li v-for="order in orders_ready" :key="`orders_ready_${order.id}`">
+                        #${ order.id }$ - ${ order.product.name }$
+                    </li>
+                </transition-group>
             </div>
         </div>
     </div>
+    <style>
+        .orders_in_progress-move,
+        .orders_in_progress-enter-active,
+        .orders_in_progress-leave-active,
+        .orders_ready-move,
+        .orders_ready-enter-active,
+        .orders_ready-leave-active {
+          transition: all 0.5s ease;
+        }
+        .orders_in_progress-enter-from,
+        .orders_in_progress-leave-to,
+        .orders_ready-enter-from,
+        .orders_ready-leave-to {
+          opacity: 0;
+          transform: translateX(30px);
+        }
+    </style>
 {% endblock %}
 
 {% block footer %}
@@ -43,8 +70,10 @@ <h2>Ready</h2>
         const STATUS_SCREEN_CONTAINER_ID = "status-screen-container";
 
         const statusScreenApp = createApp({
+            delimiters: ['${', '}$'],
             data() {
                 return {
+                    orders: [],
                     refreshing: false,
                     refreshTimer: null,
                     lastRefresh: null,
@@ -58,17 +87,28 @@ <h2>Ready</h2>
             unmounted() {
                 document.removeEventListener("visibilitychange", this.visibilityChange);
             },
+            computed: {
+                orders_in_progress() {
+                    return this.orders.filter(order => {
+                        return order.ready === false;
+                    });
+                },
+                orders_ready() {
+                    return this.orders.filter(order => {
+                        return order.ready === true;
+                    });
+                },
+            },
             methods: {
                 visibilityChange(event) {
                     if (event.target.hidden) {
                         clearTimeout(this.refreshTimer);
                     } else {
                         clearTimeout(this.refreshTimer);
-                        this.recalculate_progress_interval = setInterval(this.updateTrackProgress, 100);
                         if (this.lastRefresh === null || (new Date()).getTime() - this.lastRefresh > 5000) {
                             this.refresh();
                         } else {
-                            this.refreshTimer = setTimeout(this.refresh, this.track_progress_percentage === 100 ? 1000 : 5000);
+                            this.refreshTimer = setTimeout(this.refresh, 5000);
                         }
                     }
                 },
@@ -80,16 +120,31 @@ <h2>Ready</h2>
                     clearTimeout(this.refreshTimer);
                     this.refreshing = true;
                     return fetch(
-
+                        `/api/v1/shifts/{{ shift.id }}/orders/?type=0&picked_up=false&ordering=ready_at`,
+                        {
+                            method: 'GET',
+                            headers: {
+                                "X-CSRFToken": get_csrf_token(),
+                                "Accept": 'application/json',
+                            }
+                        }
+                    ).then(response => {
+                        if (response.status === 200) {
+                            return response.json();
+                        } else {
+                            throw response;
+                        }
+                    }).then(data => {
+                        this.orders = data;
                     }).catch(error => {
-                        console.log(`An error occurred while refreshing player {{ player.id }}. Error: ${error}`)
+                        console.log(`An error occurred while refreshing orders for shift {{ shift.id }}. Error: ${error}`)
                     }).finally(() => {
                         this.lastRefresh = (new Date()).getTime();
                         this.refreshing = false;
-                        this.refresh_timer = setTimeout(this.refresh, this.track_progress_percentage === 100 ? 1000 : 5000);
+                        this.refresh_timer = setTimeout(this.refresh, 5000);
                     });
                 }
             }
-        }).mount('#qrcode');
+        }).mount(`#${STATUS_SCREEN_CONTAINER_ID}`);
     </script>
 {% endblock %}