vendor-app/src/app/schedules/schedules.component.ts

import { Component, OnInit } from '@angular/core';
import { OutletService } from '../services/outlet.service';

@Component({
    selector: 'app-schedules',
    templateUrl: './schedules.component.html',
    styleUrls: ['./schedules.component.scss']
})
export class SchedulesComponent implements OnInit {
    currentDate: number;
    currentMonth: string;
    selectedDate: number;
    selectedMonth: string;
    selectedYear: number;
    dayMap: Array<string> = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    monthMap: Array<string> = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    preceedingDays: Array<number> = [];
    succeedingDays: Array<number> = [];
    selectedMonthDays: Array<number> = [];
    selectedTab: string = 'holiday';
    selectedDatePosition: any;
    selectedDatesForSchedule: Array<number> = [];
    showSchedulePopup: boolean = false;
    scheduleType: string = 'change time';
    selectedMonthIndex: number;
    scheduleFromTime = {
        hour: '09',
        min: '30',
        isBeforeMidday: true
    };
    scheduleToTime = {
        hour: '09',
        min: '00',
        isBeforeMidday: false
    };
    outletTimings: any

    profile_type: string = '';
    profile_info: any;

    outletTiming: {
        close_timing: string;
        holidays: string,
        open_timing: string,
        schedules: {
            outlet_id: number
        }
    } = {
            close_timing: "2021-10-28T09:37:05.776Z",
            holidays: '',
            open_timing: "2021-10-28T09:37:05.776Z",
            schedules: {
                outlet_id: null
            }
        }

    selectedHolidays: Array<string> = [];

    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.renderCalendar();

        this.profile_type = localStorage.current_login_type;

        if (this.profile_type === 'VENDOR') {
            this.profile_info = JSON.parse(localStorage.vendor_info);
        } else if (this.profile_type === 'OUTLET') {
            this.profile_info = JSON.parse(localStorage.outlet_info);
        }

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

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

    scheduleHolidays() {
        this.selectedHolidays = this.selectedDatesForSchedule.map(selectedDates => this.getTodayString(selectedDates.toString()))
        this.outletTiming.holidays = JSON.stringify(this.selectedHolidays)
        console.log(this.outletTiming)
        
        this.outletService.addOutletSchedules(this.outletTiming, this.profile_info.outlet_id).then((data) => {
            console.log(data)
        }, err=>{
            console.log("Unable to Update Holidays")
        })
    }

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