From 153e352ab58fb1b8e085693c37d48c2366459f8c Mon Sep 17 00:00:00 2001
From: vince <vincevandiermen@gmail.com>
Date: Sat, 26 Oct 2024 16:10:06 +0200
Subject: [PATCH] Switch between music and order screen on the same page

---
 .../static/status_screen/css/music-screen.css |   4 -
 .../status_screen/css/status-screen.css       |  16 ++
 .../status_screen/venue_music_screen.html     | 108 ----------
 .../status_screen/venue_status_screen.html    | 195 +++++++++---------
 website/status_screen/views.py                |  11 +-
 5 files changed, 113 insertions(+), 221 deletions(-)
 delete mode 100644 website/status_screen/templates/status_screen/venue_music_screen.html

diff --git a/website/status_screen/static/status_screen/css/music-screen.css b/website/status_screen/static/status_screen/css/music-screen.css
index 9f640c9a..955df13a 100644
--- a/website/status_screen/static/status_screen/css/music-screen.css
+++ b/website/status_screen/static/status_screen/css/music-screen.css
@@ -1,7 +1,3 @@
-.site-header {
-    height: 84px;
-}
-
 .progress {
     height: 10px !important;
 }
\ No newline at end of file
diff --git a/website/status_screen/static/status_screen/css/status-screen.css b/website/status_screen/static/status_screen/css/status-screen.css
index 0ab1aacb..fe731da5 100644
--- a/website/status_screen/static/status_screen/css/status-screen.css
+++ b/website/status_screen/static/status_screen/css/status-screen.css
@@ -40,6 +40,22 @@
     display: inline;
 }
 
