2019-11-13 21:02:44 +00:00
|
|
|
<template>
|
2019-11-13 22:21:19 +00:00
|
|
|
<div id="app">
|
2019-12-20 22:43:10 +00:00
|
|
|
<AddItem v-if="addModalOpen" @close="closeAddModal()" isModal="true"/>
|
|
|
|
<Navbar @addClicked="openAddModal()"/>
|
|
|
|
<router-view/>
|
2019-12-27 01:08:24 +00:00
|
|
|
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-end align-items-start fixed-top mx-1 my-5 py-3" style="min-height: 200px; z-index: 100000">
|
2019-12-27 01:06:04 +00:00
|
|
|
<Toast v-for="toast in toasts" :key="toast" :title="toast.title" :message="toast.message" :color="toast.color" @close="removeToast(toast.key)"/>
|
|
|
|
</div>
|
2019-11-13 22:21:19 +00:00
|
|
|
</div>
|
2019-11-13 21:02:44 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2019-11-14 02:59:17 +00:00
|
|
|
import Navbar from '@/components/Navbar';
|
2019-12-20 22:43:10 +00:00
|
|
|
import AddItem from '@/components/AddItem';
|
2019-12-27 01:06:04 +00:00
|
|
|
import Toast from './components/Toast';
|
|
|
|
import { mapState, mapMutations } from 'vuex';
|
2019-11-14 03:37:35 +00:00
|
|
|
|
2019-11-13 21:02:44 +00:00
|
|
|
export default {
|
2019-11-14 01:22:20 +00:00
|
|
|
name: 'app',
|
2019-12-27 01:06:04 +00:00
|
|
|
components: { Toast, Navbar, AddItem },
|
|
|
|
computed: mapState(['loadedItems', 'layout', 'toasts']),
|
2019-12-20 22:43:10 +00:00
|
|
|
data: () => ({
|
|
|
|
addModalOpen: false
|
|
|
|
}),
|
|
|
|
methods: {
|
2019-12-27 01:06:04 +00:00
|
|
|
...mapMutations(['removeToast']),
|
2019-12-20 22:43:10 +00:00
|
|
|
openAddModal() {
|
|
|
|
this.addModalOpen = true;
|
|
|
|
},
|
|
|
|
closeAddModal() {
|
|
|
|
this.addModalOpen = false;
|
|
|
|
}
|
|
|
|
}
|
2019-11-13 21:21:47 +00:00
|
|
|
};
|
2019-11-13 21:02:44 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style>
|
2019-11-14 01:22:20 +00:00
|
|
|
body, html, #app {
|
2019-11-14 18:30:00 +00:00
|
|
|
background: #000;
|
2019-11-14 01:22:20 +00:00
|
|
|
}
|
2019-11-13 21:02:44 +00:00
|
|
|
</style>
|
2019-12-01 21:00:06 +00:00
|
|
|
|