diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index f1ec01b..ad598c6 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -21,37 +21,40 @@ let inputElement; let showHowItWorks = false; + // Default settings + let defaultYear = new Date().getFullYear(); + let defaultCountry = ''; + let defaultDaysOff = 0; + onMount(() => { injectSpeedInsights(); - const storedYear = localStorage.getItem('year'); - const storedCountry = localStorage.getItem('selectedCountry'); - const storedDaysOff = localStorage.getItem('daysOff'); + // Always fetch the real country and PTO data + fetchCountryCode().then(() => { + defaultYear = new Date().getFullYear(); + defaultCountry = selectedCountry; + defaultDaysOff = daysOff; - year = storedYear ? parseInt(storedYear, 10) : new Date().getFullYear(); - selectedCountry = storedCountry || ''; - daysOff = storedDaysOff ? parseInt(storedDaysOff, 10) : 0; + const storedYear = localStorage.getItem('year'); + const storedCountry = localStorage.getItem('selectedCountry'); + const storedDaysOff = localStorage.getItem('daysOff'); - if (!storedYear || !storedCountry || !storedDaysOff) { - // First load: detect country and save initial settings - fetchCountryCode().then(() => { - localStorage.setItem('year', year); - localStorage.setItem('selectedCountry', selectedCountry); - localStorage.setItem('daysOff', daysOff); + year = storedYear ? parseInt(storedYear, 10) : defaultYear; + selectedCountry = storedCountry || defaultCountry; + daysOff = storedDaysOff ? parseInt(storedDaysOff, 10) : defaultDaysOff; + + updateHolidays(); + adjustInputWidth(inputElement); + inputElement.addEventListener('input', () => { + adjustInputWidth(inputElement); + const countryCode = Object.keys(countriesList).find(code => countriesList[code] === inputElement.value); }); - } - - updateHolidays(); - adjustInputWidth(inputElement); - inputElement.addEventListener('input', () => { - adjustInputWidth(inputElement); - const countryCode = Object.keys(countriesList).find(code => countriesList[code] === inputElement.value); + inputElement.addEventListener('focus', () => { + inputElement.value = ''; + adjustInputWidth(inputElement); + }); + window.addEventListener('keydown', handleKeyDown); }); - inputElement.addEventListener('focus', () => { - inputElement.value = ''; - adjustInputWidth(inputElement); - }); - window.addEventListener('keydown', handleKeyDown); }); async function fetchCountryCode() { @@ -62,7 +65,6 @@ const countryCode = countryCodeMatch ? countryCodeMatch[1] : 'BE'; selectedCountry = countriesList[countryCode] || ''; daysOff = ptoData[countryCode] || 0; - updateHolidays(); } catch (error) { console.error('Error fetching country code:', error); } @@ -96,6 +98,16 @@ localStorage.setItem('daysOff', daysOff); } + function resetToDefault() { + year = defaultYear; + selectedCountry = defaultCountry; + daysOff = defaultDaysOff; + localStorage.setItem('year', year); + localStorage.setItem('selectedCountry', selectedCountry); + localStorage.setItem('daysOff', daysOff); + updateHolidays(); + } + function handleKeyDown(event) { switch (event.key) { case 'ArrowRight': @@ -286,7 +298,8 @@ } a:hover { - text-decoration: underline; + color: #fff; + text-decoration: none; } .arrow-controls { @@ -384,14 +397,11 @@ color: #61dafb; } - .how-link { - color: #61dafb; - cursor: pointer; - text-decoration: underline; - } - - .how-link:hover { - color: #fff; + .reset-link { + display: block; + margin-top: 10px; + text-align: center; + font-size: 0.9em; } @@ -401,7 +411,7 @@

In {selectedCountry}, there are {holidays.length} public holidays in {year}.
- Let's stretch your time off from {daysOff} days to {consecutiveDaysOff.reduce((total, group) => total + group.totalDays, 0)} days (how?) + Let's stretch your time off from {daysOff} days to {consecutiveDaysOff.reduce((total, group) => total + group.totalDays, 0)} days (how?)

@@ -423,6 +433,9 @@

+ {#if year !== defaultYear || selectedCountry !== defaultCountry || daysOff !== defaultDaysOff} + Reset to default + {/if} {#each Object.entries(countriesList) as [code, name]}