reset state

Author: wilfredinni

website/layouts/default.vue

@@ -1,18 +1,8 @@
 <template>
  <v-app dark>
- <!-- :permanent="!$vuetify.breakpoint.xsOnly" -->
  <v-navigation-drawer v-model="drawer" clipped fixed app width="320">
  <Sidebar :cheatsheet-toc="cheatsheet.toc" />
  </v-navigation-drawer>
- <v-navigation-drawer
- :color="rightDrawerColor"
- right
- width="320"
- clipped
- fixed
- app
- >
- </v-navigation-drawer>
 
  <v-app-bar :color="appBarStyle" flat clipped-left clipped-right fixed app>
  <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
@@ -68,7 +58,6 @@ export default {
  data() {
  return {
  drawer: true,
- drawer2: true,
  darkTheme: false,
  }
  },

website/pages/random.vue

@@ -59,27 +59,68 @@
  </v-card>
  </v-dialog>
 
+ <!-- reset dialog -->
+ <v-dialog v-model="resetDialog" width="500">
+ <v-card>
+ <v-card-title class="headline white--text red lighten-1">
+ ¿Estás seguro?
+ </v-card-title>
+
+ <v-card-text class="pt-5">
+ Se eliminarán los todos los resultados. Esta acción no se puede
+ deshacer.
+ </v-card-text>
+
+ <v-divider></v-divider>
+
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn color="grey" text @click="resetDialog = false">
+ Cancelar
+ </v-btn>
+ <v-btn color="cyan darken-1" dark depressed @click="resetState">
+ Aceptar
+ </v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+
  <!-- results -->
- <v-row class="fill-height" align="center" justify="center">
- <v-col v-if="results.length > 0" cols="12">
- <v-chip
- v-for="n in sortedResults"
- :key="n"
- :color="getResultColor(n)"
- label
- dark
- class="ma-2 font-weight-medium"
- :class="getNumberPadding(n)"
- @click="workDone(n)"
- >
- {{ n }}
- </v-chip>
- </v-col>
+ <v-fade-transition>
+ <v-row align="center" justify="center">
+ <v-col v-if="results.length > 0" cols="12">
+ <v-chip
+  v-for="n in sortedResults"
+  :key="n"
+  :color="getResultColor(n)"
+  label
+  dark
+  class="ma-2 font-weight-medium"
+  :class="getNumberPadding(n)"
+  @click="workDone(n)"
+ >
+  {{ n }}
+  </v-chip>
 
- <v-col v-else cols="12" class="mt-16">
- <v-img height="100%" src="/analytics.svg"></v-img>
- </v-col>
- </v-row>
+ <v-btn
+ color="error"
+ class="mb-10"
+ dark
+ absolute
+ bottom
+ right
+ fab
+ @click="resetDialog = true"
+ >
+ <v-icon>mdi-delete-forever</v-icon>
+ </v-btn>
+ </v-col>
+
+ <v-col v-else cols="12" class="mt-16">
+ <v-img height="100%" src="/analytics.svg"></v-img>
+ </v-col>
+ </v-row>
+ </v-fade-transition>
  </div>
 </template>
 
@@ -88,6 +129,7 @@ export default {
  data() {
  return {
  confirmDialog: false,
+ resetDialog: false,
  total: null,
  randomNumbers: null,
  results: [],
@@ -136,6 +178,13 @@ export default {
  if (this.done.includes(n)) return 'red'
  return 'cyan lighten-3'
  },
+ resetState() {
+ this.resetDialog = false
+ this.results = []
+ this.done = []
+ this.total = null
+ this.randomNumbers = null
+ },
  },
 }
 </script>