Skip to content

A
allo-app
Commit a0345846 by Nabil Sadki
Options

Merge branch 'v1.1.0.0' into v1.1.5.0

parents c52c3892 0f9502d8
Showing with 177 additions and 122 deletions
CHANGELOG.md
......@@ -2,6 +2,7 @@ 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
......
src/app/pages/offres-carte/offres-carte.page.html
......@@ -13,22 +13,45 @@
<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 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> -->
<!--list of trips-->
<ion-card *ngFor="let trip of _TRIP.filtredProducts" (click)="viewDetail(trip.id)" tappable no-margin margin-bottom>
<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>
......@@ -69,4 +92,9 @@
</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/offres-carte/offres-carte.page.scss
.dashboard {
ion-card {
ion-badge {
float: right;
margin-top: -36px;
width: 18vw;
height: 8vw;
.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;
}
ion-img {
min-height: 10rem;
background: var(--ion-color-tertiary, #989aa2);
}
ion-item {
ion-button {
font-size: large;
height: 10vw;
}
ion-img {
min-height: 10rem;
background: var(--ion-color-tertiary, #989aa2);
}
ion-item {
ion-button {
font-size: large;
height: 10vw;
}
ion-button.before {
text-decoration: line-through;
font-size: initial;
height: auto;
}
ion-button.before {
text-decoration: line-through;
font-size: initial;
height: auto;
}
}
}
.no-visibility {
visibility: hidden;
}
.img-spinner-wrap {
position: absolute;
width: 100%;
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;
}
}
.no-visibility {
visibility: hidden;
}
.img-spinner-wrap {
position: absolute;
width: 100%;
min-height: 10rem;
padding-top: 4.5rem;
}
div[scrollx="true"],
div[scrolly="true"] {
position: relative;
overflow: hidden;
.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;
::-webkit-scrollbar {
display: none;
}
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;
}
\ No newline at end of file
}
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-carte/offres-carte.page.ts
import { Component, OnInit } from '@angular/core';
import { ToastController } from '@ionic/angular';
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';
......@@ -11,6 +11,7 @@ import { Router } from '@angular/router';
styleUrls: ['./offres-carte.page.scss'],
})
export class OffresCartePage implements OnInit {
@ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
public toast: any;
......@@ -21,7 +22,21 @@ export class OffresCartePage implements OnInit {
private router: Router,
private storage: Storage) { }
ngOnInit() {
ngOnInit() { }
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) {
......
src/app/services/trip-service.ts
......@@ -9,6 +9,8 @@ import { AlloService } from './allo-service';
export class TripService {
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;
......@@ -51,7 +53,10 @@ export class TripService {
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);
// }, 3000);
}
if (null !== data && 'object' === typeof data && data.hasOwnProperty('cats')) {
var cats = this._ALLO.jsonToArray(data.cats);
......@@ -103,5 +108,7 @@ export class TripService {
this.filtredProducts = this.products.filter(item => {
return item.categories_ids.includes(categoryId);
});
this.offersCardList = this.filtredProducts.slice(0, 2);
this.offersCardListPointer = 1;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment