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.

lib/www/client/source/src/views/Calendar.vue

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