<repo_name>dhurtadorosales/HybridAppTemplate<file_sep>/src/pages/common/tabs/tabs.ts
import { Component } from '@angular/core';
import { HomePage } from '../../home/home';
import { UserListPage } from '../../user/user-list/user-list';
import { AliasListPage } from '../../alias/alias-list/alias-list';
import { AliasNewPage } from '../../alias/alias-new/alias-new';

@Component({
    selector: 'page-tabs',
    templateUrl: 'tabs.html',
})
export class TabsPage {

    tab1: any;
    tab2: any;
    tab3: any;
    tab4: any;

    /**
     *
     */
    constructor() {
        this.tab1 = HomePage;
        this.tab2 = UserListPage;
        this.tab3 = AliasListPage;
        this.tab4 = AliasNewPage;
    }

}<file_sep>/src/pages/alias/alias-list/alias-list.module.ts
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { AliasListPage } from './alias-list';

@NgModule({
  declarations: [
    AliasListPage,
  ],
  imports: [
    IonicPageModule.forChild(AliasListPage),
  ],
})
export class AliasListPageModule {}
<file_sep>/src/providers/alias.provider.ts
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import { Http, Headers } from '@angular/http';
import { GLOBAL } from '../config/global';

@Injectable()
export class AliasProvider {

    public url: string;

    /**
     * @param {Http} _http
     */
    constructor(private _http: Http) {
        this.url = GLOBAL.url;
        this.getAliasAll();
    }

    /**
     * @returns {Observable<any>}
     */
    getAliasAll() {
        return this
            ._http.get(this.url + '/alias/all')
            .map(response => response.json());
    }

    /**
     *
     * @param token
     * @param id
     * @returns {Observable<any>}
     */
    getAliasByUser(token, id) {
        let params = 'authorization=' + token;
        let headers = new Headers({'Content-Type' : 'application/x-www-form-urlencoded'});

        return this
            ._http.post(this.url + '/alias/' + id, params, {headers: headers})
            .map(response => response.json());
    }

    /**
     * @param alias
     * @returns {Observable<any>}
     */
    newAlias(alias) {
        let json = JSON.stringify(alias);
        let params = 'json=' + json;
        let headers = new Headers({'Content-Type' : 'application/x-www-form-urlencoded'});

        return this
            ._http.post(this.url + '/alias/new', params, {headers: headers})
            .map(response => response.json());
    }

    /**
     *
     * @param alias
     * @returns {Observable<any>}
     */
    editAlias(alias) {
        let json = JSON.stringify(alias);
        let params = 'json=' + json;
        let headers = new Headers({'Content-Type' : 'application/x-www-form-urlencoded'});

        return this
            ._http.post(this.url + '/alias/edit/' + alias.id, params, {headers: headers})
            .map(response => response.json());
    }

    /**
     *
     * @param alias
     * @returns {Observable<any>}
     */
    deleteAlias(alias) {
        let params = '';
        let headers = new Headers({'Content-Type' : 'application/x-www-form-urlencoded'});

        return this
            ._http.post(this.url + '/alias/delete/' + alias.id, params, {headers: headers})
            .map(response => response.json());
    }

}<file_sep>/src/pages/user/user-list/user-list.ts
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { UserProvider } from '../../../providers/user.provider';
import { User } from '../../../models/user.model';

@Component({
    selector: 'page-user-list',
    templateUrl: 'user-list.html',
    providers: [
        UserProvider
    ]
})

export class UserListPage {

    public users: User;

    /**
     * @param {NavController} navCtrl
     * @param {UserProvider} _userProvider
     */
    constructor(
        public navCtrl: NavController,
        private _userProvider: UserProvider,
    ) {
        this.getUsers();
    }

