Implment export dialog and dump feature (resolves #13, ref #5)

hakatashi · Sep 14, 2018 · 04acb88 · 04acb88
1 parent 8b7c792
commit 04acb88
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 17 deletions.
diff --git a/lib/db.js b/lib/db.js
@@ -353,8 +353,8 @@ export const exportTimes = async () => {
 	saveAs(blob, `smart-cube-timer-export-${formatSerializedDate(Date.now())}.txt`);
 };
 
-export const exportAll = async () => {
+export const dump = async () => {
 	const solves = await db.solves.where('date').above(new Date('2018-08-09 00:00:00+0900').getTime()).reverse().sortBy('date');
-	const blob = new Blob([JSON.stringify(solves, null, '  ')], {type: 'text/plain;charset=utf-8'});
+	const blob = new Blob([JSON.stringify(solves)], {type: 'text/plain;charset=utf-8'});
 	saveAs(blob, `smart-cube-timer-dump-${formatSerializedDate(Date.now())}.json`);
 };
diff --git a/pages/solves/index.vue b/pages/solves/index.vue
@@ -1,11 +1,6 @@
 <template>
-	<v-container
-		fluid
-		grid-list-md
-		text-xs-center>
-		<v-progress-linear
-			v-if="isLoading"
-			:indeterminate="true"/>
+	<v-container fluid grid-list-md text-xs-center>
+		<v-progress-linear v-if="isLoading" :indeterminate="true"/>
 		<v-btn
 			:style="{bottom: '100px'}"
 			fab
@@ -14,9 +9,10 @@
 			bottom
 			left
 			small
-			color="purple"
-			@click="onExport">
-			<v-icon>get_app</v-icon>
+			color="blue darken-2"
+			@click="isSaveDialogOpen = true"
+		>
+			<v-icon>arrow_downward</v-icon>
 		</v-btn>
 		<v-data-iterator
 			:items="solvesInfo"
@@ -33,10 +29,7 @@
 				md6
 				lg4
 			>
-				<v-card
-					:to="`/solves/${props.item.id}`"
-					class="solve"
-					nuxt>
+				<v-card :to="`/solves/${props.item.id}`" class="solve" nuxt>
 					<v-card-text class="pa-0 subheading text-xs-left solve-headline">
 						<strong>{{props.item.timeText}}</strong>
 						<small
@@ -74,19 +67,52 @@
 				</v-card>
 			</v-flex>
 		</v-data-iterator>
+		<v-dialog v-model="isSaveDialogOpen" max-width="600">
+			<v-card>
+				<v-card-title class="headline">Save history as a file</v-card-title>
+				<v-card-text>
+					<strong>Export</strong> file includes <i>time</i> and <i>scramble</i> and <i>date</i>, delimited by semicolon.
+					This format is compatible with <strong>TwistyTimer</strong> and few other apps.
+				</v-card-text>
+				<v-card-text>
+					<strong>Dump</strong> file is a JSON file which includes all information of your solves.
+					You can programatically process this file or use this as a backup of history.
+					In near future this timer will be able to import this file into history tab.
+				</v-card-text>
+				<v-card-actions>
+					<v-spacer/>
+					<v-btn
+						color="green darken-1"
+						flat="flat"
+						@click="onExport"
+					>
+						Export (for other timers)
+					</v-btn>
+					<v-btn
+						color="green darken-1"
+						flat="flat"
+						@click="onDump"
+					>
+						Dump (full data)
+					</v-btn>
+				</v-card-actions>
+			</v-card>
+		</v-dialog>
 	</v-container>
 </template>
 
 <script>
 import {clls, olls, plls} from '~/lib/data.js';
-import {exportTimes, getSolves} from '~/lib/db.js';
+import {dump, exportTimes, getSolves} from '~/lib/db.js';
 import {formatDate, formatTime, idealTextColor} from '~/lib/utils.js';
 import config from '~/lib/config.js';
 
 export default {
 	data() {
 		return {
 			isLoading: true,
+			isDialOpen: false,
+			isSaveDialogOpen: false,
 			solves: [],
 			rowsPerPageItems: [50],
 			pagination: {
@@ -173,6 +199,9 @@ export default {
 		onExport() {
 			exportTimes();
 		},
+		onDump() {
+			dump();
+		},
 	},
 	head() {
 		return {