I want to make a relationship between two "tables" in Ionic 3 with LocalSotrage.
I created a provider with the first one that would be the movement register:
import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
@Injectable()
export class MovimentoProvider {
lista:any[];
chave:string = "movimentos";
constructor(private storage: Storage) {
this.storage.ready().then(()=>{
this.storage.get(this.chave).then((registros) => {
if(registros){
this.lista= registros;
}else{
this.lista=[];
}
});
});
}
listar(){
return this.lista;
}
cadastrar(registro:any){
this.storage.ready().then(()=>{
this.lista.push(registro);
this.storage.set(this.chave, this.lista);
})
}
deletar(registro){
for(let chave in this.lista){
if(this.lista[chave] == registro){
this.lista.splice(parseInt(chave),1);
this.storage.set(this.chave, this.lista);
}
}
}
atualizar(movimento,registro){
for(let chave in this.lista){
if(this.lista[chave] == movimento){
this.lista[chave] = registro;
this.storage.set(this.chave, this.lista);
}
}
}
}
I created a "controller" for this registry:
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { MovimentoProvider } from '../../providers/movimento/movimento'
import { MovimentosPage } from '../movimentos/movimentos';
/**
* Generated class for the MovimentoTipoEditPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
interface IMovimento{
nome:string;
tipo:string;
}
@IonicPage()
@Component({
selector: 'page-movimento-tipo-edit',
templateUrl: 'movimento-tipo-edit.html',
})
export class MovimentoTipoEditPage {
movimento:IMovimento = {nome:'', tipo:''};
movimentos:IMovimento[];
movimentoEditando:IMovimento;
constructor(public navCtrl: NavController, public navParams: NavParams, public MovimentoProvider:MovimentoProvider) {
this.movimento = this.navParams.get('dados');
}
ionViewDidLoad() {
console.log('ionViewDidLoad MovimentoTipoEditPage');
}
atualizar(movimento){
if(this.movimento.nome != "" && this.movimento.tipo != ""){
this.movimento = {nome:movimento.nome,tipo:movimento.tipo};
this.movimentoEditando = movimento;
this.MovimentoProvider.atualizar(this.movimentoEditando,this.movimento);
this.navCtrl.push(MovimentosPage);
}
//this.movimento = {nome:movimento.nome, tipo:movimento.tipo}
//this.movimentoEditando = movimento;
}
cancelar(movimento:IMovimento){
}
}
And its very simple View:
<!--
Generated template for the MovimentoTiposPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar color="dark">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Tipos de Movimentos</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item>
<ion-label floating>Nome do Movimento</ion-label>
<ion-input type="text" [(ngModel)]="movimento.nome"></ion-input>
</ion-item>
<ion-item>
<ion-label>Tipo de Movimento</ion-label>
<ion-select [(ngModel)]="movimento.tipo">
<ion-option value="Distância">Distância</ion-option>
<ion-option value="Repetições">Repetições</ion-option>
<ion-option value="Peso">Peso</ion-option>
<ion-option value="Altura">Altura</ion-option>
</ion-select>
</ion-item>
</ion-list>
<button ion-button full (click)="atualizar(movimento)">Atualizar</button>
<button ion-button full (click)="cancelar()">Cancelar</button>
</ion-content>
Now I have to create a new provider that would be the times of each move and should be according to the user ID selected by the user. How can I make this relationship through LocalStorage?