Reset button refactored + Toast message component

src/components/ResetAppButton.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="text-xs-center">
     <v-dialog
-      v-model="dialog"
+      v-model="showDialog"
       width="600"
       :fullscreen="$vuetify.breakpoint.smAndDown"
     >
@@ -19,47 +19,105 @@
 
         <v-divider />
 
-        <v-card-actions v-if="$vuetify.breakpoint.smAndDown">
-          <v-flex xs12 text-xs-center>
-            <div>
-              <v-btn color="primary" block flat @click="reset({ hostConfig: true })">Reset configuration</v-btn>
-            </div>
-            <div>
-              <v-btn color="primary" block flat @click="reset({ hostConfig: true, scenesList: true })">Reset everything</v-btn>
-            </div>
 
-            <div class="mt-4">
-              <v-btn color="secondary" block flat @click="dialog = false">Cancel</v-btn>
-            </div>
-          </v-flex>
-        </v-card-actions>
-
-        <v-card-actions v-else>
-          <v-btn color="secondary" flat @click="dialog = false">Cancel</v-btn>
+        <v-card-actions>
+          <v-btn color="secondary" flat @click="showDialog = false">Cancel</v-btn>
           <v-spacer />
-          <v-btn color="primary" flat @click="reset({ hostConfig: true })">Reset configuration</v-btn>
-          <v-btn color="primary" flat @click="reset({ hostConfig: true, scenesList: true })">Reset everything</v-btn>
+          <v-flex xs6>
+            <v-select
+              v-model="selectedItems"
+              :items="items"
+              label="Data to reset"
+              multiple
+              item-text="text"
+              item-value="value"
+              return-object
+              single-line
+              chips
+              deletable-chips
+            >
+              <template v-slot:prepend-item>
+                <v-list-tile ripple @click="toggle">
+                  <v-list-tile-action>
+                    <v-icon :color="selectedItems.length > 0 ? 'indigo darken-4' : ''">{{ icon }}</v-icon>
+                  </v-list-tile-action>
+                  <v-list-tile-content>
+                    <v-list-tile-title>Reset All</v-list-tile-title>
+                  </v-list-tile-content>
+                </v-list-tile>
+                <v-divider class="mt-2" />
+              </template>
+            </v-select>
+          </v-flex>
+          <v-btn color="primary" flat @click="reset" :disabled="!(selectedItems.length > 0)">Reset</v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
+
+    <toast-message ref="toast" />
   </div>
 </template>
 
 <script>
 import { mapActions } from 'vuex'
+import ToastMessage from '@/components/ToastMessage.vue'
 
 export default {
   name: 'ResetAppButton',
+  components: {
+    ToastMessage
+  },
   data() {
     return {
-      dialog: false
+      showDialog: false,
+
+      selectedItems: [],
+      items: [
+        { text: 'Host configuration', value: 'hostConfig' },
+        { text: 'Scenes list', value: 'scenesList' },
+        { text: 'Progression', value: 'progression' }
+      ]
+    }
+  },
+  computed: {
+    selectAll() {
+      return this.selectedItems.length === this.items.length
+    },
+    selectSome() {
+      return this.selectedItems.length > 0 && !this.selectAll
+    },
+    icon() {
+      if (this.selectAll) return 'mdi-close-box'
+      if (this.selectSome) return 'mdi-minus-box'
+      return 'mdi-checkbox-blank-outline'
     }
   },
   methods: {
+    toggle() {
+      this.$nextTick(() => {
+        if (this.selectAll) {
+          this.selectedItems = []
+        }
+        else {
+          this.selectedItems = this.items.slice()
+        }
+      })
+    },
+
     ...mapActions(['resetApp']),
-    reset(toResetObj) {
-      this.resetApp(toResetObj)
-      this.dialog = false
+    reset() {
+      const toReset = this.selectedItems.reduce((acc, x) => {
+        acc[x.value] = true
+        return acc
+      }, {})
+      try {
+        this.resetApp(toReset)
+        this.$refs.toast.show('Successfully reseted requested data')
+        this.showDialog = false
+      }
+      catch (err) {
+        this.$refs.toast.show(err.message, 'error', 10000)
+      }
     }
   }
 }

src/components/ToastMessage.vue

@@ -0,0 +1,49 @@
+<template>
+  <v-card>
+    <v-snackbar
+      v-model="isVisible"
+      :color="level"
+      :timeout="timeout"
+      multi-line
+    >
+      {{ text }}
+      <v-btn
+        dark
+        flat
+        @click="isVisible = false"
+      >
+        Close
+      </v-btn>
+    </v-snackbar>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: 'ToastMessage',
+  data() {
+    return {
+      text: '',
+      level: 'success',
+      timeout: 4000,
+      isVisible: false
+    }
+  },
+  methods: {
+    /**
+     * Briefly show a toast message
+     *
+     * @param {String} text toast to show
+     * @param {('info'|'success'|'error')} [level='success'] toast type
+     * @param {Number} [timeout=4000] amount of time the toast will be visible
+     * @returns {void}
+     */
+    show(text, level = 'success', timeout = 4000) {
+      this.text = text
+      this.level = level
+      this.timeout = timeout
+      this.isVisible = true
+    }
+  }
+}
+</script>

