Merge branch 'v1.1.0.0' into v1.1.2.0

CHANGELOG.md

 v1.1.0.0
 - Add login form
+- Optimise launch time
+- Fix presentation slider skip transition
+- Optimise offers list loading
 
 v1.0.8.3
 - Show main slide 

config.xml

@@ -93,17 +93,17 @@
     <preference name="DisallowOverscroll" value="true" />
     <preference name="android-minSdkVersion" value="19" />
     <preference name="BackupWebStorage" value="none" />
-    <preference name="SplashScreenDelay" value="10000" />
+    <preference name="fullscreen" value="true" />
+    <preference name="SplashScreenDelay" value="0" />
     <preference name="FadeSplashScreen" value="true" />
-    <preference name="ShowSplashScreen" value="true" />
+    <preference name="ShowSplashScreen" value="false" />
     <preference name="ShowSplashScreenSpinner" value="false" />
     <preference name="FadeSplashScreenDuration" value="600" />
     <preference name="SplashScreenBackgroundColor" value="0xFFFFFFFF" />
     <preference name="SplashScreen" value="screen" />
     <preference name="SplashMaintainAspectRatio" value="true" />
-    <preference name="fullscreen" value="true" />
+    <preference name="SplashShowOnlyFirstTime" value="false" />
     <feature name="StatusBar">
         <param name="ios-package" onload="true" value="CDVStatusBar" />
     </feature>
-    <preference name="SplashShowOnlyFirstTime" value="false" />
 </widget>

src/app/app-routing.module.ts

