editing the live settings in /edit_quest sends a websocket event

quest/jinja2/quest/quest.html

@@ -21,7 +21,7 @@
 {% if request.user == quest.owner %}
 	<span><a href="{{ url('quest:edit_quest', args=[quest_id, page_num]) }}">Edit Quest</a></span>
 {% endif %}
-	<span>
+	<span id="pageSelection">
 		<select onChange="window.location.href=this.value">
 			<optgroup label="Pages">
 				{% for page in pages %}
@@ -37,17 +37,12 @@
 			{% endif %}
 		</select>
 	</span>
-	{% if quest.live %}
-	<span id="live">
+	<span id="live" style="display:{% if quest.live %}initial{% else %}none{% endif %};">
 		LIVE
 	</span>
-	{% else %}
-	{% if quest.live_time %}
-	<span id="liveIn">
-		Live in: <span id="liveCountdown"></span> (<span id="liveTime">{{ localtime(quest.live_time).strftime('%Y-%m-%d %H:%M') }}</span>)
+	<span id="liveIn" style="display:{% if quest.live_time and not quest.live %}initial{% else %}none{% endif %};">
+		Live in: <span id="liveCountdown"></span> (<span id="liveTime">{% if quest.live_time %}{{ localtime(quest.live_time).strftime('%Y-%m-%d %H:%M') }}{% endif %}</span>)
 	</span>
-	{% endif %}
-	{% endif %}
 	<span id="toggleChat"><a onclick="toggle_chat()" href="javascript:void(0);">{% if request.session.get("hide_chat") == True %}←{% else %}→{% endif %}</a></span>
 {% endblock %}
 {% block content %}

quest/static/quest.js

@@ -147,6 +147,7 @@ socket.events['vote'] = function(data) {
 	arr = Array.prototype.slice.call(table.rows);
 	arr.sort(sort_by_votes);
 	let new_tbody = document.createElement('tbody');
+	
 	for (let i = 0; i < arr.length; i++) {
 		new_tbody.appendChild(arr[i]);
 	}
@@ -160,6 +161,20 @@ socket.events['new_page'] = function(data) {
 	let html_str = '<div id="nextPageContainer"><input type="button" id="nextPage" value="Next Page: ' + data.title + '" onclick="window.location.href=\'' + SCRIPT_NAME + data.url + '\'"></div>';
 	document.getElementById('questPane').innerHTML = document.getElementById('questPane').innerHTML + html_str;
 }
+socket.events['live'] = function(data) {
+	if (data.live) {
+		document.getElementById('live').style.display = 'initial';
+		document.getElementById('liveIn').style.display = 'none';
+	} else if (data.live_time) {
+		document.getElementById('live').style.display = 'none';
+		document.getElementById('liveIn').style.display = 'initial';
+		document.getElementById('liveTime').innerHTML = data.live_time;
+		live_countdown();
+	} else {
+		document.getElementById('live').style.display = 'none';
+		document.getElementById('liveIn').style.display = 'none';
+	}
+}
 
 /* Websocket send */
 function vote(post_id, option_id) {

quest/tools.py

@@ -4,11 +4,14 @@ Some miscellaneous tools and helper functions. Primarily for quests.
 """
 import os
 import re
+import json
 import hashlib
 
 import magic
 import requests
 from django.conf import settings
+from channels.layers import get_channel_layer
+from asgiref.sync import async_to_sync
 
 IMG_DIR = "/usr/local/www/html/img/"
 ALLOWED_MIMES = [
@@ -69,3 +72,19 @@ def handle_img(text, limit=5):
 		text = text.replace("[img]" + ext_url + "[/img]", img_tag, 1)
 
 	return text
+
+
+def send_to_websocket(event, quest_id, data={}):
+	"""
+	Acts like QuestConsumer.send() but callable from views.
+	"""
+	channel_layer = get_channel_layer()
+	group_name = f'quest_{quest_id}'
+	data = json.dumps({'event': event, 'data': data})
+	async_to_sync(channel_layer.group_send)(
+		group_name,
+		{
+			'type': 'dispatch_send',
+			'message': data
+		}
+	)

quest/views.py

@@ -14,6 +14,7 @@ from django.conf import settings
 from .models import Quest, DiceRoll, PollOption, PollVote, Page, Post
 from .forms import EditQuestForm, QuestForm, PostForm
 from user.models import User
+from .tools import send_to_websocket
 
 def index(request):
 	"""The quest page index."""
@@ -106,6 +107,13 @@ def edit_quest(request, quest_id, page_num='0'):
 			else:
 				quest.live_time = None
 			quest.save()
+			data = {
+				'live': quest.live,
+				'live_time': quest.live_time,
+			}
+			if data['live_time']:
+				data['live_time'] =data['live_time'].strftime('%Y-%m-%d %H:%M')
+			send_to_websocket('live', quest_id, data)
 			return redirect('quest:quest',quest_id=quest.id, page_num=page_num)
 		else:
 			messages.error(request, "Error")