    /**
     *
     */
    getUsers() {
        this._userProvider
            .getUsersAll()
            .subscribe(
            response => {
                if (!response.error) {
                    this.users = response;
                }
                else {
                    alert('error.connection');
                }
            },
            error => {
                alert(<any>error);
            }
        );
    }

}
<file_sep>/src/pages/alias/alias-list/alias-list.ts
import { Component } from '@angular/core';
import { AlertController, LoadingController, NavController, NavParams, PopoverController} from 'ionic-angular';
import { Alias } from '../../../models/alias.model';
import { AliasProvider } from '../../../providers/alias.provider';
import { AliasEditPage } from '../alias-edit/alias-edit';
import { ToastProvider } from '../../../providers/toast.provider';
import { UserProvider } from '../../../providers/user.provider';

@Component({
    selector: 'page-alias-list',
    templateUrl: 'alias-list.html',
    providers: [
        AliasProvider,
        ToastProvider
    ]
})
export class AliasListPage {

    alias: Alias;
    aliasEditPage: any;
    loading: any;
    popover: any;
    token: any;

    /**
     *
     * @param {NavController} navCtrl
     * @param {NavParams} navParams
     * @param {AlertController} alertCtrl
     * @param {LoadingController} loadingCtrl
     * @param {AliasProvider} _aliasProvider
     * @param {ToastProvider} _toastProvider
     * @param {UserProvider} _userProvider
     */
    constructor(
        public navCtrl: NavController,
        public navParams: NavParams,
        private alertCtrl: AlertController,
        private loadingCtrl: LoadingController,
        private _aliasProvider: AliasProvider,
        private _toastProvider: ToastProvider,
        private _userProvider: UserProvider
    ) {
        this._userProvider.getToken();
        this.loading = this.loadingCtrl.create({
            content: 'message.loading',
            dismissOnPageChange: true
        });
        this.aliasEditPage = AliasEditPage;
        this.loading.present();
        //this.getAliasAll();
        this.getAliasByUser('<KEY>', 22);
    }

    /**
     *
     */
    getAliasAll() {
        this._aliasProvider.getAliasAll().subscribe(
            response => {
                if (!response.error) {
                    this.alias = response;
                    if (response.length == 0) {
                        this._toastProvider.presentToast('message.alias.empty');
                    }
                }
                else {
                    this._toastProvider.presentToast('message.alias.get_all.error');
                }
            },
            error => {
                this._toastProvider.presentToast(error);
            }
        );
    }

    /**
     *
     * @param token
     * @param id
     */
    getAliasByUser(token, id) {
        console.log(localStorage.getItem('token'));
        this._aliasProvider.getAliasByUser(token, id).subscribe(
            response => {
                if (!response.error) {
                    this.alias = response;
                    if (response.length == 0) {
                        this._toastProvider.presentToast('message.alias.empty');
                    }
                } else {
                    this._toastProvider.presentToast('message.alias.get_by_user.error');
                }
            },
            error => {
                this._toastProvider.presentToast(error);
            }
        );
    }

    /**
     * @param alias
     */
    deleteAlias(alias) {
        this._aliasProvider.deleteAlias(alias)
            .subscribe(
            response => {
                if (!response.error) {
                    this.refreshPage();
                    this._toastProvider.presentToast('message.alias.delete.success');
                }
                else {
                    this._toastProvider.presentToast('message.alias.delete.error');
                }
            },
            error => {
                this._toastProvider.presentToast(error);
            }
        );
    }

    /**
     *
     * @param alias
     */
    showConfirm(alias) {
        let alert = this.alertCtrl.create({
            title: 'message.alias.delete.confirm.title',
            message: 'message.alias.delete.confirm.question',
            buttons: [
                {
                    text: 'alert.cancel',
                    role: 'cancel',
                    handler: () => {
                        this.refreshPage();
                    }
                },
                {
                    text: 'alert.confirm',
                    handler: () => {
                        this.deleteAlias(alias);
                    }
                }
            ]
        });

        alert.present();
    }

    /**
     *
     */
    refreshPage() {
        this.getAliasAll();
    }

    /**
     *
     * @param refresher
     */
    doRefresh(refresher) {
        setTimeout(() => {
            refresher.complete();
        }, 2000);
    }

}
<file_sep>/src/providers/user.provider.ts
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import { Http, Response, Headers } from '@angular/http';
import { GLOBAL } from '../config/global';
import { AlertController, Platform } from 'ionic-angular';
import { Storage } from '@ionic/storage';

