Details offre

CHANGELOG.md

+v1.0.8.2
+- Add deal detail
+- Edit presentation bullets colors
+
+
 v1.0.8.1
 - Add CHANGELOG.md
 - Set geolocation param default to true

src/app/app-routing.module.ts

@@ -6,6 +6,7 @@ const routes: Routes = [
   { path: 'start', loadChildren: './pages/start/start.module#StartPageModule' },
   { path: 'mainslider', loadChildren: './pages/mainslider/mainslider.module#MainsliderPageModule' },
   { path: 'app', loadChildren: './pages/menu/menu.module#MenuPageModule' },
+  { path: 'offre-details', loadChildren: './pages/offre-details/offre-details.module#OffreDetailsPageModule' },
 ];
 
 @NgModule({

src/app/pages/dashboard/dashboard.page.html

@@ -15,7 +15,8 @@
                     <ion-select cancelText="Fermer" class="text-primary" [(ngModel)]="terms"
                         (ionChange)="onContextChange($event.id)">
                         <ion-select-option value="all">- Tout -</ion-select-option>
-            <ion-select-option *ngFor="let category of _TRIP.cats" [value]="category.id">{{ category.label }}
+                        <ion-select-option *ngFor="let category of _TRIP.cats" [value]="category.id">
+                            {{ category.label }}
                         </ion-select-option>
                     </ion-select>
                 </ion-item>
@@ -61,8 +62,9 @@
             <ion-col col-12 no-padding>
                 <ion-item color="primary" lines="none">
                     <ion-label color="light" class="text-1x">Offres populaires</ion-label>
-          <ion-toggle checked color="secondary" [(ngModel)]="prm_hotdeals" [ngModelOptions]="{standalone: true}"
-            (ionChange)="_ALLO.setParam('hotdeals', 'j')"></ion-toggle>
+                    <ion-toggle checked color="secondary" [(ngModel)]="prm_hotdeals"
+                        [ngModelOptions]="{standalone: true}" (ionChange)="_ALLO.setParam('hotdeals', 'j')">
+                    </ion-toggle>
                 </ion-item>
             </ion-col>
         </ion-row>

src/app/pages/dashboard/dashboard.page.ts

@@ -2,10 +2,10 @@ import { Component, OnInit } from '@angular/core';
 import { NavController, ToastController } from "@ionic/angular";
 import { AlloService } from '../../services/allo-service';
 import { TripService } from '../../services/trip-service';
-// import { TripDetailPage } from "../trip-detail/trip-detail";
 import { HTTP } from '@ionic-native/http/ngx';
 import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
 import { Storage } from '@ionic/storage';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-dashboard',
@@ -26,6 +26,7 @@ export class DashboardPage implements OnInit {
     public _TRIP: TripService,
     public http: HttpClient,
     public toastCtrl: ToastController,
+    private router: Router,
     private storage: Storage
   ) {
   }
@@ -112,7 +113,6 @@ export class DashboardPage implements OnInit {
 
   // view trip detail
   viewDetail(id) {
-    console.log(id);
-    // this.nav.push(TripDetailPage, { id: id });
+    this.router.navigateByUrl('/app/details-offre/' + id);
   }
 }

src/app/pages/mainslider/mainslider.page.scss

@@ -15,6 +15,10 @@ ion-slides {
       right: 20px;
     }
   }
+  .swiper-pagination-bullet {
+    opacity: 0.6 !important;
+  }
 
-  --bullet-background-active: var(--ion-color-light, #ffffff) !important;
+  --bullet-background: #ffffff !important;
+  --bullet-background-active: var(--ion-color-secondary, #ffffff) !important;
 }
\ No newline at end of file

src/app/pages/menu/menu.module.ts

@@ -36,6 +36,10 @@ const routes: Routes = [
       {
         path: 'a-propos',
         loadChildren: '../a-propos/a-propos.module#AProposPageModule'
+      },
+      {
+        path: 'details-offre/:oid',
+        loadChildren: '../offre-details/offre-details.module#OffreDetailsPageModule'
       }
     ]
   }

src/app/pages/offre-details/offre-details.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { OffreDetailsPage } from './offre-details.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: OffreDetailsPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [OffreDetailsPage]
+})
+export class OffreDetailsPageModule {}

