New Riddle (w/o Data!!)

web/public/static/main.css

@@ -1,4 +1,8 @@
 
 .value_filter {
 	width: 150px;
+}
+
+#message_content{
+	height: 300px;
 }

web/public/static/main.js

@@ -10,7 +10,6 @@ function pagination_link(name, value){
 	} 
 	return '?' + $.param( link_args );
 }
-
 $(".value_filter").change((e)=>{
 	window.location = pagination_link($(e.target).attr('name').substr('filter_'.length), $(e.target).val())
 });
@@ -34,4 +33,73 @@ $("#autoRefresh").click(enable_auto_refresh);
 if(sessionStorage.hasOwnProperty('auto_refresh') && sessionStorage.getItem('auto_refresh') === 'true'){
 	$("#autoRefresh").prop('checked', true);
 	enable_auto_refresh()
-}
+}
+
+function update_json_message(){
+	let message = JSON.parse(basic_message);
+
+	var store_values = {}
+	$(".message-attribute").each((_,v)=>{
+		let el = $(v);
+		let name = el.attr('name');
+		let val = el.attr("type") == "checkbox" ? el.prop('checked') : el.val();
+
+		store_values[name] = val;
+	
+		let curr_msg = message;
+		let last_ob = {};
+		let last_name = "";
+		name.split('.').forEach((e)=>{
+			last_ob = curr_msg;
+			last_name = e;
+			curr_msg = curr_msg[e];
+		});
+		last_ob[last_name] = val;
+	});
+	localStorage.setItem("new_riddle", JSON.stringify(store_values))
+
+	$("#message_content").val(JSON.stringify(message, null, 2));
+}
+function load_last_values(){
+	if(localStorage.getItem("new_riddle") !== null){
+		var items = JSON.parse(localStorage.getItem("new_riddle"))
+		Object.keys(items).forEach((k)=>{
+			let el = $("[name='"+k+"']");
+			if(el.attr("type") == "checkbox"){
+				el.prop('checked', items[k]);
+			}
+			else{
+				el.val(items[k]);
+			}
+		});
+	
+		update_json_message()
+	}
+}
+if(typeof basic_message != 'undefined'){
+	load_last_values();
+}
+$(".message-attribute").change(update_json_message);
+$(".message-attribute[type=checkbox]").click(update_json_message);
+
+function send_json_message(json_str){
+	$.ajax(
+		"/message",
+		{
+			contentType : 'application/json',
+			type : 'POST',
+			data: json_str,
+		},
+	).then((d) => {
+		$("#message_sent .modal-title").text("Message Sent");
+		$("#message_sent .modal-body").html('<pre>'+JSON.stringify(d, null, 2)+'</pre>');
+		new bootstrap.Modal('#message_sent').show();
+	});
+}
+$("#send_message").click(
+	() => send_json_message($("#message_content").val())
+);
+
+$(".send_message_again").click(
+	(e) => send_json_message( $("pre#row_message_raw_"+$(e.target).attr('idx')).text() )
+);