kj
/
vendor-app
1
0
Fork 0
Code Issues 0 Pull-Requests 0 Releases 0 Wiki Aktivität
Quellcode durchsuchen

Menu items list UI

master
kj1352 vor 4 Jahren
Ursprung
12fdbc98f7
Commit
e58c5f89cc
6 geänderte Dateien mit 130 neuen und 280 gelöschten Zeilen
Geteilte Ansicht
Diff-Optionen
Statistiken anzeigen Patch-Datei herunterladen Vergleichs-Datei herunterladen
  1. +43
    -263
      src/app/menu-items/menu-items.component.html
  2. +59
    -8
      src/app/menu-items/menu-items.component.scss
  3. +23
    -2
      src/app/menu-items/menu-items.component.ts
  4. +3
    -3
      src/app/orders/orders.component.scss
  5. +0
    -3
      src/app/widgets-holder/widgets-holder.component.ts
  6. +2
    -1
      src/styles.scss

+ 43
- 263
src/app/menu-items/menu-items.component.html Datei anzeigen

@@ -1,272 +1,52 @@
<div class="container">
<section class="item-details">
<div class="widget-heading-holder">
<header *ngIf="selectedTab === 'items'"> Menu Items </header>
<header *ngIf="selectedTab === 'offers'"> Offers </header>

<div class="tabs-holder" [ngClass]="{'left' : selectedTab === 'items', 'right': selectedTab === 'offers'}">
<button (click)="selectedTab = 'items'"> Items </button>
<button (click)="selectedTab = 'offers'"> Offers </button>
</div>
</div>

<table *ngIf="selectedTab === 'items'" class="item-table">
<header> Menu Items </header>
<div class="search-input">
<input type="text" placeholder="Quick Search: Name, ID, Price" [(ngModel)]="searchTerm" (input)="searchItems()">
<button> <i class="icon ion-md-search"></i> </button>
</div>
</div>

<table class="item-table">
<tr>
<th> Item No </th>
<th> Item Name </th>
<th> Item ID </th>
<th> Item Image </th>
<th> Item Name </th>
<th> Preperation Time </th>
<th> Price </th>
<th> Availability Status </th>
</tr>

<tr>
<td> 14344 </td>
<td> 8 Pc Hot &amp; Crispy </td>
<td> 15 Min </td>
<td> &#x20B9; 750 </td>
<td>
<div class="toggle" [ngClass]="{'on' : productAvailable }"
(click)="productAvailable = !productAvailable">
<div class="knob"></div>
</div>
</td>
</tr>

<tr>
<td> 14344 </td>
<td> 8 Pc Hot &amp; Crispy </td>
<td> 15 Min </td>
<td> &#x20B9; 750 </td>
<td>
<div class="toggle" [ngClass]="{'on' : productAvailable }"
(click)="productAvailable = !productAvailable">
<div class="knob"></div>
</div>
</td>
</tr>

<tr>
<td> 14344 </td>
<td> 8 Pc Hot &amp; Crispy </td>
<td> 15 Min </td>
<td> &#x20B9; 750 </td>
<td>
<div class="toggle" [ngClass]="{'on' : productAvailable }"
(click)="productAvailable = !productAvailable">
<div class="knob"></div>
</div>
</td>
</tr>

<tr>
<td> 14344 </td>
<td> 8 Pc Hot &amp; Crispy </td>
<td> 15 Min </td>
<td> &#x20B9; 750 </td>
<td>
<div class="toggle" [ngClass]="{'on' : productAvailable }"
(click)="productAvailable = !productAvailable">
<div class="knob"></div>
</div>
</td>
</tr>
<th> Price </th>
<th> Type </th>
<th> Availability Status </th>
</tr>
<tr *ngFor="let item of menuItems">
<td>
{{ item.menuitem_id }}
</td>
<td>
<img [src]="item.image_url" class="item-image">
</td>
<td>
{{ item.menu_item_name }}
</td>
<td>
{{ item.wait_duration }}
</td>
<td>
{{ item.item_price }}
</td>
<td>
{{ item.is_vegetarian? 'Veg' : 'Non-Veg' }}
</td>
<td>
<div class="toggle" [ngClass]="{'on' : item.is_available }"
(click)="item.is_available = !item.is_available">
<div class="knob"></div>
</div>
</td>
</tr>
</table>

