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 %}
-
-
-{% endblock %}
-
-{% block header %}
-
-{% endblock %}
-
-{% block page %}
-
-
-
-
In progress
-
-
- ${user_orders_object.user.first_name}$
-
-
-
-
-
-
Ready
-
-
- ${user_orders_object.user.first_name}$
-
-
-
+
+
+
+
In progress
+
+
+ ${user_orders_object.user.first_name}$
+
+
+
+
+
+
Ready
+
+
+ ${user_orders_object.user.first_name}$
+
+
+
+
-
+
-
+
+
+
+ {% if player is not None %}
+
+
Currently playing:
+ {% render_player player %}
+
+ {% else %}
+
No player for this venue
+ {% endif %}
+
{% endblock %}
{% block footer %}
@@ -87,6 +85,7 @@
Ready
data() {
return {
orders: [],
+ active_shift: null,
refreshing: false,
refreshTimer: null,
lastRefresh: null,
@@ -202,64 +201,60 @@
Ready
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})