Skip to content

A
allo-app
Commit 93fdbc94 by Nabil Sadki
Options

Categories tags

parent e561b39e
Showing with 442 additions and 146 deletions
src/app/pages/dashboard/dashboard.module.ts
...@@ -4,14 +4,38 @@ import { FormsModule } from '@angular/forms'; ...@@ -4,14 +4,38 @@ import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router'; import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular'; import { IonicModule } from '@ionic/angular';
import { SearchPipe } from '../../pipes/search/search.pipe';
import { DashboardPage } from './dashboard.page'; import { DashboardPage } from './dashboard.page';
const routes: Routes = [ const routes: Routes = [
{ {
path: '', path: '',
component: DashboardPage 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'
}
]
} }
]; ];
...@@ -22,6 +46,6 @@ const routes: Routes = [ ...@@ -22,6 +46,6 @@ const routes: Routes = [
IonicModule, IonicModule,
RouterModule.forChild(routes) RouterModule.forChild(routes)
], ],
declarations: [DashboardPage, SearchPipe] declarations: [DashboardPage]
}) })
export class DashboardPageModule {} export class DashboardPageModule {}
src/app/pages/dashboard/dashboard.page.html
...@@ -8,20 +8,7 @@ ...@@ -8,20 +8,7 @@
<!-- <ion-icon name="menu" size="large" color="light"></ion-icon> --> <!-- <ion-icon name="menu" size="large" color="light"></ion-icon> -->
</ion-menu-button> </ion-menu-button>
</ion-buttons> </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-buttons slot="end">
<!-- <ion-button (click)="showHideMoreFilters()"> --> <!-- <ion-button (click)="showHideMoreFilters()"> -->
<ion-button> <ion-button>
...@@ -71,53 +58,18 @@ ...@@ -71,53 +58,18 @@
</ion-grid> </ion-grid>
</ion-header> </ion-header>
<ion-content padding class="dashboard"> <ion-content>
<ion-tabs>
<ion-refresher (ionRefresh)="doRefresh($event)"> <ion-tab-bar slot="bottom">
<ion-refresher-content></ion-refresher-content> <ion-tab-button tab="offres-carte">
</ion-refresher> <ion-icon name="card"></ion-icon>
<ion-label>Offres Carte Testeur</ion-label>
<!--list of trips--> </ion-tab-button>
<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-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> </ion-content>
\ No newline at end of file
src/app/pages/dashboard/dashboard.page.scss
...@@ -3,38 +3,3 @@ ion-header { ...@@ -3,38 +3,3 @@ ion-header {
margin-top: 4px; margin-top: 4px;
} }
} }
.dashboard {
ion-card {
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-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;
}
src/app/pages/dashboard/dashboard.page.ts
import { Component, OnInit } from '@angular/core'; 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 { TripService } from '../../services/trip-service';
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({ @Component({
selector: 'app-dashboard', selector: 'app-dashboard',
...@@ -16,18 +10,11 @@ import { Router } from '@angular/router'; ...@@ -16,18 +10,11 @@ import { Router } from '@angular/router';
export class DashboardPage implements OnInit { export class DashboardPage implements OnInit {
// list of products // list of products
public products: any; public products: any;
public toast: any;
public terms: any; public terms: any;
public show_more_filters = false; public show_more_filters = false;
constructor( constructor(
public nav: NavController, public _TRIP: TripService
public _ALLO: AlloService,
public _TRIP: TripService,
public http: HttpClient,
public toastCtrl: ToastController,
private router: Router,
private storage: Storage
) { ) {
} }
...@@ -36,10 +23,6 @@ export class DashboardPage implements OnInit { ...@@ -36,10 +23,6 @@ export class DashboardPage implements OnInit {
// this._ALLO.presentLoading(); // this._ALLO.presentLoading();
} }
setImgVisible(trip) {
trip.hidden = false;
}
showHideMoreFilters() { showHideMoreFilters() {
if (this.show_more_filters === false) { if (this.show_more_filters === false) {
this.show_more_filters = true; this.show_more_filters = true;
...@@ -47,31 +30,4 @@ export class DashboardPage implements OnInit { ...@@ -47,31 +30,4 @@ export class DashboardPage implements OnInit {
this.show_more_filters = false; this.show_more_filters = false;
} }
} }
async presentToast() {
const toast = await this.toastCtrl.create({
message: 'Liste mise à jour',
showCloseButton: true,
position: 'bottom',
closeButtonText: 'OK',
duration: 2000
});
toast.present();
}
async doRefresh(refresher) {
try {
this.toast.dismiss();
} catch (e) { }
console.log('refreshing');
this._TRIP.fetchData(true);
refresher.target.complete();
this.presentToast();
}
// view trip detail
viewDetail(id) {
this.router.navigateByUrl('/app/details-offre/' + id);
}
} }
src/app/pages/offres-carte/offres-carte.module.ts 0 → 100644
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-carte/offres-carte.page.html 0 → 100644
<ion-list-header>Catégories :</ion-list-header>
<div class="app">
<ul class="hs">
<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>
<!-- <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>
<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>
\ No newline at end of file
src/app/pages/offres-carte/offres-carte.page.scss 0 → 100644
.dashboard {
ion-card {
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-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;
}
.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;
}
h1,
h2,
h3 {
margin: 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
src/app/pages/offres-carte/offres-carte.page.spec.ts 0 → 100644
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/offres-carte/offres-carte.page.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { ToastController } 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-offres-carte',
templateUrl: './offres-carte.page.html',
styleUrls: ['./offres-carte.page.scss'],
})
export class OffresCartePage implements OnInit {
public toast: any;
constructor(
public _ALLO: AlloService,
public _TRIP: TripService,
public toastCtrl: ToastController,
private router: Router,
private storage: Storage) { }
ngOnInit() {
}
setImgVisible(trip) {
trip.hidden = false;
}
async presentToast() {
const toast = await this.toastCtrl.create({
message: 'Liste mise à jour',
showCloseButton: true,
position: 'bottom',
closeButtonText: 'OK',
duration: 2000
});
toast.present();
}
async doRefresh(refresher) {
try {
this.toast.dismiss();
} catch (e) { }
console.log('refreshing');
this._TRIP.fetchData(true);
refresher.target.complete();
this.presentToast();
}
// view trip detail
viewDetail(id) {
this.router.navigateByUrl('/app/details-offre/' + id);
}
}
src/app/pages/offres-tlm/offres-tlm.module.ts 0 → 100644
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 { OffresTlmPage } from './offres-tlm.page';
const routes: Routes = [
{
path: '',
component: OffresTlmPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [OffresTlmPage]
})
export class OffresTlmPageModule {}
src/app/pages/offres-tlm/offres-tlm.page.html 0 → 100644
<ion-header>
<ion-toolbar>
<ion-title>offres-tlm</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
src/app/pages/offres-tlm/offres-tlm.page.spec.ts 0 → 100644
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-tlm/offres-tlm.page.ts 0 → 100644
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/pipes/pipes.module.ts 0 → 100644
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
...@@ -8,6 +8,7 @@ import { AlloService } from './allo-service'; ...@@ -8,6 +8,7 @@ import { AlloService } from './allo-service';
@Injectable({ providedIn: 'root' }) @Injectable({ providedIn: 'root' })
export class TripService { export class TripService {
public products: Array<any> = []; public products: Array<any> = [];
public filtredProducts: Array<any> = [];
public brands: Array<any> = []; public brands: Array<any> = [];
public cats: Array<any> = []; public cats: Array<any> = [];
public request: any; public request: any;
...@@ -50,7 +51,7 @@ export class TripService { ...@@ -50,7 +51,7 @@ export class TripService {
this.products = this._ALLO.shuffleArray(products); this.products = this._ALLO.shuffleArray(products);
this.products.forEach((element) => { element.hidden = true; }); this.products.forEach((element) => { element.hidden = true; });
// console.log(this.products); this.filtredProducts = this.products;
} }
if (null !== data && 'object' === typeof data && data.hasOwnProperty('cats')) { if (null !== data && 'object' === typeof data && data.hasOwnProperty('cats')) {
var cats = this._ALLO.jsonToArray(data.cats); var cats = this._ALLO.jsonToArray(data.cats);
...@@ -97,4 +98,10 @@ export class TripService { ...@@ -97,4 +98,10 @@ export class TripService {
remove(item) { remove(item) {
this.products.splice(this.products.indexOf(item), 1); this.products.splice(this.products.indexOf(item), 1);
} }
filterList(categoryId) {
this.filtredProducts = this.products.filter(item => {
return item.categories_ids.includes(categoryId);
});
}
} }
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