Whishlist

src/app/app-routing.module.ts

@@ -19,6 +19,7 @@ const routes: Routes = [
   },
   { path: 'login-help', loadChildren: './modals/login-help/login-help.module#LoginHelpPageModule' },
 
+
 ];
 
 @NgModule({

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

@@ -49,6 +49,10 @@ const routes: Routes = [
         path: 'profil-edit',
         loadChildren: '../profil-edit/profil-edit.module#ProfilEditPageModule'
       },
+      {
+        path: 'favoris',
+        loadChildren: '../compte/favoris/favoris.module#FavorisPageModule'
+      },
     ]
   }
 ];

src/app/pages/menu/menu.page.ts

@@ -21,6 +21,11 @@ export class MenuPage implements OnInit {
       icon: 'contacts'
     },
     {
+      title: 'Favoris',
+      url: '/app/favoris',
+      icon: 'bookmark'
+    },
+    {
       title: 'Paramètres',
       url: '/app/params',
       icon: 'settings'

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

@@ -51,47 +51,51 @@
       </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>
+  <div class="card-wrapper" *ngFor="let trip of _TRIP.offersCardList">
+    <ion-button color="light" fill="solid" class="bookmark" no-padding>
+      <ion-icon name="heart-empty"></ion-icon>
+    </ion-button>
+    <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-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-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>
+  </div>
   <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
     <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Chargement...">
     </ion-infinite-scroll-content>

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

@@ -115,3 +115,22 @@ ul {
   background: #fff;
   border-radius: 8px;
 }
+.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;
+    }
+  }
+}