Added Array of Outlets to Vendor

src/app/outlets/outlets.component.html

@@ -10,19 +10,44 @@
 </section>
 
 <section>
-    <li *ngFor='let outlet of outlets' (click)="outletSwitch(outlet);">
-        
+    <li class="outlet-menu" *ngFor='let outlet of outlets' (click)="selectedOutlet(outlet);">
         <figure>
-            <img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="">
+            <img src="{{outlet.image_url}}">
         </figure>
 
         <div class="upfold">
-            <h4>{{outlet.outlet_name}} ({{outlet.outlet_id}})</h4>
+            <h4>{{outlet.outlet_name}}</h4>
+            <span>Id:{{outlet.outlet_id}} </span>
             <div>
                 <span>Type: {{outlet.outlet_type}}</span>
-                <span>Rating:{{outlet.rating}}/5</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>
+                            <h5>{{menuitem.menu_item_name}}</h5>
+                            <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>
+                            <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>
+        </div>
     </li>
 </section>

src/app/outlets/outlets.component.scss

@@ -69,20 +69,20 @@
 	}
 }
 
-section{
+section {
 	list-style: none;
-	display: grid;
-	grid-template-columns: repeat(4, 1fr);
 
-	li{
+	.outlet-menu {
 		position: relative;
 		margin: 50px;
-		width: 400px;
 		filter: brightness(120%);
 		cursor: pointer;
+		display: flex;
+		flex-direction: rows;
+		height: 25vh;
 
 		
-		&:before{
+		&:before {
 			content: '';
 			position: absolute;
 			top: 0;
@@ -95,48 +95,167 @@ section{
 			filter: brightness(130%);
 		}
 
-		figure{
-			img{
+		figure {
+			display: flex;
+			width: 20%;
+
+			img {
 				display: block;
-				border-radius: 10px;
+				border-radius: 30px;
 				width: calc(100% - 10px);
-				height: 200px;
+				height: 100%;
 				margin: 0 auto;
-				padding-top: 5px;
+				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 {
+		display: flex;
+		justify-content: space-between;
+		position: relative;
+		padding: 10px 0;
+
+		&:before {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			height: 100%;
+			width: 100%;
+			border-bottom: 1px solid var(--grey);
+
+			span {
+				margin: 0 auto;
+			}
+		}
+
+
+	}
+
+	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);
 
-		.upfold{
-			padding: 0 20px;
+			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;
-			
-			div{
-				display: flex;
-				justify-content: space-between;
+			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;
+
 			}
-		}
 			
-		h4{
-			font-size: 18px;
-			color: var(--dark-grey);
-			margin: 10px 0;
-		}
-		p{
-			margin: 20px 0 0;
-			text-align: justify;
-			color: var(--dark-grey);
-			height: 70px;
+			.menu-img {
+				width: 70px;
+				height: 70px;
+				padding: 0;
+				border-radius: 10px;
+			}
 		}
 
 
-		span{
-			color: var(--dark-grey);
-			font-weight: 500;
+		.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{
-				vertical-align: middle;
-				fill: black;
+				width: 20px;
+			}
+			
+			span {
+				font-size: 14px;
+				color: var(--dark-grey);
+				font-weight: 500;
+				padding-right: 10px;
+				display: block;
+				
+				img{
+					vertical-align: middle;
+					width: 14px;
+					
+				}
 			}
 		}
 	}

src/app/outlets/outlets.component.ts

@@ -28,11 +28,10 @@ export class OutletsComponent implements OnInit {
   getOutletInfo() {
     let outlets: any = this.venderInfo
     this.outlets = outlets.outlet
-  }
+  } 
 
-  outletSwitch(selectedOutlet: any) {
-    this.router.navigate(['shop-details']);
-    console.log(selectedOutlet)
+  selectedOutlet(outlet: any) {
+    console.log(outlet)
   }
 
   logout() {

src/assets/cancel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#BC0000"><path d="M0 0h24v24H0V0z" fill="none" opacity=".87"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg>

src/assets/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#06A600"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z"/></svg>

src/assets/non-veg.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 91.47 122.88" style="enable-background:new 0 0 91.47 122.88" xml:space="preserve"><style type="text/css"><![CDATA[
+	.st0{fill:#BE360D;}
+]]></style><g><path class="st0" d="M2.94,0h88.53v91.82H0V0H2.94L2.94,0z M91.46,108.73h-5.65v-1.97c0-1.24-0.05-2.02-0.16-2.33 c-0.11-0.32-0.36-0.47-0.75-0.47c-0.34,0-0.57,0.13-0.69,0.4c-0.13,0.27-0.18,0.96-0.18,2.06v10.41c0,0.97,0.06,1.61,0.18,1.92 c0.12,0.31,0.37,0.46,0.73,0.46c0.4,0,0.67-0.17,0.82-0.52c0.14-0.35,0.21-1.03,0.21-2.04v-2.57h-1.1v-3.29h6.58v11.63h-3.55 l-0.52-1.55c-0.38,0.67-0.87,1.17-1.45,1.51c-0.58,0.34-1.28,0.51-2.07,0.51c-0.95,0-1.83-0.23-2.66-0.69 c-0.82-0.46-1.45-1.03-1.87-1.71c-0.43-0.68-0.7-1.39-0.8-2.13c-0.11-0.75-0.16-1.87-0.16-3.36v-6.45c0-2.07,0.11-3.58,0.33-4.51 c0.22-0.94,0.86-1.8,1.92-2.58c1.05-0.78,2.42-1.17,4.1-1.17c1.65,0,3.02,0.34,4.11,1.02c1.09,0.68,1.8,1.49,2.13,2.42 c0.33,0.94,0.49,2.29,0.49,4.07V108.73L91.46,108.73z M67.14,100.71h9.41v4.33h-3.76v4.14h3.51v4.12h-3.51v4.77h4.14v4.33h-9.79 V100.71L67.14,100.71z M66.17,100.71l-2.86,21.7h-8.54l-3.27-21.7h5.95c0.67,5.99,1.16,11.05,1.47,15.18 c0.3-4.18,0.61-7.9,0.93-11.14l0.38-4.05H66.17L66.17,100.71z M51.15,111.66v3.73h-7.08v-3.73H51.15L51.15,111.66z M42.44,100.71 v21.7H37.5l-2.94-9.87v9.87h-4.72v-21.7h4.72l3.15,9.77v-9.77H42.44L42.44,100.71z M27.73,113.43c0,2.18-0.05,3.72-0.16,4.63 c-0.1,0.91-0.42,1.74-0.96,2.49c-0.54,0.75-1.27,1.33-2.19,1.73s-1.99,0.6-3.21,0.6c-1.16,0-2.2-0.19-3.12-0.57 c-0.92-0.38-1.67-0.95-2.23-1.71c-0.56-0.76-0.9-1.59-1.01-2.48c-0.11-0.9-0.16-2.46-0.16-4.69v-3.71c0-2.18,0.05-3.72,0.16-4.63 c0.1-0.91,0.42-1.74,0.96-2.49s1.27-1.33,2.19-1.73s1.99-0.6,3.21-0.6c1.16,0,2.2,0.19,3.12,0.57c0.92,0.38,1.67,0.95,2.23,1.71 c0.56,0.76,0.9,1.59,1.01,2.48c0.1,0.9,0.16,2.46,0.16,4.69V113.43L27.73,113.43z M22.08,106.31c0-1.01-0.05-1.65-0.16-1.93 c-0.11-0.28-0.33-0.42-0.67-0.42c-0.29,0-0.51,0.11-0.66,0.34c-0.15,0.22-0.23,0.9-0.23,2.01v10.13c0,1.26,0.05,2.03,0.15,2.33 c0.1,0.3,0.33,0.44,0.7,0.44c0.38,0,0.62-0.17,0.72-0.51c0.11-0.34,0.16-1.15,0.16-2.42V106.31L22.08,106.31z M12.6,100.71v21.7 H7.66l-2.94-9.87v9.87H0.01v-21.7h4.72l3.15,9.77v-9.77H12.6L12.6,100.71z M45.73,19.96c14.33,0,25.95,11.62,25.95,25.95 c0,14.33-11.62,25.94-25.95,25.94c-14.33,0-25.95-11.62-25.95-25.94C19.79,31.58,31.4,19.96,45.73,19.96L45.73,19.96z M85.59,5.88 H5.88v80.06h79.71V5.88L85.59,5.88z"/></g></svg>

src/assets/timer.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#7A7A7A"><g><rect fill="none" height="24" width="24"/></g><g><g><g><path d="M15,1H9v2h6V1z M11,14h2V8h-2V14z M19.03,7.39l1.42-1.42c-0.43-0.51-0.9-0.99-1.41-1.41l-1.42,1.42 C16.07,4.74,14.12,4,12,4c-4.97,0-9,4.03-9,9s4.02,9,9,9s9-4.03,9-9C21,10.88,20.26,8.93,19.03,7.39z M12,20c-3.87,0-7-3.13-7-7 s3.13-7,7-7s7,3.13,7,7S15.87,20,12,20z"/></g></g></g></svg>

src/assets/veg.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 91.47 122.88" style="enable-background:new 0 0 91.47 122.88" xml:space="preserve"><style type="text/css"><![CDATA[
+	.st0{fill:#008300;}
+]]></style><g><path class="st0" d="M2.94,0h88.53v91.82H0V0H2.94L2.94,0z M65.72,108.73h-5.65v-1.97c0-1.24-0.05-2.02-0.16-2.33 c-0.11-0.32-0.36-0.47-0.75-0.47c-0.34,0-0.57,0.13-0.7,0.4c-0.12,0.27-0.18,0.96-0.18,2.06v10.41c0,0.97,0.06,1.61,0.18,1.92 c0.13,0.31,0.37,0.46,0.73,0.46c0.4,0,0.67-0.17,0.82-0.52c0.14-0.35,0.21-1.03,0.21-2.04v-2.57h-1.1v-3.29h6.58v11.63h-3.55 l-0.52-1.55c-0.38,0.67-0.87,1.17-1.45,1.51c-0.58,0.34-1.28,0.51-2.07,0.51c-0.95,0-1.83-0.23-2.66-0.69 c-0.82-0.46-1.45-1.03-1.88-1.71c-0.43-0.68-0.69-1.39-0.8-2.13c-0.1-0.75-0.16-1.87-0.16-3.36v-6.45c0-2.07,0.11-3.58,0.33-4.51 c0.22-0.94,0.87-1.8,1.92-2.58c1.06-0.78,2.42-1.17,4.1-1.17c1.65,0,3.02,0.34,4.11,1.02c1.09,0.68,1.8,1.49,2.13,2.42 c0.33,0.94,0.49,2.29,0.49,4.07V108.73L65.72,108.73z M41.4,100.72h9.41v4.33h-3.76v4.14h3.51v4.11h-3.51v4.77h4.14v4.33H41.4 V100.72L41.4,100.72z M40.43,100.72l-2.86,21.7h-8.54l-3.27-21.7h5.95c0.67,5.98,1.16,11.05,1.47,15.18 c0.3-4.18,0.61-7.9,0.93-11.14l0.37-4.05H40.43L40.43,100.72z M45.73,19.96c14.33,0,25.95,11.62,25.95,25.95 c0,14.33-11.62,25.94-25.95,25.94c-14.33,0-25.95-11.62-25.95-25.94C19.79,31.58,31.4,19.96,45.73,19.96L45.73,19.96z M85.59,5.88 H5.88v80.06h79.71V5.88L85.59,5.88z"/></g></svg>