src/app/pages/offre-details/offre-details.page.html

+<ion-header>
+    <ion-toolbar color="primary">
+        <ion-buttons slot="start">
+            <ion-back-button defaultHref="/app/dashboard" text="Retour"></ion-back-button>
+        </ion-buttons>
+        <ion-title>
+            <span ion-text>{{ trip.name }}</span>
+        </ion-title>
+    </ion-toolbar>
+</ion-header>
+<ion-content class="common-bg">
+    <ion-card *ngIf="trip?.description">
+        <ion-slides *ngIf="trip?.images" class="to-top" pager>
+            <ion-slide *ngFor="let image of trip.images">
+                <img [src]="image" alt="">
+            </ion-slide>
+        </ion-slides>
+        <ion-slides *ngIf="trip?.images?.length < 1" class="to-top" pager>
+            <img [src]="trip.thumb" alt="">
+        </ion-slides>
+        <ion-card-header color="primary">
+            <ion-card-title>{{ trip.sub_name }}</ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+            {{ trip.description }}
+        </ion-card-content>
+        <ion-list>
+            <ion-item *ngIf="trip?.brand_adresse">
+                <ion-icon name="pin" color="primary" slot="start"></ion-icon>
+                <ion-label>Adresse : {{ trip.brand_adresse }}</ion-label>
+            </ion-item>
+            <ion-item href="tel://{{ trip.brand_tel }}" lines="none" *ngIf="trip?.brand_tel">
+                <ion-icon name="phone-portrait" color="primary" slot="start"></ion-icon>
+                <ion-label>Tél : {{ trip.brand_tel }}</ion-label>
+            </ion-item>
+        </ion-list>
+    </ion-card>
+</ion-content>
\ No newline at end of file

src/app/pages/offre-details/offre-details.page.scss

+.swiper-wrapper {
+  max-height: 100vw;
+  img {
+    width: 100vw;
+  }
+}
+ion-card-header {
+  font-size: 20px;
+}
+
+.deal-title {
+  margin-top: -50px !important;
+  position: relative;
+  z-index: 99999;
+}
+ul.highlight {
+  padding-left: 0;
+  font-size: 1.2rem;
+  list-style: none;
+
+  li {
+    margin-bottom: 1rem;
+  }
+}
+
+// change text-sm size
+.text-sm {
+  font-size: 1.2rem;
+  line-height: 2rem;
+}
+
+.border-bottom {
+  p {
+    text-align: justify;
+  }
+}

src/app/pages/offre-details/offre-details.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OffreDetailsPage } from './offre-details.page';
+
+describe('OffreDetailsPage', () => {
+  let component: OffreDetailsPage;
+  let fixture: ComponentFixture<OffreDetailsPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ OffreDetailsPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OffreDetailsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/offre-details/offre-details.page.ts

+import { Component, OnInit } from '@angular/core';
+import { AlloService } from '../../services/allo-service';
+import { TripService } from '../../services/trip-service';
+import { Storage } from '@ionic/storage';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+    selector: 'app-offre-details',
+    templateUrl: './offre-details.page.html',
+    styleUrls: ['./offre-details.page.scss'],
+})
+export class OffreDetailsPage implements OnInit {
+
+    // trip info
+    public trip: any;
+    // number of adult
+    public adults = 2;
+    // number of children
+    public children = 0;
+    private oid = null;
+
+    constructor(
+        private activatedRoute: ActivatedRoute,
+        public _TRIP: TripService,
+        private _ALLO: AlloService,
+        private _STOR: Storage) {
+        this.trip = {};
+        this._STOR.get('REST_services').then((data) => {
+            if (data) {
+                if (null !== data && 'object' === typeof data && data.hasOwnProperty('products')) {
+                    var products = this._ALLO.jsonToArray(data.products);
+                    for (var i = 0; i < products.length; i++) {
+                        if (products[i].id === parseInt(this.oid)) {
+                            this.trip = products[i];
+                        }
+                    }
+                }
+            }
+        });
+    }
+
+    ngOnInit() {
+        this.oid = this.activatedRoute.snapshot.paramMap.get('oid');
+    }
+
+}