<ul *ngIf="selectedTab === 'items'" class="item-list">
<li class="card">
<div class="info-holder">
<header> #1234 8 PC Hot &amp; Crispy </header>
<div class="info">
<label> Preperation Time: </label>
<span> 15 Min </span>
</div>
<div class="info">
<label> Amount: </label>
<span> &#x20B9; 750 </span>
</div>
</div>
<div class="status">
Availability Status
<div class="toggle" [ngClass]="{'on' : productAvailable }"
(click)="productAvailable = !productAvailable">
<div class="knob"></div>
</div>
</div>
</li>

<li class="card">
<div class="info-holder">
<header> #1234 8 PC Hot &amp; Crispy </header>
<div class="info">
<label> Preperation Time: </label>
<span> 15 Min </span>
</div>
<div class="info">
<label> Amount: </label>
<span> &#x20B9; 750 </span>
</div>
</div>
<div class="status">
Availability Status
<div class="toggle" [ngClass]="{'on' : productAvailable }"
(click)="productAvailable = !productAvailable">
<div class="knob"></div>
</div>
</div>
</li>

<li class="card">
<div class="info-holder">
<header> #1234 8 PC Hot &amp; Crispy </header>
<div class="info">
<label> Preperation Time: </label>
<span> 15 Min </span>
</div>
<div class="info">
<label> Amount: </label>
<span> &#x20B9; 750 </span>
</div>
</div>
<div class="status">
Availability Status
<div class="toggle" [ngClass]="{'on' : productAvailable }"
(click)="productAvailable = !productAvailable">
<div class="knob"></div>
</div>
</div>
</li>

<li class="card">
<div class="info-holder">
<header> #1234 8 PC Hot &amp; Crispy </header>
<div class="info">
<label> Preperation Time: </label>
<span> 15 Min </span>
</div>
<div class="info">
<label> Amount: </label>
<span> &#x20B9; 750 </span>
</div>
</div>
<div class="status">
Availability Status
<div class="toggle" [ngClass]="{'on' : productAvailable }"
(click)="productAvailable = !productAvailable">
<div class="knob"></div>
</div>
</div>
</li>
</ul>

<ul class="offer-list" *ngIf="selectedTab === 'offers'">
<li>
<div class="info">
<header> Buy 2 Solo Bucket @ &#x20B9; 750 </header>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi quae sit repudiandae omnis iste dolorem, error eum totam voluptate non unde ut numquam minus temporibus dolores sequi! Incidunt debitis, fugit?
</p>

<button class="round-button"> Subscribed </button>
</div>

<div class="time-limit">
<header> Limited Time Offer </header>
<div class="caption"> Subscribe before it ends </div>

<div class="counters-holder">
<div class="counter">
<div class="heading"> Days </div>
<div class="count"> 2 </div>
</div>

<div class="counter">
<div class="heading"> Hrs </div>
<div class="count"> 15 </div>
</div>

<div class="counter">
<div class="heading"> Mins </div>
<div class="count"> 38 </div>
</div>

<div class="counter">
<div class="heading"> Sec </div>
<div class="count"> 58 </div>
</div>
</div>
</div>
</li>

<li>
<div class="info">
<header> Buy 2 Solo Bucket @ &#x20B9; 750 </header>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi quae sit repudiandae omnis iste dolorem, error eum totam voluptate non unde ut numquam minus temporibus dolores sequi! Incidunt debitis, fugit?
</p>

<button class="round-button active"> Subscribe Now </button>
</div>

<div class="time-limit">
<header> Limited Time Offer </header>
<div class="caption"> Subscribe before it ends </div>

<div class="counters-holder">
<div class="counter">
<div class="heading"> Days </div>
<div class="count"> 2 </div>
</div>

<div class="counter">
<div class="heading"> Hrs </div>
<div class="count"> 15 </div>
</div>

<div class="counter">
<div class="heading"> Mins </div>
<div class="count"> 38 </div>
</div>

<div class="counter">
<div class="heading"> Sec </div>
<div class="count"> 58 </div>
</div>
</div>
</div>
</li>
</ul>

</section>

<ul class="subscribed-offers">
<div class="heading">
<header> Subscribed Offers: </header>
<a> View All </a>
</div>

<li>
<header> Buy 2 Solo Bucket @ &#x20B9; 599 </header>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum quia, quo dolor tenetur porro amet cumque aspernatur illum culpa veniam quae blanditiis, adipisci delectus dolorem aliquam soluta repellendus pariatur facere.
</p>
<header> Valid till : 2 Days, Hrs: 15:25:20 </header>
</li>

<li>
<header> Buy 2 Solo Bucket @ &#x20B9; 599 </header>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum quia, quo dolor tenetur porro amet cumque aspernatur illum culpa veniam quae blanditiis, adipisci delectus dolorem aliquam soluta repellendus pariatur facere.
</p>
<header> Valid till : 2 Days, Hrs: 15:25:20 </header>
</li>