@Injectable()
export class UserProvider {

    url: string;
    identity: string;
    token: string;

    /**
     *
     * @param {Http} _http
     * @param {AlertController} alertCtrl
     * @param {Platform} platform
     * @param {Storage} storage
     */
    constructor(
        private _http: Http,
        private alertCtrl: AlertController,
        private platform: Platform,
        private storage: Storage
    ) {
        this.url = GLOBAL.url;
        //this.chargeStorage();
    }

    /**
     * @returns {Observable<any>}
     */
    getUsersAll() {
        return this
            ._http.get(this.url + '/user/all')
            .map(response => response.json());
    }

    /**
     *
     * @param user
     * @returns {Observable<any>}
     */
    signIn(user) {
        if (user.username === null || user.password === null) {
            return Observable.throw('message.insert.credentials');
        } else {
            let json = JSON.stringify(user);
            let params = "json=" + json;
            let headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});

            return this
                ._http.post(this.url + '/login', params, {headers: headers})
                .map(
                    response => response.json()
                );
        }
    }

    updateUser(userToUpdate) {
    }

    deleteUser(id) {
        return this
            ._http.get(this.url)
            .map(res => res.json());
    }

    searchUser(id) {
        return this
            ._http.get(this.url)
            .map(res => res.json());
    }

    /**
     *
     * @returns {string}
     */
    getToken() {
        let token;
        if (this.platform.is('cordova')) {
            //Mobile
            token = this.storage.get('token');

        } else {
            //Desktop
            if (this.token) {
                token = localStorage.getItem('token');
            } else {
                token = localStorage.removeItem('token');
            }

        }

        if (token != 'undefined') {
            this.token = token;
        }
        else {
            this.token = null;
        }
//console.log(this.token);
        return this.token;

    }
}<file_sep>/src/pages/alias/alias-new/alias-new.ts
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { AliasProvider } from "../../../providers/alias.provider";
import { Alias } from '../../../models/alias.model';
import { FormBuilder } from '@angular/forms';

@Component({
    selector: 'page-alias-new',
    templateUrl: 'alias-new.html',
    providers: [
        AliasProvider
    ]
})
export class AliasNewPage {

    public alias : Alias;
    public statusAlias;

    /**
     *
     * @param {NavController} navCtrl
     * @param {FormBuilder} formBuilder
     * @param {AliasProvider} _aliasProvider
     */
    constructor(
        public navCtrl: NavController,
        private formBuilder: FormBuilder,
        private _aliasProvider: AliasProvider,
    ) {
        this.alias = new Alias(1, '', '', null);
    }

    /**
     *
     */
    newAlias() {
        this._aliasProvider
            .newAlias(this.alias)
            .subscribe(
            response => {
                this.statusAlias = response.status;
                if (this.statusAlias != 'success') {
                    this.statusAlias = 'error';
                } else {
                    this.alias = response.data;
                }
            },
            error => {
                alert(<any>error);
            }
        );
    }

}
<file_sep>/src/models/alias.model.ts
import { User } from './user.model';

export class Alias {
    constructor(
        public id: number,
        public name: string,
        public origin: string,
        public user: User
    ) {}
}<file_sep>/README.md
# HybridAppTemplate
Hybrid App Template
<file_sep>/src/pages/home/home.ts
import { Component } from '@angular/core';
import { MenuController, NavController} from 'ionic-angular';
import { UserListPage } from '../user/user-list/user-list';
import { UserNewPage } from '../user/user-new/user-new';
import { AliasListPage } from '../alias/alias-list/alias-list';

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

    usersPage: any;
    aliasListPage: any;
    userNewPage: any;

    /**
     *
     * @param {NavController} navCtrl
     * @param {MenuController} menuCtrl
     */
    constructor(public navCtrl: NavController,
                private menuCtrl: MenuController
    ) {
        this.usersPage = UserListPage;
        this.aliasListPage = AliasListPage;
        this.userNewPage = UserNewPage;
    }

    /**
     *
     */
    showMenu(){
        this.menuCtrl.toggle();
    }

}
<file_sep>/src/config/global.ts
export const GLOBAL = {
    url: 'http://localhost/phonegap_backend/web/app_dev.php/api'
};<file_sep>/src/pages/alias/alias-new/alias-new.module.ts
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { AliasNewPage } from './alias-new';

