Added popup to select type

src/main.js

@@ -14,7 +14,8 @@ import {
     MdDrawer,
     MdList,
     MdAvatar,
-    MdRipple
+    MdRipple,
+    MdDialog
 } from 'vue-material/dist/components'
 
 import 'vue-material/dist/vue-material.min.css'
@@ -34,6 +35,7 @@ Vue.use(MdDrawer);
 Vue.use(MdList);
 Vue.use(MdAvatar);
 Vue.use(MdRipple);
+Vue.use(MdDialog);
 
 
 new Vue({

src/views/Dashboard.vue

@@ -1,5 +1,14 @@
 <template>
   <div class="page-container md-layout-column" id="dashboard-container">
+
+    <md-dialog :md-active.sync="showNewElementChooser">
+      <md-dialog-title>Select the type of the new element</md-dialog-title>
+      <md-button @click="newElement('ingest')">Ingest</md-button>
+      <md-button @click="newElement('encoder')">Encoder</md-button>
+      <md-button @click="newElement('restreamer')">Restreamer</md-button>
+
+    </md-dialog>
+
     <md-toolbar class="md-primary">
 
       <md-button class="md-icon-button" @click="showNavigation = true">
@@ -38,7 +47,7 @@
       <md-progress-bar v-if="true" class="md-accent" md-mode="indeterminate"></md-progress-bar>
 
       <div id="fab-holder">
-        <md-button class="md-fab">
+        <md-button class="md-fab" @click="performAddElement">
           <md-icon>add</md-icon>
         </md-button>
       </div>
@@ -53,8 +62,18 @@ export default {
   name: 'Dashboard',
   components: {},
   data: () => ({
-    showNavigation: false
+    showNavigation: false,
-  })
+    showNewElementChooser: false
+  }),
+  methods: {
+    performAddElement() {
+      this.showNewElementChooser = true;
+    },
+    newElement(type) {
+      console.log(type);
+      this.showNewElementChooser = false;
+    }
+  }
 
 }
 </script>