logilite-simple-sync-plugin
v0.0.9
Published
An Ionic sync project by logilite
Downloads
6
Readme
Logilite simple Sync Module :-
Usage: Install : npm install logilite-simple-sync-plugin --save
Install dependency:
run script file:-
in linux: sh install.sh
in window: install.bat
OR
(By manually install plugin dependency) - For device:
ionic cordova plugin add cordova-plugin-device
npm install --save @ionic-native/device - For sqlite:
ionic cordova plugin add cordova-sqlite-storage
npm install --save @ionic-native/sqlite - For sqlite-porter
ionic cordova plugin add uk.co.workingedge.cordova.plugin.sqliteporter
npm install --save @ionic-native/sqlite-porter - For file:
ionic cordova plugin add cordova-plugin-file
npm install --save @ionic-native/file - For network:
ionic cordova plugin add cordova-plugin-network-information
npm install --save @ionic-native/network
Import the logilite-simple-sync-plugin module:
import { IonicSyncModule, AD_SysConfig, AppConf, AppInit, AppUtil, AuthService, Base64,
DataSync, DbSvc, FileSvc, LoginSvc, Migration, MigrationSql, RemoteService,
SyncManagerSvc, NetworkSvc, LoginComponent, SettingComponent, SyncmanagerComponent, SettingThemesProvider } from
'logilite-simple-sync-plugin';
import { Device } from '@ionic-native/device';
import { SQLite } from '@ionic-native/sqlite';
import { SQLitePorter } from '@ionic-native/sqlite-porter';
import { HttpClientModule } from '@angular/common/http';
import { File } from '@ionic-native/file';
import { Network } from '@ionic-native/network';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
HttpClientModule,
IonicSyncModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
LoginComponent,
SettingComponent,
SyncmanagerComponent
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
AD_SysConfig,
Migration, MigrationSql, AppConf, AppInit, DataSync, DbSvc,
LoginSvc, AuthService, RemoteService, SyncManagerSvc, AppUtil,
Base64, FileSvc, NetworkSvc,
Device,
SQLite,
SQLitePorter,
File,
Network,
SettingThemesProvider,
] })
export class AppModule {}
Import into app.component.ts (to load default setting config and theme) :-
import { Component, ViewChild } from '@angular/core';
import { AppInit, SettingThemesProvider} from 'logilite-simple-sync-plugin';
export class MyApp {
@ViewChild(Nav) nav: Nav; chosenTheme: string;
constructor(public appInit:AppInit, public setTheme: SettingThemesProvider){
this.setTheme.getActiveTheme().subscribe(val => this.chosenTheme = val);
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
this.appInit.init();
});
}
} To set custom theme update app.html :-
< div [class]="chosenTheme">
< other component />
< ion-nav [root]="rootPage">< /ion-nav>
</ div>
To import Login-component into your project:-
Add "< login> < /login>" where you want to add login component
It's have following events:-
1. (loginNavToHomePage):- Which emit boolean value for login-failed or not and errorMessage if any, So on basis do
want you want on failed or success.
2. (navToSetting) :- Which emit click event. Components Mode:
Basic:
< ion-header>
< ion-navbar>
< button ion-button menuToggle>
< ion-icon name="menu"></ ion-icon>
</ button>
< ion-title>Home</ ion-title>
</ ion-navbar>
</ ion-header>
< ion-content padding>
< login isLoginBtnRound="true" isSettingBtnRound="true" [logoLink]="srcToImg" (loginNavToHomePage)
="loginNavToHomePage($event)" (navToSetting)="navToSetting($event)" >
</ login>
</ ion-content>
import { Component } from '@angular/core';
import { SettingPage } from '../setting/setting';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
srcToImg='./assets/imgs/logo.png';
logoStyle={'width':'50%', 'height':'50%'};
constructor() { }
loginNavToHomePage(event){
console.log("isFailed:-"+event.isFailed + "Error messsage:-"+ event.errorMessage);
}
navToSetting(event){
console.log(event);
this.navCtrl.push(SettingPage);
}
... }
To import setting-component into your project:-
Add < setting></ setting > where you want to add setting page
It's have following events:-
1. (onBackClick) :- Which emit boolean value for isLogin, and click event.
2. (onSettingUpdate) :- Which emit boolean value for isLogin and isUpdate
3. (onDbClean) :- Which emit value response and reject as object
4. (onExportDB) :- Which emit value response and reject as object
Components Mode:
Basic: (use without header, content and footer)
< setting
(onBackClick)="onBackClick($event)" (onDbClean)="onDbClean($event)"
(onSettingUpdate)="onSettingUpdate($event)" (onExportDB)="onExportDB($event)">
</ setting>
import { Component } from '@angular/core';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
displayStyle={'display':'none'}; // to display theme selection option (none:hide, block:show)
constructor() { }
onBackClick(event){
console.log("isLogin:-"+event.isLogin + "click event:- " + event.Event);
}
onSettingUpdate(event){
console.log("isLogin:-"+event.isLogin + "isUpdate:-"+ event.isUpdate);
}
onDbClean(event){
console.log("Response object:-"+ event.response + "Reject object"+ event.reject );
}
onExportDB(event){
console.log("Response object:-"+ event.response + "Reject object"+ event.reject );
}
... }
To import syncmanager-component into your project:-
1.(to add component into side-menu)
import { AppInit, SyncmanagerComponent } from 'logilite-simple-sync-plugin';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
constructor(){}
this.pages = [
{ title: 'SyncMamager', component: SyncmanagerComponent }
]
}
OR
2.(add as html component)
< syncmanager isSyncBtnBlock="true"></ syncmanager>
To dynamically place css for all three component these property you can use to modify:
Note: just add same like as css classes into app.scss file
1 . Login-component:
i. lg-logo-div, lg-errmsg-div
ii. lg-logoimg
iii. lg-list
iv. lg-item-username, lg-item-password
v. lg-label-username, lg-label-password
vi. lg-input-username, lg-input-password
vii. lg-span-msg
viii.lg-btn-login, lg-btn-setting
common classes for login-component for every common tag:
i. lg-div
ii. lg-item
iii. lg-label
iv. lg-input
v. lg-icon
vi. lg-btn
2 . Setting-component:
i. sconfig-btn-back, sconfig-btn-submit, sconfig-btn-clean, sconfig-btn-export, sconfig-btn-logs
ii. sconfig-icon-back, sconfig-icon-check, sconfig-icon-trash, sconfig-icon-cloud, sconfig-icon-list
iii. sconfig-content
iv. sconfig-div-subcontent
v. sconfig-h6-name
vi. sconfig-input-value
common:
i. sconfig-btn
ii. sconfig-icon
3 . SyncManager-Component
i. sync-btn-menu, sync-btn-record
ii. sync-icon-menu, sync-icon-arrow, sync-icon-check, sync-icon-alert
iii. sync-content
iv. sync-item
v. sync-label-tablename
common:
i. sync-btn
ii. sync-icon
above classes use like : -
.sync-btn{
color:blue;
}
Issue:
On apk build if it gives error :
[Module not found: Error: Can't resolve './app.module.ngfactory']
then build without --prod flag
like: ionic cordova build android only (not --prod flag)