maciejpedzich/spotifyplaylistarchive.com
1
0
Fork 0
mirror of https://github.com/maciejpedzich/spotifyplaylistarchive.com.git synced 2024-09-19 18:16:19 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Ensure saving view states for individual playlists

Browse Source
This commit is contained in:
Maciej Pędzich 2022-07-21 11:12:53 +02:00
parent 4dc652ca18
commit 764f968b2f
2 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
components/snapshot/Calendar.vue
View File

@ -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);

4
components/stats/FollowerGrowth.vue
View File

@ -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"