made websocket reconnecting

quest/events.py

@@ -261,6 +261,30 @@ def poll_post(socket, data):
 	socket.send('new_post', data)
 
 
+def edit_post(socket, data):
+	"""
+	Called when the QM saves an edited post.
+	"""
+	post_id = data.get('post_id')
+	post_text = data.get('post_text')
+
+	# cleaning
+	post_text = bleach.clean(post_text.strip())
+	post_text = post_text.replace("\n", "<br>")
+
+	# handle image
+
+	p = Post.objects.get(id=post_id)
+	p.post_text = post_text
+	p.save()
+
+	data = {}
+	data['post_text'] = post_text
+	data['post_type'] = 'text'
+	data['post_id'] = p.id
+	socket.send('update_post', data)
+
+
 def close_post(socket, data):
 	"""
 	Called when the QM closes an open post.

quest/static/quest.css

@@ -37,6 +37,11 @@ h3 {
 	display: flex;
 }
 
+.editPostText {
+	width: 100%;
+	box-sizing: border-box;
+}
+
 #QMPostTabs {
 	display: inline-block;
 	list-style-type: none;

quest/static/quest.js

@@ -13,6 +13,26 @@ socket.onmessage = function(e) {
 	if (socket.events[event] === undefined) { return; }
 	socket.events[event](data);
 }
+socket.onclose = async function(e) {
+	console.log('WebSocket lost connection to server. Re-trying...');
+	let old_socket = socket;
+	while (true) {
+		await sleep(5000);
+		try {
+			socket = new WebSocket(this.url);
+			break;
+		}
+		catch (error) {
+			console.log('WebSocket lost connection to server. Re-trying...');
+			// this still throws an error in the console for some reason
+		}
+	}
+	socket.oldSend = old_socket.oldSend;
+	socket.send = old_socket.send;
+	socket.events = old_socket.events;
+	socket.onmessage = old_socket.onmessage;
+	socket.onclose = old_socket.onclose;
+}
 function load() {
 	document.getElementById('chatWindow').scrollTop = document.getElementById('chatWindow').scrollHeight;
 	let mtarea = document.getElementById('messageTextArea');
@@ -164,6 +184,9 @@ function strftime(date) {
 function sort_by_votes(a, b) {
 	return b.cells[2].textContent.localeCompare(a.cells[2].textContent);
 }
+function sleep(ms) {
+	return new Promise(resolve => setTimeout(resolve, ms));
+}
 
 /* DOM editing */
 function quote(message_id) {

quest/static/questQM.js

@@ -12,7 +12,7 @@ socket.events['new_post'] = function(data) {
 	post_str += '<div class="questPostMeta">' + data.date;
 	/* QM only */
 	if (data.post_type === 'text') {
-		post_str += '<br /><a href="javascript:void(0);" onclick="edit_post(\'' + data.post_id + '\')">Edit</a>';
+		post_str += '<br /><a href="javascript:void(0);" id="editPost-' + data.post_id + '"onclick="edit_post(\'' + data.post_id + '\')">Edit</a>';
 		post_str += '<a href="javascript:void(0);" id="savePost-' + data.post_id + '" onclick="save_post(\'' + data.post_id + '\')" style="display:none;">Save</a>';
 	} else if (data.post_type === 'dice' || data.post_type === 'poll') {
 		post_str += '<br /><a href="javascript:void(0);" id="closePost-' + data.post_id + '" onclick="close_post(' + data.post_id + ')">Close</a>';
@@ -53,6 +53,15 @@ function makePost() {
 	if (text === '') { return; }
 	socket.send('text_post', {text: text, page_num: page_num, quest_id: quest_id});
 }
+function save_post(post_id) {
+	let post = document.getElementById('questPostData-' + post_id);
+	let post_text = post.firstElementChild.value.trim();
+	socket.send('edit_post', {post_text: post_text, post_id: post_id});
+	post_text = post_text.replace(/\n/g, '<br>')
+	post.innerHTML = post_text;
+	document.getElementById('savePost-' + post_id).style.display = 'none';
+	document.getElementById('editPost-' + post_id).style.display = 'initial';
+}
 function form_post(form_id, event) {
 	let formData = new FormData(document.getElementById(form_id));
 	let obj = {};
@@ -86,17 +95,14 @@ function open_post_send(post_id) {
 }
 
 /* DOM editing */
-function openPostTab(event, modeName) {
-	let QMPostTabContent = document.getElementsByClassName("QMPostTabContent");
-	for (let i = 0; i < QMPostTabContent.length; i++) {
-		QMPostTabContent[i].style.display = "none";
-	}
-	let QMPostTab = document.getElementsByClassName("QMPostTab");
-	for (let i = 0; i < QMPostTab.length; i++) {
-		QMPostTab[i].className = QMPostTab[i].className.replace(" active", "");
-	}
-	document.getElementById(modeName).style.display = "block";
-	event.currentTarget.className += " active";
+function edit_post(post_id) {
+	let post = document.getElementById('questPostData-' + post_id);
+	let post_text = post.innerHTML.trim();
+	post_text = post_text.replace(/<br>/g, '\n');
+	post.innerHTML = '<textarea class="editPostText">' + post_text + '</textarea>';
+	post.firstElementChild.style.height = post.firstElementChild.scrollHeight + 'px';
+	document.getElementById('savePost-' + post_id).style.display = 'initial';
+	document.getElementById('editPost-' + post_id).style.display = 'none';
 }
 function close_post(post_id) {
 	let post = document.getElementById('questPostData-' + post_id);
@@ -137,6 +143,18 @@ function open_post(post_id) {
 		}
 	}
 }
+function openPostTab(event, modeName) {
+	let QMPostTabContent = document.getElementsByClassName("QMPostTabContent");
+	for (let i = 0; i < QMPostTabContent.length; i++) {
+		QMPostTabContent[i].style.display = "none";
+	}
+	let QMPostTab = document.getElementsByClassName("QMPostTab");
+	for (let i = 0; i < QMPostTab.length; i++) {
+		QMPostTab[i].className = QMPostTab[i].className.replace(" active", "");
+	}
+	document.getElementById(modeName).style.display = "block";
+	event.currentTarget.className += " active";
+}
 function insertPollOption() {
 	let opts = document.getElementById('pollOptions');
 	let num = opts.children.length+1;

todo

@@ -16,7 +16,6 @@ Quote backlinks
 Make chat hideable
 
 Improvements:
-Revamp post editing
 More options for text posts (lists and so on)
 More rigorous input checking in events.py
 New post displays chat message
@@ -30,5 +29,4 @@ Only last 100 (50?) chat messages are loaded on page load
 Adjust quote preview postioning
 
 Port from old code:
-Edit post
 Images