summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorSanto Cariotti <santo@dcariotti.me>2021-03-19 16:22:41 +0100
committerSanto Cariotti <santo@dcariotti.me>2021-03-19 16:22:41 +0100
commit0d6bd4aefc4e651be3f2fff15043d598e852df54 (patch)
tree23703efd4a602ef8fe3c9236e84642d6843a4ba9
parentd383bd08f0266406d4b0c9eb68c76e62c9d4a460 (diff)
feat: add loading
-rw-r--r--src/components/HeaderBlue.vue19
-rw-r--r--src/components/design/HeaderBlue.vue12
-rw-r--r--src/sass/_header.sass14
-rw-r--r--src/store.js14
-rw-r--r--src/views/Home.vue6
5 files changed, 48 insertions, 17 deletions
diff --git a/src/components/HeaderBlue.vue b/src/components/HeaderBlue.vue
new file mode 100644
index 0000000..d4ffa9f
--- /dev/null
+++ b/src/components/HeaderBlue.vue
@@ -0,0 +1,19 @@
+<template lang="pug">
+ header(:class="{active: loading}")
+ #big-loading(v-if="loading")
+ b-overlay(:show="true" spinner-large)
+ b-container
+ h1
+ a(href="/" rel="home") Gico
+</template>
+
+<script>
+export default {
+ name: "HeaderBlue",
+ computed: {
+ loading: function() {
+ return this.$store.getters.loading;
+ },
+ }
+}
+</script>
diff --git a/src/components/design/HeaderBlue.vue b/src/components/design/HeaderBlue.vue
deleted file mode 100644
index fd6d731..0000000
--- a/src/components/design/HeaderBlue.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template lang="pug">
- header
- b-container
- h1
- a(href="/" rel="home") Gico
-</template>
-
-<script>
-export default {
- name: "HeaderBlue",
-}
-</script>
diff --git a/src/sass/_header.sass b/src/sass/_header.sass
index e64a031..21f11bb 100644
--- a/src/sass/_header.sass
+++ b/src/sass/_header.sass
@@ -6,6 +6,20 @@ header
padding: 10px 0
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 0px
margin-bottom: 30px
+ &.active
+ z-index: 1044
+ #big-loading
+ top: 0
+ width: 100%
+ height: 100%
+ position: fixed
+ z-index: 1045
+ .b-overlay-wrap
+ height: 100%
+ background-color: rgba(0, 0, 0, .8)
+ .spinner-border
+ border-color: $primary
+ border-right-color: transparent
h1
font-size: 3em
margin: 0
diff --git a/src/store.js b/src/store.js
index 888add2..dab3529 100644
--- a/src/store.js
+++ b/src/store.js
@@ -6,10 +6,14 @@ Vue.use(Vuex)
export default new Vuex.Store({
state: {
api: process.env.VUE_APP_BACKEND_URL,
+ loading: false,
commits: [],
emails: {},
},
- get: {
+ getters: {
+ loading: state => {
+ return state.loading
+ },
commits: state => {
return state.commits
},
@@ -18,24 +22,29 @@ export default new Vuex.Store({
},
},
mutations: {
+ loading_state: (state, value) => {
+ state.loading = value
+ },
load_commits: (state, value) => {
state.commits = value
},
load_emails: (state, value) => {
- console.log(JSON.stringify(value))
state.emails = value
},
},
actions: {
// Get all commits from the api backend
async get_commits({commit}) {
+ commit('loading_state', true)
await fetch(`${this.state.api}/commit/`)
.then(async response => {
commit('load_commits', await response.json());
})
+ commit('loading_state', false)
},
// Get all emails and map them like an hash
async get_emails({commit}) {
+ commit('loading_state', true)
await fetch(`${this.state.api}/email/`)
.then(async response => {
const emails_list = await response.json();
@@ -47,6 +56,7 @@ export default new Vuex.Store({
commit('load_emails', emails_obj);
})
+ commit('loading_state', false)
},
},
modules: {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index e507ef8..b5fbda0 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -6,7 +6,7 @@
</template>
<script>
-import HeaderBlue from '@/components/design/HeaderBlue';
+import HeaderBlue from '@/components/HeaderBlue';
export default {
name: "Home",
@@ -19,10 +19,10 @@ export default {
},
computed: {
commits: () => {
- return this.$store.get.commits;
+ return this.$store.getters.commits;
},
emails: () => {
- return this.$store.get.emails;
+ return this.$store.getters.emails;
},
}
}