diff options
Diffstat (limited to 'templates/staff')
| -rw-r--r-- | templates/staff/jams/edit_info.html | 200 |
1 files changed, 165 insertions, 35 deletions
diff --git a/templates/staff/jams/edit_info.html b/templates/staff/jams/edit_info.html index f1c50263..0dd2ff1b 100644 --- a/templates/staff/jams/edit_info.html +++ b/templates/staff/jams/edit_info.html @@ -31,14 +31,44 @@ <div> <div class="uk-form-label"> - <label class="uk-form-label">Task (RST)</label> + <label class="uk-form-label"> + Info (RST) + <br /> + <span class="uk-text-meta">Will be available as soon as the jam state is "Running"</span> + <br /> + <br /> + <button class="uk-button uk-button-secondary" type="button" id="preview-info-button"> + <i class="uk-icon fa-fw far fa-eye"></i> Preview + </button> + </label> </div> <div class="uk-form-controls uk-form-controls-text"> - <div id="editor" class="uk-textarea" style="resize: vertical; min-height: 15rem;">{{ jam.task_rst }}</div> + <div id="info_editor" class="uk-textarea" style="resize: vertical; min-height: 15rem;">{{ jam.info_rst }}</div> </div> - <input type="hidden" name="task_rst" id="task_rst" /> + <input type="hidden" name="info_rst" id="info_rst" value="{{ jam.info_rst }}" /> + </div> + + <div> + <div class="uk-form-label"> + <label class="uk-form-label"> + Task (RST) + <br/> + <span class="uk-text-meta">Will not be available until the jam state is "Running"</span> + <br /> + <br /> + <button class="uk-button uk-button-secondary" type="button" id="preview-task-button"> + <i class="uk-icon fa-fw far fa-eye"></i> Preview + </button> + </label> + </div> + + <div class="uk-form-controls uk-form-controls-text"> + <div id="task_editor" class="uk-textarea" style="resize: vertical; min-height: 15rem;">{{ jam.task_rst }}</div> + </div> + + <input type="hidden" name="task_rst" id="task_rst" value="{{ jam.task_rst }}" /> </div> <input type="hidden" name="csrf_token" id="csrf_token" value="{{ csrf_token() }}"/> @@ -47,9 +77,6 @@ <a id="back" class="uk-button uk-button-default" href="{{ url_for("staff.jams.index") }}"> <i class="uk-icon fa-fw far fa-arrow-left"></i> Back </a> - <button class="uk-button uk-button-secondary" type="button" id="preview"> - <i class="uk-icon fa-fw far fa-eye"></i> Preview - </button> <button id="done" class="uk-button uk-button-primary" type="submit" disabled> <i class="uk-icon fa-fw far fa-check"></i> Done </button> @@ -57,15 +84,38 @@ </form> </div> - <div id="preview-modal" class="uk-flex-top" uk-modal> + <div id="preview-info-modal" class="uk-flex-top" uk-modal> <div class="uk-modal-dialog"> <button class="uk-modal-close-default" type="button" uk-close></button> <div class="uk-modal-body"> - <h2>Code Jam {{ jam.number }}: {{ jam.title }} <a href="{{ jam.repo }}" id="preview-url"><i class="uk-icon fa-fw fab fa-github"></i></a></h2> - <p class="uk-text-meta">Theme: <span id="preview-theme">{{ jam.theme }}</span></p> + <h2>Code Jam {{ jam.number }}: {{ jam.title }} <a href="{{ jam.repo }}" id="preview-info-url"><i class="uk-icon fa-fw fab fa-github"></i></a></h2> + <p class="uk-text-meta">Theme: <span id="preview-info-theme">{{ jam.theme }}</span></p> - <div id="preview-div"> + <div id="preview-info-div"> + {{ jam.task_html | safe }} + </div> + </div> + + <div class="uk-modal-footer"> + <div class="uk-text-center"> + <button class="uk-button uk-button-default uk-modal-close" type="button" id="state-cancel"> + <i class="uk-icon fa-fw far fa-arrow-left"></i> Close + </button> + </div> + </div> + </div> + </div> + + <div id="preview-task-modal" class="uk-flex-top" uk-modal> + <div class="uk-modal-dialog"> + <button class="uk-modal-close-default" type="button" uk-close></button> + + <div class="uk-modal-body"> + <h2>Code Jam {{ jam.number }}: {{ jam.title }} <a href="{{ jam.repo }}" id="preview-task-url"><i class="uk-icon fa-fw fab fa-github"></i></a></h2> + <p class="uk-text-meta">Theme: <span id="preview-task-theme">{{ jam.theme }}</span></p> + + <div id="preview-task-div"> {{ jam.task_html | safe }} </div> </div> @@ -84,10 +134,11 @@ "use strict"; let csrf_token = "{{ csrf_token() }}"; - let modal = UIkit.modal(document.getElementById("preview-modal")); + let info_modal = UIkit.modal(document.getElementById("preview-info-modal")); + let task_modal = UIkit.modal(document.getElementById("preview-task-modal")); let preview_url = "{{ url_for("staff.render") }}"; - function do_preview(callback) { + function do_preview_info(callback) { let oReq = new XMLHttpRequest(); oReq.addEventListener("load", function() { @@ -97,17 +148,17 @@ document.getElementById("done").disabled = true; if (response.error_lines !== undefined) { - editor.session.setAnnotations(response.error_lines); - document.getElementById("preview-div").innerHTML ="<h3>Error - see editor margin</h3>"; + info_editor.session.setAnnotations(response.error_lines); + document.getElementById("preview-info-div").innerHTML ="<h3>Error - see editor margin</h3>"; } else { console.log("Error: " + response.error); - document.getElementById("preview-div").innerHTML ="<h3>Error</h3><p>" + response.error + "<p>"; + document.getElementById("preview-info-div").innerHTML ="<h3>Error</h3><p>" + response.error + "<p>"; } } else { document.getElementById("done").disabled = false; - document.getElementById("preview-div").innerHTML = response.data; + document.getElementById("preview-info-div").innerHTML = response.data; - editor.session.setAnnotations([]); + info_editor.session.setAnnotations([]); } if (callback !== undefined) { @@ -115,7 +166,7 @@ } }); - let data = editor.getValue(); + let data = info_editor.getValue(); if (data.replace("\s", "").length < 1) { document.getElementById("done").disabled = true; @@ -136,42 +187,121 @@ oReq.setRequestHeader("Content-type", "application/json"); oReq.setRequestHeader("X-CSRFToken", csrf_token); - oReq.send(JSON.stringify({"data": editor.getValue()})); + oReq.send(JSON.stringify({"data": data})); return false; } - document.getElementById("preview").onclick = function() { - do_preview(function() { - modal.show(); + function do_preview_task(callback) { + let oReq = new XMLHttpRequest(); + + oReq.addEventListener("load", function() { + let response = JSON.parse(this.responseText); + + if (response.error !== undefined) { + document.getElementById("done").disabled = true; + + if (response.error_lines !== undefined) { + task_editor.session.setAnnotations(response.error_lines); + document.getElementById("preview-task-div").innerHTML ="<h3>Error - see editor margin</h3>"; + } else { + console.log("Error: " + response.error); + document.getElementById("preview-task-div").innerHTML ="<h3>Error</h3><p>" + response.error + "<p>"; + } + } else { + document.getElementById("done").disabled = false; + document.getElementById("preview-task-div").innerHTML = response.data; + + task_editor.session.setAnnotations([]); + } + + if (callback !== undefined) { + callback(); + } + }); + + let data = task_editor.getValue(); + + if (data.replace("\s", "").length < 1) { + document.getElementById("done").disabled = true; + + if (callback !== undefined) { + UIkit.notification({ + "message": "Please enter some text to preview", + "status": "danger", + "pos": "bottom-center", + "timeout": 5000 + }); + } + return false; + } + + oReq.open("POST", preview_url); + + oReq.setRequestHeader("Content-type", "application/json"); + oReq.setRequestHeader("X-CSRFToken", csrf_token); + + oReq.send(JSON.stringify({"data": data})); + + return false; + } + + document.getElementById("preview-task-button").onclick = function() { + do_preview_task(function() { + task_modal.show(); + }) + }; + + document.getElementById("preview-info-button").onclick = function() { + do_preview_info(function() { + info_modal.show(); }) }; document.getElementById("theme").oninput = function() { - document.getElementById("preview-theme").textContent = this.value; + document.getElementById("preview-task-theme").textContent = this.value; + document.getElementById("preview-info-theme").textContent = this.value; }; document.getElementById("repo").oninput = function() { - document.getElementById("preview-url").href = this.value; + document.getElementById("preview-task-url").href = this.value; + document.getElementById("preview-info-url").href = this.value; }; - let editor = ace.edit("editor"); - let timer; + let info_editor = ace.edit("info_editor"); + let task_editor = ace.edit("task_editor"); + let info_timer, task_timer; + + info_editor.session.setMode("ace/mode/rst"); + info_editor.session.setUseWrapMode(true); + + info_editor.setTheme("ace/theme/iplastic"); + info_editor.setShowPrintMargin(false); + + info_editor.on("input", function() { + document.getElementById("done").disabled = true; + document.getElementById("info_rst").value = info_editor.getValue(); + + if (info_timer !== undefined) { + clearTimeout(info_timer); + } + info_timer = setTimeout(do_preview_info, 1000); + }); - editor.session.setMode("ace/mode/rst"); - editor.session.setUseWrapMode(true); + task_editor.session.setMode("ace/mode/rst"); + task_editor.session.setUseWrapMode(true); - editor.setTheme("ace/theme/iplastic"); - editor.setShowPrintMargin(false); + task_editor.setTheme("ace/theme/iplastic"); + task_editor.setShowPrintMargin(false); - editor.on("input", function() { + task_editor.on("input", function() { document.getElementById("done").disabled = true; - document.getElementById("task_rst").value = editor.getValue(); + document.getElementById("task_rst").value = task_editor.getValue(); - if (timer !== undefined) { - clearTimeout(timer); + if (task_timer !== undefined) { + clearTimeout(task_timer); } - timer = setTimeout(do_preview, 1000); + task_timer = setTimeout(do_preview_task, 1000); }); </script> {% endblock %} |