Blocking Holidays in Calender

angular.json

@@ -1,5 +1,8 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "cli": {
+    "analytics": false
+  },
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {

src/app/schedules/schedules.component.html

@@ -20,11 +20,15 @@
 				<span class="non-current-date" *ngFor="let preceedingDay of preceedingDays">
 					{{ preceedingDay }}
 				</span>
-				<span [dtsSelectItem]="selectedMonthDay" [ngClass]="{'current-date': currentDate === selectedMonthDay && currentMonth === selectedMonth }" *ngFor="let selectedMonthDay of selectedMonthDays">
+				<span [dtsSelectItem]="selectedMonthDay" [ngClass]="{'current-date': currentDate === selectedMonthDay && currentMonth === selectedMonth, 
+				'block-holiday': selectedHolidays.includes(getTodayString(selectedMonthDay)) }" 
+				*ngFor="let selectedMonthDay of selectedMonthDays">
 					{{ selectedMonthDay }}
+					<!-- {{ selectedHolidays.includes(getTodayString(selectedMonthDay)) }} -->
 				</span>
 				<span class="non-current-date" *ngFor="let succeedingDay of succeedingDays">
 					{{ succeedingDay }}
+					<!-- {{new Date(selectedYear + '-' + selectedMonth + '-' + selectedMonthDay + 'T00:00')}} -->
 				</span>
 			</dts-select-container>
 
@@ -60,8 +64,13 @@
 				<span> Thur </span><span> Fri </span><span> Sat </span>
 			</div>
 			<div class="dates">
-				<span class="non-current-date" *ngFor="let preceedingDay of preceedingDays"> {{ preceedingDay }} </span>
-				<span [ngClass]="{'current-date': currentDate === selectedMonthDay && currentMonth === selectedMonth, 'active': this.selectedDatesForSchedule.includes(selectedMonthDay) }" *ngFor="let selectedMonthDay of selectedMonthDays" (click)="toggleDates(selectedMonthDay)">
+				<span class="non-current-date" *ngFor="let preceedingDay of preceedingDays"> 
+					{{ preceedingDay }} 
+				</span>
+				<span [ngClass]="{'current-date': currentDate === selectedMonthDay && currentMonth === selectedMonth, 
+								'active': this.selectedDatesForSchedule.includes(selectedMonthDay),
+								'block-holiday': selectedHolidays.includes(getTodayString(selectedMonthDay)) }" 
+						*ngFor="let selectedMonthDay of selectedMonthDays" (click)="toggleDates(selectedMonthDay)">
 					{{ selectedMonthDay }}
 				</span>
 				<span class="non-current-date" *ngFor="let succeedingDay of succeedingDays">
@@ -80,17 +89,9 @@
 
 			<section class="tab-info">
 				<ul class="holiday-list" *ngIf="selectedTab === 'holiday'">
-					<li>
-						<header> Shop will be closed </header>
-						<p> On: 14 Oct 2019 </p>
-					</li>
-					<li>
+					<li *ngFor = "let selectedHoliday of selectedHolidays">
 						<header> Shop will be closed </header>
-						<p> On: 14 Oct 2019 </p>
-					</li>
-					<li>
-						<header> Shop will be closed </header>
-						<p> On: 14 Oct 2019 </p>
+						<p> {{selectedHoliday}} </p>
 					</li>
 				</ul>
 
@@ -166,7 +167,7 @@
 			</div>
 		</div>
 		<div class="action-buttons">
-			<button class="rect-button"> Submit </button>
+			<button class="rect-button" (click)="scheduleHolidays()" > Submit </button>
 			<button class="rect-button" (click)="showSchedulePopup = false"> Cancel </button>
 		</div>
 	</section>

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;
             }

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<string> = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
@@ -16,35 +17,47 @@ export class SchedulesComponent implements OnInit {
     preceedingDays: Array<number> = [];
     succeedingDays: Array<number> = [];
     selectedMonthDays: Array<number> = [];
-	selectedTab: string = 'holiday';
-	selectedDatePosition: any;
-	selectedDatesForSchedule: Array<number> = [];
-	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<number> = [];
+    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<string> = [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<number>) {
-		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<number>) {
+        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();
+    }
 }

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();
+  });
+});

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()
+  }
+}