jacob1123/budgeteer
1
1
Fork 0
Code Issues 12 Pull Requests 1 Packages Releases 1 Wiki Activity

And on…

Browse Source
This commit is contained in:
Jan Bader 2022-02-09 23:14:46 +00:00
parent 08330ce33c
commit 9b8ae7a44d
1 changed files with 67 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
web/src/App.vue
View File

@ -1,77 +1,88 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from "vue"; import { defineComponent } from "vue";
import { LOGOUT } from "./store/mutation-types"; import { LOGOUT } from "./store/mutation-types";
import { useBudgetsStore } from "./stores/budgets";
import { useSessionStore } from "./stores/session";
import { useSettingsStore } from "./stores/settings";
export default defineComponent({ export default defineComponent({
computed: { computed: {
loggedIn() { loggedIn() {
return this.$store.state.Session.Token; return this.$store.state.Session.Token;
} }
},
methods: {
logout () {
this.$store.commit(LOGOUT);
this.$router.push("/login")
}, },
toggleMenu () { methods: {
this.$store.commit("toggleMenu"); logout() {
this.$store.commit(LOGOUT);
this.$router.push("/login")
},
toggleMenu() {
this.$store.commit("toggleMenu");
},
toggleMenuSize() {
this.$store.commit("toggleMenuSize");
}
}, },
toggleMenuSize () { beforeCreate() {
this.$store.commit("toggleMenuSize"); const store = localStorage.getItem("store");
if (!store)
return;
const restoredState = JSON.parse(store);
if (!restoredState)
return;
const sessionStore = useSessionStore();
sessionStore.User = restoredState.Session.User;
sessionStore.Token = restoredState.Session.Token;
for (const budget of restoredState.Budgets || []) {
sessionStore.Budgets.set(budget[0], budget[1]);
}
const budgetsStore = useBudgetsStore();
budgetsStore.CurrentBudgetID = restoredState.CurrentBudgetID;
const settingsStore = useSettingsStore();
settingsStore.ShowMenu = restoredState.ShowMenu;
settingsStore.ExpandMenu = restoredState.ExpandMenu;
} }
},
beforeCreate () {
const store = localStorage.getItem("store");
if (!store)
return;
const restoredState = JSON.parse(store);
if (!restoredState)
return;
state.Session = restoredState.Session;
state.CurrentBudgetID = restoredState.CurrentBudgetID;
state.ShowMenu = restoredState.ShowMenu;
state.ExpandMenu = restoredState.ExpandMenu;
for (const budget of restoredState.Budgets || []) {
state.Budgets.set(budget[0], budget[1]);
}
}
}) })
</script> </script>
<template> <template>
<div class="box-border w-full"> <div class="box-border w-full">
<div class="flex bg-gray-400 p-4 m-2 rounded-lg"> <div class="flex bg-gray-400 p-4 m-2 rounded-lg">
<span class="flex-1 font-bold text-5xl -my-3 hidden md:inline" @click="toggleMenuSize">≡</span> <span class="flex-1 font-bold text-5xl -my-3 hidden md:inline" @click="toggleMenuSize">≡</span>
<span class="flex-1 font-bold text-5xl -my-3 md:hidden" @click="toggleMenu">≡</span> <span class="flex-1 font-bold text-5xl -my-3 md:hidden" @click="toggleMenu">≡</span>
<span class="flex-1">{{$store.getters.CurrentBudgetName}}</span> <span class="flex-1">{{ $store.getters.CurrentBudgetName }}</span>
<div class="flex flex-1 flex-row justify-end -mx-4"> <div class="flex flex-1 flex-row justify-end -mx-4">
<router-link class="mx-4" v-if="loggedIn" to="/dashboard">Dashboard</router-link> <router-link class="mx-4" v-if="loggedIn" to="/dashboard">Dashboard</router-link>
<router-link class="mx-4" v-if="!loggedIn" to="/login">Login</router-link> <router-link class="mx-4" v-if="!loggedIn" to="/login">Login</router-link>
<a class="mx-4" v-if="loggedIn" @click="logout">Logout</a> <a class="mx-4" v-if="loggedIn" @click="logout">Logout</a>
</div> </div>
</div>
<div class="flex flex-col md:flex-row flex-1">
<div
:class="[$store.state.ExpandMenu ? 'md:w-72' : 'md:w-36', $store.state.ShowMenu ? '' : 'hidden']"
class="md:block flex-shrink-0 w-full"
>
<router-view name="sidebar"></router-view>
</div>
<div class="flex-1 p-6">
<router-view></router-view>
</div>
</div>
</div> </div>
<div class="flex flex-col md:flex-row flex-1">
<div :class="[$store.state.ExpandMenu ? 'md:w-72' : 'md:w-36', $store.state.ShowMenu ? '' : 'hidden']" class="md:block flex-shrink-0 w-full">
<router-view name="sidebar"></router-view>
</div>
<div class="flex-1 p-6">
<router-view></router-view>
</div>
</div>
</div>
</template> </template>
<style> <style>
#app { #app {
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
</style> </style>