Refactored CreateCommunityStation.vue to use new Modal system

frontend/App.vue

@@ -6,7 +6,6 @@
 		<what-is-new></what-is-new>
 		<login-modal v-if='isLoginActive'></login-modal>
 		<register-modal v-if='isRegisterActive'></register-modal>
-		<create-community-station v-if='isCreateCommunityStationActive'></create-community-station>
 	</div>
 </template>
 
@@ -16,7 +15,6 @@
 	import WhatIsNew from './components/Modals/WhatIsNew.vue';
 	import LoginModal from './components/Modals/Login.vue';
 	import RegisterModal from './components/Modals/Register.vue';
-	import CreateCommunityStation from './components/Modals/CreateCommunityStation.vue';
 	import auth from './auth';
 	import io from './io';
 
@@ -39,7 +37,6 @@
 				userId: '',
 				isRegisterActive: false,
 				isLoginActive: false,
-				isCreateCommunityStationActive: false,
 				serverDomain: '',
 				socketConnected: true
 			}
@@ -126,16 +123,13 @@
 					case 'login':
 						this.isLoginActive = !this.isLoginActive;
 						break;
-					case 'createCommunityStation':
-						this.isCreateCommunityStationActive = !this.isCreateCommunityStationActive;
-						break;
 				}
 			},
 			'closeModal': function() {
 				this.$broadcast('closeModal');
 			}
 		},
-		components: { Toast, WhatIsNew, LoginModal, RegisterModal, CreateCommunityStation }
+		components: { Toast, WhatIsNew, LoginModal, RegisterModal }
 	}
 </script>
 

frontend/components/Modals/CreateCommunityStation.vue

@@ -1,38 +1,33 @@
 <template>
-	<div class='modal is-active'>
-		<div class='modal-background'></div>
-		<div class='modal-card'>
-			<header class='modal-card-head'>
-				<p class='modal-card-title'>Create community station</p>
-				<button class='delete' @click='toggleModal()'></button>
-			</header>
-			<section class='modal-card-body'>
-				<!-- validation to check if exists http://bulma.io/documentation/elements/form/ -->
-				<label class='label'>Unique ID (lowercase, a-z, used in the url)</label>
-				<p class='control'>
-					<input class='input' type='text' placeholder='Name...' v-model='newCommunity._id' autofocus>
-				</p>
-				<label class='label'>Display Name</label>
-				<p class='control'>
-					<input class='input' type='text' placeholder='Display name...' v-model='newCommunity.displayName'>
-				</p>
-				<label class='label'>Description</label>
-				<p class='control'>
-					<input class='input' type='text' placeholder='Description...' v-model='newCommunity.description' @keyup.enter="submitModal()">
-				</p>
-			</section>
-			<footer class='modal-card-foot'>
-				<a class='button is-primary' @click='submitModal()'>Create</a>
-			</footer>
+	<modal title='Create Community Station'>
+		<div slot='body'>
+			<!-- validation to check if exists http://bulma.io/documentation/elements/form/ -->
+			<label class='label'>Unique ID (lowercase, a-z, used in the url)</label>
+			<p class='control'>
+				<input class='input' type='text' placeholder='Name...' v-model='newCommunity._id' autofocus>
+			</p>
+			<label class='label'>Display Name</label>
+			<p class='control'>
+				<input class='input' type='text' placeholder='Display name...' v-model='newCommunity.displayName'>
+			</p>
+			<label class='label'>Description</label>
+			<p class='control'>
+				<input class='input' type='text' placeholder='Description...' v-model='newCommunity.description' @keyup.enter="submitModal()">
+			</p>
 		</div>
-	</div>
+		<div slot='footer'>
+			<a class='button is-primary' @click='submitModal()'>Create</a>
+		</div>
+	</modal>
 </template>
 
 <script>
 	import { Toast } from 'vue-roaster';
+	import Modal from './Modal.vue';
 	import io from '../../io';
 
 	export default {
+		components: { Modal },
 		data() {
 			return {
 				newCommunity: {
@@ -50,7 +45,7 @@
 		},
 		methods: {
 			toggleModal: function () {
-				this.$dispatch('toggleModal', 'createCommunityStation');
+				this.$parent.modals.createCommunityStation = !this.$parent.modals.createCommunityStation;
 			},
 			submitModal: function () {
 				let _this = this;
@@ -71,7 +66,7 @@
 		},
 		events: {
 			closeModal: function() {
-				this.$dispatch('toggleModal', 'createCommunityStation');
+				this.$parent.modals.createCommunityStation = !this.$parent.modals.createCommunityStation;
 			}
 		}
 	}

frontend/components/pages/Home.vue

@@ -29,7 +29,11 @@
 			</div>
 		</div>
 		<div class="group">
-			<div class="group-title">Community Stations <a @click="toggleModal('createCommunityStation')" v-if="$parent.loggedIn" href='#'><i class="material-icons community-button">add_circle_outline</i></a></div>
+			<div class="group-title">
+				Community Stations&nbsp;
+				<a @click='modals.createCommunityStation = !modals.createCommunityStation' v-if="$parent.loggedIn" href='#'>
+				<i class="material-icons community-button">add_circle_outline</i></a>
+			</div>
 			<div class="card station-card" v-for="station in stations.community" v-link="{ path: '/community/' + station._id }" @click="this.$dispatch('joinStation', station._id)">
 				<div class="card-image">
 					<figure class="image is-square">
@@ -60,25 +64,28 @@
 		</div>
 		<main-footer></main-footer>
 	</div>
+	<create-community-station v-if='modals.createCommunityStation'></create-community-station>
 </template>
 
 <script>
 	import MainHeader from '../MainHeader.vue';
 	import MainFooter from '../MainFooter.vue';
+	import CreateCommunityStation from '../Modals/CreateCommunityStation.vue';
 	import auth from '../../auth';
 	import io from '../../io';
 
 	export default {
 		data() {
 			return {
-				isRegisterActive: false,
-				isLoginActive: false,
 				recaptcha: {
 					key: ''
 				},
 				stations: {
 					official: [],
 					community: []
+				},
+				modals: {
+					createCommunityStation: false
 				}
 			}
 		},
@@ -144,7 +151,7 @@
 				return station.owner === _this.$parent.userId && station.privacy === 'public';
 			}
 		},
-		components: { MainHeader, MainFooter }
+		components: { MainHeader, MainFooter, CreateCommunityStation }
 	}
 </script>