src/store/actions.js

@@ -9,8 +9,8 @@ export default {
     commit('increment', -amount)
   },
 
-  resetApp({ commit }, { hostConfig = false, scenesList = false }) {
-    commit('resetApp', { hostConfig, scenesList })
+  resetApp({ commit }, { hostConfig = false, scenesList = false, progression = false }) {
+    commit('resetApp', { hostConfig, scenesList, progression })
   },
 
   async setHostConfig({ commit }, { protocol, host, port }) {
@@ -44,7 +44,10 @@ export default {
     commit('setListScenes', scenes.data)
   },
 
-  setExperienceDone({ commit }, { experienceName, sceneName }) {
-    commit('setExperienceDone', { experienceName, sceneName })
+  setExperienceProgress({ commit }, { experienceName, sceneName, data }) {
+    commit('setExperienceProgress', { experienceName, sceneName, data })
+  },
+  setExperienceDone({ commit }, { experienceName, sceneName, done = true }) {
+    commit('setExperienceDone', { experienceName, sceneName, done })
   }
 }

src/store/mutations.js

@@ -6,9 +6,10 @@ export default {
     state.count += amount
   },
 
-  resetApp(state, { hostConfig, scenesList }) {
+  resetApp(state, { hostConfig, scenesList, progression }) {
     if (hostConfig) state.hostConfig = defaultState.hostConfig
     if (scenesList) state.scenesList = defaultState.scenesList
+    if (progression) state.progression = defaultState.progression
   },
 
   setHostConfig(state, newConfig) {
@@ -18,7 +19,7 @@ export default {
   setListScenes(state, scenes) {
     state.scenesList = scenes
     const scenesProgressObj = scenes.reduce((acc, x) => {
-      acc[x] = false
+      acc[x] = { done: false, data: {} }
       return acc
     }, {})
     const progressionObj = Experiences.reduce((acc, x) => {
@@ -29,10 +30,19 @@ export default {
     state.progression = progressionObj
   },
 
-  setExperienceDone(state, { experienceName, sceneName }) {
+  setExperienceProgress(state, { experienceName, sceneName, data }) {
     if (!state.progression[experienceName])
       state.progression[experienceName] = {}
+    if (!state.progression[experienceName][sceneName])
+      state.progression[experienceName][sceneName] = { done: false, data: {} }
+    state.progression[experienceName][sceneName].data = data
+  },
+  setExperienceDone(state, { experienceName, sceneName, done }) {
+    if (!state.progression[experienceName])
+      state.progression[experienceName] = {}
+    if (!state.progression[experienceName][sceneName])
+      state.progression[experienceName][sceneName] = { done: false, data: {} }
 
-    state.progression[experienceName][sceneName] = true
+    state.progression[experienceName][sceneName].done = done
   }
 }