From 7e2bcd7766b32d1ed773afb099c84696343f1b8d Mon Sep 17 00:00:00 2001
From: Steve Cassidy <steve.cassidy@mq.edu.au>
Date: Fri, 22 Sep 2023 17:46:40 +1000
Subject: [PATCH] Upload notebook form

Signed-off-by: Steve Cassidy <steve.cassidy@mq.edu.au>
---
 src/api/routes.ts          |   3 +-
 views/notebooks.handlebars | 124 +++++++++++++++++++++++++++++++------
 2 files changed, 108 insertions(+), 19 deletions(-)

diff --git a/src/api/routes.ts b/src/api/routes.ts
index ed8bc74b..157e31ba 100644
--- a/src/api/routes.ts
+++ b/src/api/routes.ts
@@ -91,8 +91,9 @@ api.post('/notebooks/', requireAuthenticationAPI, async (req, res) => {
     try {
       const projectID = await createNotebook(projectName, uiSpec, metadata);
       res.json({notebook: projectID});
-    } catch {
+    } catch (err) {
       res.json({error: 'there was an error creating the notebook'});
+      console.log('Error creating notebook', err);
       res.status(500).end();
     }
   } else {
diff --git a/views/notebooks.handlebars b/views/notebooks.handlebars
index 4e29d320..3cec79fd 100644
--- a/views/notebooks.handlebars
+++ b/views/notebooks.handlebars
@@ -6,6 +6,57 @@
       </ol>
     </nav>
 
+<h1>Notebooks</h1>
+
+  <table class="table">
+      {{#each notebooks}}
+          <tr>
+            <td>
+              <a href="/notebooks/{{this.non_unique_project_id}}">{{this.name}}</a>
+            </td>
+            {{#if ../developer}}
+            <td>
+              <button class="btn btn-danger btn-sm" onclick="deleteNotebook('{{this.non_unique_project_id}}')">Delete</button>
+            </td>
+            {{/if}}
+          </tr>
+      {{/each}}
+  </table>
+
+
+  <div class="accordion" id="uploadFormContainer">
+    <h2 class="accordion-header" id="headingOne">
+      <button class="accordion-button collapsed" type="button" 
+              data-bs-toggle="collapse" data-bs-target="#collapseOne" 
+              aria-expanded="false" aria-controls="collapseOne">
+        Upload a Notebook
+      </button>
+    </h2>
+
+    <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#uploadFormContainer">
+      <div class="accordion-body">
+        <form id="upload-notebook-form">
+          <div class="mb-3">
+            <label for="notebookName">Notebook Name</label>
+            <input id="notebookName" name="name" class="form-control" placeholder="Notebook Name">
+            <div class="form-text">Optional, if not provided the name property from the file will be used.</div>
+          </div>
+
+          <div class="mb-3">
+            <input type="file" class="form-control" name="notebook" id="notebook">
+            <div class="form-text">Select a notebook file in JSON format.</div>
+          </div>
+
+          <div class="mb-3">
+            <input type="submit" class="form-control" value="Upload Notebook">
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+
+
 <script>
   const deleteNotebook = (project_id) => {
     fetch(`/api/notebooks/${project_id}/delete`, {
@@ -15,23 +66,60 @@
       window.location.reload();
     });
   }
-</script>
 
-<h1>Notebooks</h1>
 
-<table class="table">
-    {{#each notebooks}}
-        <tr>
-          <td>
-            <a href="/notebooks/{{this.non_unique_project_id}}">{{this.name}}</a>
-          </td>
-          {{#if ../developer}}
-          <td>
-            <button class="btn btn-danger btn-sm" onclick="deleteNotebook('{{this.non_unique_project_id}}')">Delete</button>
-          </td>
-          {{/if}}
-        </tr>
-    {{/each}}
-</table>
-
-</div>
\ No newline at end of file
+  function uploadNotebookHandler(event) {
+    event.preventDefault();
+    const url = '/api/notebooks/';
+    const form = event.target;
+    const name = form.querySelector('[name="name"]').value;
+    const fileInput = form.querySelector('[name="notebook"]');
+    if (fileInput) {
+      // parse the contents of the uploaded file as JSON
+      const reader = new FileReader();
+      const filename = fileInput.files[0];
+      reader.readAsText(filename);
+      reader.onload = (evt) => {
+        try {
+          const data = JSON.parse(evt.target.result);
+          // a little bit of validation
+          if (!data.metadata || !data['ui-specification']) {
+            alert('Invalid notebook file');
+            return;
+          }
+          if (!data.metadata.name) {
+            alert('Invalid notebook file');
+            return;
+          }
+          const body = {
+            metadata: data.metadata,
+            'ui-specification': data['ui-specification'],
+            name: name || data.metadata.name,
+          }
+          fetch(url, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(body),
+          })
+          .then(response => response.json())
+          .then(data => {
+            if (data.notebook) {
+              window.location.reload();
+            } else {
+              alert('Error uploading notebook');
+            }
+          });
+        } catch (e) {
+          alert('Invalid notebook file');
+          return;
+        }
+      }
+      
+
+
+    }
+  }
+  document.getElementById('upload-notebook-form').onsubmit = uploadNotebookHandler;
+</script>