Loads raw JSON & displays in the component

[ci skip]

3 files changed, 34 insertions, 4 deletions

diff --git a/app/assets/javascripts/blob/notebook_viewer.js b/app/assets/javascripts/blob/notebook_viewer.js
index dda137c6603..057afc9b2e5 100644
--- a/app/assets/javascripts/blob/notebook_viewer.js
+++ b/app/assets/javascripts/blob/notebook_viewer.js
@@ -1,20 +1,49 @@
 import Vue from 'vue';
+import VueResource from 'vue-resource';
 import NotebookLab from 'vendor/notebooklab';
 
+Vue.use(VueResource);
 Vue.use(NotebookLab);
 
 $(() => {
+  const el = document.getElementById('js-notebook-viewer');
+
   new Vue({
-    el: '#js-notebook-viewer',
+    el,
     data() {
       return {
+        loading: true,
         json: {},
       };
     },
     template: `
-      <div>
-        <notebook-lab :notebook="json" />
+      <div class="container-fluid">
+        <i
+          class="fa fa-spinner fa-spin"
+          v-if="loading">
+        </i>
+        <notebook-lab
+          v-if="!loading"
+          :notebook="json" />
       </div>
     `,
+    mounted() {
+      $.get(gon.katex_css_url, () => {
+        const css = $('<link>', {
+          rel: 'stylesheet',
+          type: 'text/css',
+          href: gon.katex_css_url,
+        });
+        css.appendTo('head');
+      });
+
+      $.getScript(gon.katex_js_url, () => {
+        this.$http.get(el.dataset.endpoint)
+          .then((res) => {
+            this.json = res.json();
+            this.loading = false;
+          });
+      });
+    },
   });
 });
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 83a8eeaafde..0a4c69bc5ac 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -7,6 +7,7 @@
  *= require_self
  *= require dropzone/basic
  *= require cropper.css
+ *= require notebooklab.css
 */
 
 /*
diff --git a/app/views/projects/blob/_notebook.html.haml b/app/views/projects/blob/_notebook.html.haml
index 19d3e401d27..ab1cf933944 100644
--- a/app/views/projects/blob/_notebook.html.haml
+++ b/app/views/projects/blob/_notebook.html.haml
@@ -2,4 +2,4 @@
   = page_specific_javascript_bundle_tag('common_vue')
   = page_specific_javascript_bundle_tag('notebook_viewer')
 
-.file-content#js-notebook-viewer
+.file-content#js-notebook-viewer{ data: { endpoint: namespace_project_raw_path(@project.namespace, @project, @id) } }