Skip to content

A
allo-app
Commit acb1c015 by Nabil Sadki
Options

Offres TLM

parent 09e2dc6d
Showing with 287 additions and 30 deletions
src/app/pages/offres/dashboard/dashboard.page.html
...@@ -65,6 +65,7 @@ ...@@ -65,6 +65,7 @@
<ion-tab-button tab="offres-carte"> <ion-tab-button tab="offres-carte">
<ion-icon name="card"></ion-icon> <ion-icon name="card"></ion-icon>
<ion-label>Offres Carte Testeur</ion-label> <ion-label>Offres Carte Testeur</ion-label>
<ion-badge color="dark">{{_TRIP.filtredProducts.length}}</ion-badge>
</ion-tab-button> </ion-tab-button>
<ion-tab-button tab="offres-tlm"> <ion-tab-button tab="offres-tlm">
......
src/app/pages/offres/offres-carte/offres-carte.page.html
<ion-list-header>Catégories :</ion-list-header> <!-- <ion-list-header>Catégories :</ion-list-header> -->
<div class="app"> <div class="app">
<ul class="hs" no-margin margin-bottom> <ul class="hs">
<li class="item">
<ion-chip (click)="_TRIP.filterList('all')">
<ion-label>Toutes</ion-label>
</ion-chip>
</li>
<li *ngFor="let category of _TRIP.cats" class="item"> <li *ngFor="let category of _TRIP.cats" class="item">
<ion-chip (click)="_TRIP.filterList(category.id)"> <ion-chip (click)="_TRIP.filterList(category.id)">
<ion-label>{{ category.label }}</ion-label> <ion-label>{{ category.label }}</ion-label>
......
src/app/pages/offres/offres-carte/offres-carte.page.scss
...@@ -15,8 +15,9 @@ ...@@ -15,8 +15,9 @@
justify-content: center; justify-content: center;
} }
ion-img { ion-img {
min-height: 10rem; height: 10rem;
background: var(--ion-color-tertiary, #989aa2); background: var(--ion-color-tertiary, #989aa2);
object-fit: cover;
} }
ion-item { ion-item {
ion-button { ion-button {
......
src/app/pages/offres/offres-tlm/offres-tlm.page.html
<ion-content padding> <ion-content>
<!-- <ion-card color="light" margin-bottom> --> <!-- <ion-card color="light" margin-bottom> -->
<ion-text> <!-- <ion-text>
<p class="ion-text-center"> <p class="ion-text-center">
<img class="soon" src="../../../../assets/img/soon.png"> <img class="soon" src="../../../../assets/img/soon.png">
</p> </p>
</ion-text> </ion-text> -->
<!-- </ion-card> --> <!-- </ion-card> -->
<ion-text class="ion-text-justify"> <!-- <ion-text class="ion-text-justify">
<p> <p>
Que vous soyez détenteur(se) ou non de la Carte Testeur, cette section est ouverte à tout le monde, et permettra Que vous soyez détenteur(se) ou non de la Carte Testeur, cette section est ouverte à tout le monde, et permettra
dans un future proche de bénéficier des offres de nos partenaires. dans un future proche de bénéficier des offres de nos partenaires.
...@@ -17,21 +17,146 @@ ...@@ -17,21 +17,146 @@
<p> <p>
Restez à l'écoute! Restez à l'écoute!
</p> </p>
</ion-text> </ion-text> -->
<!-- <ion-list-header>Meilleures deals</ion-list-header> <ion-list-header>Meilleures deals</ion-list-header>
<div class="app"> <div class="app" *ngIf="_TRIP.products.length > 0">
<ul class="hs"> <ul class="hs">
<li class="item">test</li> <li class="item" *ngFor="let trip of _TRIP.products">
<li class="item">test</li> <div class="badges ion-text-right">
<li class="item">test</li> <div class="bookmark" *ngIf="!_AUTH.isAnonymous">
<li class="item">test</li> <ion-button color="light" fill="solid" class="bookmark" (click)="_TRIP.wishList(trip, 'add')"
<li class="item">test</li> *ngIf="!trip.bookmarked" no-padding>
<li class="item">test</li> <ion-icon name="heart-empty"></ion-icon>
</ion-button>
<ion-button color="light" fill="solid" class="bookmark" (click)="_TRIP.wishList(trip, 'remove')"
*ngIf="trip.bookmarked" no-padding>
<ion-icon name="heart" color="danger"></ion-icon>
</ion-button>
</div>
<ion-badge color="blue">
<ion-icon name="trending-up"></ion-icon> 400
</ion-badge>
<ion-badge color="secondary" margin-left>
<ion-text color="light">
<ion-icon name="ribbon"></ion-icon> 200
</ion-text>
</ion-badge>
</div>
<div (click)="viewDetail(trip.id)"
[ngStyle]="{'background-image': 'url(' + trip.thumb + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover', 'width': '100%', 'height': '100%', 'border-radius': '8px'}">
<div class="mask">
<ion-grid no-padding>
<ion-row>
<ion-col no-padding> {{trip.name}} </ion-col>
</ion-row>
<ion-row>
<ion-col no-padding>
<ion-badge color="light">
<ion-text color="primary">
<ion-label>
<ion-icon name="pin"></ion-icon> {{ trip.location }}
</ion-label>
</ion-text>
</ion-badge>
</ion-col>
</ion-row>
</ion-grid>
</div>
</div>
<!-- <ion-img src="../../../../assets/img/avatar.jpeg"></ion-img> -->
</li>
</ul> </ul>
</div> </div>
<ion-list> <div padding>
<ion-item> <div *ngIf="_TRIP.filtredProducts.length <= 0">
Offre <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>
<div class="card-wrapper" *ngFor="let trip of _TRIP.offersCardList">
<div *ngIf="!_AUTH.isAnonymous">
<ion-button color="light" fill="solid" class="bookmark" (click)="_TRIP.wishList(trip, 'add')"
*ngIf="!trip.bookmarked" no-padding>
<ion-icon name="heart-empty"></ion-icon>
</ion-button>
<ion-button color="light" fill="solid" class="bookmark" (click)="_TRIP.wishList(trip, 'remove')"
*ngIf="trip.bookmarked" no-padding>
<ion-icon name="heart" color="danger"></ion-icon>
</ion-button>
</div>
<ion-card (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-item>
</ion-list> --> </ion-card>
</div>
</div>
</ion-content> </ion-content>
\ No newline at end of file
src/app/pages/offres/offres-tlm/offres-tlm.page.scss
.app { .app {
// padding: 20px 0; // padding: 20px 0;
display: grid; display: grid;
grid-gap: 20px 0; grid-gap: 20px 0;
grid-template-columns: 10px 1fr 10px; grid-template-columns: 10px 1fr 0;
align-content: start; align-content: start;
} }
...@@ -17,13 +17,14 @@ ...@@ -17,13 +17,14 @@
.hs { .hs {
display: grid; display: grid;
grid-gap: calc(20px / 2); grid-gap: calc(20px / 2);
grid-template-columns: repeat(6, calc(50% - 20px * 2)); grid-template-columns: repeat(999999999, calc(80% - 20px * 2));
grid-template-rows: minmax(150px, 1fr); grid-template-rows: minmax(150px, 1fr);
overflow-x: scroll; overflow-x: scroll;
scroll-snap-type: x proximity; scroll-snap-type: x proximity;
padding-bottom: calc(0.75 * 20px); padding-bottom: calc(0.75 * 20px);
margin-bottom: calc(-0.25 * 20px); margin-bottom: calc(-0.25 * 20px);
margin-top: 0;
} }
/* Demo styles */ /* Demo styles */
...@@ -40,22 +41,54 @@ ul { ...@@ -40,22 +41,54 @@ ul {
} }
.app { .app {
// width: 375px; // width: 375px;
// height: 667px; // height: 667px;
background: #dbd0bc;
overflow-y: scroll; overflow-y: scroll;
} }
.hs > li, .hs > li,
.item { .item {
scroll-snap-align: center; scroll-snap-align: center;
padding: calc(20px / 2 * 1.5); padding: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: #fff; background: #fff;
border-radius: 8px; border-radius: 8px;
position: relative;
.mask {
width: 100%;
height: 100%;
background-image: linear-gradient(to top, #4f4f4f, transparent);
border-radius: 8px;
color: #fff;
display: flex;
align-items: flex-end;
padding: 0 6px;
}
.badges {
position: absolute;
top: 0;
width: 100%;
padding: 5px;
.bookmark {
position: absolute;
ion-button {
margin: 0 !important;
padding: 0 !important;
height: auto !important;
--border-radius: 16px;
ion-icon {
font-size: 16px;
margin: 6px;
&.ios {
margin: 6px !important;
}
}
}
}
}
} }
img.soon { img.soon {
...@@ -63,3 +96,68 @@ img.soon { ...@@ -63,3 +96,68 @@ img.soon {
width: auto !important; width: auto !important;
margin: 0 auto; margin: 0 auto;
} }
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 {
height: 10rem;
background: var(--ion-color-tertiary, #989aa2);
object-fit: cover;
}
ion-item {
ion-button {
font-size: large;
height: 10vw;
}
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;
}
.card-wrapper {
position: relative;
.bookmark {
// background: var(--ion-color-light, #fff);
// border: 1px dotted var(--ion-color-dark, #000);
position: absolute;
right: 10px;
top: 10px;
--border-radius: 30px;
z-index: 9;
// width: 46px;
// height: 44px;
// padding: 10px;
ion-icon {
font-size: 24px;
margin: 6px;
&.ios {
margin: 6px 11px !important;
}
}
}
}
src/app/pages/offres/offres-tlm/offres-tlm.page.ts
import { Component, OnInit } from '@angular/core'; import { Component, OnInit, ViewChild } from '@angular/core';
import { ToastController, IonInfiniteScroll } from '@ionic/angular';
import { AlloService } from '../../../services/allo-service';
import { AuthService } from '../../../services/auth.service';
import { TripService } from '../../../services/trip-service';
import { Storage } from '@ionic/storage';
import { Router } from '@angular/router';
@Component({ @Component({
selector: 'app-offres-tlm', selector: 'app-offres-tlm',
...@@ -7,9 +13,29 @@ import { Component, OnInit } from '@angular/core'; ...@@ -7,9 +13,29 @@ import { Component, OnInit } from '@angular/core';
}) })
export class OffresTlmPage implements OnInit { export class OffresTlmPage implements OnInit {
constructor() { } constructor(
public _ALLO: AlloService,
public _AUTH: AuthService,
public _TRIP: TripService,
public toastCtrl: ToastController,
private router: Router,
private storage: Storage) { }
ngOnInit() { ngOnInit() {
} }
setImgVisible(trip) {
trip.hidden = false;
}
wishList(offer, action) {
this._TRIP.wishList(offer, action).then(result => {
offer = result;
});
}
viewDetail(id) {
this.router.navigateByUrl('/app/details-offre/' + id);
}
} }
src/app/services/trip-service.ts
...@@ -118,7 +118,7 @@ export class TripService { ...@@ -118,7 +118,7 @@ export class TripService {
filterList(categoryId) { filterList(categoryId) {
this.filtredProducts = this.products.filter(item => { this.filtredProducts = this.products.filter(item => {
return item.categories_ids.includes(categoryId); return item.categories_ids.includes(categoryId) || categoryId === 'all';
}); });
this.offersCardList = this.filtredProducts.slice(0, 2); this.offersCardList = this.filtredProducts.slice(0, 2);
this.offersCardListPointer = 1; 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