Support save/restore data.

Signed-off-by: Eric Wang <[email protected]>

config.xml

@@ -87,4 +87,5 @@
     <plugin name="cordova-plugin-whitelist" spec="^1.3.1" />
     <plugin name="ionic-plugin-keyboard" spec="^2.2.1" />
     <plugin name="phonegap-plugin-barcodescanner" spec="^6.0.6" />
+    <plugin name="cordova-plugin-file" spec="^6.0.1" />
 </widget>

package.json

@@ -22,6 +22,7 @@
     "@angular/platform-browser-dynamic": "4.1.0",
     "@ionic-native/barcode-scanner": "^3.10.3",
     "@ionic-native/core": "3.7.0",
+    "@ionic-native/file": "^4.5.2",
     "@ionic-native/splash-screen": "3.7.0",
     "@ionic-native/status-bar": "3.7.0",
     "@ionic/storage": "2.0.1",
@@ -31,6 +32,7 @@
     "cordova-plugin-compat": "^1.1.0",
     "cordova-plugin-console": "^1.0.5",
     "cordova-plugin-device": "^1.1.4",
+    "cordova-plugin-file": "^6.0.1",
     "cordova-plugin-splashscreen": "^4.0.3",
     "cordova-plugin-statusbar": "^2.2.2",
     "cordova-plugin-whitelist": "^1.3.1",
@@ -57,7 +59,8 @@
       "cordova-plugin-statusbar": {},
       "cordova-plugin-whitelist": {},
       "ionic-plugin-keyboard": {},
-      "phonegap-plugin-barcodescanner": {}
+      "phonegap-plugin-barcodescanner": {},
+      "cordova-plugin-file": {}
     },
     "platforms": [
       "android"

src/app/app.component.ts

@@ -8,6 +8,7 @@ import { BooksPage } from '../pages/books/books';
 import { SearchPage } from '../pages/search/search';
 import { ScanPage } from '../pages/scan/scan';
 
+import { FileService } from '../services/file';
 import { UIService } from '../services/ui';
 
 @Component({
@@ -25,6 +26,7 @@ export class MyApp {
     public platform: Platform,
     public statusBar: StatusBar,
     public splashScreen: SplashScreen,
+    public file: FileService,
     public ui: UIService
   ) {
     this.initializeApp();
@@ -57,4 +59,20 @@ export class MyApp {
     // we wouldn't want the back button to show in this scenario
     this.nav.setRoot(page);
   }
+
+  backup() {
+    this.file.save()
+      .then(
+        f => this.ui.showMessage('数据备份成功!\n' + f),
+        e => this.ui.showMessage('数据备份失败!\n' + e.message)
+      );
+  }
+
+  restore() {
+    this.file.load()
+      .then(
+        f => this.ui.showMessage('备份恢复成功!\n' + f),
+        e => this.ui.showMessage('备份恢复失败!\n' + e.message)
+      );
+  }
 }

src/app/app.html

@@ -12,6 +12,16 @@
         {{p.title}}
       </button>
 
+      <ion-item-divider color="light">数据</ion-item-divider>
+      <button menuClose ion-item (click)="backup()">
+        <ion-icon name="log-in" item-left></ion-icon>
+        备份
+      </button>
+      <button menuClose ion-item (click)="restore()">
+        <ion-icon name="log-out" item-left></ion-icon>
+        恢复
+      </button>
+
       <ion-item-divider color="light">关于</ion-item-divider>
       <ion-item>
         <ion-icon name="phone-portrait" item-left></ion-icon>

src/app/app.module.ts

@@ -2,6 +2,7 @@ import { HttpModule } from '@angular/http';
 import { BrowserModule } from '@angular/platform-browser';
 import { ErrorHandler, NgModule } from '@angular/core';
 import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
+import { File } from '@ionic-native/file';
 import { BarcodeScanner } from '@ionic-native/barcode-scanner';
 
 import { MyApp } from './app.component';
@@ -11,6 +12,7 @@ import { BooksPage } from '../pages/books/books';
 import { SearchPage } from '../pages/search/search';
 import { ScanPage } from '../pages/scan/scan';
 
+import { FileService } from '../services/file';
 import { DBService } from '../services/db';
 import { ImageService } from '../services/image';
 import { SHLibService } from '../services/shlib';
@@ -45,6 +47,8 @@ import { SplashScreen } from '@ionic-native/splash-screen';
   providers: [
     BarcodeScanner,
     DBService,
+    File,
+    FileService,
     ImageService,
     SHLibService,
     UIService,

src/services/db.ts

@@ -33,6 +33,18 @@ export class DBService {
     );
   }
 
+  setBooks(books: Book[]) {
+    return new Promise<any>(resolve =>
+      this.db.open()
+        .then(db => db.books.clear())
+        .then(() => this.db.books.bulkPut(books))
+        .then(() => {
+          this.bookIds = _.map(books, book => book.id);
+          return resolve();
+        })
+    );
+  }
+
   addBook(book: Book) {
     return new Promise<any>(resolve =>
       this.db.open()

src/services/file.ts

@@ -0,0 +1,42 @@
+import { Injectable } from '@angular/core';
+import { File } from '@ionic-native/file';
+
+import { DBService } from '../services/db';
+
+@Injectable()
+export class FileService {
+  private dir: string;
+  private name: string = 'shlib.json';
+
+  constructor(
+    private file: File,
+    private db: DBService
+  ) {
+    let dir;
+    try {
+      dir = file.externalRootDirectory || file.externalDataDirectory || file.dataDirectory;
+    } catch (e) {
+      // FIXME: hack web test where no cordova defined...
+      console.log(e.message);
+    }
+    this.dir = dir || './';
+  }
+
+  save() {
+    return new Promise<any>((resolve, reject) =>
+      this.db.getBooks()
+        .then(books => this.file.writeFile(this.dir, this.name, JSON.stringify(books), {replace: true}))
+        .then(ok => resolve(this.dir + this.name))
+        .catch(reject)
+    );
+  }
+
+  load() {
+    return new Promise<any>((resolve, reject) =>
+      this.file.readAsText(this.dir, this.name)
+        .then(text => this.db.setBooks(JSON.parse(text)))
+        .then(ok => resolve(this.dir + this.name))
+        .catch(reject)
+    );
+  }
+}