Explorer: minimalist progress bar

trefle/explorer/app.js

@@ -14,12 +14,36 @@ function renderLabel (key, value) {
   return SCHEMA[key]['label']
 }
 
+REQUESTS = 0
 
-function init () {
-  fetch('../explore/schema')
-  .then((response) => response.json())
-  .then((data) => {
-    SCHEMA = data
-    route.start(true)
+function request(uri, settings) {
+  return new Promise( (res, rej) => {
+    const xhr = new XMLHttpRequest(),
+          progress = document.querySelector('#progress'),
+          close = () => {if (!--REQUESTS) progress.style.display = 'none'}
+    settings = settings || {};
+    REQUESTS++
+    progress.style.display = 'block'
+    xhr.onprogress = (e) => {
+      if (e.lengthComputable) progress.value = Math.round(e.loaded * 100 / e.total)
+    }
+    xhr.open(settings.method || 'get', uri, true)
+    xhr.onload = (e) => {
+      res(JSON.parse(e.target.responseText))
+      close()
+    }
+    xhr.onerror = (err) => {
+      close()
+      rej(err)
+    }
+    xhr.send(settings.body)
   })
 }
+
+function init () {
+  request('../explore/schema')
+    .then((data) => {
+      SCHEMA = data
+      route.start(true)
+    })
+}

trefle/explorer/components/financements.tag.html

@@ -17,8 +17,7 @@
     this.on('mount', () => this.load())
 
     this.load = () => {
-      fetch('../explore/financements')
-      .then((response) => response.json())
+      request('../explore/financements')
       .then(data => {
         this.financements = data
         for (var i = 0; i < this.financements.length; i++) {

trefle/explorer/components/glossary.tag.html

@@ -12,8 +12,7 @@
 
   <script>
     this.items = []
-    fetch('../explore/glossary')
-    .then((response) => response.json())
+    request('../explore/glossary')
     .then((data) => {
       this.items = data
       this.update()

trefle/explorer/components/idcc-search.tag.html

@@ -17,8 +17,7 @@
     this.results = []
 
     this.search = (text) => {
-      fetch(`http://163.172.180.45/search/?q=${text}`)
-      .then((response) => response.json())
+      request(`http://163.172.180.45/search/?q=${text}`)
       .then((data) => {
         this.results = data.results
         this.update()

trefle/explorer/components/navbar.tag.html

 <navbar>
+  <progress style="display: none" id="progress" />
   <h1><a href=".">☘</a></h1>
   <nav>
     <a href="#schema">Schéma</a>
@@ -36,5 +37,18 @@
       display: flex;
       align-items: center;
     }
+    progress {
+      position: absolute;
+      width: 100%;
+      left: 0;
+      right: 0;
+      top: 0;
+      height: 5px;
+    }
   </style>
+
+  <script>
+    this.on('mount', () => init())
+  </script>
+
 </navbar>

trefle/explorer/components/rules.tag.html

@@ -35,8 +35,7 @@
 
     this.load = () => {
       if (RULES) return this.load_data(RULES)
-      fetch('../explore/rules')
-      .then((response) => response.json())
+      request('../explore/rules')
       .then(this.load_data)
     }
 

trefle/explorer/components/scenarios.tag.html

@@ -52,8 +52,7 @@
     }
 
     this.load = () => {
-      fetch('../explore/scenarios')
-      .then((response) => response.json())
+      request('../explore/scenarios')
       .then(this.load_data)
     }
 

trefle/explorer/components/simulate.tag.html

@@ -68,21 +68,21 @@
     }
 
     this.decodeLBFURL = (url, callback) => {
-      fetch(`../explore/decode-lbf-url?url=${encodeURIComponent(url)}`)
-      .then((response) => this.handleResponse(response, callback))
+      request(`../explore/decode-lbf-url?url=${encodeURIComponent(url)}`)
+      .then(callback)
     }
 
     this.simulate = (data) => {
-      fetch('/financement?context=1&scenario=1&explain=1', {
+      request('/financement?context=1&scenario=1&explain=1', {
         method: 'post',
         body: JSON.stringify(data)
       })
-      .then((response) => this.handleResponse(response, (data) => {
+      .then((data) => {
         this.financements = data.financements
         this.context = data.context
         this.scenario = data.scenario
         this.update()
-      }))
+      })
     }
 
     this.submit = (e) => {

trefle/explorer/index.html

@@ -31,7 +31,6 @@
 </main>
 
 <script>
-  riot.mount('navbar')
   route('/schema/(.+)', (id) => riot.mount('schema', {id: id}))
   route('/schema', () => riot.mount('schema'))
   route('/rules/(.+)', (id) => riot.mount('rules', {id: id}))
@@ -43,6 +42,5 @@
   route('/tools', () => riot.mount('tools'))
   route('/financements', () => riot.mount('financements'))
   route('/glossary', () => riot.mount('glossary'))
-
-  init();
+  riot.mount('navbar')
 </script>