Skip to content

Commit

Permalink
Switch between music and order screen on the same page
Browse files Browse the repository at this point in the history
  • Loading branch information
@vincevd1
vincevd1 committed Oct 26, 2024
1 parent 6166c6a commit 153e352
Show file tree
Hide file tree
Showing 5 changed files with 113 additions and 221 deletions.
4 changes: 0 additions & 4 deletions website/status_screen/static/status_screen/css/music-screen.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
.site-header {
height: 84px;
}

.progress {
height: 10px !important;
}
16 changes: 16 additions & 0 deletions website/status_screen/static/status_screen/css/status-screen.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
108 changes: 0 additions & 108 deletions website/status_screen/templates/status_screen/venue_music_screen.html
View file

This file was deleted.

195 changes: 95 additions & 100 deletions website/status_screen/templates/status_screen/venue_status_screen.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{% extends 'tosti/base.html' %}
{% load static players %}
{% load static %}#page-container

{% block styles %}
Expand All @@ -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 %}
Expand All @@ -87,6 +85,7 @@ <h2>Ready</h2>
data() {
return {
orders: [],
active_shift: null,
refreshing: false,
refreshTimer: null,
lastRefresh: null,
Expand Down Expand Up @@ -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}`);
Expand Down
11 changes: 2 additions & 9 deletions website/status_screen/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,23 +36,16 @@ 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)
except Player.DoesNotExist:
# 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})

0 comments on commit 153e352

Please sign in to comment.