Rendering outlet in vendors

src/app/dashboard/dashboard.component.ts

@@ -29,15 +29,16 @@ export class DashboardComponent implements OnInit {
 
 	ngOnInit() {
         this.calculateOrders();
+        console.log(this.profile_info)
     }
 
     calculateOrders() {
         this.profile_type = localStorage.current_login_type;
         
         if (this.profile_type === 'ROLE_VENDOR') {
-            this.profile_info = JSON.parse(localStorage.vendor_info);
+            this.profile_info = JSON.parse(localStorage.outlet_info);
 
-            this.orderService.getOrders().then((data) => {
+            this.orderService.getOrdersForOutlet(this.profile_info.outlet_id).then((data) => {
                 this.orderList = data;
     
                 for (let i = 0; i < this.orderList.length; i += 1) {
@@ -52,8 +53,7 @@ export class DashboardComponent implements OnInit {
                 alert("Error getting the orders");
             });
 
-
-        } else if (this.profile_type === 'OUTLET') {
+        } else if (this.profile_type === 'ROLE_OUTLET') {
             this.profile_info = JSON.parse(localStorage.outlet_info);
 
             this.orderService.getOrdersForOutlet(this.profile_info.outlet_id).then((data) => {

src/app/login/login.component.ts

@@ -17,7 +17,7 @@ export class LoginComponent implements OnInit {
     // ramsesrh suresh
 
 
-    login_types = ['ROLE_VENDOR', 'OUTLET'];
+    login_types = ['ROLE_VENDOR', 'ROLE_OUTLET'];
 
     errorMessage: string = '';
 
@@ -47,7 +47,7 @@ export class LoginComponent implements OnInit {
 
             if (this.credentials.login_type === 'ROLE_VENDOR') {
                 console.log("Logging as Vendor")
-                this.router.navigate(['outlets']);
+                this.router.navigate(['/outlets']);
             }else{
                 console.log("Logging as Outlet")
                 this.router.navigate(['shop-details']);

src/app/menu-items/menu-items.component.ts

@@ -47,10 +47,12 @@ export class MenuItemsComponent implements OnInit {
         this.profile_type = localStorage.current_login_type;
 
         if (this.profile_type === 'ROLE_VENDOR') {
-            this.profile_info = JSON.parse(localStorage.vendor_info);
-        } else if (this.profile_type === 'OUTLET') {
+            this.profile_info = JSON.parse(localStorage.outlet_info);
+        } else if (this.profile_type === 'ROLE_OUTLET') {
             this.profile_info = JSON.parse(localStorage.outlet_info);
         }
+
+        console.log(this.profile_info);
         
         this.menuItems = JSON.parse(JSON.stringify(this.profile_info.menuitems));
 
@@ -63,7 +65,7 @@ export class MenuItemsComponent implements OnInit {
             
             if (this.profile_type === 'ROLE_VENDOR') {
                 localStorage.vendor_info = JSON.stringify(this.profile_info);
-            } else if (this.profile_type === 'OUTLET') {
+            } else if (this.profile_type === 'ROLE_OUTLET') {
                 localStorage.outlet_info = JSON.stringify(this.profile_info);
             }
 
@@ -88,7 +90,7 @@ export class MenuItemsComponent implements OnInit {
 
             if (this.profile_type === 'ROLE_VENDOR') {
                 localStorage.vendor_info = JSON.stringify(this.profile_info);
-            } else if (this.profile_type === 'OUTLET') {
+            } else if (this.profile_type === 'ROLE_OUTLET') {
                 localStorage.outlet_info = JSON.stringify(this.profile_info);
             }
 

src/app/orders/orders.component.ts

@@ -115,7 +115,7 @@ export class OrdersComponent implements OnInit {
             });
 
 
-        } else if (this.profile_type === 'OUTLET') {
+        } else if (this.profile_type === 'ROLE_OUTLET') {
             this.profile_info = JSON.parse(localStorage.outlet_info);
 
             this.orderService.getOrdersForOutlet(this.profile_info.outlet_id).then((data) => {

src/app/outlets/outlets.component.html

@@ -1,7 +1,10 @@
 <section class="nav-bar">
-    <div>
+    <div class="navmenu">
         <img src="assets/logo.svg" alt="Logo">
-        <header>Welcome to {{venderInfo.vendorName}}</header>
+        <div>
+            <header>Welcome to {{venderInfo.vendorName}}</header>
+            <span>Vendor Id: {{venderInfo.vendor_Id}}</span>
+        </div>
     </div>
     <nav>
         <a> Support</a>
@@ -9,42 +12,45 @@
     </nav>
 </section>
 
-<section>
-    <li class="outlet-menu" *ngFor='let outlet of outlets' (click)="selectedOutlet(outlet);">
+<section class="outlet-menu">
+    <li class="outlets" *ngFor='let outlet of outlets' (click)="selectedOutlet(outlet);">
         <figure>
-            <img src="{{outlet.image_url}}">
+            <img class="outlet-img" src="{{outlet.image_url}}">
         </figure>
 
         <div class="upfold">
             <h4>{{outlet.outlet_name}}</h4>
-            <span>Id:{{outlet.outlet_id}} </span>
-            <div>
+			<div class="rating"> Rating: {{ outlet.rating }} <i class="icon ion-ios-star"></i> </div>
+            <div class="upfold-header">
+                <span>Outlet Id: {{outlet.outlet_id}} </span>
                 <span>Type: {{outlet.outlet_type}}</span>
                 <span>Timings: 9:00am to 10:00pm</span>
             </div>
-            <p>{{outlet.description}}</p>
-        </div>
 
-        <div class="upfold-content">
             <h4>MenuItems: {{outlet.menuitems.length}}</h4>
             <div class="menuitems">
                 <li *ngFor="let menuitem of outlet.menuitems; let index = index">
                     <figure>
                         <img class="menu-img" src={{menuitem.image_url}}>
                     </figure>
+                    
                     <div class="menuitem-content">
-                        <div>
+                    
+                        <div class="menu-header">
                             <h5>{{menuitem.menu_item_name}}</h5>
-                            <span>Price: &#8377; {{menuitem.item_price}} <img src="../../assets/timer.svg"> {{menuitem.wait_duration}} </span>
-                            <span>Availiblity 
+                            <span>Price: &#8377; {{menuitem.item_price}} <img src="../../assets/timer.svg">
+                                {{menuitem.wait_duration}} </span>
+                            <span>Availiblity
                                 <img *ngIf='menuitem.is_available === true' class="availibleStatus" src="../../assets/check.svg">
                                 <img *ngIf='menuitem.is_available === false' class="availibleStatus" src="../../assets/cancel.svg">
                             </span>
                         </div>
-                        <div>
+                    
+                        <div class="veg-category">
                             <span *ngIf="menuitem.is_vegetarian === true"><img src="../../assets/veg.svg"></span>
                             <span *ngIf="menuitem.is_vegetarian === false"><img src="../../assets/non-veg.svg"></span>
                         </div>
+                    
                     </div>
                 </li>
             </div>

src/app/outlets/outlets.component.scss

@@ -11,12 +11,19 @@
 	background-color: white;
 
 	header{
-		display: inline-flex;
-		vertical-align: middle;
 		font-weight: 600;
 		color: var(--dark-grey);
 		padding-left: 15px;
 	}
+	.navmenu{
+		display: inline-flex;
+		align-items: center;
+	}
+
+	span{
+		display: block;
+		padding-left: 15px;
+	}
 
 	@media screen and (max-width: 1023px) {
 		display: none;
@@ -69,194 +76,353 @@
 	}
 }
 
-section {
-	list-style: none;
+// section {
+// 	list-style: none;
 
-	.outlet-menu {
-		position: relative;
-		margin: 50px;
-		filter: brightness(120%);
-		cursor: pointer;
-		display: flex;
-		flex-direction: rows;
-		height: 25vh;
+// 	.outlet-menu {
+// 		position: relative;
+// 		margin: 50px;
+// 		filter: brightness(120%);
+// 		cursor: pointer;
+// 		display: flex;
+// 		flex-direction: rows;
+// 		height: 25vh;
 
 		
-		&:before {
-			content: '';
-			position: absolute;
-			top: 0;
-			left: 0;
-			height: 100%;
-			width: 100%;
-			border-radius: 10px;
-			box-shadow: 0 0 5px 0px var(--grey);
-			border: 2px solid var(--grey);
-			filter: brightness(130%);
-		}
+// 		&:before {
+// 			content: '';
+// 			position: absolute;
+// 			top: 0;
+// 			left: 0;
+// 			height: 100%;
+// 			width: 100%;
+// 			border-radius: 10px;
+// 			box-shadow: 0 0 5px 0px var(--grey);
+// 			border: 2px solid var(--grey);
+// 			filter: brightness(130%);
+// 		}
+
+// 		figure {
+// 			display: flex;
+// 			width: 20%;
+
+// 			img {
+// 				display: block;
+// 				border-radius: 30px;
+// 				width: calc(100% - 10px);
+// 				height: 100%;
+// 				margin: 0 auto;
+// 				padding: 20px;
+// 			}
+// 		}
+// 	}
+// }
+
+// .upfold {
+// 	padding: 0 20px;
+// 	position: relative;
+// 	width: 40%;
+	
+// 	h4 {
+// 		font-size: 18px;
+// 		color: var(--dark-grey);
+// 		margin: 15px 0px 5px;
+// 		display: inline-block;
+// 		padding-right: 10px;
+// 	}
+
+// 	p {
+// 		margin: 10px 0 0;
+// 		text-align: justify;
+// 		color: var(--dark-grey);
+// 		max-height: 100px;
+// 		overflow: auto;
+// 	}
+
+
+// 	div {
+// 		position: relative;
+// 		padding: 10px 0;
+
+// 		span {
+// 			display: block;
+// 			font-weight: 200;
+// 			font-size: 15px;
+// 		}
+// 		&:before {
+// 			content: '';
+// 			position: absolute;
+// 			top: 0;
+// 			left: 0;
+// 			height: 100%;
+// 			width: 100%;
+// 			border-bottom: 1px solid var(--grey);
+
+// 		}
+
+
+// 	}
+
+// 	span {
+// 		color: var(--dark-grey);
+// 		font-weight: 500;
+// 	}
+// }
+
+// .upfold-content {
+// 	display: block;
+// 	position: relative;
+// 	width: 40%;
+// 	padding: 0 0 0 20px;
+
+// 	h4  {
+// 		position: sticky;
+// 		top: 0;
+// 		font-size: 18px;
+// 		color: var(--dark-grey);
+// 		padding: 10px 0;
+// 		display: inline-block;
+// 		padding-right: 10px;
+// 		width: 100%;
+// 		z-index: 0;
+// 		background-color: white;
+		
+// 		&:before {
+// 			content: '';
+// 			position: absolute;
+// 			top: 0;
+// 			width: 100%;
+// 			height: 100%;
+// 			box-shadow: 0 0 5px 0px var(--grey);
+
+// 			border-top: 2px solid var(--grey);
+// 			filter: brightness(130%);
+// 			z-index: 1;
+
+// 		}
+// 	}
+
+// 	.menuitems {
+// 		overflow: auto;
+// 		max-height: calc(100% - 5vh);
+		
+// 		li{
+// 			margin: 15px 0;
+// 			position: relative;
+// 			display: flex;
+// 			z-index: 0;
+
+// 			&:before{
+// 				content: '';
+// 				top: 0;
+// 				position: absolute;
+// 				width: 100%;
+// 				height: 100%;
+// 				border-bottom: 1px solid var(--grey);
+// 				padding-top: 7px;
+// 				z-index: -1;
+// 				background: var(--grey);
+// 				filter: brightness(135%);
+// 				border-radius: 10px;
+
+// 			}
+			
+// 			.menu-img {
+// 				width: 70px;
+// 				height: 70px;
+// 				padding: 0;
+// 				border-radius: 10px;
+// 			}
+// 		}
+
+
+// 		.menuitem-content {
+// 			display: flex;
+// 			justify-content: space-between;
+// 			align-items: center;
+// 			padding: 0 10px;
+// 			width: 100%;
+
+// 			h5 {
+// 				color: var(--dark-grey);
+// 				font-size: 15px;
+// 			}
+// 			img{
+// 				width: 20px;
+// 			}
+			
+// 			span {
+// 				font-size: 14px;
+// 				color: var(--dark-grey);
+// 				font-weight: 500;
+// 				padding-right: 10px;
+// 				display: block;
+				
+// 				img{
+// 					vertical-align: middle;
+// 					width: 14px;
+					
+// 				}
+// 			}
+// 		}
+// 	}
+// }
 
-		figure {
-			display: flex;
-			width: 20%;
-
-			img {
-				display: block;
-				border-radius: 30px;
-				width: calc(100% - 10px);
-				height: 100%;
-				margin: 0 auto;
-				padding: 20px;
-			}
-		}
-	}
+
+.outlet-menu{
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	list-style: none;
 }
 
-.upfold {
-	padding: 0 20px;
+.outlets{
+	list-style: none;
 	position: relative;
-	width: 40%;
+	margin: 30px;
+	filter: brightness(120%);
+	cursor: pointer;
+	display: flex;
+	flex-direction: column;
+	padding: 10px;
+
 	
-	h4 {
-		font-size: 18px;
-		color: var(--dark-grey);
-		margin: 15px 0px 5px;
-		display: inline-block;
-		padding-right: 10px;
+	&:before {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100%;
+		width: 100%;
+		border-radius: 10px;
+		box-shadow: 0 0 5px 0px var(--grey);
+		border: 2px solid var(--grey);
+		filter: brightness(130%);
 	}
-
-	p {
-		margin: 10px 0 0;
-		text-align: justify;
-		color: var(--dark-grey);
-		max-height: 100px;
-		overflow: auto;
+	figure{
+		position: relative;
+		display: block;
+	}
+	.outlet-img{
+		display: block;
+		height: 100px;
+		margin: 0 auto;
+		border-radius: 10px;
+		width: 100%;
+		height: 150px;
 	}
+}
 
+.upfold{
 
-	div {
-		display: flex;
-		justify-content: space-between;
+	.upfold-header{
 		position: relative;
-		padding: 10px 0;
+		width: 100%;
+		
+		h4 {
+			font-size: 15px;
+			color: var(--dark-grey);
+			margin: 15px 0px 5px;
+			display: inline-block;
+			padding-right: 10px;
+		}
+		
+		span{
+			display: block;
+			font-size: 12px;
+			color: var(--dark-grey);
+			font-weight: 500;
+		}
 
-		&:before {
-			content: '';
+		&:before{
+			content: "";
 			position: absolute;
+			width: 100%;
+			border-bottom: 1px solid var(--grey);
 			top: 0;
 			left: 0;
 			height: 100%;
-			width: 100%;
-			border-bottom: 1px solid var(--grey);
-
-			span {
-				margin: 0 auto;
-			}
+			padding: 4px 0;
 		}
-
-
+	}
+	h4 {
+		font-size: 15px;
+		color: var(--dark-grey);
+		margin: 15px 0px 5px;
+		padding-right: 10px;
+		position: relative;
 	}
 
-	span {
+	.rating{
+		display: block;
+		float: right;
+		font-size: 12px;
 		color: var(--dark-grey);
 		font-weight: 500;
 	}
 }
 
-.upfold-content {
-	display: block;
-	position: relative;
-	width: 40%;
-	padding: 0 0 0 20px;
 
-	h4  {
-		position: sticky;
-		top: 0;
-		font-size: 18px;
-		color: var(--dark-grey);
-		padding: 10px 0;
-		display: inline-block;
-		padding-right: 10px;
-		width: 100%;
-		z-index: 0;
-		background-color: white;
-		
-		&:before {
-			content: '';
-			position: absolute;
-			top: 0;
-			width: 100%;
-			height: 100%;
-			box-shadow: 0 0 5px 0px var(--grey);
+.menuitems{
+	position: relative;
+	max-height: 20vh;
+	overflow: auto;
 
-			border-top: 2px solid var(--grey);
-			filter: brightness(130%);
-			z-index: 1;
+	li{
+		display: flex;
+		flex-direction: row;
 
+		figure{
+			position: relative;
+			.menu-img{
+				width: 60px;
+				height: 60px;
+				border-radius: 10px;
+			}
 		}
 	}
 
-	.menuitems {
-		overflow: auto;
-		max-height: calc(100% - 5vh);
-		
-		li{
-			margin: 15px 0;
-			position: relative;
-			display: flex;
-			z-index: 0;
-
-			&:before{
-				content: '';
-				top: 0;
-				position: absolute;
-				width: 100%;
-				height: 100%;
-				border-bottom: 1px solid var(--grey);
-				padding-top: 7px;
-				z-index: -1;
-				background: var(--grey);
-				filter: brightness(135%);
-				border-radius: 10px;
+	.menuitem-content{
+		width: 100%;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0 10px;
 
-			}
-			
-			.menu-img {
-				width: 70px;
-				height: 70px;
-				padding: 0;
-				border-radius: 10px;
-			}
+		.menu-header{
+			padding-bottom: 10px;
 		}
 
+		h5 {
+			font-size: 12px;
+			color: var(--dark-grey);
+			display: inline-block;
+		}
 
-		.menuitem-content {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			padding: 0 10px;
-			width: 100%;
+		span{
+			display: block;
+			color: var(--dark-grey);
+			font-size: 10px;
 
-			h5 {
-				color: var(--dark-grey);
-				font-size: 15px;
-			}
 			img{
-				width: 20px;
+				width: 10px;
+				vertical-align: middle;
 			}
+		}
+	}
+
+	.veg-category{
+		span {
+			font-size: 14px;
+			color: var(--dark-grey);
+			font-weight: 500;
+			padding-right: 10px;
+			display: block;
 			
-			span {
-				font-size: 14px;
-				color: var(--dark-grey);
-				font-weight: 500;
-				padding-right: 10px;
-				display: block;
-				
-				img{
-					vertical-align: middle;
-					width: 14px;
-					
-				}
+			img{
+				vertical-align: middle;
+				width: 14px;
 			}
 		}
 	}
-}
+}

src/app/outlets/outlets.component.ts

@@ -31,7 +31,8 @@ export class OutletsComponent implements OnInit {
   } 
 
   selectedOutlet(outlet: any) {
-    console.log(outlet)
+    localStorage.outlet_info = JSON.stringify(outlet)
+    this.router.navigate(['/shop-details'])
   }
 
   logout() {

src/app/schedules/schedules.component.ts

@@ -71,7 +71,7 @@ export class SchedulesComponent implements OnInit {
 
         if (this.profile_type === 'ROLE_VENDOR') {
             this.profile_info = JSON.parse(localStorage.vendor_info);
-        } else if (this.profile_type === 'OUTLET') {
+        } else if (this.profile_type === 'ROLE_OUTLET') {
             this.profile_info = JSON.parse(localStorage.outlet_info);
         }
 

src/app/widgets-holder/widgets-holder.component.html

@@ -1,5 +1,11 @@
 <section class="nav-bar">
-	<img src="assets/logo.svg" alt="Logo">
+	<div class="navmenu">		
+		<img src="assets/logo.svg" alt="Logo">
+		<div *ngIf="profile_type === 'ROLE_VENDOR'">
+            <header>Welcome to {{profile_info.vendorName}}</header>
+            <span>Vendor Id: {{profile_info.vendor_Id}}</span>
+        </div>
+	</div>
 	<nav>
 		<a [ngClass]="{'active' : selected_nav.name === 'faq'}"
 		(click)="selected_nav.name = 'faq'"> FAQ's </a>
@@ -12,22 +18,14 @@
 
 <div class="container">
 	<section class="side-navigation">
-		<section class="user-info" *ngIf="profile_type === 'ROLE_VENDOR'">
-			<img>
-			<div class="name"> {{ profile_info.vendorName }} </div>
-			<div class="other-info"> Vendor ID: {{ profile_info.vendor_Id }} </div>
-            <div class="other-info">  {{ profile_info.outlet.length }} Outlets </div>
-			<div class="other-info"> Average Rating: 3 <i class="icon ion-ios-star"></i> </div>
-        </section>
-        
-        <section class="user-info" *ngIf="profile_type === 'OUTLET'">
+        <section class="user-info">
 			<img>
 			<div class="name"> {{ profile_info.outlet_name }} </div>
 			<div class="other-info"> Outlet ID: {{ profile_info.outlet_id }} </div>
             <div class="other-info">  {{ profile_info.menuitems.length }} Menu Items </div>
 			<div class="other-info"> Average Rating: {{ profile_info.rating }} <i class="icon ion-ios-star"></i> </div>
 		</section>
-
+		
 		<ul>
 			<li [ngClass]="{'active' : selected_nav.name === 'dashboard'}" [routerLink]="['/shop-details/dashboard']">
 				<i class="icon ion-ios-home"></i> <label> Dashboard </label>
@@ -61,5 +59,6 @@
 		<app-faq *ngIf="selected_nav.name === 'faq'"></app-faq>
 		<app-support *ngIf="selected_nav.name === 'support'"></app-support>
 		<app-more (navClick)="getNavPage($event)" *ngIf="selected_nav.name === 'more'"></app-more>
+		<app-outlets *ngIf="selected_nav.name === 'outlets'"></app-outlets>
 	</section>
 </div>

src/app/widgets-holder/widgets-holder.component.scss

@@ -14,6 +14,21 @@
 		display: none;
 	}
 
+	header{
+		font-weight: 600;
+		color: var(--dark-grey);
+		padding-left: 15px;
+	}
+	.navmenu{
+		display: inline-flex;
+		align-items: center;
+	}
+
+	span{
+		display: block;
+		padding-left: 15px;
+	}
+
 	img {
 		width: 70px;
 	}

src/app/widgets-holder/widgets-holder.component.ts

@@ -38,12 +38,14 @@ export class WidgetsHolderComponent implements OnInit {
         this.profile_type = localStorage.current_login_type;
 
         if (this.profile_type === 'ROLE_VENDOR') {
-            this.profile_info = JSON.parse(localStorage.vendor_info);
-        } else if (this.profile_type === 'OUTLET') {
+            this.profile_info = JSON.parse(localStorage.outlet_info);
+        } else if (this.profile_type === 'ROLE_OUTLET') {
             this.profile_info = JSON.parse(localStorage.outlet_info);
         } else {
             this.router.navigate(['/login']);
         }
+
+        console.log(this.profile_info)
 	}
 
     logout() {