diff options
author | Phil Hughes <me@iamphill.com> | 2017-03-22 14:08:51 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-03-23 10:52:55 +0000 |
commit | e8949a1ee48b5589c1f82d4b8a6b4e20d43d51a3 (patch) | |
tree | 553a03d921811e66efc799bbe6a28c3210a6d3d1 /app/assets | |
parent | 313258fa423f9c3a03e793e2a7bc8686d0757e91 (diff) | |
download | gitlab-ce-e8949a1ee48b5589c1f82d4b8a6b4e20d43d51a3.tar.gz |
Updated notebooklab library
Added error handling
[ci skip]
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/blob/notebook_viewer.js | 56 |
1 files changed, 40 insertions, 16 deletions
diff --git a/app/assets/javascripts/blob/notebook_viewer.js b/app/assets/javascripts/blob/notebook_viewer.js index 4bd80393d17..45b838c700f 100644 --- a/app/assets/javascripts/blob/notebook_viewer.js +++ b/app/assets/javascripts/blob/notebook_viewer.js @@ -5,11 +5,7 @@ import NotebookLab from 'vendor/notebooklab'; Vue.use(VueResource); Vue.use(NotebookLab); -Vue.config.errorHandler = (err) => { - console.log(err); -} - -$(() => { +document.addEventListener('DOMContentLoaded', () => { const el = document.getElementById('js-notebook-viewer'); new Vue({ @@ -17,21 +13,53 @@ $(() => { data() { return { error: false, + loadError: false, loading: true, json: {}, }; }, template: ` - <div class="container-fluid"> - <i - class="fa fa-spinner fa-spin" - v-if="loading"> - </i> + <div class="container-fluid md prepend-top-default append-bottom-default"> + <div + class="text-center loading" + v-if="loading && !error"> + <i + class="fa fa-spinner fa-spin" + aria-hidden="true" + aria-label="iPython notebook loading"> + </i> + </div> <notebook-lab - v-if="!loading" + v-if="!loading && !error" :notebook="json" /> + <p + class="text-center" + v-if="error"> + <span v-if="loadError"> + An error occured whilst loading the file. Please try again later. + </span> + <span v-else> + An error occured whilst parsing the file. + </span> + </p> </div> `, + methods: { + loadFile() { + this.$http.get(el.dataset.endpoint) + .then((res) => { + this.json = res.json(); + this.loading = false; + }) + .catch((e) => { + if (e.status) { + this.loadError = true; + } + + this.error = true; + }); + }, + }, mounted() { $('<link>', { rel: 'stylesheet', @@ -40,11 +68,7 @@ $(() => { }).appendTo('head'); $.getScript(gon.katex_js_url, () => { - this.$http.get(el.dataset.endpoint) - .then((res) => { - this.json = res.json(); - this.loading = false; - }); + this.loadFile(); }); }, }); |