[Jams] Add non-task info text to be displayed at jam announcement

3 files changed, 169 insertions, 36 deletions

diff --git a/pysite/tables.py b/pysite/tables.py
index 499172d9..67503cdb 100644
--- a/pysite/tables.py
+++ b/pysite/tables.py
@@ -41,6 +41,8 @@ TABLES = {
             "date_start",  # datetime
             "end_html",  # str
             "end_rst",  # str
+            "info_rst",  # str
+            "info_html",  # str
             "number",  # int
             "participants",  # list[int]
             "repo",  # str
diff --git a/pysite/views/staff/jams/edit_info.py b/pysite/views/staff/jams/edit_info.py
index 2ec67ebb..3264a9af 100644
--- a/pysite/views/staff/jams/edit_info.py
+++ b/pysite/views/staff/jams/edit_info.py
@@ -7,7 +7,7 @@ from pysite.decorators import csrf, require_roles
 from pysite.mixins import DBMixin
 from pysite.rst import render
 
-REQUIRED_KEYS = ["repo", "task_rst", "theme"]
+REQUIRED_KEYS = ["info_rst", "repo", "task_rst", "theme"]
 ALLOWED_STATES = ["planning", "info"]
 
 
@@ -48,6 +48,7 @@ class StaffView(RouteView, DBMixin):
             jam_obj[key] = arg
 
         jam_obj["task_html"] = render(jam_obj["task_rst"], link_headers=False)["html"]
+        jam_obj["info_html"] = render(jam_obj["info_rst"], link_headers=False)["html"]
 
         self.db.insert(self.table_name, jam_obj, conflict="replace")
 
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> &nbsp;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> &nbsp;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> &nbsp;Back
                 </a>
-                <button class="uk-button uk-button-secondary" type="button" id="preview">
-                    <i class="uk-icon fa-fw far fa-eye"></i> &nbsp;Preview
-                </button>
                 <button id="done" class="uk-button uk-button-primary" type="submit" disabled>
                     <i class="uk-icon fa-fw far fa-check"></i> &nbsp;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> &nbsp;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 %}