Instantly share code, notes, and snippets.

anonymous /app.components.ts
Created Jul 28, 2017

Embed
What would you like to do?
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { MisTabsPage } from '../pages/mis-tabs/mis-tabs';
//import { RegistroU } from '../pages/RegistroU/my-form';
import { HomePage } from '../pages/home/home';
import { DbProvider } from '../providers/db/db';
// importamos nuestro provider también en app.component.ts y vamos a abrir la base de datos
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage: any= HomePage; //esta sera la primera pagina que se cargue
// crear la tabla en platform.ready para asegurarnos de que el plugin SQlite ya se ha cargado antes de utilizarlo:
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public db : DbProvider) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
//ejecutamos la tabla para crear la tabla*
this.db.openDb()
.then(() => this.db.CreateTableSitios())
});
}
}
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
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 { Geolocation } from '@ionic-native/geolocation';
import {GoogleMaps } from '@ionic-native/google-maps';
import { MyApp } from './app.component';
//import { HomePage } from '../pages/home/home'; este es el import del login
import { HomePage } from '../pages/home/home';
import { RegistroU } from '../pages/RegistroU/my-form';
import {MisTabsPage} from '../pages/mis-tabs/mis-tabs';
import { Inicio } from '../pages/inicio/inicio';
import { Lugares } from '../pages/lugares/lugares';
import { Perfil } from '../pages/perfil/perfil';
import { Favoritos } from '../pages/Favoritos/favoritos';
import { Menu } from '../pages/Menu/menu';
import { DbProvider } from '../providers/db/db';
import { SQLite } from '@ionic-native/sqlite';
//import { ModalNuevoSitioPage } from '../pages/modal-nuevo-sitio/modal-nuevo-sitio';
import { Camera } from '@ionic-native/camera';
import{LaunchNavigator , LaunchNavigatorOptions} from '@ionic-native/launch-navigator';
@NgModule({
declarations: [
MyApp,
HomePage,
RegistroU,
MisTabsPage,
Inicio,
Lugares,
Perfil,
Favoritos,
// ModalNuevoSitioPage,
Menu
],
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
RegistroU,
MisTabsPage,
Inicio,
Lugares,
Perfil,
Favoritos,
// ModalNuevoSitioPage,
Menu
],
providers: [
StatusBar,
SplashScreen,
Geolocation,
GoogleMaps,
Camera,
{provide: ErrorHandler, useClass: IonicErrorHandler},
DbProvider,
SQLite,
LaunchNavigator
]
})
export class AppModule {}
import { Injectable } from '@angular/core';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite';
/*
Generated class for the DbProvider provider.
See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular 2 DI.
*/
@Injectable()
export class DbProvider {
db : SQLiteObject = null;//creamos la variable mienbro db donde se guardará en manejador de base de datos
constructor(public sqlite: SQLite) {//inyectamos la dependencia SQLite
console.log('Hello DbProvider Provider');
}
//abrimos la base de datos
public openDb(){
return this.sqlite.create({//crea una base de datos si no existe y abre la conexion
name: 'data.db',
location: 'default' // el campo location es obligatorio
}) //si crea la base de datos
.then((db: SQLiteObject) => { //db es de tipos sqlobject, le pasamos como parametro el manejador
this.db =db;//asignamos el manejador
})
.catch(error =>{
console.error(error);
});
}
public CreateTableSitios(){
return this.db.executeSql("create table if not exists eventos( sc_id_evento INTEGER PRIMARY KEY AUTOINCREMENT, lat FLOAT, lng FLOAT, address TEXT, description TEXT, foto TEXT )",{})
}
public addSitio(sitio){//En la sql definimos el insert con los campos de la tabla que vamos a introducir
let sql = "INSERT INTO eventos (lat, lng,address, description,foto) values (?,?,?,?,?)";
return this.db.executeSql(sql,[sitio.lat,sitio.lng,sitio.address,sitio.description,sitio.foto]);
}
public getSitios(){
let sql = "SELECT * FROM eventos";
return this.db.executeSql(sql,{});
}
}
<ion-content class="background" >
<h1>SocialCity</h1>
<ion-card >
<ion-card-header>
LOGIN
</ion-card-header>
<ion-card-content><!--aqui se contendran las etiquets y las cajas de texto para el usuario y contra-->
<form [formGroup]="formHome" (ngSubmit)="saveDatalogin()" novalidate>
<ion-list no-lines>
<ion-item><!--dentro de ion-item siempre van bottones o textos adentro-->
<ion-icon name="person" item-left></ion-icon>
<ion-label stacked>Username</ion-label>
<ion-input formControlName="cta_u" type="text"></ion-input>
</ion-item>
<ion-item *ngIf="formHome.get('cta_u').errors && formHome.get('cta_u').dirty">
<p color="danger" ion-text *ngIf="formHome.get('cta_u').hasError('required')">Campo Requerido</p>
<p color="danger" ion-text *ngIf="formHome.get('cta_u').hasError('pattern')">Valor no valido</p>
</ion-item>
<ion-item><!--dentro de ion-item siempre van bottones o textos adentro-->
<ion-icon name="eye" item-left></ion-icon>
<ion-label stacked>Password</ion-label>
<ion-input formControlName="password" type="password" ></ion-input>
</ion-item>
<ion-item *ngIf="formHome.get('password').errors && formHome.get('password').dirty">
<p color="danger" ion-text *ngIf="formHome.get('password').hasError('required')">Campo Requerido</p>
<p color="danger" ion-text *ngIf="formHome.get('password').hasError('pattern')">Valor no valido</p>
</ion-item>
<ion-item>
<p>Olvidaste tu contraeña?<a href="#"> Entrar aquí</a></p>
</ion-item>
<ion-item>
<button (click)="goRegistro()" ion-button icon-Rigth outline> Registrate<ion-icon name="contact"></ion-icon>
</button>
</ion-item>
<!--propiedades botones: color="color", clear, block,small,large, outline, icon-only-->
<button (click)="goInicio()" ion-button color="danger" type="submit" [disabled]="!formHome.valid" block outline>LOGIN</button><!--block-outline hace que ocupe 80 de la pantalla-->
</ion-list>
<b>Entrar con</b>
<button ion-button color="primary" ion-left block><!--ion-left acomodamos el icono hacia la izquierda del botton-->
<ion-icon name="logo-facebook"></ion-icon>
<div>
Entrar con facebook
</div>
</button>
<button ion-button color="danger" ion-left block><!--ion-left acomodamos el icono hacia la izquierda del botton-->
<ion-icon name="logo-google"></ion-icon>
<div>
Entrar con Google
</div>
</button><!--cerramos el botton aqui para que los iconos queden dentro-->
</form>
</ion-card-content>
</ion-card>
</ion-content>
import { Component } from '@angular/core';
import { NavController ,ViewController} from 'ionic-angular';
import {FormBuilder,FormGroup, Validators } from '@angular/forms';
///importación de las librerías referentes a los plugin que instalamos
import { Geolocation, Geoposition } from '@ionic-native/geolocation';
import { MisTabsPage } from '../mis-tabs/mis-tabs';
import { RegistroU } from '../RegistroU/my-form';
//import { DbProvider } from '../../providers/db/db';
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent
} from '@ionic-native/google-maps';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
private formHome: FormGroup;
constructor(public navCtrl: NavController,
public geolocation: Geolocation,
public googleMaps: GoogleMaps,
private formBuilder :FormBuilder
// private viewCtrl : ViewController
) {
this.formHome = this.myform();
}
private myform(){
/*
let rg = {
sc_cta_u : this.sc_cta_u,
password :this.password
}
this.db.saveR(rg).then((res)=>{
this.cerrarModal();
})*/
return this.formBuilder.group({
cta_u: ['',[Validators.required,Validators.pattern(/^[a-z0-9_-]{3,16}$/)]],
password :['',[Validators.required,Validators.pattern(/^[a-z0-9_-]{6,18}$/)]]
});
}//cierre funcion myform
saveDatalogin(){
console.log(JSON.stringify(this.formHome.value));
}
goInicio(){
this.navCtrl.push(MisTabsPage);
}
goRegistro() {
this.navCtrl.push(RegistroU);
}
/*
cerrarModal (){
this.viewCtrl.dismiss();
}*/
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment