#33 Initial work toward a snackbar factory

Author: NiloCK

src/App.vue

@@ -76,16 +76,19 @@
     <v-footer :fixed="fixed" app>
       <span>&copy; 2017</span>
     </v-footer>
+    <snackbar-service options="{text:'hllo', status: 'ok'}" id="SnackbarService" ref="SnackbarService" />
   </v-app>
 </template>
 
 <script lang="ts">
 import UserLoginAndRegistrationContainer from '@/components/UserLoginAndRegistrationContainer.vue';
+import SnackbarService from '@/components/SnackbarService.vue';
 
 export default {
   name: 'App',
   components: {
-    UserLoginAndRegistrationContainer
+    UserLoginAndRegistrationContainer,
+    SnackbarService
   },
   data() {
     return {

src/components/HelloWorld.vue

@@ -13,7 +13,8 @@
         </blockquote>
         <h1>Hi</h1>
 
-    <UserLogin />
+        <v-btn color="success" @click="newSnack">text</v-btn>
+    <!-- <UserLogin /> -->
 
       </v-layout>
     </v-slide-y-transition>
@@ -22,6 +23,8 @@
 
 <script lang="ts">
 import UserLogin from './UserLogin.vue';
+import SnackbarService from '@/components/SnackbarService.vue';
+import { Status } from '@/enums/Status';
 
 export default {
   name: 'HelloWorld',
@@ -30,6 +33,14 @@ export default {
   },
   components: {
     UserLogin
+  },
+  methods: {
+    newSnack: () => {
+      SnackbarService.addSnack({
+        text: 'test',
+        status: Status.ok
+      });
+    }
   }
 };
 </script>

src/components/SnackbarService.vue

@@ -0,0 +1,96 @@
+<template>
+  <v-snackbar
+    v-model="show"
+    :timeout="options.timeout"
+    bottom
+    right
+  >
+    {{ options.text }}
+    
+
+    <v-btn
+        color="pink"
+        flat
+        @click="snackbar = false"
+      >
+        Close
+      </v-btn>
+  </v-snackbar>
+</template>
+
+
+<script lang="ts">
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import { Status } from '@/enums/Status';
+import { Prop, Watch } from 'vue-property-decorator';
+import { watch } from 'fs';
+
+interface SnackbarOptions {
+  text: string;
+  status: Status;
+  timeout?: number;
+}
+
+@Component
+export default class SnackbarService extends Vue {
+  public static addSnack(options: SnackbarOptions) {
+    options = {
+      text: options.text,
+      status: options.status,
+      timeout: options.timeout !== undefined ? options.timeout : 5000
+    };
+
+    // get singleton instance of snackbar service
+    const service: SnackbarService =
+      (document.getElementById('SnackbarService')! as any) as SnackbarService;
+
+    // // update the props
+    service.options = options;
+    service.show = true;
+    service.$forceUpdate();
+    // const snack = new SnackbarService();
+    // snack.options = options;
+
+  }
+
+  @Prop({
+    default: () => {
+      return {
+        text: 'This is some text',
+        status: Status.ok,
+        timeout: 5000
+      };
+    }
+  }) private options: SnackbarOptions;
+  private show: boolean = true;
+
+  public created() {
+    if (this.$store.state.snack) {
+      this.options = this.$store.state.snack;
+    }
+  }
+
+  @Watch('$store.state.snack')
+  public update() {
+    if (this.$store.state.snack) {
+      this.options = this.$store.state.snack;
+    }
+  }
+
+
+  /**
+   * A history of snacks served in this session.
+   *
+   * Possible future work: write these to localstorage/pouchdb
+   * for persistance
+   */
+  // private snacks: SnackbarOptions[] = [];
+
+  private clearSnack() {
+    this.$store.state.snack = {};
+    delete this.$store.state.snack;
+    this.show = false;
+  }
+}
+</script>