Merge branch 'master' of github.com:ackzell/voicemail into 1-split-co…

…mponents

pages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <v-row align="center" justify="center">
-    <v-col cols="12" sm="8" lg="6">
+    <v-col cols="12" sm="8" lg="4">
       <p class="caption text-right">
         You can record a quick message (up to 1 min) and send it to us!
       </p>
@@ -82,7 +82,7 @@
           <v-btn
             large
             color="primary"
-            :disabled="(!recordings.length && !selected) || sending"
+            :disabled="(!recordings.length && !selected) || !name || sending"
             @click="send"
             >{{ sending ? 'Sending...' : 'Send it!' }}</v-btn
           >
@@ -93,6 +93,19 @@
         ></v-progress-linear>
       </v-card>
     </v-col>
+    <v-snackbar
+      v-model="snackbar"
+      :timeout="0"
+      top
+      :color="snackbarError ? 'red accent-4' : 'green darken-2'"
+      multi-line
+      vertical
+    >
+      <span v-html="snackbarText"></span>
+      <v-btn text @click="snackbar = false">
+        Close
+      </v-btn>
+    </v-snackbar>
   </v-row>
 </template>
 
@@ -123,7 +136,10 @@ export default {
       count: 0,
       TIME_LIMIT: 60,
       sending: false,
-      uploadProgress: 0
+      uploadProgress: 0,
+      snackbar: false,
+      snackbarText: '',
+      snackbarError: false
     }
   },
   created() {
@@ -235,10 +251,14 @@ export default {
       console.warn('Recording stopped')
     },
     send() {
+      this.snackbar = false
       this.sending = true
       const selectedTrack = this.recordings[this.selected]
       const storageRef = this.$fireStorage.ref()
-      const audioRef = storageRef.child(`${this.name}-${selectedTrack.id}`)
+      const today = new Date().toLocaleDateString('es-MX').replace(/\//g, '-')
+      const audioRef = storageRef.child(
+        `${today}/${this.name}-${selectedTrack.id}`
+      )
 
       const uploadTask = audioRef.put(selectedTrack.blob)
 
@@ -250,11 +270,18 @@ export default {
         },
         () => {
           // error
+          this.snackbar = true
+          this.snackbarError = true
+          this.snackbarText = 'There was an error, please try again 😖'
         },
         () => {
           // success
           this.sending = false
           this.uploadProgress = 0
+
+          this.snackbar = true
+          this.snackbarText =
+            "Your audio was uploaded! <br> We'll make sure to add it in the next available spot in the newsletter 😎"
         }
       )
     }