From 981884ba341e6685619d5ed520881d617b025da0 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Thu, 28 Nov 2019 17:55:48 +0530 Subject: [PATCH] Partial commit --- src/app/schedules/schedules.component.html | 23 +++- src/app/schedules/schedules.component.scss | 125 ++++++++++++++++++ src/app/schedules/schedules.component.ts | 81 +++++++++++- .../widgets-holder.component.html | 3 +- .../widgets-holder.component.ts | 2 +- 5 files changed, 225 insertions(+), 9 deletions(-) diff --git a/src/app/schedules/schedules.component.html b/src/app/schedules/schedules.component.html index a5ba571..c1f1636 100644 --- a/src/app/schedules/schedules.component.html +++ b/src/app/schedules/schedules.component.html @@ -1 +1,22 @@ -

schedules works!

+
+
+
Shop Events & Timings
+
+ +
+
+ {{ selectedMonth }} {{ selectedYear }} +
+ +
+ Sun Mon Tue Wed + Thu Fri Sat +
+
+ {{ preceedingDay }} + {{ selectedMonthDay }} + + {{ succeedingDay }} +
+
+
diff --git a/src/app/schedules/schedules.component.scss b/src/app/schedules/schedules.component.scss index e69de29..0690ded 100644 --- a/src/app/schedules/schedules.component.scss +++ b/src/app/schedules/schedules.component.scss @@ -0,0 +1,125 @@ +.calendar-holder { + width: 65%; + padding: 0 5%; + + .widget-heading-holder { + width: 100%; + } +} + +.calendar { + box-shadow: 0 0 10px -1px #bcbcbc; + padding: 15px 0; + background-color: white; + width: 100%; + border-radius: 10px; + margin-top: 30px; + + .month { + text-align: center; + padding: 5px 0 20px; + + button, + span { + vertical-align: middle; + } + + button { + --padding-start: 0; + --padding-end: 0; + } + + i { + color: var(--ion-color-lighter-grey); + font-size: 22px; + } + + span { + color: var(--ion-color-blue); + text-transform: uppercase; + font-size: 18px; + padding: 0 5px; + display: inline-block; + width: 180px; + } + } + + + .days { + display: flex; + width: 100%; + margin: 5px 0; + + span { + width: calc(100% / 7); + text-align: center; + font-size: 14px; + color: var(--ion-color-brand-black); + + &:first-child { + color: #f05525; + } + } + } + + .dates { + display: flex; + width: 100%; + flex-wrap: wrap; + + span { + margin: 15px 0; + font-size: 14px; + width: calc(100% / 7); + text-align: center; + color: var(--ion-color-brand-black); + position: relative; + + &::before { + content: ''; + position: absolute; + left: 0; + top: -70%; + overflow: visible; + width: 100%; + height: 52px; + box-shadow: none; + border-radius: 50%; + transform: scale(0.8); + } + + &::after { + content: ''; + position: absolute; + left: 46%; + bottom: -5px; + width: 5px; + height: 5px; + border-radius: 50%; + overflow: hidden; + background-color: var(--ion-color-lighter-grey); + display: none; + } + + &.active { + &::before { + box-shadow: 0 0 5px -1px var(--ion-color-light-grey); + } + } + + &.taken { + &::after { + display: block; + } + } + + &:nth-child(7n + 1) { + color: #f05525; + } + + &.non-current-date { + color: var(--ion-color-lighter-grey); + } + } + } +} diff --git a/src/app/schedules/schedules.component.ts b/src/app/schedules/schedules.component.ts index 96af124..1eb85ff 100644 --- a/src/app/schedules/schedules.component.ts +++ b/src/app/schedules/schedules.component.ts @@ -1,15 +1,84 @@ import { Component, OnInit } from '@angular/core'; @Component({ - selector: 'app-schedules', - templateUrl: './schedules.component.html', - styleUrls: ['./schedules.component.scss'] + selector: 'app-schedules', + templateUrl: './schedules.component.html', + styleUrls: ['./schedules.component.scss'] }) export class SchedulesComponent implements OnInit { + selectedDate: number; + selectedMonth: string; + selectedYear: number; + dayMap: Array = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; + monthMap: Array = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; + preceedingDays: Array = []; + succeedingDays: Array = []; + selectedMonthDays: Array = []; - constructor() { } + constructor() { } - ngOnInit() { - } + ngOnInit() { + this.selectedMonth = this.monthMap[(new Date()).getMonth()]; + this.selectedYear = (new Date()).getFullYear(); + this.selectedDate = new Date().getDate(); + this.renderCalendar(); + } + + renderCalendar() { + // Generate dates for the calendar + let i = 1, + no_of_preceeding_days, + no_of_days_in_selected_month, + no_of_succeeding_days, + last_date_of_previous_month, + first_date_of_selected_month, + last_date_of_selected_month; + + first_date_of_selected_month = new Date(this.selectedYear, this.monthMap.indexOf(this.selectedMonth), 1); + + // Add one month, and subtract one day to the selected month and year + last_date_of_selected_month = new Date(this.selectedYear, this.monthMap.indexOf(this.selectedMonth) + 1, 0); + last_date_of_previous_month = new Date(this.selectedYear, this.monthMap.indexOf(this.selectedMonth), 0); + + no_of_preceeding_days = first_date_of_selected_month.getDay(); + no_of_days_in_selected_month = last_date_of_selected_month.getDate(); + no_of_succeeding_days = 6 - last_date_of_selected_month.getDay(); + + this.preceedingDays = []; + this.selectedMonthDays = []; + this.succeedingDays = []; + + for (i = no_of_preceeding_days - 1; i >= 0; i -= 1) { + this.preceedingDays.push(last_date_of_previous_month.getDate() - i); + } + + for (i = 1; i <= no_of_days_in_selected_month; i += 1) { + this.selectedMonthDays.push(i); + } + + for (i = 1; i <= no_of_succeeding_days; i += 1) { + this.succeedingDays.push(i); + } + } + + selectNextMonth() { + let next_month_index = (this.monthMap.indexOf(this.selectedMonth) + 1) % this.monthMap.length; + this.selectedMonth = this.monthMap[next_month_index]; + if (next_month_index == 0) { + this.selectedYear += 1; + } + + this.renderCalendar(); + } + + selectPreviousMonth() { + let previous_month_index = (this.monthMap.indexOf(this.selectedMonth) + (this.monthMap.length - 1)) % this.monthMap.length; + this.selectedMonth = this.monthMap[previous_month_index]; + if (previous_month_index == (this.monthMap.length - 1)) { + this.selectedYear -= 1; + } + + this.renderCalendar(); + } } diff --git a/src/app/widgets-holder/widgets-holder.component.html b/src/app/widgets-holder/widgets-holder.component.html index 13484f3..4215fbf 100644 --- a/src/app/widgets-holder/widgets-holder.component.html +++ b/src/app/widgets-holder/widgets-holder.component.html @@ -15,7 +15,7 @@
John Doe
Member ID: 03293
-
Restaurant Rating: 4.0
+
Restaurant Rating: 4.0
    @@ -44,5 +44,6 @@ + diff --git a/src/app/widgets-holder/widgets-holder.component.ts b/src/app/widgets-holder/widgets-holder.component.ts index b05a8c7..8779e87 100644 --- a/src/app/widgets-holder/widgets-holder.component.ts +++ b/src/app/widgets-holder/widgets-holder.component.ts @@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./widgets-holder.component.scss'] }) export class WidgetsHolderComponent implements OnInit { - selected_nav: string = 'items'; + selected_nav: string = 'schedule'; constructor() { }