ethio-calendar-converter-angular
Version:
Ethiopian Calendar Converter for Angular applications
356 lines (312 loc) • 12.7 kB
text/typescript
import { Component, Output, EventEmitter } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { EthiopianCalendarService } from './ethiopian-calendar.service';
import { EthiopianDate, GregorianDate } from './models/calendar.model';
export class EthiopianCalendarComponent {
ethiopianDate: EthiopianDate = { year: 2015, month: 4, day: 25 };
gregorianDate: GregorianDate = { year: 2022, month: 3, day: 25 };
lastConversion: string = '';
showEthiopianPicker: boolean = false;
ethiopianMonths = [
{ value: 1, label: 'Meskerem' },
{ value: 2, label: 'Tikimt' },
{ value: 3, label: 'Hidar' },
{ value: 4, label: 'Tahsas' },
{ value: 5, label: 'Tir' },
{ value: 6, label: 'Yekatit' },
{ value: 7, label: 'Megabit' },
{ value: 8, label: 'Miyazia' },
{ value: 9, label: 'Ginbot' },
{ value: 10, label: 'Sene' },
{ value: 11, label: 'Hamle' },
{ value: 12, label: 'Nehase' },
{ value: 13, label: 'Pagume' }
];
get ethiopianYears(): number[] {
const currentYear = new Date().getFullYear();
const years: number[] = [];
for (let i = currentYear - 100; i <= currentYear + 100; i++) {
years.push(i - 8); // Convert to approximate Ethiopian year
}
return years;
}
ethiopianDateChange = new EventEmitter<EthiopianDate>();
gregorianDateChange = new EventEmitter<GregorianDate>();
constructor(private calendarService: EthiopianCalendarService) {}
toggleEthiopianPicker() {
this.showEthiopianPicker = !this.showEthiopianPicker;
}
getEthiopianDays(): number[] {
const maxDays = this.ethiopianDate.month === 13 ?
(this.calendarService['isEthiopianLeapYear'](this.ethiopianDate.year) ? 6 : 5) :
30;
return Array.from({length: maxDays}, (_, i) => i + 1);
}
applyEthiopianDate() {
this.convertToGregorian();
this.toggleEthiopianPicker();
}
formatEthiopianDateForDisplay(date: EthiopianDate): string {
const monthName = this.ethiopianMonths.find(m => m.value === date.month)?.label || '';
return `${monthName} ${date.day}, ${date.year}`;
}
convertToGregorian() {
try {
this.gregorianDate = this.calendarService.toGregorian(this.ethiopianDate);
this.gregorianDateChange.emit(this.gregorianDate);
this.lastConversion = `Ethiopian ${this.formatDate(this.ethiopianDate)} → Gregorian ${this.formatDate(this.gregorianDate)}`;
} catch (error) {
this.lastConversion = 'Invalid Ethiopian date';
}
}
convertToEthiopian() {
try {
this.ethiopianDate = this.calendarService.toEthiopian(this.gregorianDate);
this.ethiopianDateChange.emit(this.ethiopianDate);
this.lastConversion = `Gregorian ${this.formatDate(this.gregorianDate)} → Ethiopian ${this.formatDate(this.ethiopianDate)}`;
} catch (error) {
this.lastConversion = 'Invalid Gregorian date';
}
}
onGregorianDateSelected(event: any) {
const date = new Date(event.target.value);
this.gregorianDate = {
year: date.getFullYear(),
month: date.getMonth() + 1,
day: date.getDate()
};
this.convertToEthiopian();
}
formatDate(date: EthiopianDate | GregorianDate): string {
return `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`;
}
formatDateForInput(date: GregorianDate): string {
return `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`;
}
formatGregorianDate(date: GregorianDate): string {
return new Date(date.year, date.month - 1, date.day)
.toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
}
weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
previousMonth() {
if (this.ethiopianDate.month > 1) {
this.ethiopianDate.month--;
} else {
this.ethiopianDate.month = 13;
this.ethiopianDate.year--;
}
this.updateEthiopianDate();
}
nextMonth() {
if (this.ethiopianDate.month < 13) {
this.ethiopianDate.month++;
} else {
this.ethiopianDate.month = 1;
this.ethiopianDate.year++;
}
this.updateEthiopianDate();
}
getDaysArray(): number[] {
const daysInMonth = this.ethiopianDate.month === 13 ?
(this.calendarService['isEthiopianLeapYear'](this.ethiopianDate.year) ? 6 : 5) :
30;
// Create array with padding for alignment
const days: number[] = [];
const firstDayOffset = this.getFirstDayOffset();
// Add padding
for (let i = 0; i < firstDayOffset; i++) {
days.push(0);
}
// Add days
for (let i = 1; i <= daysInMonth; i++) {
days.push(i);
}
return days;
}
getFirstDayOffset(): number {
// This is a simplified version - you might want to implement proper Ethiopian calendar day-of-week calculation
return (this.ethiopianDate.month * 2) % 7;
}
getDayClasses(day: number): string {
const baseClasses = 'h-8 w-8 rounded-full flex items-center justify-center text-sm';
const isSelected = day === this.ethiopianDate.day;
if (isSelected) {
return `${baseClasses} bg-blue-600 text-white`;
}
return `${baseClasses} hover:bg-gray-100 text-gray-700`;
}
selectDay(day: number) {
this.ethiopianDate.day = day;
this.updateEthiopianDate();
this.toggleEthiopianPicker();
}
selectToday() {
const today = this.calendarService.toEthiopian({
year: new Date().getFullYear(),
month: new Date().getMonth() + 1,
day: new Date().getDate()
});
this.ethiopianDate = today;
this.updateEthiopianDate();
this.toggleEthiopianPicker();
}
updateEthiopianDate() {
this.ethiopianDateChange.emit(this.ethiopianDate);
this.convertToGregorian();
}
formatEthiopianDateForInput(date: EthiopianDate): string {
const monthName = this.ethiopianMonths.find(m => m.value === date.month)?.label || '';
return `${monthName} ${date.day}, ${date.year}`;
}
}