319 lines
8.5 KiB
Vue
319 lines
8.5 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import BaseDialog from './BaseDialog.vue'
|
|
import { useCalendarStore } from '@/stores/CalendarStore'
|
|
import WeekdaySelector from './WeekdaySelector.vue'
|
|
|
|
const show = ref(false)
|
|
const calendarStore = useCalendarStore()
|
|
|
|
// Reactive bindings to store
|
|
const firstDay = computed({
|
|
get: () => calendarStore.config.first_day,
|
|
set: (v) => (calendarStore.config.first_day = v),
|
|
})
|
|
const weekend = computed({
|
|
get: () => calendarStore.weekend,
|
|
set: (v) => (calendarStore.weekend = [...v]),
|
|
})
|
|
|
|
// Holiday settings - simplified
|
|
const holidayMode = computed({
|
|
get: () => {
|
|
if (!calendarStore.config.holidays.enabled) {
|
|
return 'none'
|
|
}
|
|
return calendarStore.config.holidays.country || 'auto'
|
|
},
|
|
set: (v) => {
|
|
if (v === 'none') {
|
|
calendarStore.config.holidays.enabled = false
|
|
calendarStore.config.holidays.country = null
|
|
calendarStore.config.holidays.state = null
|
|
} else if (v === 'auto') {
|
|
const detectedCountry = getDetectedCountryCode()
|
|
if (detectedCountry) {
|
|
calendarStore.config.holidays.enabled = true
|
|
calendarStore.config.holidays.country = 'auto'
|
|
calendarStore.config.holidays.state = null
|
|
calendarStore.initializeHolidays('auto', null, null)
|
|
} else {
|
|
calendarStore.config.holidays.enabled = false
|
|
calendarStore.config.holidays.country = null
|
|
calendarStore.config.holidays.state = null
|
|
}
|
|
} else {
|
|
calendarStore.config.holidays.enabled = true
|
|
calendarStore.config.holidays.country = v
|
|
calendarStore.config.holidays.state = null
|
|
calendarStore.initializeHolidays(v, null, null)
|
|
}
|
|
},
|
|
})
|
|
|
|
const holidayState = computed({
|
|
get: () => calendarStore.config.holidays.state,
|
|
set: (v) => {
|
|
calendarStore.config.holidays.state = v
|
|
const country =
|
|
calendarStore.config.holidays.country === 'auto'
|
|
? 'auto'
|
|
: calendarStore.config.holidays.country
|
|
calendarStore.initializeHolidays(country, v, calendarStore.config.holidays.region)
|
|
},
|
|
})
|
|
|
|
// Get detected country code
|
|
function getDetectedCountryCode() {
|
|
const locale = navigator.language || navigator.languages?.[0]
|
|
if (!locale) return null
|
|
|
|
const parts = locale.split('-')
|
|
if (parts.length < 2) return null
|
|
|
|
return parts[parts.length - 1].toUpperCase()
|
|
} // Get display name for any country code
|
|
function getCountryDisplayName(countryCode) {
|
|
if (!countryCode || countryCode.length !== 2) {
|
|
return countryCode
|
|
}
|
|
try {
|
|
const regionNames = new Intl.DisplayNames([navigator.language || 'en'], { type: 'region' })
|
|
return regionNames.of(countryCode) || countryCode
|
|
} catch {
|
|
return countryCode
|
|
}
|
|
}
|
|
|
|
// Get display name for auto option
|
|
const autoDisplayName = computed(() => {
|
|
const detectedCode = getDetectedCountryCode()
|
|
if (!detectedCode) return 'Auto'
|
|
return getCountryDisplayName(detectedCode)
|
|
})
|
|
|
|
// Get state/province name from state code
|
|
function getStateName(stateCode, countryCode) {
|
|
return stateCode
|
|
}
|
|
|
|
// Get available countries and states
|
|
const availableCountries = computed(() => {
|
|
try {
|
|
const countries = calendarStore.getAvailableCountries()
|
|
const countryArray = Array.isArray(countries) ? countries : ['US', 'GB', 'DE', 'FR', 'CA', 'AU']
|
|
|
|
return countryArray.sort((a, b) => {
|
|
const nameA = getCountryDisplayName(a)
|
|
const nameB = getCountryDisplayName(b)
|
|
return nameA.localeCompare(nameB, navigator.language || 'en')
|
|
})
|
|
} catch (error) {
|
|
console.warn('Failed to get available countries:', error)
|
|
return ['US', 'GB', 'DE', 'FR', 'CA', 'AU']
|
|
}
|
|
})
|
|
const availableStates = computed(() => {
|
|
try {
|
|
if (holidayMode.value === 'none') return []
|
|
let country = holidayMode.value
|
|
if (holidayMode.value === 'auto') {
|
|
country = getDetectedCountryCode()
|
|
if (!country) return []
|
|
}
|
|
const states = calendarStore.getAvailableStates(country)
|
|
return Array.isArray(states) ? states : []
|
|
} catch (error) {
|
|
console.warn('Failed to get available states:', error)
|
|
return []
|
|
}
|
|
})
|
|
|
|
function open() {
|
|
// Toggle behavior: if already open, close instead
|
|
show.value = !show.value
|
|
}
|
|
function close() {
|
|
show.value = false
|
|
}
|
|
function resetAll() {
|
|
if (confirm('Delete ALL events and reset settings? This cannot be undone.')) {
|
|
if (typeof calendarStore.$reset === 'function') {
|
|
calendarStore.$reset()
|
|
} else {
|
|
const now = new Date()
|
|
calendarStore.today = now.toISOString().slice(0, 10)
|
|
calendarStore.now = now.toISOString()
|
|
calendarStore.events = new Map()
|
|
calendarStore.weekend = [6, 0]
|
|
calendarStore.config.first_day = 1
|
|
}
|
|
close()
|
|
}
|
|
}
|
|
defineExpose({ open })
|
|
</script>
|
|
|
|
<template>
|
|
<BaseDialog
|
|
v-model="show"
|
|
title="Settings"
|
|
class="settings-modal"
|
|
:style="{ top: '4.5rem', right: '2rem', bottom: 'auto', left: 'auto', transform: 'none' }"
|
|
>
|
|
<div class="setting-group">
|
|
<label class="ec-field">
|
|
<span>First day of week</span>
|
|
<select v-model.number="firstDay">
|
|
<option :value="0">Sunday</option>
|
|
<option :value="1">Monday</option>
|
|
<option :value="2">Tuesday</option>
|
|
<option :value="3">Wednesday</option>
|
|
<option :value="4">Thursday</option>
|
|
<option :value="5">Friday</option>
|
|
<option :value="6">Saturday</option>
|
|
</select>
|
|
</label>
|
|
<div class="weekend-select ec-field">
|
|
<span>Weekend days</span>
|
|
<WeekdaySelector v-model="weekend" :first-day="firstDay" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-group">
|
|
<label class="ec-field">
|
|
<span>Holiday Region</span>
|
|
<div class="holiday-row">
|
|
<select v-model="holidayMode" class="country-select">
|
|
<option value="none">Do not show holidays</option>
|
|
<option v-if="getDetectedCountryCode()" value="auto">
|
|
{{ autoDisplayName }} (Auto)
|
|
</option>
|
|
<option v-for="country in availableCountries" :key="country" :value="country">
|
|
{{ getCountryDisplayName(country) }}
|
|
</option>
|
|
</select>
|
|
|
|
<select
|
|
v-if="holidayMode !== 'none' && availableStates.length > 0"
|
|
v-model="holidayState"
|
|
class="state-select"
|
|
>
|
|
<option value="">None</option>
|
|
<option v-for="state in availableStates" :key="state" :value="state">
|
|
{{ state }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<template #footer>
|
|
<div class="footer-row split">
|
|
<div class="left">
|
|
<button type="button" class="ec-btn delete-btn" @click="resetAll">Clear All Data</button>
|
|
</div>
|
|
<div class="right">
|
|
<button type="button" class="ec-btn close-btn" @click="close">Close</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</BaseDialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.setting-group {
|
|
display: grid;
|
|
gap: 1rem;
|
|
}
|
|
.setting-group h3 {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 1rem;
|
|
color: var(--strong);
|
|
}
|
|
.ec-field {
|
|
display: grid;
|
|
gap: 0.25rem;
|
|
}
|
|
.ec-field > span {
|
|
font-size: 0.75rem;
|
|
color: var(--muted);
|
|
}
|
|
.holiday-settings {
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
margin-left: 1rem;
|
|
padding-left: 1rem;
|
|
border-left: 2px solid var(--border-color);
|
|
}
|
|
select {
|
|
border: 1px solid var(--muted);
|
|
background: var(--panel-alt, transparent);
|
|
color: var(--ink);
|
|
padding: 0.4rem 0.5rem;
|
|
border-radius: 0.4rem;
|
|
}
|
|
|
|
.holiday-row {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.country-select {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.state-select {
|
|
flex: 0 0 auto;
|
|
min-width: 120px;
|
|
}
|
|
/* WeekdaySelector display tweaks */
|
|
.footer-row {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 0.5rem;
|
|
width: 100%;
|
|
}
|
|
.footer-row.split {
|
|
justify-content: space-between;
|
|
}
|
|
.footer-row.split .left,
|
|
.footer-row.split .right {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
.ec-btn {
|
|
border: 1px solid var(--muted);
|
|
background: transparent;
|
|
color: var(--ink);
|
|
padding: 0.5rem 0.8rem;
|
|
border-radius: 0.4rem;
|
|
cursor: pointer;
|
|
}
|
|
.ec-btn.close-btn {
|
|
background: var(--panel-alt);
|
|
border-color: var(--muted);
|
|
font-weight: 500;
|
|
}
|
|
.ec-btn.delete-btn {
|
|
background: hsl(0, 70%, 50%);
|
|
color: #fff;
|
|
border-color: transparent;
|
|
font-weight: 500;
|
|
}
|
|
.ec-btn.delete-btn:hover {
|
|
background: hsl(0, 70%, 45%);
|
|
}
|
|
/* Global override to ensure settings dialog appears near top by default */
|
|
.ec-modal.settings-modal {
|
|
top: 4.5rem !important;
|
|
right: 2rem !important;
|
|
bottom: auto !important;
|
|
left: auto !important;
|
|
transform: none !important;
|
|
}
|
|
</style>
|
|
<!-- settings dialog -->
|