Add download control to Calendar view.

Will download the event log for the currently selected calendar
period (day, week, month, …) in a choice of formats.
This commit is contained in:
D. Berge
2023-10-29 11:53:24 +01:00
parent 54fe18035f
commit 3e33f10ea5

View File

@@ -37,7 +37,65 @@
</v-btn>
<v-toolbar-title v-if="$refs.calendar">
{{ $refs.calendar.title }}
<span
class="secondary--text"
style="font-size:small;"
>
({{downloadableItemCount}} log entries)
</span>
</v-toolbar-title>
<v-menu class="ml-5" v-if="calendarDates">
<template v-slot:activator="{on, attrs}">
<v-btn
class="ml-5"
small
:title="`Download events for the period ${calendarDates.start} ${calendarDates.end}`"
v-on="on"
v-bind="attrs"
>
<span class="d-none d-lg-inline">Download as</span>
<v-icon right small>mdi-cloud-download</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item
:href="downloadUrl({mime: 'application/vnd.seis+json', filename: `event-log-${calendarDates.start}-${calendarDates.end}-multiseis.json`})"
title="Download as a Multiseis-compatible Seis+JSON file."
>Seis+JSON</v-list-item>
<!-- Not yet supported
<v-list-item
:href="downloadUrl({mime: 'application/geo+json'})"
title="Download as a QGIS-compatible GeoJSON file"
>GeoJSON</v-list-item>
-->
<v-list-item
:href="downloadUrl({mime: 'application/json', filename: `event-log-${calendarDates.start}-${calendarDates.end}.json`})"
title="Download as a generic JSON file"
>JSON</v-list-item>
<v-list-item
:href="downloadUrl({mime: 'application/yaml', filename: `event-log-${calendarDates.start}-${calendarDates.end}.yaml`})"
title="Download as a YAML file"
>YAML</v-list-item>
<v-list-item
:href="downloadUrl({mime: 'text/csv', sortBy: 'tstamp', sortDesc: false, filename: `event-log-${calendarDates.start}-${calendarDates.end}.csv`})"
title="Download as Comma Separated Values file"
>CSV</v-list-item>
<!-- Not yet supportd
<v-list-item
:href="downloadUrl({mime: 'text/html'})"
title="Download as an HTML formatted file"
>HTML</v-list-item>
<v-list-item
:href="downloadUrl({mime: 'application/pdf'})"
title="Download as a Portable Document File"
>PDF</v-list-item>
-->
</v-list>
</v-menu>
<v-spacer></v-spacer>
<v-btn v-if="categoriesAvailable"
small
@@ -169,6 +227,23 @@ export default {
return [...new Set(this.visibleItems.map(i => i.category ?? "General"))];
},
calendarDates () {
// The this.items.length reference is only needed to force recalculation
// of this computed property, as this.$refs is not reactive.
// https://github.com/vuejs/vue/issues/3842
if (this.items.length && this.$refs.calendar) {
return {
start: this.$refs.calendar.renderProps.start.date,
end: this.$refs.calendar.renderProps.end.date
}
}
},
downloadableItemCount () {
return this.events.filter(i => i.tstamp.substr(0, 10) >= this.calendarDates?.start &&
i.tstamp.substr(0, 10) <= this.calendarDates?.end).length;
},
...mapGetters(['sequencesLoading', 'sequences', 'events'])
},
@@ -298,6 +373,18 @@ export default {
};
},
downloadUrl (qry) {
if (this.calendarDates) {
const url = new URL(`/api/project/${this.$route.params.project}/event`, document.location.href);
for (const key in qry) {
url.searchParams.set(key, qry[key]);
}
url.searchParams.set("date0", this.calendarDates.start);
url.searchParams.set("date1", this.calendarDates.end);
return url.toString();
}
},
...mapActions(["api"])