From 704f6fd3fee1b90941314b166cbd48c8c510de0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Fri, 16 Oct 2020 13:54:01 +0200
Subject: [PATCH] =?UTF-8?q?Loading=20hinzugef=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Circular Progress kann nun mit Logo verwendet werden.
Beim Anmelden wird der Bildschirm beim Laden gesperrt.
---
 quasar.conf.js                              |  2 +-
 src/components/loading/CircularProgress.vue | 23 +++++++++++++++++++++
 src/plugins/user/pages/Settings.vue         | 14 ++++++++++---
 src/plugins/user/store/session.ts           |  5 ++++-
 src/plugins/user/store/user.ts              |  4 +++-
 5 files changed, 42 insertions(+), 6 deletions(-)
 create mode 100644 src/components/loading/CircularProgress.vue

diff --git a/quasar.conf.js b/quasar.conf.js
index e6f0708..f503dd4 100644
--- a/quasar.conf.js
+++ b/quasar.conf.js
@@ -103,7 +103,7 @@ module.exports = configure(function(ctx) {
       // directives: [],
 
       // Quasar plugins
-      plugins: ['LocalStorage']
+      plugins: ['LocalStorage', 'Loading']
     },
 
     // animations: 'all', // --- includes all animations
diff --git a/src/components/loading/CircularProgress.vue b/src/components/loading/CircularProgress.vue
new file mode 100644
index 0000000..b59b9d9
--- /dev/null
+++ b/src/components/loading/CircularProgress.vue
@@ -0,0 +1,23 @@
+<template>
+  <q-circular-progress
+    indeterminate
+    show-value
+    font-size="10px"
+    class="q-ma-md"
+    size="80px"
+    :thickness="0.15"
+    color="primary"
+    track-color="grey-3"
+  >
+    <q-avatar size="60px">
+      <img src="logo-dark.svg" />
+    </q-avatar>
+  </q-circular-progress>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+export default defineComponent({
+  name: 'CircularProgress'
+});
+</script>
diff --git a/src/plugins/user/pages/Settings.vue b/src/plugins/user/pages/Settings.vue
index 0146030..e0f0bf9 100644
--- a/src/plugins/user/pages/Settings.vue
+++ b/src/plugins/user/pages/Settings.vue
@@ -7,6 +7,8 @@
       <div
         class="fit row justify-center content-center items-center q-gutter-sm"
       >
+        <circular-progress v-if="sessionsLoading" />
+        <div>tada:: {{ sessionsLoading }}</div>
         <q-card
           class="col-12"
           height=""
@@ -62,10 +64,10 @@
 
 <script lang="ts">
 import { computed, defineComponent, onBeforeMount } from '@vue/composition-api';
-import { mainLink } from '../plugin';
-import { platform } from 'os';
+import CircularProgress from 'components/loading/CircularProgress.vue';
 export default defineComponent({
   // name: 'PageName'
+  components: { CircularProgress },
   setup(_, { root }) {
     onBeforeMount(() => {
       root.$store.dispatch('sessions/getSessions');
@@ -101,13 +103,19 @@ export default defineComponent({
     function isThisSession(token: string) {
       return root.$store.getters['user/token'].token == token;
     }
+
+    const sessionsLoading = computed(() => {
+      return root.$store.getters['sessions/loading'];
+    });
+
     return {
       showRootGetters,
       sessions,
       getBrowserIcon,
       getPlatformIcon,
       isThisSession,
-      deleteSession
+      deleteSession,
+      sessionsLoading
     };
   }
 });
diff --git a/src/plugins/user/store/session.ts b/src/plugins/user/store/session.ts
index 8cd8e05..da47218 100644
--- a/src/plugins/user/store/session.ts
+++ b/src/plugins/user/store/session.ts
@@ -26,7 +26,7 @@ const mutations: MutationTree<SessionInterface> = {
   setSessions(state, sessions: Session[]) {
     state.sessions = sessions;
   },
-  setLoading(state, value) {
+  setLoading(state, value: boolean) {
     state.loading = value;
   }
 };
@@ -71,6 +71,9 @@ const actions: ActionTree<SessionInterface, StateInterface> = {
 const getters: GetterTree<SessionInterface, StateInterface> = {
   sessions(state) {
     return state.sessions;
+  },
+  loading(state) {
+    return state.loading;
   }
 };
 
diff --git a/src/plugins/user/store/user.ts b/src/plugins/user/store/user.ts
index a721d6b..1f6cdc2 100644
--- a/src/plugins/user/store/user.ts
+++ b/src/plugins/user/store/user.ts
@@ -3,7 +3,7 @@ import { StateInterface } from 'src/store';
 import { axios } from 'boot/axios';
 import { LoginData } from 'src/plugins/user/models';
 import { AxiosResponse } from 'axios';
-import { LocalStorage } from 'quasar';
+import { LocalStorage, Loading } from 'quasar';
 import { Router } from 'src/router';
 
 export interface Token {
@@ -72,6 +72,7 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
   login({ commit }, data: LoginData) {
     console.log('bla');
     commit('setLoginLoading', true);
+    Loading.show({ message: 'Du wirst eingeloggt' });
     void axios
       .post('http://localhost:5000/auth', data)
       .then((response: AxiosResponse<LoginResponse>) => {
@@ -93,6 +94,7 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
       })
       .finally(() => {
         commit('setLoginLoading', false);
+        Loading.hide();
       });
   }
 };