From 5e799c6f50225a15674a1963e96313b6ba972e54 Mon Sep 17 00:00:00 2001 From: prahalad Date: Thu, 21 Oct 2021 19:56:47 +0530 Subject: [PATCH] Blocking Holidays in Calender --- angular.json | 3 + src/app/schedules/schedules.component.html | 29 +++--- src/app/schedules/schedules.component.scss | 13 +++ src/app/schedules/schedules.component.ts | 103 ++++++++++++++------- src/app/services/outlet.service.spec.ts | 12 +++ src/app/services/outlet.service.ts | 24 +++++ 6 files changed, 134 insertions(+), 50 deletions(-) create mode 100644 src/app/services/outlet.service.spec.ts create mode 100644 src/app/services/outlet.service.ts diff --git a/angular.json b/angular.json index 2d6d5f3..1026afe 100644 --- a/angular.json +++ b/angular.json @@ -1,5 +1,8 @@ { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "cli": { + "analytics": false + }, "version": 1, "newProjectRoot": "projects", "projects": { diff --git a/src/app/schedules/schedules.component.html b/src/app/schedules/schedules.component.html index 90e70ec..b524b02 100644 --- a/src/app/schedules/schedules.component.html +++ b/src/app/schedules/schedules.component.html @@ -20,11 +20,15 @@ {{ preceedingDay }} - + {{ selectedMonthDay }} + {{ succeedingDay }} + @@ -60,8 +64,13 @@ Thur Fri Sat
- {{ preceedingDay }} - + + {{ preceedingDay }} + + {{ selectedMonthDay }} @@ -80,17 +89,9 @@
    -
  • -
    Shop will be closed
    -

    On: 14 Oct 2019

    -
    • -
  • +
  • Shop will be closed
    -

    On: 14 Oct 2019

    -
    • -
  • -
    Shop will be closed
    -

    On: 14 Oct 2019

    +

    {{selectedHoliday}}

@@ -166,7 +167,7 @@
- +
diff --git a/src/app/schedules/schedules.component.scss b/src/app/schedules/schedules.component.scss index 23a3656..dfe4aa0 100644 --- a/src/app/schedules/schedules.component.scss +++ b/src/app/schedules/schedules.component.scss @@ -231,6 +231,12 @@ } } + &.block-holiday{ + color: white; + font-weight: 700; + background-color: var(--pink); + } + &.non-current-date { color: #cecece; } @@ -332,6 +338,13 @@ } } + &.block-holiday{ + border-radius: 50%; + background-color: var(--pink); + font-weight: 700; + color: white; + } + &.non-current-date { color: #cecece; } diff --git a/src/app/schedules/schedules.component.ts b/src/app/schedules/schedules.component.ts index 6b0b874..a42be40 100644 --- a/src/app/schedules/schedules.component.ts +++ b/src/app/schedules/schedules.component.ts @@ -1,14 +1,15 @@ import { Component, OnInit } from '@angular/core'; +import { OutletService } from '../services/outlet.service'; @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 { - currentDate: number; - currentMonth: string; - selectedDate: number; + currentDate: number; + currentMonth: string; + selectedDate: number; selectedMonth: string; selectedYear: number; dayMap: Array = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; @@ -16,35 +17,47 @@ export class SchedulesComponent implements OnInit { preceedingDays: Array = []; succeedingDays: Array = []; selectedMonthDays: Array = []; - selectedTab: string = 'holiday'; - selectedDatePosition: any; - selectedDatesForSchedule: Array = []; - showSchedulePopup: boolean = false; - scheduleType: string = 'change time'; - scheduleFromTime = { - hour: '09', - min: '30', - isBeforeMidday: true - }; - scheduleToTime = { - hour: '09', - min: '00', - isBeforeMidday: false - }; + selectedTab: string = 'holiday'; + selectedDatePosition: any; + selectedDatesForSchedule: Array = []; + showSchedulePopup: boolean = false; + scheduleType: string = 'change time'; + scheduleFromTime = { + hour: '09', + min: '30', + isBeforeMidday: true + }; + scheduleToTime = { + hour: '09', + min: '00', + isBeforeMidday: false + }; + outletTimings: any profile_type: string = ''; profile_info: any; - constructor() { } + outletHoliday: { + holidays: string, + } = { + holidays: '' + } + + selectedHolidays: Array = [new Date('2021-10-21T00:00').toString(), new Date('2021-10-22T00:00').toString()]; - ngOnInit() { - this.selectedMonth = this.monthMap[(new Date()).getMonth()]; + constructor( + private outletService: OutletService + ) { } + + ngOnInit() { + this.selectedMonth = this.monthMap[(new Date()).getMonth()]; this.selectedYear = (new Date()).getFullYear(); - this.currentDate = new Date().getDate(); - this.currentMonth = this.monthMap[(new Date()).getMonth()]; + this.currentDate = new Date().getDate(); + this.currentMonth = this.monthMap[(new Date()).getMonth()]; this.renderCalendar(); this.profile_type = localStorage.current_login_type; + // this.selectedHolidays = [3,5] if (this.profile_type === 'VENDOR') { this.profile_info = JSON.parse(localStorage.vendor_info); @@ -53,17 +66,19 @@ export class SchedulesComponent implements OnInit { } console.log(this.profile_info); - } - selectDates(dates: Array) { - this.selectedDatesForSchedule = dates; - } + } - toggleDates(date: number) { - this.selectedDatesForSchedule.includes(date)? this.selectedDatesForSchedule.splice(this.selectedDatesForSchedule.indexOf(date), 1): this.selectedDatesForSchedule.push(date); - } + selectDates(dates: Array) { + this.selectedDatesForSchedule = dates; + console.log(this.profile_info) + } + + toggleDates(date: number) { + this.selectedDatesForSchedule.includes(date) ? this.selectedDatesForSchedule.splice(this.selectedDatesForSchedule.indexOf(date), 1) : this.selectedDatesForSchedule.push(date); + } - renderCalendar() { + renderCalendar() { // Generate dates for the calendar let i = 1, no_of_preceeding_days, @@ -100,7 +115,7 @@ export class SchedulesComponent implements OnInit { } } - selectNextMonth() { + 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) { @@ -110,7 +125,7 @@ export class SchedulesComponent implements OnInit { this.renderCalendar(); } - selectPreviousMonth() { + 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)) { @@ -120,4 +135,20 @@ export class SchedulesComponent implements OnInit { this.renderCalendar(); } + scheduleHolidays() { + + this.selectedHolidays = []; + console.log(this.selectedHolidays) + + this.outletService.addOutletSchedules(this.outletHoliday).then((data) => { + console.log(data) + // this.profile_info.schedules.push(data) + }) + } + + + getTodayString(selectedMonthDay: string) { + let monthIndex = this.monthMap.findIndex((month) => this.selectedMonth.toLowerCase() === month.toLowerCase()) + 1; + return new Date(this.selectedYear + '-' + monthIndex.toString().padStart(2, '0') + '-' + selectedMonthDay.toString().padStart(2, '0') + 'T00:00').toString(); + } } diff --git a/src/app/services/outlet.service.spec.ts b/src/app/services/outlet.service.spec.ts new file mode 100644 index 0000000..f18552e --- /dev/null +++ b/src/app/services/outlet.service.spec.ts @@ -0,0 +1,12 @@ +import { TestBed } from '@angular/core/testing'; + +import { OutletService } from './outlet.service'; + +describe('OutletService', () => { + beforeEach(() => TestBed.configureTestingModule({})); + + it('should be created', () => { + const service: OutletService = TestBed.get(OutletService); + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/outlet.service.ts b/src/app/services/outlet.service.ts new file mode 100644 index 0000000..b227286 --- /dev/null +++ b/src/app/services/outlet.service.ts @@ -0,0 +1,24 @@ +import { Injectable } from '@angular/core'; +import { HttpClient, HttpHeaders } from '@angular/common/http'; + +@Injectable({ + providedIn: 'root' +}) +export class OutletService { + + constructor( + private http: HttpClient + ) { } + + addOutletSchedules(schedules: any) { + const httpOptions = { + headers: new HttpHeaders({ + 'Access-Control-Allow-Origin': '*', + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + localStorage.token + }) + }; + + return this.http.post(URL + "/api/maioraservice/outlet/v1/create", httpOptions).toPromise() + } +}