@NgModule({
  declarations: [
    AliasNewPage,
  ],
  imports: [
    IonicPageModule.forChild(AliasNewPage),
  ],
})
export class AliasPageModule {}
<file_sep>/src/pages/user/user-new/user-new.ts
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { UserProvider } from "../../../providers/user.provider";
import { User } from '../../../models/user.model';

@Component({
    selector: 'page-user-new',
    templateUrl: 'user-new.html',
    providers: [
        UserProvider
    ]
})
export class UserNewPage {

    public users: User;

    constructor(
        public navCtrl: NavController,
        private _userProvider: UserProvider,
    ) {
        this._userProvider.getUsersAll();
    }

    newUser() {
        this._userProvider.getUsersAll().subscribe(
            response => {
                if (!response.error) {
                    this.users = response.users;
                    console.log(this.users);
                }
                else {
                    alert('Error connection!');
                }
            },
            error => {
                alert(<any>error);
            }
        );
    }

}
<file_sep>/src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { LongPressModule } from 'ionic-long-press';

//Pages
import { HomePage } from '../pages/home/home';
import { UserListPage } from '../pages/user/user-list/user-list';
import { UserNewPage } from '../pages/user/user-new/user-new';
import { AliasListPage } from '../pages/alias/alias-list/alias-list';
import { TabsPage } from '../pages/common/tabs/tabs';
import { LoginPage } from '../pages/login/login';
import { AliasNewPage } from '../pages/alias/alias-new/alias-new';
import { AliasEditPage } from '../pages/alias/alias-edit/alias-edit';

//Providers
import { UserProvider } from '../providers/user.provider';
import { AliasProvider } from '../providers/alias.provider';
import { ToastProvider } from '../providers/toast.provider';

//Storage
import { IonicStorageModule } from '@ionic/storage';

@NgModule({
    declarations: [
        MyApp,
        HomePage,
        UserListPage,
        UserNewPage,
        AliasListPage,
        AliasNewPage,
        AliasEditPage,
        TabsPage,
        LoginPage
    ],
    imports: [
        BrowserModule,
        IonicModule.forRoot(MyApp),
        HttpModule,
        IonicStorageModule.forRoot(),
        FormsModule,
        LongPressModule
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp,
        HomePage,
        UserListPage,
        UserNewPage,
        AliasNewPage,
        AliasEditPage,
        AliasListPage,
        TabsPage,
        LoginPage
    ],
    providers: [
        StatusBar,
        SplashScreen,
        UserProvider,
        AliasProvider,
        ToastProvider,
        {provide: ErrorHandler, useClass: IonicErrorHandler}
    ]
})
export class AppModule {}
<file_sep>/src/pages/login/login.ts
import { Component } from '@angular/core';
import {
    NavController, NavParams, ViewController, LoadingController, AlertController, Loading,
    Platform
} from 'ionic-angular';
import { UserProvider } from '../../providers/user.provider';
import { HomePage } from '../home/home';
import { Storage } from '@ionic/storage';
import {AliasListPage} from "../alias/alias-list/alias-list";

@Component({
    selector: 'page-login',
    templateUrl: 'login.html',
    providers: [UserProvider]
})
export class LoginPage {

    public user;
    public identity;
    public token;
    public loading;
    public homePage: any;

