WIP: Support notebook upload from the UI

notebooker/web/routes/core.py

@@ -1,9 +1,10 @@
+from pathlib import Path
 from flask import Blueprint, jsonify, request
 
 import notebooker.version
 from notebooker.constants import DEFAULT_RESULT_LIMIT
 from notebooker.utils.results import get_all_available_results_json, get_count_and_latest_time_per_report
-from notebooker.web.utils import get_serializer, get_all_possible_templates, all_templates_flattened
+from notebooker.web.utils import _get_python_template_dir, get_serializer, get_all_possible_templates, all_templates_flattened
 
 core_bp = Blueprint("core_bp", __name__)
 
@@ -76,3 +77,19 @@ def get_version_no():
     :returns: A JSON mapping from "version" to the string repr of the version number.
     """
     return jsonify({"version": notebooker.version.__version__})
+
+
+@core_bp.route("/core/notebook/upload", methods=["POST"])
+def upload_notebook():
+    """
+    Stores a notebook in git
+    """
+    templates = Path(_get_python_template_dir())
+    web = templates / "web"
+    web.mkdir(exist_ok=True)
+    notebook_name = request.values.get("name")
+    if not notebook_name or not notebook_name.endswith(".ipynb"):
+        return jsonify({"status": "Invalid notebook name"}), 400
+    with open(web / request.values.get("name"), "w") as fp:
+        fp.write(request.values.get("notebook", ""))
+    return jsonify({"status": "Notebook uploaded"})

notebooker/web/static/notebooker/header.js

@@ -1,4 +1,34 @@
 $(document).ready(() => {
+    $('#showUploadNotebookButton').click(() =>
+        $('#uploadNotebookModal').modal({
+            closable: true,
+            onHidden: function() {
+                $('#notebook').val('');
+            },
+            onApprove: function() {
+                let notebook = $('#notebook').prop('files')[0];
+                let reader = new FileReader();
+                reader.addEventListener('load', (e) => {
+                    $.ajax({
+                        url: '/core/notebook/upload',
+                        cache: false,
+                        type: 'POST',
+                        data: {
+                            name: notebook.name,
+                            notebook: e.target.result
+                        },
+                        success: () => {
+                            $('body').toast({class: 'info', message: 'Upload successful! Refresh the page in order to see it.'});
+                        },
+                        error: (result) => {
+                            $('body').toast({class: 'error', message: `Error uploading notebook: ${result.responseJSON.status} (${result.status})`});
+                        },
+                    });
+                });
+                reader.readAsText(notebook);
+            }
+        }).modal('show')
+    );
     $.ajax({
         url: '/core/version',
         success: (result) => {

notebooker/web/templates/header.html

@@ -88,11 +88,30 @@ <h4 class="ui header inverted">Execute a notebook:</h4>
                     </div>
                 {% endif %}
             {% endfor %}
-            <a class="item bottom" href="https://notebooker.readthedocs.io/en/latest/templates.html#creating-a-notebook-template">
+            <a id="showUploadNotebookButton" class="item bottom" href="#">
                 <i class="plus icon"></i>
                 <i>Add a new notebook</i>
             </a>
         </div>
+        <div class="ui modal" id="uploadNotebookModal">
+            <div class="header">Upload notebook</div>
+            <div class="content">
+                <p>
+                    Notebooks uploaded via this interface will be stored in the <code>web</code> folder.
+                    They will be automatically uploaded to git. Look at the
+                    <a href="https://notebooker.readthedocs.io/en/latest/templates.html#creating-a-notebook-template">documentation</a>
+                    for adding notebooks in different folders and making new packages available.
+                </p>
+                <form class="ui form" id="uploadNotebookForm">
+                    <input type="file" id="notebook" name="notebook" class="ui">
+                </form>
+                <div class="actions">
+                    <div class="ui approve button">Submit</div>
+                    <div class="ui cancel button">Cancel</div>
+                </div>
+            </div>
+        </div>
+
         </body>
         <footer></footer>
     </html>