+.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);
+}
+
 @media screen and (max-width: 992px) {
     .site-header {
         height: 59px;
diff --git a/website/status_screen/templates/status_screen/venue_music_screen.html b/website/status_screen/templates/status_screen/venue_music_screen.html
deleted file mode 100644
index 2df32a2b..00000000
--- a/website/status_screen/templates/status_screen/venue_music_screen.html
+++ /dev/null
@@ -1,108 +0,0 @@
-{% extends 'tosti/base.html' %}
-{% load static players %}
-
-{% block styles %}
-    <link rel="stylesheet" href="{% static 'status_screen/css/music-screen.css' %}"/>
-    <link rel="stylesheet" href="{% static 'thaliedje/css/player.css' %}"/>
-{% endblock %}
-
-{% block header %}
-    <nav class="navbar navbar-expand-lg site-header sticky-top navbar-dark">
-        <div class="container">
-            <div class="d-block d-lg-none">
-                <a class="navbar-brand drop-out-header-mobile" href="/"><img
-                        src="{% static 'tosti/svg/TOSTI-logo.svg' %}" height="80"/></a>
-            </div>
-            <div class="mx-auto position-relative d-lg-block d-none" style="margin-top: -68px">
-                <a class="navbar-brand drop-out-header" href="/"><img
-                        src="{% static 'tosti/svg/TOSTI-logo.svg' %}"
-                        height="120"/>
-                </a>
-            </div>
-        </div>
-    </nav>
-{% endblock %}
-
-{% block page %}
-    <div id="music-screen-container"></div>
-
-    <div class="player-container w-75 mt-5 m-auto display-5">
-        <h1 class="mt-5">Currently playing:</h1>
-        {% render_player player %}
-    </div>
-{% endblock %}
-
-{% block footer %}
-
-{% endblock %}
-
-{% block js %}
-    <script>
-        const MUSIC_SCREEN_CONTAINER_ID = "music-screen-container";
-
-        const musicScreenApp = createApp({
-            delimiters: ['${', '}$'],
-            data() {
-                return {
-                    refresh_timer: null,
-                    lastRefresh: null,
-                    refreshing: false,
-                }
-            },
-            created() {
-                this.refresh();
-                document.addEventListener("visibilitychange", this.visibilityChange);
-            },
-            unmounted() {
-                document.removeEventListener("visibilitychange", this.visibilityChange);
-            },
-            methods: {
-                visibilityChange(event) {
-                    if (event.target.hidden) {
-                        clearTimeout(this.refresh_timer);
-                    } else {
-                        clearTimeout(this.refresh_timer);
-                        if (this.lastRefresh === null || (new Date()).getTime() - this.lastRefresh > 5000) {
-                            this.refresh();
-                        } else {
-                            this.refresh_timer = setTimeout(this.refresh, 5000);
-                        }
-                    }
-                },
-                refresh() {
-                    if (this.refreshing) {
-                        return;
-                    }
-    
-                    clearTimeout(this.refresh_timer);
-                    this.refreshing = true;
-                    return fetch(
-                        "{% url 'v1:ordervenues_activeshift' order_venue=order_venue %}",
-                        {
-                            method: 'GET',
-                            headers: {
-                                "X-CSRFToken": get_csrf_token(),
-                                "Accept": 'application/json',
-                            }
-                        }
-                    ).then(response => {
-                        /* We want to change the page to the shift page again when the shift becomes active
-                           So if the response on the active shift api call is 200 we reload the page
-                        */
-                        if (response.status === 200) {  
-                            location.reload();
-                        }
-                    })
-                    .catch(error => {
-                        console.log(error);
-                    })
-                    .finally(() => {
-                        this.lastRefresh = (new Date()).getTime();
-                        this.refreshing = false;
-                        this.refresh_timer = setTimeout(this.refresh, 5000);
-                    });
-                }
-            }
-        }).mount(`#${MUSIC_SCREEN_CONTAINER_ID}`);
-    </script>
-{% endblock %}
\ No newline at end of file
diff --git a/website/status_screen/templates/status_screen/venue_status_screen.html b/website/status_screen/templates/status_screen/venue_status_screen.html
index b403b8e5..ec490021 100644
--- a/website/status_screen/templates/status_screen/venue_status_screen.html
+++ b/website/status_screen/templates/status_screen/venue_status_screen.html
@@ -1,4 +1,5 @@
 {% extends 'tosti/base.html' %}
+{% load static players %}
 {% load static %}#page-container 
 
 {% block styles %}
@@ -23,54 +24,51 @@
 
 {% block page %}
     <div class="container-fluid mt-3" id="status-screen-container">
-        <div class="row">
-            <div class="col-md-6 p-2">
-                <h2>In progress</h2>
-                <transition-group name="user_objects_with_orders_in_progress" tag="ul" class="user-order-list orders-in-progress px-5">
-                    <li v-for="(user_orders_object, user_id) in orders_in_progress_grouped_user" :key="`orders_in_progress_user_${user_id}`" class="user-order-item">
-                        <div class="order-user-name">${user_orders_object.user.first_name}$</div>
-                        <ul class="order-list">
-                            <li v-for="order in user_orders_object['orders']" :key="`user_${user_id}_order_${order.id}`" class="order-item">
-                                <i v-if="order.product.icon !== null" :class="`fa-solid fa-${order.product.icon} me-2`"></i>
-                                <i v-else class="fa-solid fa-question"></i>
-                            </li>
-                        </ul>
-                    </li>
-                </transition-group>
-            </div>
-            <div class="col-md-6 p-2">
-                <h2>Ready</h2>
-                <transition-group name="orders_ready" tag="ul" class="user-order-list orders-ready px-5">
-                    <li v-for="(user_orders_object, user_id) in orders_ready_grouped_user" :key="`orders_ready_user_${user_id}`" class="user-order-item">
-                        <div class="order-user-name">${user_orders_object.user.first_name}$</div>
-                        <ul class="order-list">
-                            <li v-for="order in user_orders_object['orders']" :key="`user_${user_id}_order_${order.id}`" class="order-item">
-                                <i v-if="order.product.icon !== null" :class="`fa-solid fa-${order.product.icon} me-2`"></i>
-                                <i v-else class="fa-solid fa-question"></i>
-                            </li>
-                        </ul>
-                    </li>
-                </transition-group>
+        <template v-if="active_shift">
+            <div class="row">
+                <div class="col-md-6 p-2">
+                    <h2>In progress</h2>
+                    <transition-group name="user_objects_with_orders_in_progress" tag="ul" class="user-order-list orders-in-progress px-5">
+                        <li v-for="(user_orders_object, user_id) in orders_in_progress_grouped_user" :key="`orders_in_progress_user_${user_id}`" class="user-order-item">
+                            <div class="order-user-name">${user_orders_object.user.first_name}$</div>
+                            <ul class="order-list">
+                                <li v-for="order in user_orders_object['orders']" :key="`user_${user_id}_order_${order.id}`" class="order-item">
+                                    <i v-if="order.product.icon !== null" :class="`fa-solid fa-${order.product.icon} me-2`"></i>
+                                    <i v-else class="fa-solid fa-question"></i>
+                                </li>
+                            </ul>
+                        </li>
+                    </transition-group>
+                </div>
+                <div class="col-md-6 p-2">
+                    <h2>Ready</h2>
+                    <transition-group name="orders_ready" tag="ul" class="user-order-list orders-ready px-5">
+                        <li v-for="(user_orders_object, user_id) in orders_ready_grouped_user" :key="`orders_ready_user_${user_id}`" class="user-order-item">
+                            <div class="order-user-name">${user_orders_object.user.first_name}$</div>
+                            <ul class="order-list">
+                                <li v-for="order in user_orders_object['orders']" :key="`user_${user_id}_order_${order.id}`" class="order-item">
+                                    <i v-if="order.product.icon !== null" :class="`fa-solid fa-${order.product.icon} me-2`"></i>
+                                    <i v-else class="fa-solid fa-question"></i>
+                                </li>
+                            </ul>
+                        </li>
+                    </transition-group>
+                </div>
             </div>
-        </div>
+        </template>
     </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>
+
+
+        <div id="player-container" style="display: none">
+            {% if player is not None %}
+                <div class="player w-75 mt-5 m-auto display-5">
+                    <h1 class="mt-5">Currently playing:</h1>
+                    {% render_player player %}
+                </div>
+            {% else %}
+                <h1 class="mt-5">No player for this venue</h1>
+            {% endif %}
+        </div>
 {% endblock %}
 
 {% block footer %}
@@ -87,6 +85,7 @@ <h2>Ready</h2>
             data() {
                 return {
                     orders: [],
+                    active_shift: null,
                     refreshing: false,
                     refreshTimer: null,
                     lastRefresh: null,
@@ -202,64 +201,60 @@ <h2>Ready</h2>
                     clearTimeout(this.refreshTimer);
                     this.refreshing = true;
 
-                    return new Promise((resolve, reject) => {
-                        this.get_oauth_header().then(header => {
-                            if (header === null) {
-                                header = {};
+                    this.get_oauth_header().then(header => {
+                        if (header === null) {
+                            header = {};
+                        }
+                        fetch(
+                            "{% url 'v1:ordervenues_activeshift' order_venue=order_venue %}",
+                            {
+                                method: 'GET',
+                                headers: Object.assign({}, header, {
+                                    "X-CSRFToken": get_csrf_token(),
+                                    "Accept": 'application/json',
+                                }),
                             }
+                        ).then(response => {
+                            if(response.status === 200) {
+                                return response.json();
+                            }
+                        }).then(data => {
+                            this.active_shift = data;
+                            
+                            if(this.active_shift) {
+                                document.getElementById('player-container').style.display = 'none';
 
-                            fetch(
-                                "{% url 'v1:orders_listcreate' shift=shift %}?type=0&picked_up=false&ordering=ready_at",
-                                {
-                                    method: 'GET',
-                                    headers: Object.assign({}, header, {
-                                        "X-CSRFToken": get_csrf_token(),
-                                        "Accept": 'application/json',
-                                    }),
-                                }
-                            ).then(response => {
-                                if (response.status === 200) {
-                                    return response.json();
-                                } else {
-                                    reject(response);
-                                }
-                            }).then(data => {
-                                this.orders = data;
-                            }).catch(error => {
-                                reject(`An error occurred while refreshing orders for shift {{ shift.id }}. Error: ${error}`)
-                            })
-
-                            fetch(
-                                "{% url 'v1:ordervenues_activeshift' order_venue=order_venue %}",
-                                {
-                                    method: 'GET',
-                                    headers: Object.assign({}, header, {
-                                        "X-CSRFToken": get_csrf_token(),
-                                        "Accept": 'application/json',
-                                    }),
-                                }
-                            ).then(response => {
-                                /* We want to change the page to the music page again when the shift becomes inactive
-                                   So if the response on the active shift api call is not 200 we reload the page
-                                */
-                                if (response.status === 404) {
-                                    location.reload();
-                                }
-
-                                resolve();
-                            }).catch(error => {
-                                reject(`An error occurred while refreshing orders for venue {{ order_venue.name }}. Error: ${error}`)
-                            })
+                                fetch(
+                                    `/api/v1/shifts/${this.active_shift.id}/orders?type=0&picked_up=false&ordering=ready_at`,
+                                    {
+                                        method: 'GET',
+                                        headers: Object.assign({}, header, {
+                                            "X-CSRFToken": get_csrf_token(),
+                                            "Accept": 'application/json',
+                                        }),
+                                    }
+                                ).then(response => {
+                                    if (response.status === 200) {
+                                        return response.json();
+                                    }
+                                }).then(data => {
+                                    this.orders = data;
+                                }).catch(error => {
+                                    console.log(`An error occurred while refreshing orders for shift ${this.active_shift.id}. Error: ${error}`)
+                                })
+                            } else {
+                                document.getElementById('player-container').style.display = 'block';
+                            }
                         })
+                        .catch(error => {
+                            console.log(error);
+                        })
+                        .finally(() => {
+                            this.lastRefresh = (new Date()).getTime();
+                            this.refreshing = false;
+                            this.refresh_timer = setTimeout(this.refresh, 5000);
+                        });
                     })
-                    .catch(error => {
-                        console.log(error);
-                    })
-                    .finally(() => {
-                        this.lastRefresh = (new Date()).getTime();
-                        this.refreshing = false;
-                        this.refresh_timer = setTimeout(this.refresh, 5000);
-                    });
                 }
             }
         }).mount(`#${STATUS_SCREEN_CONTAINER_ID}`);
diff --git a/website/status_screen/views.py b/website/status_screen/views.py
index 88c5965a..b5dfe8c3 100644
--- a/website/status_screen/views.py
+++ b/website/status_screen/views.py
@@ -36,13 +36,11 @@ def get(self, request, **kwargs):
 class VenueStatusScreen(View):
     """Show music and active shift status of a venue."""
 
-    orders_template_name = "status_screen/venue_status_screen.html"
-    music_template_name = "status_screen/venue_music_screen.html"
+    template_name = "status_screen/venue_status_screen.html"
 
     def get(self, request, **kwargs):
         """GET request for the status screen of a venue."""
         order_venue = kwargs.get("order_venue")
-        active_shift = currently_active_shift_for_venue(order_venue)
 
         try:
             player = Player.objects.get(venue=order_venue.venue)
@@ -50,9 +48,4 @@ def get(self, request, **kwargs):
             # No player configured for the venue.
             player = None
 
-        if active_shift is not None:
-            return render(request, self.orders_template_name, {"shift": active_shift, "order_venue": order_venue})
-        elif player is not None:
-            return render(request, self.music_template_name, {"player": player, "order_venue": order_venue})
-        else:
-            raise Http404()
+        return render(request, self.template_name, {"player": player, "order_venue": order_venue})