fix

angular.json

@@ -136,7 +136,8 @@
   "cli": {
     "schematicCollections": [
       "@ionic/angular-toolkit"
-    ]
+    ],
+    "analytics": "00427270-9b96-479b-88bf-3b1a06932adf"
   },
   "schematics": {
     "@ionic/angular-toolkit:component": {

capacitor.config.ts

@@ -2,7 +2,7 @@ import { CapacitorConfig } from '@capacitor/cli';
 
 const config: CapacitorConfig = {
   appId: 'io.ionic.starter',
-  appName: 'mon-projet-ionic',
+  appName: 'angular',
   webDir: 'www',
   server: {
     androidScheme: 'https'

ionic.config.json

 {
-  "name": "mon-projet-ionic",
+  "name": "angular",
   "integrations": {
     "capacitor": {}
   },

package-lock.json

 {
-  "name": "mon-projet-ionic",
+  "name": "angular",
   "version": "0.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "mon-projet-ionic",
+      "name": "angular",
       "version": "0.0.1",
       "dependencies": {
         "@angular/animations": "^17.0.2",

package.json

 {
-  "name": "mon-projet-ionic",
+  "name": "angular",
   "version": "0.0.1",
   "author": "Ionic Framework",
   "homepage": "https://ionicframework.com/",

src/app/about/about.page.html

-<ion-header>
-  <ion-toolbar>
-    <ion-title>A propos</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content>
-  <h1>Qui suis-je ?</h1>
-  <ion-grid>
-    <ion-row>
-      <ion-col size="3">
-        <img src="../../assets/img/moi.jpg">
-      </ion-col>
-      <ion-col size="9">
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis libero laborum maiores perspiciatis explicabo impedit minus alias nulla tempora iure quam, sequi natus adipisci voluptate placeat! Nihil, perspiciatis. Distinctio, repudiandae.
-        </p>
-      </ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col>
-        <h2>Mon parcours</h2>
-      </ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat aut voluptates iure. Nihil tenetur perspiciatis doloremque deserunt suscipit recusandae, ut deleniti veritatis eveniet laudantium saepe. Sapiente enim perferendis molestias delectus?
-        </p>
-        <p>
-          Pariatur, quod. Sapiente porro corporis ratione temporibus dignissimos nobis sit impedit officia optio. Autem et minus consectetur rerum deleniti doloribus quod placeat laborum, adipisci quasi doloremque incidunt eius ex. Velit?
-        </p>
-        <p>
-          Dolor quibusdam perspiciatis totam numquam autem magni reprehenderit sequi quidem praesentium. Incidunt, saepe repellendus. Cum facere unde ad! Doloribus vitae tempora distinctio iure nisi! Asperiores impedit voluptatem suscipit totam animi!
-        </p>
-      </ion-col>
-    </ion-row>
-  </ion-grid>
-</ion-content>

src/app/about/about.page.scss

-p {
-    text-align: justify;
-}
\ No newline at end of file

src/app/about/about.page.spec.ts

-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { AboutPage } from './about.page';
-
-describe('AboutPage', () => {
-  let component: AboutPage;
-  let fixture: ComponentFixture<AboutPage>;
-
-  beforeEach(async(() => {
-    fixture = TestBed.createComponent(AboutPage);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  }));
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/about/about.page.ts

-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-about',
-  templateUrl: './about.page.html',
-  styleUrls: ['./about.page.scss'],
-})
-export class AboutPage implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

src/app/film.service.spec.ts → src/app/anime.service.spec.ts

 import { TestBed } from '@angular/core/testing';
 
-import { FilmService } from './film.service';
+import { AnimeService } from './anime.service';
 
-describe('FilmService', () => {
-  let service: FilmService;
+describe('AnimeService', () => {
+  let service: AnimeService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({});
-    service = TestBed.inject(FilmService);
+    service = TestBed.inject(AnimeService);
   });
 
   it('should be created', () => {

src/app/film.service.ts → src/app/anime.service.ts

 import { Injectable } from '@angular/core';
 import { Observable, map } from 'rxjs';
 import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/compat/firestore';
-import { Film } from './models/film.model';
+import { Anime } from './models/anime.model';
 
 @Injectable({
   providedIn: 'root'
 })
-export class FilmService {
-  private dbPath = '/films';
-  filmsRef: AngularFirestoreCollection<Film>;
+export class AnimeService {
+  private dbPath = '/animes';
+  animesRef: AngularFirestoreCollection<Anime>;
 
 
   constructor(
     private db: AngularFirestore
   ) { 
-    this.filmsRef = db.collection(this.dbPath);
+    this.animesRef = db.collection(this.dbPath);
   }
 
   getAll() : any {
-    return this.filmsRef.snapshotChanges().pipe(
+    return this.animesRef.snapshotChanges().pipe(
       map((changes: any) => {
         return changes.map((doc:any) => {
           return ({id: doc.payload.doc.id, ...doc.payload.doc.data()})
@@ -27,9 +27,9 @@ export class FilmService {
     );
   }
 
-  saveNewFilm(film: Film) : any {
+  saveNewAnime(anime: Anime) : any {
     return new Observable(obs => {
-      this.filmsRef.add({...film}).then(() => {
+      this.animesRef.add({...anime}).then(() => {
         obs.next();
       });
     });
@@ -37,20 +37,20 @@ export class FilmService {
 
   get(id: any):any {
     return  new Observable(obs => {
-      this.filmsRef.doc(id).get().subscribe(res => {
+      this.animesRef.doc(id).get().subscribe(res => {
         obs.next({id: res.id, ...res.data()});
       });
     });
   }
 
-  update(film:Film) {
+  update(anime:Anime) {
     return new Observable(obs => {
-      this.filmsRef.doc(film.id).update(film);
+      this.animesRef.doc(anime.id).update(anime);
       obs.next();
     });
   }
 
   delete(id: any) {
-    this.db.doc(`films/${id}`).delete();
+    this.db.doc(`animes/${id}`).delete();
   }
 }

src/app/photos/photos-routing.module.ts → src/app/animes-list/anime-new/anime-new-routing.module.ts

 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { PhotosPage } from './photos.page';
+import { AnimeNewPage } from './anime-new.page';
 
 const routes: Routes = [
   {
     path: '',
-    component: PhotosPage
+    component: AnimeNewPage
   }
 ];
 
@@ -14,4 +14,4 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
 })
-export class PhotosPageRoutingModule {}
+export class AnimeNewPageRoutingModule {}

src/app/films-list/film/film.module.ts → src/app/animes-list/anime-new/anime-new.module.ts

@@ -4,17 +4,17 @@ import { FormsModule } from '@angular/forms';
 
 import { IonicModule } from '@ionic/angular';
 
-import { FilmPageRoutingModule } from './film-routing.module';
+import { AnimeNewPageRoutingModule } from './anime-new-routing.module';
 
-import { FilmPage } from './film.page';
+import { AnimeNewPage } from './anime-new.page';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
-    FilmPageRoutingModule
+    AnimeNewPageRoutingModule
   ],
-  declarations: [FilmPage]
+  declarations: [AnimeNewPage]
 })
-export class FilmPageModule {}
+export class AnimeNewPageModule {}

src/app/animes-list/anime-new/anime-new.page.html

+<ion-header>
+  <ion-toolbar>
+    <ion-title>Nouveau Anime</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-item>
+    <ion-input type="text" label="Affiche" [(ngModel)]="anime.picture"></ion-input>
+  </ion-item>
+  <ion-item>
+    <ion-input type="text" label="Titre" [(ngModel)]="anime.titre"></ion-input>
+  </ion-item>
+  <ion-item>
+    <ion-input type="text" label="Note sur 10" [(ngModel)]="anime.note"></ion-input>
+  </ion-item>
+  <ion-item>
+    <ion-input type="text" label="Personnage principaux" [(ngModel)]="anime.personnage"></ion-input>
+  </ion-item>
+  <ion-item>
+    <div style="display: flex; align-items: center;">
+    <ion-label>Termine</ion-label>
+    <ion-toggle label="Termine" [(ngModel)]="anime.onFinish" ></ion-toggle>
+  </div>
+  </ion-item>
+  <p class="text-center">
+    <ion-button (click)="add()">Envoyer</ion-button>
+  </p>
+</ion-content>

src/app/films-list/films-list.page.spec.ts → src/app/animes-list/anime-new/anime-new.page.spec.ts

-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FilmsListPage } from './films-list.page';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { AnimeNewPage } from './anime-new.page';
 
-describe('FilmsListPage', () => {
-  let component: FilmsListPage;
-  let fixture: ComponentFixture<FilmsListPage>;
+describe('AnimeNewPage', () => {
+  let component: AnimeNewPage;
+  let fixture: ComponentFixture<AnimeNewPage>;
 
   beforeEach(async(() => {
-    fixture = TestBed.createComponent(FilmsListPage);
+    fixture = TestBed.createComponent(AnimeNewPage);
     component = fixture.componentInstance;
     fixture.detectChanges();
   }));

src/app/films-list/film-new/film-new.page.ts → src/app/animes-list/anime-new/anime-new.page.ts

 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { ToastController } from '@ionic/angular';
-import { FilmService } from 'src/app/film.service';
-import { Film } from 'src/app/models/film.model';
+import { AnimeService } from 'src/app/anime.service';
+import { Anime } from 'src/app/models/anime.model';
 
 @Component({
-  selector: 'app-film-new',
-  templateUrl: './film-new.page.html',
-  styleUrls: ['./film-new.page.scss'],
+  selector: 'app-anime-new',
+  templateUrl: './anime-new.page.html',
+  styleUrls: ['./anime-new.page.scss'],
 })
-export class FilmNewPage implements OnInit {
-  public film!: Film;
+export class AnimeNewPage implements OnInit {
+  public anime!: Anime;
 
   constructor(
-    private Film: FilmService,
+    private Anime: AnimeService,
     private toastCtrl: ToastController,
     private router : Router
   ) { }
 
   ngOnInit() {
-    this.film = new Film();
+    this.anime = new Anime();
   }
 
   async presentToast() {
     const toast = this.toastCtrl.create({
-      message: 'Nouveau Film enregistré',
+      message: 'Nouveau Anime enregistré',
       duration: 2000
     });
     (await toast).present().then(() => {
       setTimeout(() => {
-        this.router.navigate(['/films']);
+        this.router.navigate(['/animes']);
       }, 2000);
     });
   }
 
   add() {
-    this.Film.saveNewFilm(this.film).subscribe(() => {
-      this.film = new Film();
+    this.Anime.saveNewAnime(this.anime).subscribe(() => {
+      this.anime = new Anime();
       this.presentToast();
     });
   }

src/app/about/about-routing.module.ts → src/app/animes-list/anime/anime-routing.module.ts

 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { AboutPage } from './about.page';
+import { AnimePage } from './anime.page';
 
 const routes: Routes = [
   {
     path: '',
-    component: AboutPage
+    component: AnimePage
   }
 ];
 
@@ -14,4 +14,4 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
 })
-export class AboutPageRoutingModule {}
+export class AnimePageRoutingModule {}

src/app/about/about.module.ts → src/app/animes-list/anime/anime.module.ts

@@ -4,17 +4,17 @@ import { FormsModule } from '@angular/forms';
 
 import { IonicModule } from '@ionic/angular';
 
-import { AboutPageRoutingModule } from './about-routing.module';
+import { AnimePageRoutingModule } from './anime-routing.module';
 
-import { AboutPage } from './about.page';
+import { AnimePage } from './anime.page';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
-    AboutPageRoutingModule
+    AnimePageRoutingModule
   ],
-  declarations: [AboutPage]
+  declarations: [AnimePage]
 })
-export class AboutPageModule {}
+export class AnimePageModule {}

src/app/animes-list/anime/anime.page.html

+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/animes"></ion-back-button>
+    </ion-buttons>
+    <ion-title *ngIf="anime">{{ anime.titre }}</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <ion-button (click)="setModif()">Rendre Modifiable</ion-button>
+  <div *ngIf="!modif">
+    <ion-grid *ngIf="anime">
+      <ion-row>
+        <ion-col>
+          <strong>Termine :</strong>
+          <ion-icon *ngIf="anime.onFinish" name="checkmark-done-outline"></ion-icon>
+          <ion-icon *ngIf="!anime.onFinish" name="ban-outline"></ion-icon>
+        </ion-col>
+        <ion-col>
+          <ion-button (click)="onDelete(anime.id)">
+            <ion-icon name="trash"></ion-icon>
+          </ion-button>
+        </ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col>
+          <img [src]="anime.picture" [alt]="anime.titre">
+        </ion-col>
+        <ion-col>
+          <strong>Titre</strong><br>
+          {{anime.titre}} <br>
+          <strong>Note sur 10</strong><br>
+          {{anime.note}} <br>
+          <strong>Personnage principaux</strong> <br>
+          {{anime.personnage}}  <br>
+        </ion-col>
+      </ion-row>
+      <ion-row>
+      </ion-row>
+    </ion-grid>
+  </div>
+  <div *ngIf="modif">
+    <ion-item>
+      <ion-input type="text" label="Affiche" [(ngModel)]="anime.picture"></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-input type="text" label="Titre" [(ngModel)]="anime.titre"></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-input type="text" label="Note sur 10" [(ngModel)]="anime.note"></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-input type="text" label="Personnage principaux" [(ngModel)]="anime.personnage"></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label>Termine</ion-label>
+      <ion-toggle label="Termine" [(ngModel)]="anime.onFinish"></ion-toggle>
+    </ion-item>
+    <p class="text-center">
+      <ion-button (click)="onModif()">Modifier</ion-button>
+    </p>
+  </div>
+</ion-content>
\ No newline at end of file