<repo_name>fbourelle/first_project_ionic<file_sep>/src/components/components.module.ts
import { NgModule } from '@angular/core';
import { CustomBarComponent } from './custom-bar/custom-bar';
@NgModule({
	declarations: [CustomBarComponent],
	imports: [],
	exports: [CustomBarComponent]
})
export class ComponentsModule {}
<file_sep>/src/models/PersonnageModel.ts
export class Personnage {
  public _name: string ;
  public _function: string ;
  public _avatar: string;

  constructor(name: string, fonction: string, avatar: string) {
    this._name = name;
    this._function = fonction;
    this._avatar = avatar;
  }

  
}
<file_sep>/src/pages/celibrity/celibrity.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { DestinationPage } from '../destination/destination';
import { PersonnagePage } from '../personnage/personnage';

/**
 * Generated class for the CelibrityPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-celibrity',
  templateUrl: 'celibrity.html',

})
export class CelibrityPage {
  
  nextPage = DestinationPage;
  nextPage2 = PersonnagePage;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad CelibrityPage');
  }

  findCard() {
    this.navCtrl.push(DestinationPage);
  }

}
<file_sep>/src/pages/personnage/personnage.ts
import { Component, Injectable } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';
import { AddpersonnagePage } from '../addpersonnage/addpersonnage'
import { DestinationPage } from '../destination/destination'
import { AlertController } from 'ionic-angular';
import { PersonnagesProvider } from '../../providers/personnages/personnages';
import { Groupe } from '../../models/GroupeModels';

/**
 * Generated class for the PersonnagePage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-personnage',
  templateUrl: 'personnage.html',
})
export class PersonnagePage {

  addPage = AddpersonnagePage;
  nextPage = DestinationPage;
  personnages = [];
  name = String;
  people: any = [];

  constructor(public personnagesProviders: PersonnagesProvider, public navCtrl: NavController, public navParams: NavParams, private toastCtrl: ToastController, public alertCtrl: AlertController) {
    
    this.name = navParams.get("name");
    
    this.personnagesProviders.getPeople().then(data => {
      this.people = data;
    });
    
  }



  ionViewDidLoad() {
    console.log('ionViewDidLoad PersonnagePage');
  }

  showPrompt() {
    let prompt = this.alertCtrl.create({
      title: 'Personnage',
      message: "Enter a name",
      inputs: [
        {
          name: 'title',
          placeholder: 'Title'
        },
      ],
      buttons: [
        {
          text: 'Cancel',
          handler: data => {
            console.log('Cancel clicked');
          }
        },
        {
          text: 'Save',
          handler: data => {
            this.personnages.push(data.title);
          }
        }
      ]
    });
    prompt.present();
  }


  showPromptUpdate(i) {
    let prompt = this.alertCtrl.create({
      title: 'Update Personnage',
      message: "Enter a new name",
      inputs: [
        {
          name: 'title',
          placeholder: 'Enter a new name'
        },
      ],
      buttons: [
        {
          text: 'Cancel',
          handler: data => {
            console.log('Cancel clicked');
          }
        },
        {
          text: 'Save',
          handler: data => { 
            this.personnages.splice(i, 1, data.title);
          }
        }
      ]
    });
    prompt.present();
  }

getToast(message) {
  let toast = this.toastCtrl.create({
    message: message,
    duration: 3000
  });
  toast.present();
}

  suppPerso(index) {
    let message = "Personnage " + this.personnages[index] + " supprimé"
    this.personnages.splice(index, 1);
    this.getToast(message);
  }

addPersonnage() {
    this.personnages.push();
}

editPersonnage(index) {
  this.navCtrl.push(AddpersonnagePage, {
    name: this.personnages[index]
  })
}

onAction() {
  this.personnagesProviders.envoyer();
}

}
<file_sep>/src/pages/addpersonnage/addpersonnage.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AlertController } from 'ionic-angular';
import { PersonnagePage } from '../personnage/personnage';

/**
 * Generated class for the AddpersonnagePage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-addpersonnage',
  templateUrl: 'addpersonnage.html',
})
export class AddpersonnagePage {
  public name;
  
  constructor(public navCtrl: NavController, public navParams: NavParams ) {
    this.name = navParams.get("name");
  }

  // logForm(form) {
  //   console.log(form.value)
  //   this.navCtrl.pop();
  // }

  sendParam() {
    this.navCtrl.push(PersonnagePage, {
      name: this.name
    })
  }

}
<file_sep>/src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule, CUSTOM_ELEMENTS_SCHEMA } 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 { HomePage } from '../pages/home/home';
import { CelibrityPage } from '../pages/celibrity/celibrity';
import { DestinationPage } from '../pages/destination/destination';
import { PersonnagePage } from '../pages/personnage/personnage';
import { AddpersonnagePage } from '../pages/addpersonnage/addpersonnage';
import { CustomBarComponent } from '../components/custom-bar/custom-bar';


@NgModule({
  declarations: [
    MyApp,
    HomePage,
    CelibrityPage,
    DestinationPage,
    PersonnagePage,
    AddpersonnagePage,
    CustomBarComponent
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    CelibrityPage,
    DestinationPage,
    PersonnagePage,
    AddpersonnagePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule {}
<file_sep>/src/providers/personnages/personnages.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Personnage } from '../../models/PersonnageModel';
import { Groupe } from '../../models/GroupeModels';
import { Subject } from 'rxjs/Subject';

/*
  Generated class for the PersonnagesProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class PersonnagesProvider {
modeleSubject = new Subject<Groupe>();
public perso1 = new Personnage("Eugénie", "<NAME>", "avatar_1.jpg");
public perso2 = new Personnage("Louise", "Infirmière", "avatar_2.jpg");
public perso3 = new Personnage("Agathe", "Modèle", "avatar_3.jpg");

public modele = new Groupe([this.perso1, this.perso2, this.perso3]);

apiUrl = 'https://bonnard-17c91.firebaseio.com/';

  constructor(public httpClient: HttpClient) {}

  emitMusiqueSubject() {
    this.modeleSubject.next(this.modele);
  }

  getModele(){
    return this.modele;
  }

  getPeople() {
    let people = new Promise(resolve => {
      this.httpClient.get(this.apiUrl).subscribe(data => {
        resolve(data);
      }, err => {
        console.log(err);
      });
    });
    return people;
  }

  envoyer() {
    this.httpClient.put(this.apiUrl + '/tableau.json', this.modele)
                    .subscribe(
                      () => {
                        console.log('ok');
                      }, (error) => {
                        console.log('error');
                      }
                    );
  }

  postPerson(groupe: Groupe) {
    return new Promise((resolve, reject) => {
      // this.http.post(this.apiUrl + 'users/', JSON.stringify(person), {
      this.http.post(this.apiUrl, JSON.stringify(groupe), {
        // Si votre API nécessite des headers et paramètres additionnels
        // headers: new HttpHeaders().set('Authorization', 'my-auth-token'),
        // params: new HttpParams().set('id', '3'),
      }).subscribe(data => {
          resolve(data);
        }, (err) => {
          reject(err);
        });
    });
 
  }
}
<file_sep>/src/models/GroupeModels.ts
import { Personnage } from "./PersonnageModel";

export class Groupe {

    public _tab_personnages: Personnage[];
  
   constructor(tab_personnages) {
    this._tab_personnages = tab_personnages;
  }

  
}
  <file_sep>/src/components/custom-bar/custom-bar.ts
import { Component, Input } from '@angular/core';

/**
 * Generated class for the CustomBarComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'custom-bar',
  templateUrl: 'custom-bar.html'
})
export class CustomBarComponent {

@Input('progression') progress;

  text: string;

  constructor() {
    console.log('Hello CustomBarComponent Component');
  }

  increaseProgress() {
    if (this.progress < 100) this.progress += 5;
    console.log ("la barre progresse de ", this.progress);
  }

}
