mirror of
https://github.com/maciejpedzich/spotifyplaylistarchive.com.git
synced 2024-09-19 18:16:19 +02:00
Ensure saving view states for individual playlists
This commit is contained in:
parent
4dc652ca18
commit
764f968b2f
@ -17,17 +17,22 @@ const route = useRoute();
|
||||
const playlistId = route.params.playlistId;
|
||||
|
||||
const now = new Date();
|
||||
const minDate = new Date('2021-12-01');
|
||||
const queryMonth = ref(now.getMonth());
|
||||
const queryYear = ref(now.getFullYear());
|
||||
const displayDate = reactive({ month: queryMonth, year: queryYear });
|
||||
const queryMonth = useState(`queryMonth${playlistId}`, () => now.getMonth());
|
||||
const queryYear = useState(`queryYear${playlistId}`, () => now.getFullYear());
|
||||
|
||||
const hoursOffset = -(now.getTimezoneOffset() / 60);
|
||||
const displayDate = new Date(queryYear.value, queryMonth.value);
|
||||
const minDate = new Date('2021-12-01');
|
||||
|
||||
const hoursOffset = -(displayDate.getTimezoneOffset() / 60);
|
||||
const sinceDateParam = computed(() =>
|
||||
new Date(queryYear.value, queryMonth.value, 1, hoursOffset).toISOString()
|
||||
new Date(queryYear.value, queryMonth.value, 1, hoursOffset)
|
||||
.toISOString()
|
||||
.substring(0, 10)
|
||||
);
|
||||
const untilDateParam = computed(() =>
|
||||
new Date(queryYear.value, queryMonth.value + 1, 1, hoursOffset).toISOString()
|
||||
new Date(queryYear.value, queryMonth.value + 1, 1, hoursOffset)
|
||||
.toISOString()
|
||||
.substring(0, 10)
|
||||
);
|
||||
|
||||
const queryString = computed(() => {
|
||||
@ -97,14 +102,16 @@ const isQueryMonth = (date: Date) => date.getMonth() === queryMonth.value;
|
||||
Something went wrong while fetching archive entries
|
||||
</p>
|
||||
<Datepicker
|
||||
v-show="!loadingCalendarEntries"
|
||||
v-show="!(loadingCalendarEntries || calendarEntriesLoadError)"
|
||||
v-model="displayDate"
|
||||
class="md:p-0 p-2"
|
||||
:min-date="minDate"
|
||||
:max-date="now"
|
||||
:allowed-dates="allowedDates"
|
||||
:enable-time-picker="false"
|
||||
:month-change-on-arrows="false"
|
||||
:month-change-on-scroll="false"
|
||||
no-swipe
|
||||
no-today
|
||||
prevent-min-max-navigation
|
||||
inline
|
||||
@ -143,6 +150,10 @@ const isQueryMonth = (date: Date) => date.getMonth() === queryMonth.value;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(div.dp__active_date) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
:deep(div.dp__overlay_cell_active) {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--surface-0);
|
||||
|
@ -11,7 +11,7 @@ const route = useRoute();
|
||||
const playlistId = route.params.playlistId as string;
|
||||
|
||||
const chartPeriodOptions = ['Last week', 'Last month'];
|
||||
const chartPeriod = useState('chartPeriod', () => 'Last week');
|
||||
const chartPeriod = useState(`chartPeriod${playlistId}`, () => 'Last week');
|
||||
|
||||
const sinceDate = computed(() => {
|
||||
const baseDate = new Date();
|
||||
@ -100,7 +100,7 @@ watch(chartPeriod, async () => await refresh());
|
||||
</p>
|
||||
<Chart
|
||||
v-else-if="data"
|
||||
class="w-7 h-4 mt-3"
|
||||
class="md:w-7 w-full h-4 mt-3"
|
||||
type="line"
|
||||
:options="chartOptions"
|
||||
:data="data"
|
||||
|
Loading…
Reference in New Issue
Block a user