<li>
<header> Buy 2 Solo Bucket @ &#x20B9; 599 </header>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum quia, quo dolor tenetur porro amet cumque aspernatur illum culpa veniam quae blanditiis, adipisci delectus dolorem aliquam soluta repellendus pariatur facere.
</p>
<header> Valid till : 2 Days, Hrs: 15:25:20 </header>
</li>
</ul>

</div>

+ 59
- 8
src/app/menu-items/menu-items.component.scss Datei anzeigen

@@ -9,7 +9,7 @@
}
.item-details {
padding: 0 2.5%;
width: 70%;
width: 90%;
height: calc(100vh - 70px);
overflow: auto;
margin-right: auto;
@@ -42,11 +42,62 @@
/* Handle on hover */
&::-webkit-scrollbar-thumb:hover {
background-color: rgba(black, 0.5);
}
}
.toggle {
margin: 0;
}

.item-image {
width: 50px;
height: 50px;
border-radius: 7px;
}
}
}
.widget-heading-holder {
width: 100%;
width: 100%;
.search-input {
display: flex;
width: 50%;
height: 40px;
border-radius: 20px;
background-color: white;
color: var(--brand-blue);
align-items: center;
justify-content: space-between;
input {
border: 0;
font-size: 12px;
padding-left: 10px;
font-weight: 500;
color: var(--dark-grey);
flex-grow: 1;
letter-spacing: 1px;
&::placeholder {
color: var(--grey);
}
}
button {
border-radius: 50%;
width: 30px;
height: 30px;
color: var(--brand-blue);
font-size: 20px;
border: 1px solid var(--brand-blue);
background-color: white;
transition: background-color 0.3s, color 0.3s;
&:hover {
background-color: var(--brand-blue);
color: white;
}
}
}
}
.tabs-holder {
display: flex;
@@ -117,11 +168,11 @@
font-weight: 500;
letter-spacing: 1px;
line-height: 2;
vertical-align: top;
width: calc(100% / 5);
&:nth-child(3) {
padding-left: 20px;
}
vertical-align: top;
&:nth-child(1) {
padding-left: 10px;
}
}
}
.subscribed-offers {


+ 23
- 2
src/app/menu-items/menu-items.component.ts Datei anzeigen

@@ -6,12 +6,33 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./menu-items.component.scss']
})
export class MenuItemsComponent implements OnInit {
selectedTab: string = 'items';
productAvailable: boolean = false;
profile_type: string = '';
profile_info: any;
searchTerm: string = '';
menuItems: any = [];

constructor() { }

ngOnInit() {
}
this.profile_type = localStorage.current_login_type;

if (this.profile_type === 'VENDOR') {
this.profile_info = JSON.parse(localStorage.vendor_info);
} else if (this.profile_type === 'OUTLET') {
this.profile_info = JSON.parse(localStorage.outlet_info);
}
this.menuItems = JSON.parse(JSON.stringify(this.profile_info.menuitems));

}
searchItems() {
this.menuItems = this.profile_info.menuitems.filter((item) => {
return item.menuitem_id.toString().toLowerCase().includes(this.searchTerm.toString().toLowerCase()) ||
item.menu_item_name.toString().toLowerCase().includes(this.searchTerm.toString().toLowerCase()) ||
item.item_price.toString().toLowerCase().includes(this.searchTerm.toString().toLowerCase());
});
}

}

+ 3
- 3
src/app/orders/orders.component.scss Datei anzeigen

@@ -14,11 +14,11 @@

.selector-container {
display: flex;
flex-grow: 1;
flex-grow: 1;

.selector {
margin: 0 10px;
flex-grow: 1;
flex-grow: 1;

@media screen and (max-width: 1023px) {
margin: 0;
@@ -36,7 +36,7 @@
.search-input {
display: flex;
flex-grow: 1;
height: 30px;
height: 40px;
border-radius: 20px;
background-color: white;
color: var(--brand-blue);


+ 0
- 3
src/app/widgets-holder/widgets-holder.component.ts Datei anzeigen

@@ -44,9 +44,6 @@ export class WidgetsHolderComponent implements OnInit {
} else {
this.router.navigate(['/login']);
}

console.log(this.profile_info);

}

logout() {


+ 2
- 1
src/styles.scss Datei anzeigen

@@ -193,7 +193,8 @@ button {
color: var(--brand-blue);
align-items: center;
justify-content: space-between;
position: relative;
position: relative;
height: 40px;

.selected-value {
font-weight: 500;


Verfassen Vorschau
Laden…
Abbrechen
Speichern