@@ -4,10 +4,10 @@ import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 const routes: Routes = [
   { path: '', redirectTo: 'mainslider', pathMatch: 'full' },
   { path: 'start', loadChildren: './pages/start/start.module#StartPageModule' },
-  { path: 'login', loadChildren: './pages/login/login.module#LoginPageModule' },
+  { path: 'login', loadChildren: './pages/compte/login/login.module#LoginPageModule' },
   { 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' },
+  { path: 'offre-details', loadChildren: './pages/offres/offre-details/offre-details.module#OffreDetailsPageModule' },
 ];
 
 @NgModule({

src/app/app.component.ts

@@ -15,6 +15,9 @@ import { TripService } from './services/trip-service';
     templateUrl: 'app.component.html'
 })
 export class AppComponent {
+
+    public appStarted = false;
+
     constructor(
         public LN: LocalNotifications,
         private platform: Platform,
@@ -29,6 +32,7 @@ export class AppComponent {
 
     initializeApp() {
         this.platform.ready().then(() => {
+            this.appStarted = true;
             this.statusBar.styleDefault();
             this.splashScreen.hide();
 

src/app/app.scss

@@ -29,3 +29,19 @@
     color: var(--ion-color-light, #ffffff) !important;
   }
 }
+
+div.start {
+  background: #f93129;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: .5s;
+  ion-img {
+    width: 20vw;
+  }
+  ion-spinner {
+    transform: scale(3);
+  }
+}
\ No newline at end of file

src/app/pages/login/login.page.ts → src/app/pages/compte/login/login.page.ts

 import { Component, OnInit } from '@angular/core';
 import { Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
-import { AlloService } from '../../services/allo-service';
+import { AlloService } from '../../../services/allo-service';
 import { Storage } from '@ionic/storage';
 import { Router } from '@angular/router';
 import { GooglePlus } from '@ionic-native/google-plus/ngx';

src/app/pages/mainslider/mainslider.page.html

-<ion-content>
-	<ion-slides #mainSlider pager="true">
-		<ion-slide color="primary" padding>
+<ion-content color="primary">
+	<ion-slides #mainSlider  [options]="slideOpts" pager="true" [hidden]="hideSlider">
+		<ion-slide padding>
 			<ion-item lines="none" color="primary" class="skip">
 				<ion-button fill="outline" color="light" (click)="skipPresentation($event)">
 					Passer <ion-icon name="arrow-dropright-circle" slot="end"></ion-icon>
@@ -9,7 +9,7 @@
 			<ion-grid>
 				<ion-row>
 					<ion-col>
-						<ion-img src="assets/img/mainslider/0.png"></ion-img>
+						<img src="assets/img/mainslider/0.png" />
 					</ion-col>
 				</ion-row>
 				<ion-row>
@@ -67,7 +67,7 @@
 			<ion-grid>
 				<ion-row>
 					<ion-col>
-						<ion-img src="assets/img/mainslider/1.png"></ion-img>
+						<img src="assets/img/mainslider/1.png" />
 					</ion-col>
 				</ion-row>
 				<ion-row>
@@ -100,7 +100,7 @@
 			<ion-grid>
 				<ion-row>
 					<ion-col>
-						<ion-img src="assets/img/mainslider/2.png"></ion-img>
+						<img src="assets/img/mainslider/2.png" />
 					</ion-col>
 				</ion-row>
 				<ion-row>
@@ -133,7 +133,7 @@
 			<ion-grid>
 				<ion-row>
 					<ion-col>
-						<ion-img src="assets/img/mainslider/3.png"></ion-img>
+						<img src="assets/img/mainslider/3.png" />
 					</ion-col>
 				</ion-row>
 				<ion-row>
@@ -182,7 +182,7 @@
 			<ion-grid>
 				<ion-row>
 					<ion-col>
-						<ion-img src="assets/img/mainslider/4.png"></ion-img>
+						<img src="assets/img/mainslider/4.png" />
 					</ion-col>
 				</ion-row>
 				<ion-row>

src/app/pages/mainslider/mainslider.page.ts

@@ -18,9 +18,13 @@ export class MainsliderPage implements OnInit {
     @ViewChild(IonSlides) mainSlider: IonSlides;
 
     slideOpts = {
-        effect: 'flip'
+        effect: 'fade',
+        fadeEffect: {
+            crossFade: true
+        }
     };
     public prmMainslider: boolean;
+    public hideSlider = false;
 
     constructor(
         public platform: Platform,
@@ -69,7 +73,9 @@ export class MainsliderPage implements OnInit {
 
     skipPresentation($event) {
         this.mainSlider.getActiveIndex().then(index => {
-            this.mainSlider.slideTo(4);
+            this.hideSlider = true;
+            this.mainSlider.slideTo(4, 1000);
+            this.hideSlider = false;
         });
     }
 

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

@@ -19,11 +19,11 @@ const routes: Routes = [
     children: [
       {
         path: 'dashboard',
-        loadChildren: '../dashboard/dashboard.module#DashboardPageModule'
+        loadChildren: '../offres/dashboard/dashboard.module#DashboardPageModule'
       },
       {
         path: 'partenaires',
-        loadChildren: '../partenaires/partenaires.module#PartenairesPageModule'
+        loadChildren: '../partenaires/partenaires/partenaires.module#PartenairesPageModule'
       },
       {
         path: 'params',
@@ -39,11 +39,11 @@ const routes: Routes = [
       },
       {
         path: 'details-offre/:oid',
-        loadChildren: '../offre-details/offre-details.module#OffreDetailsPageModule'
+        loadChildren: '../offres/offre-details/offre-details.module#OffreDetailsPageModule'
       },
       {
         path: 'profil',
-        loadChildren: '../profil/profil.module#ProfilPageModule'
+        loadChildren: '../compte/profil/profil.module#ProfilPageModule'
       },
       {
         path: 'profil-edit',

src/app/pages/offres/dashboard/dashboard.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 { DashboardPage } from './dashboard.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: DashboardPage,
+    children: [
+      {
+        path: 'offres-carte',
+        children: [
+          {
+            path: '',
+            loadChildren: '../offres-carte/offres-carte.module#OffresCartePageModule'
+          }
+        ]
+      },
+      {
+        path: 'offres-tlm',
+        children: [
+          {
+            path: '',
+            loadChildren: '../offres-tlm/offres-tlm.module#OffresTlmPageModule'
+          }
+        ]
+      },
+      {
+        path: '',
+        redirectTo: '/app/dashboard/offres-carte',
+        pathMatch: 'full'
+      }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [DashboardPage]
+})
+export class DashboardPageModule {}

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

@@ -8,20 +8,7 @@
                 <!-- <ion-icon name="menu" size="large" color="light"></ion-icon> -->
             </ion-menu-button>
         </ion-buttons>
-        <ion-card class="top-card" no-margin>
-            <ion-card-content no-padding>
-                <ion-item lines="none">
-                    <ion-label class="text-1x bold text-primary">Catégories</ion-label>
-                    <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>
-                    </ion-select>
-                </ion-item>
-            </ion-card-content>
-        </ion-card>
+        
         <ion-buttons slot="end">
             <!-- <ion-button (click)="showHideMoreFilters()"> -->
             <ion-button>
@@ -71,53 +58,18 @@
     </ion-grid>
 </ion-header>
 
-<ion-content padding class="dashboard">
-
-    <ion-refresher (ionRefresh)="doRefresh($event)">
-        <ion-refresher-content></ion-refresher-content>
-    </ion-refresher>
-
-    <!--list of trips-->
-    <ion-card *ngFor="let trip of _TRIP.products | search : terms" (click)="viewDetail(trip.id)" tappable no-margin
-        margin-bottom>
-        <div class="img-spinner-wrap ion-text-center">
-            <ion-spinner name="dots" *ngIf="trip.hidden"></ion-spinner>
-        </div>
-        <ion-img [src]="trip.thumb" [class.no-visibility]="trip.hidden" (ionImgDidLoad)="setImgVisible(trip)"></ion-img>
-        <ion-card-header>
-            <ion-card-subtitle color="primary">
-                <ion-icon name="pin"></ion-icon>
-                <ion-label>{{ trip.location }}</ion-label>
-                <ion-badge fill="outline" *ngIf="trip.price_adult" color="warning">
-                    -{{ ((trip.price_adult_before - trip.price_adult) * 100) / trip.price_adult_before | number:'1.0-0' }}%
-                </ion-badge>
-            </ion-card-subtitle>
-            <ion-card-title>
-                {{ trip.name | slice:0:100 }}
-            </ion-card-title>
-        </ion-card-header>
-
-        <!-- <ion-item>
-      <ion-icon name="pin" slot="start"></ion-icon>
-      <ion-label>{{ trip.location }}</ion-label>
-      <ion-button fill="outline" slot="end">View</ion-button>
-    </ion-item> -->
-        <ion-card-content no-padding padding-horizontal padding-bottom>
-            {{ trip.description | slice:0:130 }}...
-        </ion-card-content>
-        <ion-item *ngIf="trip.price_adult" color="primary" lines="none">
-            <ion-icon name="cash" slot="start"></ion-icon>
-            <ion-button slot="end" class="before">
-                <ion-text color="light">
-                    ({{ trip.price_adult_before }} Dh)
-                </ion-text>
-            </ion-button>
-            <ion-button slot="end" color="light">
-                <ion-text color="primary">
-                    {{ trip.price_adult }} Dh
-                </ion-text>
-            </ion-button>
-        </ion-item>
-    </ion-card>
+<ion-content>
+    <ion-tabs>
+        <ion-tab-bar slot="bottom">
+            <ion-tab-button tab="offres-carte">
+                <ion-icon name="card"></ion-icon>
+                <ion-label>Offres Carte Testeur</ion-label>
+            </ion-tab-button>
 
+            <ion-tab-button tab="offres-tlm">
+                <ion-icon name="people"></ion-icon>
+                <ion-label>Pour tout le monde</ion-label>
+            </ion-tab-button>
+        </ion-tab-bar>
+    </ion-tabs>
 </ion-content>
\ No newline at end of file

src/app/pages/offres/dashboard/dashboard.page.scss

+ion-header {
+  ion-card {
+    margin-top: 4px;
+  }
+}
\ No newline at end of file

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

+import { Component, OnInit } from '@angular/core';
+import { TripService } from '../../../services/trip-service';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.page.html',
+  styleUrls: ['./dashboard.page.scss'],
+})
+
+export class DashboardPage implements OnInit {
+  // list of products
+  public products: any;
+  public terms: any;
+  public show_more_filters = false;
+
+  constructor(
+    public _TRIP: TripService
+  ) {
+  }
+
+  ngOnInit() {
+    // console.log('ngOnInit Dashboard');
+    // this._ALLO.presentLoading();
+  }
+
+  showHideMoreFilters() {
+    if (this.show_more_filters === false) {
+      this.show_more_filters = true;
+    } else {
+      this.show_more_filters = false;
+    }
+  }
+}

src/app/pages/offre-details/offre-details.page.ts → src/app/pages/offres/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 { AlloService } from '../../../services/allo-service';
+import { TripService } from '../../../services/trip-service';
 import { Storage } from '@ionic/storage';
 import { ActivatedRoute } from '@angular/router';
 

src/app/pages/offres/offres-carte/offres-carte.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 { SearchPipe } from '../../../pipes/search/search.pipe';
+
+import { OffresCartePage } from './offres-carte.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: OffresCartePage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [OffresCartePage, SearchPipe]
+})
+export class OffresCartePageModule {}

src/app/pages/offres/offres-carte/offres-carte.page.html

+<ion-list-header>Catégories :</ion-list-header>
+<div class="app">
+  <ul class="hs" no-margin margin-bottom>
+    <li *ngFor="let category of _TRIP.cats" class="item">
+      <ion-chip (click)="_TRIP.filterList(category.id)">
+        <ion-label>{{ category.label }}</ion-label>
+      </ion-chip>
+    </li>
+  </ul>
+</div>
+<ion-content padding-horizontal padding-bottom class="dashboard">
+
+  <ion-refresher (ionRefresh)="doRefresh($event)">
+    <ion-refresher-content></ion-refresher-content>
+  </ion-refresher>
+  <div *ngIf="_TRIP.filtredProducts.length <= 0">
+    <ion-card class="skeleton" tappable no-margin margin-bottom>
+      <ion-skeleton-text class="img" animated></ion-skeleton-text>
+      <ion-card-header>
+        <ion-card-subtitle color="primary">
+          <ion-skeleton-text style="width: 80%" animated></ion-skeleton-text>
+        </ion-card-subtitle>
+        <ion-card-title>
+          <ion-skeleton-text style="height: 20px" animated></ion-skeleton-text>
+        </ion-card-title>
+      </ion-card-header>
+
+      <ion-card-content no-padding padding-horizontal padding-bottom>
+        <ion-skeleton-text style="width: 80%" animated></ion-skeleton-text>
+        <ion-skeleton-text animated></ion-skeleton-text>
+        <ion-skeleton-text style="width: 80%" animated></ion-skeleton-text>
+        <ion-skeleton-text style="width: 50%" animated></ion-skeleton-text>
+      </ion-card-content>
+    </ion-card>
+    <ion-card class="skeleton" tappable no-margin margin-bottom>
+      <ion-skeleton-text class="img" animated></ion-skeleton-text>
+      <ion-card-header>
+        <ion-card-subtitle color="primary">
+          <ion-skeleton-text style="width: 80%" animated></ion-skeleton-text>
+        </ion-card-subtitle>
+        <ion-card-title>
+          <ion-skeleton-text style="height: 20px" animated></ion-skeleton-text>
+        </ion-card-title>
+      </ion-card-header>
+
+      <ion-card-content no-padding padding-horizontal padding-bottom>
+        <ion-skeleton-text style="width: 80%" animated></ion-skeleton-text>
+        <ion-skeleton-text animated></ion-skeleton-text>
+        <ion-skeleton-text style="width: 80%" animated></ion-skeleton-text>
+        <ion-skeleton-text style="width: 50%" animated></ion-skeleton-text>
+      </ion-card-content>
+    </ion-card>
+  </div>
+  <ion-card *ngFor="let trip of _TRIP.offersCardList" (click)="viewDetail(trip.id)" tappable no-margin margin-bottom>
+    <div class="img-spinner-wrap ion-text-center">
+      <ion-spinner name="dots" *ngIf="trip.hidden"></ion-spinner>
+    </div>
+    <ion-img [src]="trip.thumb" [class.no-visibility]="trip.hidden" (ionImgDidLoad)="setImgVisible(trip)"></ion-img>
+    <ion-card-header>
+      <ion-card-subtitle color="primary">
+        <ion-icon name="pin"></ion-icon>
+        <ion-label>{{ trip.location }}</ion-label>
+        <ion-badge fill="outline" *ngIf="trip.price_adult" color="warning">
+          -{{ ((trip.price_adult_before - trip.price_adult) * 100) / trip.price_adult_before | number:'1.0-0' }}%
+        </ion-badge>
+      </ion-card-subtitle>
+      <ion-card-title>
+        {{ trip.name | slice:0:100 }}
+      </ion-card-title>
+    </ion-card-header>
+
+    <!-- <ion-item>
+    <ion-icon name="pin" slot="start"></ion-icon>
+    <ion-label>{{ trip.location }}</ion-label>
+    <ion-button fill="outline" slot="end">View</ion-button>
+  </ion-item> -->
+    <ion-card-content no-padding padding-horizontal padding-bottom>
+      {{ trip.description | slice:0:130 }}...
+    </ion-card-content>
+    <ion-item *ngIf="trip.price_adult" color="primary" lines="none">
+      <ion-icon name="cash" slot="start"></ion-icon>
+      <ion-button slot="end" class="before">
+        <ion-text color="light">
+          ({{ trip.price_adult_before }} Dh)
+        </ion-text>
+      </ion-button>
+      <ion-button slot="end" color="light">
+        <ion-text color="primary">
+          {{ trip.price_adult }} Dh
+        </ion-text>
+      </ion-button>
+    </ion-item>
+  </ion-card>
+
+  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
+    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Chargement...">
+    </ion-infinite-scroll-content>
+  </ion-infinite-scroll>
+
+</ion-content>
\ No newline at end of file

src/app/pages/dashboard/dashboard.page.scss → src/app/pages/offres/offres-carte/offres-carte.page.scss

-ion-header {
-  ion-card {
-    margin-top: 4px;
-  }
-}
 .dashboard {
   ion-card {
+    ion-skeleton-text.img {
+      margin: 0 !important;
+      min-height: 160px;
+    }
     ion-badge {
       float: right;
       margin-top: -36px;
       width: 18vw;
       height: 8vw;
       font-size: large;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
     ion-img {
       min-height: 10rem;
@@ -38,3 +40,78 @@ ion-header {
   min-height: 10rem;
   padding-top: 4.5rem;
 }
+div[scrollx="true"],
+div[scrolly="true"] {
+  position: relative;
+  overflow: hidden;
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+div[scrollx="true"] {
+  overflow-x: auto;
+}
+
+div[scrolly="true"] {
+  overflow-y: auto;
+}
+
+.app {
+  padding: 0;
+  display: grid;
+  grid-gap: 20px 0;
+  // grid-template-columns: 20px 1fr 20px;
+  align-content: start;
+}
+
+.app > * {
+  grid-column: 2 / -2;
+}
+
+.app > .full {
+  grid-column: 1 / -1;
+}
+
+.hs {
+  display: grid;
+  // grid-gap: calc(20px / 2);
+  grid-template-columns: repeat(9999999, auto);
+  // grid-template-rows: minmax(150px, 1fr);
+
+  overflow-x: scroll;
+  scroll-snap-type: x proximity;
+  // padding-bottom: calc(.75 * 20px);
+  // margin-bottom: calc(-.25 * 20px);
+}
+
+/* Demo styles */
+
+ion-content {
+  display: grid;
+  place-items: center;
+  // background: #456173;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+.app {
+  // background: #DBD0BC;
+  overflow-y: scroll;
+}
+
+.hs > li,
+.item {
+  scroll-snap-align: center;
+  // padding: calc(20px / 2 * 1.5);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: #fff;
+  border-radius: 8px;
+}

src/app/pages/offres/offres-carte/offres-carte.page.spec.ts

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

src/app/pages/dashboard/dashboard.page.ts → src/app/pages/offres/offres-carte/offres-carte.page.ts

-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 { HTTP } from '@ionic-native/http/ngx';
-import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ToastController, IonInfiniteScroll } from '@ionic/angular';
+import { AlloService } from '../../../services/allo-service';
+import { TripService } from '../../../services/trip-service';
 import { Storage } from '@ionic/storage';
 import { Router } from '@angular/router';
 
 @Component({
-  selector: 'app-dashboard',
-  templateUrl: './dashboard.page.html',
-  styleUrls: ['./dashboard.page.scss'],
+  selector: 'app-offres-carte',
+  templateUrl: './offres-carte.page.html',
+  styleUrls: ['./offres-carte.page.scss'],
 })
+export class OffresCartePage implements OnInit {
+  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
 
-export class DashboardPage implements OnInit {
-  // list of products
-  public products: any;
   public toast: any;
-  public terms: any;
-  public show_more_filters = false;
 
   constructor(
-    public nav: NavController,
     public _ALLO: AlloService,
     public _TRIP: TripService,
-    public http: HttpClient,
     public toastCtrl: ToastController,
     private router: Router,
-    private storage: Storage
-  ) {
-  }
+    private storage: Storage) { }
+
+  ngOnInit() { }
 
-  ngOnInit() {
-    // console.log('ngOnInit Dashboard');
-    // this._ALLO.presentLoading();
+  loadData(event) {
+    setTimeout(() => {
+      ++this._TRIP.offersCardListPointer;
+      let loadedData = this._TRIP.filtredProducts.slice(this._TRIP.offersCardListPointer, this._TRIP.offersCardListPointer + 2);
+      if (loadedData) {
+        this._TRIP.offersCardListPointer = this._TRIP.offersCardListPointer + 1;
+        this._TRIP.offersCardList = this._TRIP.offersCardList.concat(loadedData);
+        console.log(loadedData, this._TRIP.offersCardList, this._TRIP.offersCardListPointer);
+        event.target.complete();
+      } else {
+        event.target.disabled = true;
+      }
+    }, 300);
   }
 
   setImgVisible(trip) {
     trip.hidden = false;
   }
 
-  showHideMoreFilters() {
-    if (this.show_more_filters === false) {
-      this.show_more_filters = true;
-    } else {
-      this.show_more_filters = false;
-    }
-  }
-
   async presentToast() {
     const toast = await this.toastCtrl.create({
       message: 'Liste mise à jour',
@@ -74,4 +69,5 @@ export class DashboardPage implements OnInit {
   viewDetail(id) {
     this.router.navigateByUrl('/app/details-offre/' + id);
   }
+
 }

src/app/pages/dashboard/dashboard.module.ts → src/app/pages/offres/offres-tlm/offres-tlm.module.ts

@@ -4,14 +4,13 @@ import { FormsModule } from '@angular/forms';
 import { Routes, RouterModule } from '@angular/router';
 
 import { IonicModule } from '@ionic/angular';
-import { SearchPipe } from '../../pipes/search/search.pipe';
 
-import { DashboardPage } from './dashboard.page';
+import { OffresTlmPage } from './offres-tlm.page';
 
 const routes: Routes = [
   {
     path: '',
-    component: DashboardPage
+    component: OffresTlmPage
   }
 ];
 
@@ -22,6 +21,6 @@ const routes: Routes = [
     IonicModule,
     RouterModule.forChild(routes)
   ],
-  declarations: [DashboardPage, SearchPipe]
+  declarations: [OffresTlmPage]
 })
-export class DashboardPageModule {}
+export class OffresTlmPageModule {}

src/app/pages/offres/offres-tlm/offres-tlm.page.html

+<ion-content>
+  <ion-list-header>Meilleures deals</ion-list-header>
+  <div class="app">
+    <ul class="hs">
+      <li class="item">test</li>
+      <li class="item">test</li>
+      <li class="item">test</li>
+      <li class="item">test</li>
+      <li class="item">test</li>
+      <li class="item">test</li>
+    </ul>
+  </div>
+  <ion-list>
+    <ion-item>
+      Offre
+    </ion-item>
+  </ion-list>
+</ion-content>
\ No newline at end of file

src/app/pages/offres/offres-tlm/offres-tlm.page.scss

+.app {
+//   padding: 20px 0;
+  display: grid;
+  grid-gap: 20px 0;
+  grid-template-columns: 10px 1fr 10px;
+  align-content: start;
+}
+
+.app > * {
+  grid-column: 2 / -2;
+}
+
+.app > .full {
+  grid-column: 1 / -1;
+}
+
+.hs {
+  display: grid;
+  grid-gap: calc(20px / 2);
+  grid-template-columns: repeat(6, calc(50% - 20px * 2));
+  grid-template-rows: minmax(150px, 1fr);
+
+  overflow-x: scroll;
+  scroll-snap-type: x proximity;
+  padding-bottom: calc(0.75 * 20px);
+  margin-bottom: calc(-0.25 * 20px);
+}
+
+/* Demo styles */
+
+ion-content {
+  display: grid;
+  place-items: center;
+  background: #456173;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+.app {
+//   width: 375px;
+//   height: 667px;
+  background: #dbd0bc;
+  overflow-y: scroll;
+}
+
+.hs > li,
+.item {
+  scroll-snap-align: center;
+  padding: calc(20px / 2 * 1.5);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: #fff;
+  border-radius: 8px;
+}

src/app/pages/offres/offres-tlm/offres-tlm.page.spec.ts

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

src/app/pages/offres/offres-tlm/offres-tlm.page.ts

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

src/app/pages/partenaires-list/partenaires-list.page.ts → src/app/pages/partenaires/partenaires-list/partenaires-list.page.ts

 import { Component, OnInit } from '@angular/core';
 import { LoadingController } from '@ionic/angular';
 // import { ActivatedRoute } from '@angular/router';
-import { TripService } from '../../services/trip-service';
-import { AlloService } from '../../services/allo-service';
+import { TripService } from '../../../services/trip-service';
+import { AlloService } from '../../../services/allo-service';
 
 @Component({
   selector: 'app-partenaires-list',

src/app/pages/partenaires-map/partenaires-map.page.ts → src/app/pages/partenaires/partenaires-map/partenaires-map.page.ts

 import { Component, OnInit } from '@angular/core';
 import { LoadingController } from '@ionic/angular';
-import { AlloService } from "../../services/allo-service";
-import { TripService } from "../../services/trip-service";
+import { AlloService } from '../../../services/allo-service';
+import { TripService } from '../../../services/trip-service';
 import L from 'leaflet';
 import 'leaflet.markercluster';
 
@@ -36,7 +36,7 @@ export class PartenairesMapPage implements OnInit {
   }
 
   loadmap() {
-    this.map = L.map("map", { attributionControl: false });
+    this.map = L.map('map', { attributionControl: false });
     this.map.on('load', () => {
       // this.loader.dismiss();
     });

src/app/pipes/pipes.module.ts

+import { NgModule } from '@angular/core';
+import { SearchPipe } from './search/search.pipe';
+@NgModule({
+    declarations: [
+        SearchPipe
+    ],
+    imports: [],
+    exports: [
+        SearchPipe
+    ]
+})
+export class PipesModule {}

src/app/services/trip-service.ts

@@ -7,94 +7,108 @@ import { AlloService } from './allo-service';
 
 @Injectable({ providedIn: 'root' })
 export class TripService {
-	public products: Array<any> = [];
-	public brands: Array<any> = [];
-	public cats: Array<any> = [];
-	public request: any;
+    public products: Array<any> = [];
+    public filtredProducts: Array<any> = [];
+    public offersCardList: Array<any>;
+    public offersCardListPointer = 1;
+    public brands: Array<any> = [];
+    public cats: Array<any> = [];
+    public request: any;
 
-	constructor(
-		private platform: Platform,
-		private http: HttpClient,
-		private httpAdv: HTTP,
-		private storage: Storage,
-		private _ALLO: AlloService
-	) {
-		this.fetchData();
-	}
+    constructor(
+        private platform: Platform,
+        private http: HttpClient,
+        private httpAdv: HTTP,
+        private storage: Storage,
+        private _ALLO: AlloService
+    ) {
+        this.fetchData();
+    }
 
-	fetchData(force?: boolean) {
-		this.storage.get('REST_services').then((REST_services) => {
-			if (REST_services && !force) {
-				this.setData(REST_services);
-			}
-			else if (this.platform.is('cordova')) {
-				this.httpAdv.get('https://www.allo-testeurs.com/services.json?' + Math.random(), {}, {})
-					.then((response) => {
-						const json = JSON.parse(response.data);
-						this.storage.set('REST_services', json);
-						this.setData(json);
-					});
-			} else {
-				this.http.get('https://www.allo-testeurs.com/services.json?' + Math.random())
-					.subscribe((data) => {
-						this.storage.set('REST_services', data);
-						this.setData(data);
-					});
-			}
-		});
-	}
+    fetchData(force?: boolean) {
+        this.storage.get('REST_services').then((REST_services) => {
+            if (REST_services && !force) {
+                this.setData(REST_services);
+            }
+            else if (this.platform.is('cordova')) {
+                this.httpAdv.get('https://www.allo-testeurs.com/services.json?' + Math.random(), {}, {})
+                    .then((response) => {
+                        const json = JSON.parse(response.data);
+                        this.storage.set('REST_services', json);
+                        this.setData(json);
+                    });
+            } else {
+                this.http.get('https://www.allo-testeurs.com/services.json?' + Math.random())
+                    .subscribe((data) => {
+                        this.storage.set('REST_services', data);
+                        this.setData(data);
+                    });
+            }
+        });
+    }
 
-	setData(data) {
-		if (null !== data && 'object' === typeof data && data.hasOwnProperty('products')) {
-			var products = this._ALLO.jsonToArray(data.products);
+    setData(data) {
+        if (null !== data && 'object' === typeof data && data.hasOwnProperty('products')) {
+            var products = this._ALLO.jsonToArray(data.products);
 
-			this.products = this._ALLO.shuffleArray(products);
-			this.products.forEach((element) => { element.hidden = true; });
-			// console.log(this.products);
-		}
-		if (null !== data && 'object' === typeof data && data.hasOwnProperty('cats')) {
-			var cats = this._ALLO.jsonToArray(data.cats);
+            this.products = this._ALLO.shuffleArray(products);
+            this.products.forEach((element) => { element.hidden = true; });
+            setTimeout(() => {
+                this.filtredProducts = this.products;
+                this.offersCardList = this.filtredProducts.slice(0, 2);
+            }, 2000);
+        }
+        if (null !== data && 'object' === typeof data && data.hasOwnProperty('cats')) {
+            var cats = this._ALLO.jsonToArray(data.cats);
 
-			this.cats = this._ALLO.shuffleArray(cats);
-		}
-		if (null !== data && 'object' === typeof data && data.hasOwnProperty('brands')) {
-			var brands = this._ALLO.jsonToArray(data.brands);
+            this.cats = this._ALLO.shuffleArray(cats);
+        }
+        if (null !== data && 'object' === typeof data && data.hasOwnProperty('brands')) {
+            var brands = this._ALLO.jsonToArray(data.brands);
 
-			this.brands = brands;
-		}
-	}
+            this.brands = brands;
+        }
+    }
 
-	getRequest() {
-		if (this.platform.is('cordova')) {
-			return this.httpAdv.get('http://www.allo-testeurs.com/services.json?' + Math.random(), {}, {});
-		} else {
-			return this.http.get('http://www.allo-testeurs.com/services.json?' + Math.random());
-		}
-	}
+    getRequest() {
+        if (this.platform.is('cordova')) {
+            return this.httpAdv.get('http://www.allo-testeurs.com/services.json?' + Math.random(), {}, {});
+        } else {
+            return this.http.get('http://www.allo-testeurs.com/services.json?' + Math.random());
+        }
+    }
 
-	getItem(id) {
-		for (var i = 0; i < this.products.length; i++) {
-			//		console.log(this.products[i].id);
-			//		console.log(id);
-			if (this.products[i].id === parseInt(id)) {
-				return this.products[i];
-			}
-		}
-		return null;
-	}
+    getItem(id) {
+        for (var i = 0; i < this.products.length; i++) {
+            //		console.log(this.products[i].id);
+            //		console.log(id);
+            if (this.products[i].id === parseInt(id)) {
+                return this.products[i];
+            }
+        }
+        return null;
+    }
 
-	getItemById(element, id) {
-		let elm = 'this.' + element;
-		let runnable: any = eval(elm);
-		for (var i = 0; i < runnable.length; i++) {
-			if (parseInt(runnable[i].id) === id) {
-				return runnable[i];
-			}
-		}
-		return null;
-	}
+    getItemById(element, id) {
+        let elm = 'this.' + element;
+        let runnable: any = eval(elm);
+        for (var i = 0; i < runnable.length; i++) {
+            if (parseInt(runnable[i].id) === id) {
+                return runnable[i];
+            }
+        }
+        return null;
+    }
 
-	remove(item) {
-		this.products.splice(this.products.indexOf(item), 1);
-	}
+    remove(item) {
+        this.products.splice(this.products.indexOf(item), 1);
+    }
+
+    filterList(categoryId) {
+        this.filtredProducts = this.products.filter(item => {
+            return item.categories_ids.includes(categoryId);
+        });
+        this.offersCardList = this.filtredProducts.slice(0, 2);
+        this.offersCardListPointer = 1;
+    }
 }

src/index.html

@@ -22,6 +22,10 @@
 </head>
 
 <body>
+  <div class="start" *ngIf="!appStarted">
+    <!-- <ion-img src="./assets/rings.svg"></ion-img> -->
+    <ion-spinner name="dots"></ion-spinner>
+  </div>
   <app-root></app-root>
   <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" crossorigin=""></script>
   </body>