k4rli/stretch-my-time-off
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix most errors and warnings with GPT, switch to .ts etc

Browse Source
This commit is contained in:
Zachary
2024-11-13 22:23:07 +01:00
parent 1b862710d7
commit f22af52e9b
4 changed files with 141 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/lib/CalendarMonth.svelte
View File

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

58
src/lib/holidayUtils.js → src/lib/holidayUtils.ts
View File

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

2
src/lib/ptoData.js → src/lib/ptoData.ts
View File

@@ -1,4 +1,4 @@
export const ptoData = {
export const ptoData: Record<string, number> = {
// Afghanistan
AF: 20, // 20 days recreational leave, 15 paid public holidays

198
src/routes/+page.svelte
View File

@@ -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.