README

dev notes

the master copy is at fafadmin/src/providers/faf/ including this readme

best guess at the package is at fafpackage2, including:

dependencies and files and in package.json
tsconfig.json

TODO:

build script. THis should
- tsc
- up-issue version number
- npm publish
resolve outdated packages
- npm outdated
- what version can i safely update to?
- npm install --save ts-md5

demo project using the package is at fafpackageuser1

Flikk Application Framework for Ionic projects

Use this in your ionic project to store and retrieve data from a cloud source

Latest changes

get now returns a FafRequest (with .items, just the items you have sent) log on token is saved in localStorage so if you refresh the app you stay logged in

How to register as a FAF user and create a schema for your data

Use the FafAdmin app to register your email and password Get a single-use token to register your schema

How to use FAF in your project

Create an ionic project

ionic start myproject

cd myproject

npm install faf-ionic ionic-native ionic-storage --save ionic cordova platform add android ionic cordova plugin add cordova-plugin-file cordova-plugin-camera

EDIT APP.MODULE.TS in 4 places import { FafService } from 'faf-ionic/faf-service'; import { FafCache } from 'faf-ionic/faf-cache'; import { FafInterceptor } from 'faf-ionic/faf-interceptor'; import { FafImageComponent } from 'faf-ionic/faf-image-component'; import { HttpClientModule,HTTP_INTERCEPTORS } from '@angular/common/http'; import { IonicStorageModule } from '@ionic/storage';

declarations: [ FafImageComponent....

imports: [ ... IonicStorageModule.forRoot(), //new HttpClientModule ] providers: [ ... FafService, //these are new FafCache, //File, //Storage {provide: HTTP_INTERCEPTORS, useClass:FafInterceptor, multi:true}, ]

export class AppModule { constructor(public fafService:FafService){ //fafService.APIURL = 'http://faf.co.uk/'; //if you don't do this you will use the default service at https://faf.azurewebsites.net fafService.defaultSchema = 'MySuperNewApp'; //if you don't do this you will be using the default 'demo' schema ...

To list cats in a page

//new import { FafService } from 'faf-ionic/faf-service'; import { FafRequest } from 'faf-ionic/faf-objects';

@IonicPage() @Component({ selector: 'page-cats-list', templateUrl: 'cats-list.html', }) export class CatsListPage { cats = []; page = 1; page_count = null; lastNewCat = 0; nameFilter = null;

constructor(public navCtrl: NavController, private fafService:FafService //new ...

editCat(cat){
  this.navCtrl.push(CatsEditPage,{cat:cat});    
}
addCat(){
  this.navCtrl.push(CatsEditPage,{cat:null});
}

refresh(){
  let params = new FafRequest();   
  params.table = 'cats';
  params.page = this.page;
  params.page_items = 10;

  if(this.nameFilter){
    params.filters = 'row.name.match(/' + this.nameFilter + '/gi)';
  }
  this.fafService.get(params).subscribe(
    (data:FafRequest)=>{
          this.cats = data.rows;
          this.page = data.page;
          this.page_count = data.page_count;
    },
    (err)=>{
      this.fafService.presentToast(err);
    }
  );

    
}

goToPage(delta:number){
  this.page += delta;
  if(!this.page){
    this.page = 1;
  }
  this.refresh();
}

ionViewDidLoad() {
  this.fafService.defaultSchema = "demo";
  this.refresh();
  console.log('ionViewDidLoad CatsListPage');
}

}

To edit a new or existing cat

@IonicPage() @Component({ selector: 'page-cats-edit', templateUrl: 'cats-edit.html', }) export class CatsEditPage {

cat = null; originalCat = null;

constructor(public navCtrl: NavController, public navParams: NavParams, public fafService:FafService) { this.originalCat = navParams.get('cat'); if(!this.originalCat){ this.cat = {name:null, color:null}; }else{ this.cat = FafService.cloneObject(this.originalCat); } }

onSave(){ this.fafService.post("cats",[this.cat]).subscribe(data=>{ FafService.cloneObject(data[0],this.originalCat); this.navCtrl.pop(); }); }

ionViewDidLoad() { console.log('ionViewDidLoad CatsEditPage'); }

}

How to log on to FAF

public register = function(){ this.fafService.presentRegisterDialog().subscribe(res=>{ this.fafService.presentToast('Thank you for registering'); },err=>{ this.fafService.presentToast('Sorry, faf could not register that account: ' + err); }); } public login = function(){ this.fafService.promptForLogin(); )

How to select a file or take a picture with FAF

mypage.html:

Select image

mypage.ts:

declare var cordova: any;

@Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { public image1:string;

constructor(public navCtrl: NavController, public fafService: FafService, public fafFileService:FafFileService, private camera:Camera, public file: File) {

} public onSelectFile(e){ let el:any = document.getElementById('home-file-input'); let savedPath:string; let ffm:FafFileMetadata = new FafFileMetadata(); ffm.fafFileUrl = ${this.fafService.defaultSchema}/cats/${FafService.newGuid()}; this.fafFileService.saveFile(el.files[0], ffm).subscribe((progress:string)=>{ //if(progress.url) savedPath = progress.url; //url is the part AFTER APIURL //if(progress.progress) this.fafService.presentToast(progress.progress.toString() + '%' ); },err=>{ console.log(err); },()=>{ this.fafService.presentToast("complete"); this.image1 = ffm.fafFileUrl; }); }

onTakePicture() { let me = this; let savedPath:string; if(typeof cordova == "undefined"){ this.fafService.presentToast("camera not available"); return; } if(cordova && this.camera){ const options: CameraOptions = { quality: 25, destinationType: this.camera.DestinationType.FILE_URI, sourceType: this.camera.PictureSourceType.CAMERA, encodingType: this.camera.EncodingType.JPEG, mediaType: this.camera.MediaType.PICTURE }

    this.camera.getPicture(options).then((imageData) => {
      let ffm:FafFileMetadata = new FafFileMetadata();
      ffm.fafFileUrl = `${this.fafService.defaultSchema}/cats/${FafService.newGuid()}`;


      this.fafFileService.uploadFileFromCameraUrl(imageData, ffm).subscribe((progress:FafFileProgress)=>{
        if(progress.url) savedPath = progress.url; //url is the part AFTER APIURL
        if(progress.progress) this.fafService.presentToast(progress.progress.toString() + '%' );      
      },err=>{
        console.log(err);
      },()=>{
        this.fafService.presentToast("complete");
        // this.image2 = `${this.fafService.APIURL}faf/file/${ffm.fafFileUrl}`;// + ' | secure';
        // console.log(this.image2);
        this.image1 = ffm.fafFileUrl;

      });

    }, (err) => {
      // Handle error
      console.log(err);
      this.fafService.presentToast("Could not take photo. Please try again.");
    });

}else{
  this.fafService.presentToast("Camera not available");
}

}

Usage no npm install needed!