    /**
     *
     * @param {NavController} navCtrl
     * @param {NavParams} navParams
     * @param {ViewController} viewCtrl
     * @param {AlertController} alertCtrl
     * @param {LoadingController} loadingCtrl
     * @param {Platform} platform
     * @param {Storage} storage
     * @param {UserProvider} _userProvider
     */
    constructor(
        public navCtrl: NavController,
        public navParams: NavParams,
        private viewCtrl: ViewController,
        private alertCtrl: AlertController,
        private loadingCtrl: LoadingController,
        private platform: Platform,
        private storage: Storage,
        private _userProvider: UserProvider
    ) {
        this.user = {
            'username': '',
            'password': ''
        }
        this.homePage = HomePage;
        this.chargeStorage();
    }

    /**
     *
     */
    login(){
        //this.showLoading();
        this._userProvider
            .signIn(this.user)
            .subscribe(
                response => {
                    if (response.error) {
                        this.showError(response.error)
                    } else {
                        this.token = response.access_token;

                        //Save localstorage
                        this.saveStorage();
                        this.navCtrl.push(HomePage);
                    }
                },
                error => {
                    this.showError(error);
                }
            );
    }

    /**
     *
     */
    private saveStorage() {
        if (this.platform.is('cordova')) {
            //Mobile
            this.storage.set('token', this.token);

        } else {
            //Desktop
            if (this.token) {
                localStorage.setItem('token', JSON.stringify(this.token));
            } else {
                localStorage.removeItem('token');
            }

        }
    }

    /**
     *
     */
    logOut(){
        this.token = null;
        this.identity = null;

        //Save localstorage
        this.saveStorage();
    }

    /**
     *
     * @returns {Promise<any>}
     */
    chargeStorage() {
        let promise = new Promise(
            (resolve, reject) => {
                if (this.platform.is('cordova')) {
                    //mobile
                    this.storage
                        .ready()
                        .then(() => {
                            this.storage.get('token')
                                .then(token => {
                                    if (token) {
                                        this.token = token;
                                    }
                                });
                            });
                } else {
                    //desktop
                    if (localStorage.getItem('token')) {
                        //The item exists in localstorage
                        this.token = localStorage.getItem('token');
                    }
                    resolve();
                }
            });

        return promise;
    }

    /**
     *
     */
    showLoading() {
        this.loading = this.loadingCtrl.create({
            content: 'message.wait',
            dismissOnPageChange: true
        });
        this.loading.present();
    }

    /**
     *
     * @param text
     */
    showError(text) {
        let alert = this.alertCtrl.create({
            title: 'message.fail',
            subTitle: text,
            buttons: ['OK']
        });

        alert.present(prompt);
    }

}
<file_sep>/src/pages/alias/alias-edit/alias-edit.ts
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { AliasProvider } from '../../../providers/alias.provider';
import { FormBuilder } from '@angular/forms';
import { Alias } from '../../../models/alias.model';

@Component({
    selector: 'page-alias-edit',
    templateUrl: 'alias-edit.html',
})
export class AliasEditPage {

    alias: Alias;
    statusAlias: any;

    /**
     *
     * @param {NavController} navCtrl
     * @param {NavParams} navParams
     * @param {FormBuilder} formBuilder
     * @param {AliasProvider} _aliasProvider
     */
    constructor(
        public navCtrl: NavController,
        public navParams: NavParams,
        private formBuilder: FormBuilder,
        private _aliasProvider: AliasProvider,
    ) {
        this.alias = new Alias(
            this.navParams.data.alias.id,
            this.navParams.data.alias.name,
            this.navParams.data.alias.origin,
            this.navParams.data.alias.user
        );
    }

    /**
     *
     */
    editAlias() {
        this._aliasProvider
            .editAlias(this.alias)
            .subscribe(
            response => {
                this.statusAlias = response.status;
                if (this.statusAlias != 'success') {
                    this.statusAlias = 'error';
                } else {
                    this.alias = response.data;
                }
            },
            error => {
                alert(<any>error);
            }
        );
    }

}
<file_sep>/src/pages/alias/alias-edit/alias-edit.module.ts
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { AliasEditPage } from './alias-edit';

@NgModule({
  declarations: [
    AliasEditPage,
  ],
  imports: [
    IonicPageModule.forChild(AliasEditPage),
  ],
})
export class AliasEditPageModule {}
