From 9a5e3520d35ce01ffcb07695deffbaa7feeaadfd Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Mon, 8 Mar 2021 15:53:12 +0100
Subject: [PATCH] add new station modal

---
 src/views/Favorites.vue | 32 ++++++++++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/views/Favorites.vue b/src/views/Favorites.vue
index b64acba..e4fa44a 100644
--- a/src/views/Favorites.vue
+++ b/src/views/Favorites.vue
@@ -31,10 +31,16 @@
 					<Breadcrumb title="Favorites" href="#/favorites" />
 				</Breadcrumbs>
 				<Actions>
-					<ActionButton icon="icon-add" @click="alert('Add')">
+					<ActionButton
+						icon="icon-add"
+						:close-after-click="true"
+						@click="showModal()">
 						Add station
 					</ActionButton>
-					<ActionButton icon="icon-download" @click="alert('Export')">
+					<ActionButton
+						icon="icon-download"
+						:close-after-click="true"
+						@click="alert('Export')">
 						Export favorites
 					</ActionButton>
 				</Actions>
@@ -57,6 +63,11 @@
 					{{ emptyContentDesc }}
 				</template>
 			</EmptyContent>
+			<Modal v-if="modal" @close="closeModal">
+				<div class="modal__content">
+					Hello world
+				</div>
+			</Modal>
 		</AppContent>
 		<Sidebar
 			:show-sidebar="showSidebar"
@@ -73,6 +84,7 @@ import Breadcrumbs from '@nextcloud/vue/dist/Components/Breadcrumbs'
 import Breadcrumb from '@nextcloud/vue/dist/Components/Breadcrumb'
 import Actions from '@nextcloud/vue/dist/Components/Actions'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import Modal from '@nextcloud/vue/dist/Components/Modal'
 import Navigation from './../components/Navigation'
 import Table from './../components/Table'
 import Sidebar from './../components/Sidebar'
@@ -94,6 +106,7 @@ export default {
 		Actions,
 		ActionButton,
 		Sidebar,
+		Modal,
 	},
 	data: () => ({
 		pageLoading: false,
@@ -101,6 +114,7 @@ export default {
 		showSidebar: false,
 		sidebarStation: {},
 		tableData: [],
+		modal: false,
 	}),
 	computed: {
 		...mapGetters([
@@ -190,6 +204,14 @@ export default {
 			}
 		},
 
+		showModal() {
+			this.modal = true
+		},
+
+		closeModal() {
+			this.modal = false
+		},
+
 	},
 }
 </script>
@@ -215,6 +237,12 @@ export default {
 	display: none;
 }
 
+.modal__content {
+	width: 50vw;
+	text-align: center;
+	margin: 10vw 0;
+}
+
 @media only screen and (max-width: 1024px) {
 	.app-navigation-toggle {
 		display: block;