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 playlistId = route.params.playlistId;
|
||||||
|
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
const minDate = new Date('2021-12-01');
|
const queryMonth = useState(`queryMonth${playlistId}`, () => now.getMonth());
|
||||||
const queryMonth = ref(now.getMonth());
|
const queryYear = useState(`queryYear${playlistId}`, () => now.getFullYear());
|
||||||
const queryYear = ref(now.getFullYear());
|
|
||||||
const displayDate = reactive({ month: queryMonth, year: queryYear });
|
|
||||||
|
|
||||||
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(() =>
|
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(() =>
|
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(() => {
|
const queryString = computed(() => {
|
||||||
@ -97,14 +102,16 @@ const isQueryMonth = (date: Date) => date.getMonth() === queryMonth.value;
|
|||||||
Something went wrong while fetching archive entries
|
Something went wrong while fetching archive entries
|
||||||
</p>
|
</p>
|
||||||
<Datepicker
|
<Datepicker
|
||||||
v-show="!loadingCalendarEntries"
|
v-show="!(loadingCalendarEntries || calendarEntriesLoadError)"
|
||||||
v-model="displayDate"
|
v-model="displayDate"
|
||||||
|
class="md:p-0 p-2"
|
||||||
:min-date="minDate"
|
:min-date="minDate"
|
||||||
:max-date="now"
|
:max-date="now"
|
||||||
:allowed-dates="allowedDates"
|
:allowed-dates="allowedDates"
|
||||||
:enable-time-picker="false"
|
:enable-time-picker="false"
|
||||||
:month-change-on-arrows="false"
|
:month-change-on-arrows="false"
|
||||||
:month-change-on-scroll="false"
|
:month-change-on-scroll="false"
|
||||||
|
no-swipe
|
||||||
no-today
|
no-today
|
||||||
prevent-min-max-navigation
|
prevent-min-max-navigation
|
||||||
inline
|
inline
|
||||||
@ -143,6 +150,10 @@ const isQueryMonth = (date: Date) => date.getMonth() === queryMonth.value;
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:deep(div.dp__active_date) {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
:deep(div.dp__overlay_cell_active) {
|
:deep(div.dp__overlay_cell_active) {
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
color: var(--surface-0);
|
color: var(--surface-0);
|
||||||
|
@ -11,7 +11,7 @@ const route = useRoute();
|
|||||||
const playlistId = route.params.playlistId as string;
|
const playlistId = route.params.playlistId as string;
|
||||||
|
|
||||||
const chartPeriodOptions = ['Last week', 'Last month'];
|
const chartPeriodOptions = ['Last week', 'Last month'];
|
||||||
const chartPeriod = useState('chartPeriod', () => 'Last week');
|
const chartPeriod = useState(`chartPeriod${playlistId}`, () => 'Last week');
|
||||||
|
|
||||||
const sinceDate = computed(() => {
|
const sinceDate = computed(() => {
|
||||||
const baseDate = new Date();
|
const baseDate = new Date();
|
||||||
@ -100,7 +100,7 @@ watch(chartPeriod, async () => await refresh());
|
|||||||
</p>
|
</p>
|
||||||
<Chart
|
<Chart
|
||||||
v-else-if="data"
|
v-else-if="data"
|
||||||
class="w-7 h-4 mt-3"
|
class="md:w-7 w-full h-4 mt-3"
|
||||||
type="line"
|
type="line"
|
||||||
:options="chartOptions"
|
:options="chartOptions"
|
||||||
:data="data"
|
:data="data"
|
||||||
|
Loading…
Reference in New Issue
Block a user