Relationship local tablesStorage Ionic 3

Asked

Viewed 272 times

0

I want to make a relationship between two "tables" in Ionic 3 with Localsotrage.

I created a preview with the first 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 registration:

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 your 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 movement and should be according to the registration ID selected by the user. How Can I Make This Relationship by Localstorage?

  • 1

    Do you really need a relational mapping for that? If every Time you need to register is relative to a Movement, you could simply create the structure as a single object. Where Movement has 1:n (or 1:1 n know...) times.. This way you don’t have to worry about the complexity of persisting and maintaining these relationships (which would be more correct to use Sqlite directly).

  • 1

    Thus, you keep an array of moves in the Storage. and when there is an update you replace the object in Intel x with its updated version and update its Storage.

  • 1

    If you really want to maintain the relational structure of tables for this problem, I suggest taking a look at Typeorm (https://github.com/typeorm/typeorm)

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.