Commit ffdfb6f7 authored by Yohan Boniface's avatar Yohan Boniface

Explorer: minimalist progress bar

parent 3dee5cc7
......@@ -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)
})
}
......@@ -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++) {
......
......@@ -12,8 +12,7 @@
<script>
this.items = []
fetch('../explore/glossary')
.then((response) => response.json())
request('../explore/glossary')
.then((data) => {
this.items = data
this.update()
......
......@@ -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()
......
<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>
......@@ -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)
}
......
......@@ -52,8 +52,7 @@
}
this.load = () => {
fetch('../explore/scenarios')
.then((response) => response.json())
request('../explore/scenarios')
.then(this.load_data)
}
......
......@@ -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) => {
......
......@@ -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>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment