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

Fix localstorage to set on first load

Browse Source
This commit is contained in:
Zachary
2024-11-11 23:28:35 +01:00
parent 1b5ba69b9a
commit 924cf09497
3 changed files with 127 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/routes/+page.svelte
View File

@@ -1,5 +1,6 @@
<script>
import { onMount } from 'svelte';
import { injectSpeedInsights } from '@vercel/speed-insights';
import countries from 'i18n-iso-countries';
import enLocale from 'i18n-iso-countries/langs/en.json';
import CalendarMonth from '../lib/CalendarMonth.svelte';
@@ -20,34 +21,53 @@
let inputElement;
let showHowItWorks = false;
// Load settings from local storage
onMount(() => {
if (typeof window !== 'undefined') { // Check if running in the browser
const storedYear = localStorage.getItem('year');
const storedCountry = localStorage.getItem('selectedCountry');
const storedDaysOff = localStorage.getItem('daysOff');
injectSpeedInsights();
if (storedYear) year = parseInt(storedYear);
if (storedCountry) selectedCountry = storedCountry;
if (storedDaysOff) daysOff = parseInt(storedDaysOff);
const storedYear = localStorage.getItem('year');
const storedCountry = localStorage.getItem('selectedCountry');
const storedDaysOff = localStorage.getItem('daysOff');
// Ensure holidays are updated after loading settings
updateHolidays();
year = storedYear ? parseInt(storedYear, 10) : new Date().getFullYear();
selectedCountry = storedCountry || '';
daysOff = storedDaysOff ? parseInt(storedDaysOff, 10) : 0;
fetchCountryCode();
adjustInputWidth(inputElement);
inputElement.addEventListener('input', () => {
adjustInputWidth(inputElement);
const countryCode = Object.keys(countriesList).find(code => countriesList[code] === inputElement.value);
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);
});
inputElement.addEventListener('focus', () => {
inputElement.value = '';
adjustInputWidth(inputElement);
});
window.addEventListener('keydown', handleKeyDown);
}
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);
});
async function fetchCountryCode() {
try {
const response = await fetch('/cdn-cgi/trace');
const text = await response.text();
const countryCodeMatch = text.match(/cf-ipcountry=(\w+)/);
const countryCode = countryCodeMatch ? countryCodeMatch[1] : 'BE';
selectedCountry = countriesList[countryCode] || '';
daysOff = ptoData[countryCode] || 0;
updateHolidays();
} catch (error) {
console.error('Error fetching country code:', error);
}
}
function handleCountryChange(event) {
const fullValue = event.target.value;
const countryCode = Object.keys(countriesList).find(code => countriesList[code] === fullValue);
@@ -55,10 +75,8 @@
selectedCountry = fullValue;
daysOff = ptoData[countryCode] || 0;
updateHolidays();
if (typeof window !== 'undefined') { // Check if running in the browser
localStorage.setItem('selectedCountry', selectedCountry); // Save to local storage
localStorage.setItem('daysOff', daysOff); // Save to local storage
}
localStorage.setItem('selectedCountry', selectedCountry);
localStorage.setItem('daysOff', daysOff);
}
adjustInputWidth(event.target);
}
@@ -74,10 +92,8 @@
optimizedDaysOff = [];
consecutiveDaysOff = [];
}
if (typeof window !== 'undefined') { // Check if running in the browser
localStorage.setItem('year', year); // Save to local storage
localStorage.setItem('daysOff', daysOff); // Save to local storage
}
localStorage.setItem('year', year);
localStorage.setItem('daysOff', daysOff);
}
function handleKeyDown(event) {
@@ -107,20 +123,6 @@
}
}
async function fetchCountryCode() {
try {
const response = await fetch('/cdn-cgi/trace');
const text = await response.text();
const countryCodeMatch = text.match(/cf-ipcountry=(\w+)/);
const countryCode = countryCodeMatch ? countryCodeMatch[1] : 'BE';
selectedCountry = countriesList[countryCode] || '';
daysOff = ptoData[countryCode] || 0;
updateHolidays();
} catch (error) {
console.error('Error fetching country code:', error);
}
}
function adjustInputWidth(inputElement) {
const tempSpan = document.createElement('span');
tempSpan.style.visibility = 'hidden';
@@ -148,8 +150,6 @@
}
}
}
updateHolidays();
</script>
<style>