Added loading indication for DO regions

This commit is contained in:
Ivan Gromov 2020-02-26 01:07:03 +05:00
parent 4867a034f8
commit 28ac131350
2 changed files with 16 additions and 5 deletions

View file

@ -86,6 +86,7 @@ new Vue({
el: '#provider_app',
data: {
loading: false,
do_region_loading: false,
do_regions: [],
extra_args: provider_extra_args,
providers_map: [
@ -115,6 +116,7 @@ new Vue({
this.extra_args.do_token
) {
this.loading = true;
this.do_region_loading = true;
fetch('/do/regions', {
method: 'POST',
headers: {
@ -128,6 +130,7 @@ new Vue({
})
.finally(() => {
this.loading = false;
this.do_region_loading = false;
});
}
}
@ -161,6 +164,9 @@ new Vue({
},
show_backdrop() {
return this.status === 'running';
},
is_success() {
return this.result === 0;
}
},
watch: {

View file

@ -5,8 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/xterm/3.14.5/xterm.min.css"
integrity="sha256-uTIrmf95e6IHlacC0wpDaPS58eWF314UC7OgdrD6AdU=" crossorigin="anonymous"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"
integrity="sha256-chlNFSVx3TdcQ2Xlw7SvnbLAavAQLO0Y/LBiWX04viY=" crossorigin="anonymous"></script>
<style>
@ -178,8 +176,14 @@
@blur="load_do_regions"/>
</div>
<div class="form-group">
<label for="id_region">What region should the server be located in?</label>
<select name="region" id="id_region" class="form-control" v-model="extra_args.region">
<label v-if="do_regions.length > 0" for="id_region">What region should the server be located in?</label>
<label v-if="do_regions.length === 0" for="id_region">Please enter API key above to select region</label>
<label v-if="do_region_loading" for="id_region">Loading regions...</label>
<select name="region"
id="id_region"
class="form-control"
v-model="extra_args.region"
v-bind:disabled="do_region_loading">
<option value="" disabled>Select region</option>
<option
v-for="(region, index) in do_regions"
@ -213,7 +217,8 @@
</div>
<div v-if="status === 'done'">
<pre class="console">{{program.join(' ')}}</pre>
<div class="text-success">Done!</div>
<div v-if="is_success" class="text-success">Done!</div>
<div v-else class="text-danger">Failed!</div>
</div>
</div>
</footer>