Fix most errors and warnings with GPT, switch to .ts etc
This commit is contained in:
Zachary
@@ -1,16 +1,15 @@
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import Tooltip from './Tooltip.svelte';
|
||||
|
||||
export let year;
|
||||
export let month;
|
||||
export let holidays = [];
|
||||
export let optimizedDaysOff = [];
|
||||
export let consecutiveDaysOff = [];
|
||||
export let selectedCountryCode;
|
||||
export let year: number;
|
||||
export let month: number;
|
||||
export let holidays: Array<{ date: Date; name: string; hidden?: boolean }>;
|
||||
export let optimizedDaysOff: Date[];
|
||||
export let consecutiveDaysOff: Array<{ startDate: Date; endDate: Date; totalDays: number }>;
|
||||
export let selectedCountryCode: string;
|
||||
|
||||
// Function to determine the first day of the week based on locale
|
||||
function getFirstDayOfWeek(locale) {
|
||||
// Convert 'us' to proper locale format
|
||||
function getFirstDayOfWeek(locale: string): number {
|
||||
const normalizedLocale = locale.toLowerCase() === 'us' ? 'en-US' : `en-${locale.toUpperCase()}`;
|
||||
|
||||
try {
|
||||
@@ -34,15 +33,15 @@
|
||||
$: firstDayOfWeek = getFirstDayOfWeek(locale);
|
||||
$: adjustedFirstDay = (getFirstDayOfMonth(year, month) - firstDayOfWeek + 7) % 7;
|
||||
|
||||
function getDaysInMonth(year, month) {
|
||||
function getDaysInMonth(year: number, month: number): number {
|
||||
return new Date(year, month + 1, 0).getDate();
|
||||
}
|
||||
|
||||
function getFirstDayOfMonth(year, month) {
|
||||
function getFirstDayOfMonth(year: number, month: number): number {
|
||||
return new Date(year, month, 1).getDay();
|
||||
}
|
||||
|
||||
function getHoliday(day) {
|
||||
function getHoliday(day: number): { date: Date; name: string; hidden?: boolean } | undefined {
|
||||
return holidays.find(holiday =>
|
||||
holiday.date.getFullYear() === year &&
|
||||
holiday.date.getMonth() === month &&
|
||||
@@ -50,7 +49,7 @@
|
||||
);
|
||||
}
|
||||
|
||||
function isOptimizedDayOff(day) {
|
||||
function isOptimizedDayOff(day: number): boolean {
|
||||
return optimizedDaysOff.some(date =>
|
||||
date.getFullYear() === year &&
|
||||
date.getMonth() === month &&
|
||||
@@ -58,8 +57,7 @@
|
||||
);
|
||||
}
|
||||
|
||||
// Determine the dominant month for each consecutive days off period
|
||||
function getDominantMonth(period) {
|
||||
function getDominantMonth(period: { startDate: Date; endDate: Date }): number {
|
||||
const startMonth = period.startDate.getMonth();
|
||||
const endMonth = period.endDate.getMonth();
|
||||
|
||||
@@ -73,7 +71,7 @@
|
||||
return startDays > endDays ? startMonth : endMonth;
|
||||
}
|
||||
|
||||
function isConsecutiveDayOff(day) {
|
||||
function isConsecutiveDayOff(day: number): boolean {
|
||||
return consecutiveDaysOff.some(period => {
|
||||
const start = period.startDate;
|
||||
const end = period.endDate;
|
||||
@@ -82,26 +80,21 @@
|
||||
});
|
||||
}
|
||||
|
||||
// Function to determine if a day is a weekend
|
||||
function isWeekend(day) {
|
||||
function isWeekend(day: number): boolean {
|
||||
const dayOfWeek = (adjustedFirstDay + day - 1) % 7;
|
||||
// Calculate the indices for Saturday and Sunday
|
||||
const saturdayIndex = (6 - firstDayOfWeek + 7) % 7;
|
||||
const sundayIndex = (7 - firstDayOfWeek + 7) % 7;
|
||||
return dayOfWeek === saturdayIndex || dayOfWeek === sundayIndex;
|
||||
}
|
||||
|
||||
// Fixed array of day initials starting from Sunday
|
||||
const dayInitials = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
|
||||
|
||||
// Reactive declaration to get the ordered day initials
|
||||
$: orderedDayInitials = dayInitials.slice(firstDayOfWeek).concat(dayInitials.slice(0, firstDayOfWeek));
|
||||
</script>
|
||||
|
||||
<div class="calendar">
|
||||
<div class="month-name">{new Date(year, month).toLocaleString('default', { month: 'long' })}</div>
|
||||
|
||||
<!-- Day initials header -->
|
||||
{#each orderedDayInitials as dayInitial}
|
||||
<div class="day-initial">{dayInitial}</div>
|
||||
{/each}
|
||||
@@ -113,7 +106,7 @@
|
||||
<div class="day {isWeekend(day) ? 'weekend' : ''} {getHoliday(day) ? 'holiday' : ''} {isOptimizedDayOff(day) ? 'optimized' : ''} {isConsecutiveDayOff(day) ? 'consecutive-day' : ''}">
|
||||
{day}
|
||||
{#if getHoliday(day)}
|
||||
<Tooltip text={getHoliday(day).name} />
|
||||
<Tooltip text={getHoliday(day)?.name} />
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
@@ -5,32 +5,32 @@ const MS_IN_A_DAY = 86400000;
|
||||
const MAX_GAP_LENGTH = 5;
|
||||
|
||||
// Helper function to check if a date is a weekend
|
||||
const isWeekend = date => date.getDay() === 0 || date.getDay() === 6;
|
||||
const isWeekend = (date: Date): boolean => date.getDay() === 0 || date.getDay() === 6;
|
||||
|
||||
// Helper function to check if two dates are the same day
|
||||
const isSameDay = (date1, date2) =>
|
||||
const isSameDay = (date1: Date, date2: Date): boolean =>
|
||||
date1.getFullYear() === date2.getFullYear() &&
|
||||
date1.getMonth() === date2.getMonth() &&
|
||||
date1.getDate() === date2.getDate();
|
||||
|
||||
// Helper function to generate a unique key for a date
|
||||
const dateKey = date => `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
|
||||
const dateKey = (date: Date): string => `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
|
||||
|
||||
// Helper function to check if a date is a holiday
|
||||
const isHoliday = (date, holidays) => holidays.some(h => isSameDay(h.date, date));
|
||||
const isHoliday = (date: Date, holidays: { date: Date }[]): boolean => holidays.some(h => isSameDay(h.date, date));
|
||||
|
||||
// Helper function to check if a date is a day off
|
||||
const isDayOff = (date, allDaysOffSet) => allDaysOffSet.has(dateKey(date));
|
||||
const isDayOff = (date: Date, allDaysOffSet: Set<string>): boolean => allDaysOffSet.has(dateKey(date));
|
||||
|
||||
// Helper function to calculate the number of days between two dates
|
||||
const daysBetween = (startDate, endDate) => Math.round((endDate - startDate) / MS_IN_A_DAY);
|
||||
const daysBetween = (startDate: Date, endDate: Date): number => Math.round((endDate.getTime() - startDate.getTime()) / MS_IN_A_DAY);
|
||||
|
||||
// Helper function to format a date
|
||||
const formatDate = date => date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
|
||||
const formatDate = (date: Date): string => date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
|
||||
|
||||
// Get holidays for a specific year and country
|
||||
export function getHolidaysForYear(countryCode, year, stateCode = '') {
|
||||
const hd = new Holidays(countryCode, stateCode);
|
||||
export function getHolidaysForYear(countryCode: string, year: number, stateCode?: string): { date: Date; name: string }[] {
|
||||
const hd = stateCode ? new Holidays(countryCode, stateCode) : new Holidays(countryCode);
|
||||
return hd.getHolidays(year)
|
||||
.filter(holiday => holiday.type === 'public')
|
||||
.map(holiday => ({
|
||||
@@ -40,14 +40,9 @@ export function getHolidaysForYear(countryCode, year, stateCode = '') {
|
||||
}
|
||||
|
||||
// Optimize days off to create the longest possible chains
|
||||
export function optimizeDaysOff(holidays, year, daysOff) {
|
||||
// Filter holidays to include only those in the current year
|
||||
export function optimizeDaysOff(holidays: { date: Date }[], year: number, daysOff: number): Date[] {
|
||||
const currentYearHolidays = holidays.filter(h => h.date.getFullYear() === year);
|
||||
|
||||
// Recalculate weekends for the current year
|
||||
const weekends = getWeekends(year);
|
||||
|
||||
// Initialize a new Set for all days off
|
||||
const allDaysOffSet = new Set([
|
||||
...currentYearHolidays.map(h => dateKey(h.date)),
|
||||
...weekends.map(d => dateKey(d))
|
||||
@@ -59,15 +54,15 @@ export function optimizeDaysOff(holidays, year, daysOff) {
|
||||
}
|
||||
|
||||
// Calculate consecutive days off
|
||||
export function calculateConsecutiveDaysOff(holidays, optimizedDaysOff, year) {
|
||||
export function calculateConsecutiveDaysOff(holidays: { date: Date }[], optimizedDaysOff: Date[], year: number): { startDate: Date; endDate: Date; usedDaysOff: number; totalDays: number }[] {
|
||||
const allDaysOffSet = new Set([...holidays.map(h => dateKey(h.date)), ...optimizedDaysOff.map(d => dateKey(d))]);
|
||||
const consecutiveDaysOff = [];
|
||||
let currentGroup = [];
|
||||
const consecutiveDaysOff: { startDate: Date; endDate: Date; usedDaysOff: number; totalDays: number }[] = [];
|
||||
let currentGroup: Date[] = [];
|
||||
|
||||
for (let month = 0; month < 12; month++) {
|
||||
for (let day = 1; day <= 31; day++) {
|
||||
const date = new Date(year, month, day);
|
||||
if (date.getMonth() !== month) break; // Skip invalid dates
|
||||
if (date.getMonth() !== month) break;
|
||||
|
||||
if (isWeekend(date) || isHoliday(date, holidays) || isDayOff(date, allDaysOffSet)) {
|
||||
currentGroup.push(date);
|
||||
@@ -80,7 +75,6 @@ export function calculateConsecutiveDaysOff(holidays, optimizedDaysOff, year) {
|
||||
}
|
||||
}
|
||||
|
||||
// Check the last group at the end of the year
|
||||
if (currentGroup.length > 2) {
|
||||
addConsecutiveDaysOff(consecutiveDaysOff, currentGroup, optimizedDaysOff);
|
||||
}
|
||||
@@ -89,8 +83,8 @@ export function calculateConsecutiveDaysOff(holidays, optimizedDaysOff, year) {
|
||||
}
|
||||
|
||||
// Get all weekends for a specific year
|
||||
function getWeekends(year) {
|
||||
const weekends = [];
|
||||
function getWeekends(year: number): Date[] {
|
||||
const weekends: Date[] = [];
|
||||
for (let month = 0; month < 12; month++) {
|
||||
for (let day = 1; day <= 31; day++) {
|
||||
const date = new Date(year, month, day);
|
||||
@@ -102,9 +96,9 @@ function getWeekends(year) {
|
||||
}
|
||||
|
||||
// Find gaps between days off
|
||||
function findGaps(allDaysOffSet, year) {
|
||||
const gaps = [];
|
||||
let currentGapStart = null;
|
||||
function findGaps(allDaysOffSet: Set<string>, year: number): { start: Date; end: Date; gapLength: number }[] {
|
||||
const gaps: { start: Date; end: Date; gapLength: number }[] = [];
|
||||
let currentGapStart: Date | null = null;
|
||||
|
||||
for (let month = 0; month < 12; month++) {
|
||||
for (let day = 1; day <= 31; day++) {
|
||||
@@ -137,7 +131,7 @@ function findGaps(allDaysOffSet, year) {
|
||||
}
|
||||
|
||||
// Rank gaps by efficiency
|
||||
function rankGapsByEfficiency(gaps, allDaysOffSet) {
|
||||
function rankGapsByEfficiency(gaps: { start: Date; end: Date; gapLength: number }[], allDaysOffSet: Set<string>): any[] {
|
||||
return gaps.map(gap => {
|
||||
const backward = calculateChain(gap.start, gap.gapLength, allDaysOffSet, 'backward');
|
||||
const forward = calculateChain(gap.end, gap.gapLength, allDaysOffSet, 'forward');
|
||||
@@ -149,7 +143,7 @@ function rankGapsByEfficiency(gaps, allDaysOffSet) {
|
||||
}
|
||||
|
||||
// Calculate potential chain length and days off used
|
||||
function calculateChain(startDate, gapLength, allDaysOffSet, direction) {
|
||||
function calculateChain(startDate: Date, gapLength: number, allDaysOffSet: Set<string>, direction: 'backward' | 'forward'): { chainLength: number; usedDaysOff: number } {
|
||||
let chainLength = gapLength;
|
||||
let usedDaysOff = 0;
|
||||
let currentDate = new Date(startDate);
|
||||
@@ -174,13 +168,12 @@ function calculateChain(startDate, gapLength, allDaysOffSet, direction) {
|
||||
}
|
||||
|
||||
// Select days off based on ranked gaps
|
||||
function selectDaysOff(rankedGaps, daysOff, allDaysOffSet, year) {
|
||||
const selectedDays = [];
|
||||
function selectDaysOff(rankedGaps: any[], daysOff: number, allDaysOffSet: Set<string>, year: number): Date[] {
|
||||
const selectedDays: Date[] = [];
|
||||
|
||||
while (daysOff > 0 && rankedGaps.length > 0) {
|
||||
const gap = rankedGaps.shift(); // Get the highest-ranked gap
|
||||
const gap = rankedGaps.shift();
|
||||
|
||||
// Determine the direction and starting point for filling the gap
|
||||
const increment = gap.fillFrom === 'start' ? 1 : -1;
|
||||
const startDate = gap.fillFrom === 'start' ? gap.start : gap.end;
|
||||
|
||||
@@ -195,7 +188,6 @@ function selectDaysOff(rankedGaps, daysOff, allDaysOffSet, year) {
|
||||
}
|
||||
}
|
||||
|
||||
// Recalculate gaps and re-rank them after each assignment
|
||||
const newGaps = findGaps(allDaysOffSet, year);
|
||||
rankedGaps = rankGapsByEfficiency(newGaps, allDaysOffSet);
|
||||
}
|
||||
@@ -204,7 +196,7 @@ function selectDaysOff(rankedGaps, daysOff, allDaysOffSet, year) {
|
||||
}
|
||||
|
||||
// Add consecutive days off to the list
|
||||
function addConsecutiveDaysOff(consecutiveDaysOff, currentGroup, optimizedDaysOff) {
|
||||
function addConsecutiveDaysOff(consecutiveDaysOff: { startDate: Date; endDate: Date; usedDaysOff: number; totalDays: number }[], currentGroup: Date[], optimizedDaysOff: Date[]) {
|
||||
const startDate = currentGroup[0];
|
||||
const endDate = currentGroup[currentGroup.length - 1];
|
||||
const totalDays = daysBetween(startDate, endDate) + 1;
|
||||
@@ -1,4 +1,4 @@
|
||||
export const ptoData = {
|
||||
export const ptoData: Record<string, number> = {
|
||||
// Afghanistan
|
||||
AF: 20, // 20 days recreational leave, 15 paid public holidays
|
||||
|
||||
@@ -1,62 +1,62 @@
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { injectSpeedInsights } from '@vercel/speed-insights';
|
||||
import { inject } from '@vercel/analytics'
|
||||
import { inject } from '@vercel/analytics';
|
||||
import countries from 'i18n-iso-countries';
|
||||
import enLocale from 'i18n-iso-countries/langs/en.json';
|
||||
import CalendarMonth from '../lib/CalendarMonth.svelte';
|
||||
import { getHolidaysForYear, optimizeDaysOff, calculateConsecutiveDaysOff } from '../lib/holidayUtils.js';
|
||||
import { ptoData } from '../lib/ptoData.js';
|
||||
import { getHolidaysForYear, optimizeDaysOff, calculateConsecutiveDaysOff } from '../lib/holidayUtils';
|
||||
import { ptoData } from '../lib/ptoData';
|
||||
import Holidays from 'date-holidays';
|
||||
|
||||
countries.registerLocale(enLocale);
|
||||
let countriesList = countries.getNames('en');
|
||||
let countriesList: Record<string, string> = countries.getNames('en');
|
||||
|
||||
let year;
|
||||
let months = Array.from({ length: 12 }, (_, i) => i);
|
||||
let selectedCountry = '';
|
||||
let holidays = [];
|
||||
let daysOff = 0;
|
||||
let optimizedDaysOff = [];
|
||||
let consecutiveDaysOff = [];
|
||||
let placeholder = "Country";
|
||||
let countriesInput;
|
||||
let statesInput;
|
||||
let showHowItWorks = false;
|
||||
let year: number;
|
||||
let months: number[] = Array.from({ length: 12 }, (_, i) => i);
|
||||
let selectedCountry: string = '';
|
||||
let holidays: Array<{ date: Date; name: string; hidden?: boolean }> = [];
|
||||
let daysOff: number = 0;
|
||||
let optimizedDaysOff: Date[] = [];
|
||||
let consecutiveDaysOff: Array<{ startDate: Date; endDate: Date; totalDays: number }> = [];
|
||||
let countriesInput: HTMLInputElement | null = null;
|
||||
let statesInput: HTMLInputElement | null = null;
|
||||
let showHowItWorks: boolean = false;
|
||||
|
||||
// Default settings
|
||||
let defaultYear = new Date().getFullYear();
|
||||
let defaultCountry = '';
|
||||
let defaultDaysOff = 0;
|
||||
let defaultYear: number = new Date().getFullYear();
|
||||
let defaultCountry: string = '';
|
||||
let defaultDaysOff: number = 0;
|
||||
|
||||
let selectedState = '';
|
||||
let selectedStateCode = '';
|
||||
let statesList = [];
|
||||
let selectedState: string = '';
|
||||
let selectedStateCode: string = '';
|
||||
let statesList: Record<string, string> = {};
|
||||
|
||||
let showHolidaysList = false; // State to toggle the visibility of the holidays list
|
||||
let showHolidaysList: boolean = false;
|
||||
|
||||
$: selectedCountryCode = Object.keys(countriesList).find(code => countriesList[code] === selectedCountry);
|
||||
$: selectedCountryCode = Object.keys(countriesList).find(code => countriesList[code] === selectedCountry) || '';
|
||||
|
||||
$: if (selectedCountryCode || selectedStateCode || daysOff || year) {
|
||||
updateHolidays();
|
||||
}
|
||||
|
||||
$: if (daysOff) {
|
||||
localStorage.setItem('daysOff', daysOff);
|
||||
localStorage.setItem('daysOff', daysOff.toString());
|
||||
}
|
||||
|
||||
$: if (year) {
|
||||
localStorage.setItem('year', year);
|
||||
localStorage.setItem('year', year.toString());
|
||||
}
|
||||
|
||||
function updateStatesList(countryCode) {
|
||||
function updateStatesList(countryCode: string) {
|
||||
const hd = new Holidays(countryCode);
|
||||
statesList = hd.getStates(countryCode) || [];
|
||||
statesList = hd.getStates(countryCode) || {};
|
||||
}
|
||||
|
||||
function handleStateChange(event) {
|
||||
const stateName = event.target.value;
|
||||
selectedStateCode = Object.keys(statesList).find(code => statesList[code] === stateName);
|
||||
function handleStateChange(event: Event) {
|
||||
const target = event.target as HTMLInputElement;
|
||||
const stateName = target.value;
|
||||
selectedStateCode = Object.keys(statesList).find(code => statesList[code] === stateName) || '';
|
||||
selectedState = stateName;
|
||||
localStorage.setItem('selectedState', selectedState);
|
||||
localStorage.setItem('selectedStateCode', selectedStateCode);
|
||||
@@ -66,11 +66,10 @@
|
||||
inject();
|
||||
injectSpeedInsights();
|
||||
|
||||
// Always fetch the real country and PTO data
|
||||
fetchCountryCode().then(() => {
|
||||
defaultYear = new Date().getFullYear();
|
||||
defaultCountry = selectedCountry;
|
||||
defaultDaysOff = ptoData[selectedCountryCode];
|
||||
defaultDaysOff = ptoData[selectedCountryCode] || 0;
|
||||
|
||||
const storedYear = localStorage.getItem('year');
|
||||
const storedCountry = localStorage.getItem('selectedCountry');
|
||||
@@ -104,8 +103,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
function handleCountryChange(event) {
|
||||
const fullValue = event.target.value;
|
||||
function handleCountryChange(event: Event) {
|
||||
const target = event.target as HTMLInputElement;
|
||||
const fullValue = target.value;
|
||||
if (selectedCountryCode) {
|
||||
daysOff = ptoData[selectedCountryCode] || 0;
|
||||
selectedState = ''; // Reset state
|
||||
@@ -114,7 +114,7 @@
|
||||
localStorage.setItem('selectedCountry', selectedCountry);
|
||||
localStorage.setItem('selectedState', selectedState);
|
||||
localStorage.setItem('selectedStateCode', selectedStateCode);
|
||||
localStorage.setItem('daysOff', daysOff);
|
||||
localStorage.setItem('daysOff', daysOff.toString());
|
||||
}
|
||||
}
|
||||
|
||||
@@ -124,9 +124,11 @@
|
||||
let allHolidays = getHolidaysForYear(selectedCountryCode, year, selectedStateCode);
|
||||
holidays = allHolidays.map(holiday => ({
|
||||
...holiday,
|
||||
date: new Date(holiday.date),
|
||||
hidden: isHolidayHidden(holiday)
|
||||
}));
|
||||
const visibleHolidays = holidays.filter(h => !h.hidden);
|
||||
const visibleHolidays = holidays
|
||||
.filter(h => !h.hidden);
|
||||
optimizedDaysOff = optimizeDaysOff(visibleHolidays, year, daysOff);
|
||||
consecutiveDaysOff = calculateConsecutiveDaysOff(visibleHolidays, optimizedDaysOff, year);
|
||||
} else {
|
||||
@@ -142,14 +144,14 @@
|
||||
selectedState = '';
|
||||
selectedStateCode = '';
|
||||
daysOff = defaultDaysOff;
|
||||
localStorage.setItem('year', year);
|
||||
localStorage.setItem('year', year.toString());
|
||||
localStorage.setItem('selectedCountry', selectedCountry);
|
||||
localStorage.setItem('selectedState', selectedState);
|
||||
localStorage.setItem('selectedStateCode', selectedStateCode);
|
||||
localStorage.setItem('daysOff', daysOff);
|
||||
localStorage.setItem('daysOff', daysOff.toString());
|
||||
}
|
||||
|
||||
function handleKeyDown(event) {
|
||||
function handleKeyDown(event: KeyboardEvent) {
|
||||
switch (event.key) {
|
||||
case 'ArrowRight':
|
||||
event.preventDefault();
|
||||
@@ -176,8 +178,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
function adjustInputWidth(inputElement, value) {
|
||||
if (typeof window !== 'undefined' && inputElement) { // Ensure this runs only in the browser
|
||||
function adjustInputWidth(inputElement: HTMLInputElement | null, value: string) {
|
||||
if (typeof window !== 'undefined' && inputElement) {
|
||||
const tempSpan = document.createElement('span');
|
||||
tempSpan.style.visibility = 'hidden';
|
||||
tempSpan.style.position = 'absolute';
|
||||
@@ -189,15 +191,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Reactive statements to adjust input width when values change
|
||||
$: if (countriesInput) adjustInputWidth(countriesInput, selectedCountry);
|
||||
$: if (statesInput) adjustInputWidth(statesInput, selectedState);
|
||||
|
||||
function getFlagEmoji(countryCode) {
|
||||
if (!countryCode) return ''; // Return an empty string if countryCode is not available
|
||||
function getFlagEmoji(countryCode: string) {
|
||||
if (!countryCode) return '';
|
||||
return countryCode
|
||||
.toUpperCase()
|
||||
.replace(/./g, char => String.fromCodePoint(127397 + char.charCodeAt()));
|
||||
.replace(/./g, char => String.fromCodePoint(127397 + char.charCodeAt(0)));
|
||||
}
|
||||
|
||||
function toggleHowItWorks() {
|
||||
@@ -210,48 +211,39 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Function to toggle the visibility of a holiday
|
||||
function toggleHolidayVisibility(holiday) {
|
||||
const countryCode = Object.keys(countriesList).find(code => countriesList[code] === selectedCountry);
|
||||
if (!countryCode) return;
|
||||
function toggleHolidayVisibility(holiday: { date: Date; name: string; hidden?: boolean }) {
|
||||
if (!selectedCountryCode) return;
|
||||
|
||||
const storageKey = `hiddenHolidays_${countryCode}`;
|
||||
let hiddenHolidays = JSON.parse(localStorage.getItem(storageKey)) || {};
|
||||
const storageKey = `hiddenHolidays_${selectedCountryCode}`;
|
||||
let hiddenHolidays = JSON.parse(localStorage.getItem(storageKey) || '{}');
|
||||
|
||||
// Toggle the hidden state of the holiday
|
||||
hiddenHolidays[holiday.date] = !hiddenHolidays[holiday.date];
|
||||
hiddenHolidays[holiday.date.toString()] = !hiddenHolidays[holiday.date.toString()];
|
||||
localStorage.setItem(storageKey, JSON.stringify(hiddenHolidays));
|
||||
|
||||
// Update the holidays list to trigger reactivity
|
||||
holidays = holidays.map(h => {
|
||||
if (h.date === holiday.date) {
|
||||
return { ...h, hidden: hiddenHolidays[h.date] };
|
||||
return { ...h, hidden: hiddenHolidays[h.date.toString()] };
|
||||
}
|
||||
return h;
|
||||
});
|
||||
|
||||
// Recalculate holidays to ensure hidden ones are excluded
|
||||
updateHolidays();
|
||||
}
|
||||
|
||||
// Function to check if a holiday is hidden
|
||||
function isHolidayHidden(holiday) {
|
||||
const countryCode = Object.keys(countriesList).find(code => countriesList[code] === selectedCountry);
|
||||
if (!countryCode) return false;
|
||||
function isHolidayHidden(holiday: { date: Date; name: string; hidden?: boolean }) {
|
||||
if (!selectedCountryCode) return false;
|
||||
|
||||
const storageKey = `hiddenHolidays_${countryCode}`;
|
||||
const hiddenHolidays = JSON.parse(localStorage.getItem(storageKey)) || {};
|
||||
const storageKey = `hiddenHolidays_${selectedCountryCode}`;
|
||||
const hiddenHolidays = JSON.parse(localStorage.getItem(storageKey) || '{}');
|
||||
|
||||
return hiddenHolidays[holiday.date] || false;
|
||||
return hiddenHolidays[holiday.date.toString()] || false;
|
||||
}
|
||||
|
||||
// Function to format the date
|
||||
function formatDate(dateString) {
|
||||
const options = { day: '2-digit', month: 'short', year: 'numeric' };
|
||||
return new Date(dateString).toLocaleDateString('en-GB', options);
|
||||
function formatDate(date: Date) {
|
||||
const options: Intl.DateTimeFormatOptions = { day: '2-digit', month: 'short', year: 'numeric' };
|
||||
return new Date(date).toLocaleDateString('en-GB', options);
|
||||
}
|
||||
|
||||
// Reactive statement to calculate the number of visible holidays
|
||||
$: visibleHolidaysCount = holidays.filter(h => !h.hidden).length;
|
||||
</script>
|
||||
|
||||
@@ -321,7 +313,7 @@
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.calendar-grid {
|
||||
grid-template-columns: repeat(2, 1fr); /* Allow 2 columns on smaller screens */
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
@@ -400,23 +392,23 @@
|
||||
|
||||
button {
|
||||
background-color: #333;
|
||||
border-left: 4px solid #111; /* Lighter border on the left */
|
||||
border-top: 4px solid #111; /* Lighter border on the top */
|
||||
border-right: 4px solid #555; /* Darker border on the right */
|
||||
border-bottom: 4px solid #555; /* Darker border on the bottom */
|
||||
border-left: 4px solid #111;
|
||||
border-top: 4px solid #111;
|
||||
border-right: 4px solid #555;
|
||||
border-bottom: 4px solid #555;
|
||||
color: #fff;
|
||||
font-size: 0.8em; /* Smaller font size */
|
||||
font-size: 0.8em;
|
||||
cursor: pointer;
|
||||
padding: 3px; /* Reduced padding */
|
||||
margin: 0 3px; /* Reduced margin */
|
||||
border-radius: 4px; /* Slightly less rounded edges */
|
||||
padding: 3px;
|
||||
margin: 0 3px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
transition: transform 0.1s;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px; /* Smaller width */
|
||||
height: 30px; /* Smaller height */
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@@ -443,18 +435,6 @@
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.day {
|
||||
aspect-ratio: 1;
|
||||
text-align: center;
|
||||
font-size: 0.6em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ddd;
|
||||
background-color: #222;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.how-it-works {
|
||||
margin: 20px auto;
|
||||
padding: 25px;
|
||||
@@ -482,10 +462,22 @@
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
transition: color 0.3s;
|
||||
display: block;
|
||||
width: auto;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.toggle-text:hover {
|
||||
color: #61dafb;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.toggle-text:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.reset-link {
|
||||
@@ -579,7 +571,7 @@
|
||||
<p>
|
||||
In
|
||||
<strong>
|
||||
{getFlagEmoji(Object.keys(countriesList).find(code => countriesList[code] === selectedCountry))}
|
||||
{getFlagEmoji(selectedCountryCode)}
|
||||
{#if selectedState}
|
||||
{selectedState},
|
||||
{/if}
|
||||
@@ -594,9 +586,13 @@
|
||||
<div class="content-box">
|
||||
<p>
|
||||
I live in
|
||||
<span class="flag" style="vertical-align: middle;">{getFlagEmoji(Object.keys(countriesList).find(code => countriesList[code] === selectedCountry))}</span>
|
||||
<span class="flag" style="vertical-align: middle;">{getFlagEmoji(selectedCountryCode)}</span>
|
||||
{#if Object.keys(statesList).length > 0}
|
||||
<input bind:this={statesInput} list="states" class="editable-input bold" bind:value={selectedState} on:input={(e) => { handleStateChange(e); }} on:focus={() => { statesInput.value = ''; }} placeholder="State" aria-label="State" />
|
||||
<input bind:this={statesInput} list="states" class="editable-input bold" bind:value={selectedState}
|
||||
on:input={(e) => handleStateChange(e)}
|
||||
on:focus={(e) => { (e.target as HTMLInputElement).value = ''; }}
|
||||
placeholder="State"
|
||||
aria-label="State" />
|
||||
<datalist id="states">
|
||||
{#each Object.entries(statesList) as [code, name]}
|
||||
<option value={name}>{name}</option>
|
||||
@@ -604,7 +600,11 @@
|
||||
</datalist>
|
||||
in
|
||||
{/if}
|
||||
<input bind:this={countriesInput} list="countries" class="editable-input bold" bind:value={selectedCountry} placeholder={placeholder} on:input={(e) => { handleCountryChange(e); }} on:focus={() => { countriesInput.value = ''; }} aria-label="Select country" />
|
||||
<input bind:this={countriesInput} list="countries" class="editable-input bold" bind:value={selectedCountry}
|
||||
on:input={(e) => handleCountryChange(e)}
|
||||
on:focus={(e) => { (e.target as HTMLInputElement).value = ''; }}
|
||||
placeholder="Country"
|
||||
aria-label="Select country" />
|
||||
and have
|
||||
<span class="arrow-controls">
|
||||
<button on:click={() => { if (daysOff > 0) { daysOff--; updateHolidays(); } }} aria-label="Decrease days off">▼</button>
|
||||
@@ -682,15 +682,15 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle-text" on:click={toggleHowItWorks}>
|
||||
<button type="button" class="toggle-text" on:click={toggleHowItWorks}>
|
||||
{showHowItWorks ? 'Hide Details' : 'How does this work?'}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{#if showHowItWorks}
|
||||
<div id="how-it-works" class="content-box how-it-works">
|
||||
<h3>How does this work?</h3>
|
||||
<p>
|
||||
This tool detects your country from your IP, uses a default number of government-mandated days off from <a href="https://en.wikipedia.org/wiki/List_of_minimum_annual_leave_by_country" target="_blank" rel="noopener noreferrer">Wikipedia</a>, and a <a href={`https://github.com/commenthol/date-holidays/blob/master/data/countries/${Object.keys(countriesList).find(code => countriesList[code] === selectedCountry)}.yaml`} target="_blank" rel="noopener noreferrer">list of holidays</a> for {selectedCountry}.
|
||||
This tool detects your country from your IP, uses a default number of government-mandated days off from <a href="https://en.wikipedia.org/wiki/List_of_minimum_annual_leave_by_country" target="_blank" rel="noopener noreferrer">Wikipedia</a>, and a <a href={`https://github.com/commenthol/date-holidays/blob/master/data/countries/${selectedCountryCode}.yaml`} target="_blank" rel="noopener noreferrer">list of holidays</a> for {selectedCountry}.
|
||||
</p>
|
||||
<p>
|
||||
The algorithm prioritizes filling the shortest gaps first. It optimizes for spreading your holidays throughout the year to create the most number of consecutive vacation periods.
|
||||
|
||||
Reference in New Issue
Block a user