From d718ad04c6c1f82206daaae4aef533a9ca3c061c Mon Sep 17 00:00:00 2001 From: prahalad Date: Tue, 16 Nov 2021 19:35:13 +0530 Subject: [PATCH] Rendering outlet in vendors --- src/app/dashboard/dashboard.component.ts | 8 +- src/app/login/login.component.ts | 4 +- src/app/menu-items/menu-items.component.ts | 10 +- src/app/orders/orders.component.ts | 2 +- src/app/outlets/outlets.component.html | 34 +- src/app/outlets/outlets.component.scss | 466 ++++++++++++------ src/app/outlets/outlets.component.ts | 3 +- src/app/schedules/schedules.component.ts | 2 +- .../widgets-holder.component.html | 21 +- .../widgets-holder.component.scss | 15 + .../widgets-holder.component.ts | 6 +- 11 files changed, 381 insertions(+), 190 deletions(-) diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index 9b0b3b0..405ffb9 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/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) => { diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts index c0a71ea..3a7cbe8 100644 --- a/src/app/login/login.component.ts +++ b/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']); diff --git a/src/app/menu-items/menu-items.component.ts b/src/app/menu-items/menu-items.component.ts index 101be9d..8af8b62 100644 --- a/src/app/menu-items/menu-items.component.ts +++ b/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); } diff --git a/src/app/orders/orders.component.ts b/src/app/orders/orders.component.ts index 9d88848..02a79eb 100644 --- a/src/app/orders/orders.component.ts +++ b/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) => { diff --git a/src/app/outlets/outlets.component.html b/src/app/outlets/outlets.component.html index 43e137a..a973dca 100644 --- a/src/app/outlets/outlets.component.html +++ b/src/app/outlets/outlets.component.html @@ -1,7 +1,10 @@
-
+
Logo -
Welcome to {{venderInfo.vendorName}}
+
+
Welcome to {{venderInfo.vendorName}}
+ Vendor Id: {{venderInfo.vendor_Id}} +
-
-
  • +
    +
  • - +

    {{outlet.outlet_name}}

    - Id:{{outlet.outlet_id}} -
    +
    Rating: {{ outlet.rating }}
    +
    + Outlet Id: {{outlet.outlet_id}} Type: {{outlet.outlet_type}} Timings: 9:00am to 10:00pm
    -

    {{outlet.description}}

    -
    -

    MenuItems: {{outlet.menuitems.length}}

  • +
    -
    + +
    {{menuitem.menu_item_name}}
    - Price: ₹ {{menuitem.item_price}} {{menuitem.wait_duration}} - Availiblity + Price: ₹ {{menuitem.item_price}} + {{menuitem.wait_duration}} + Availiblity
    -
    + +
    +
    • diff --git a/src/app/outlets/outlets.component.scss b/src/app/outlets/outlets.component.scss index 85be771..4882229 100644 --- a/src/app/outlets/outlets.component.scss +++ b/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; } } } -} \ No newline at end of file +} diff --git a/src/app/outlets/outlets.component.ts b/src/app/outlets/outlets.component.ts index 7f67f7b..148804f 100644 --- a/src/app/outlets/outlets.component.ts +++ b/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() { diff --git a/src/app/schedules/schedules.component.ts b/src/app/schedules/schedules.component.ts index 7090d15..1696181 100644 --- a/src/app/schedules/schedules.component.ts +++ b/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); } diff --git a/src/app/widgets-holder/widgets-holder.component.html b/src/app/widgets-holder/widgets-holder.component.html index 4cc1e5b..2ff97bb 100644 --- a/src/app/widgets-holder/widgets-holder.component.html +++ b/src/app/widgets-holder/widgets-holder.component.html @@ -1,5 +1,11 @@
    - Logo +
    + Logo +
    +
    Welcome to {{profile_info.vendorName}}
    + Vendor Id: {{profile_info.vendor_Id}} +
    +