Implement event logs component.

It can show:

 - all events (this could get slow);
 - a single sequence;
 - a set of sequences;
 - a single date;
 - a range between two dates.

It does not (yet) do pagination and filtering is local only.

lib/www/client/source/src/router/index.js

@@ -96,7 +96,12 @@ Vue.use(VueRouter)
       },
       {
         path: "log",
-        component: Log
+        component: Log,
+        children: [
+          { path: "sequence/:sequence", name: "logBySequence" },
+          { path: "date/:date0", name: "logByDate" },
+          { path: "date/:date0/:date1", name: "logByDates" }
+        ]
       },
       {
         path: "map",

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

@@ -1,13 +1,192 @@
 <template>
-  <div>
+  <v-container fluid>
-  Log
+    <v-data-table
-  </div>
+    :headers="headers"
+    :items="rows"
+    item-key="ts0"
+    sort-by="ts0"
+    :sort-desc="true"
+    :x-server-items-length="eventCount"
+    :x-options.sync="options"
+    :search="filter"
+    :loading="loading"
+    :fixed-header="true"
+    >
+
+      <template v-slot:top>
+        <v-toolbar flat>
+          <v-toolbar-title>
+            {{
+              $route.params.sequence
+                ? ($route.params.sequence.includes && $route.params.sequence.includes(";"))
+                  ? `Sequences ${$route.params.sequence.split(";").sort().join(", ")}`
+                  : `Sequence ${$route.params.sequence}`
+                : $route.params.date0
+                  ? $route.params.date1
+                    ? `Between ${$route.params.date0} and ${$route.params.date1}`
+                    : `On ${$route.params.date0}`
+                  : "All events"
+            }}
+          </v-toolbar-title>
+          <v-spacer></v-spacer>
+          <v-text-field
+            v-model="filter"
+            append-icon="mdi-magnify"
+            label="Search"
+            single-line
+            hide-details></v-text-field>
+      </v-toolbar>
+      </template>
+
+      <template v-slot:item.ts0="props">
+        <span style="white-space:nowrap;">
+          {{ props.value.replace(/(.{10})T(.{8}).{4}Z$/, "$1 $2") }}
+        </span>
+      </template>
+
+      <template v-slot:item.label="props">
+        <v-chip v-for="label in props.value"
+          small
+          :color="labels[label].colour"
+          :title="labels[label].description"
+          v-text="label"></v-chip>
+      </template>
+
+
+    </v-data-table>
+  </v-container>
 </template>
 
 <script>
+import { mapActions } from 'vuex';
 
 export default {
-  name: "Log"
+  name: "Log",
+
+  data () {
+    return {
+      headers: [
+        {
+          value: "ts0",
+          text: "Timestamp",
+          width: "20ex"
+        },
+        {
+          value: "sequence",
+          text: "Sequence",
+          align: "end",
+          width: "10ex"
+        },
+        {
+          value: "shot_number",
+          text: "Shotpoint",
+          align: "end",
+          width: "10ex"
+        },
+        {
+          value: "remarks",
+          text: "Text",
+          width: "100%"
+        },
+        {
+          value: "label",
+          text: "Labels"
+        },
+      ],
+      items: [],
+      labels: {},
+      options: {},
+      filter: "",
+      loading: false,
+      eventCount: null
+    }
+  },
+
+  computed: {
+    rows () {
+      const rows = {};
+      this.items.forEach(i => {
+        const key = i.ts0 || (i.sequence+"@"+i.shot_number);
+        if (!rows[key]) {
+          rows[key] = Object.assign({}, i);
+          rows[key].label = [ ];
+          rows[key].remarks = [ ];
+        }
+
+        const row = rows[key];
+
+        if (i.remarks) {
+          row.remarks.push(i.remarks);
+        }
+
+        if (i.label) {
+          row.label.push(i.label);
+        }
+
+      });
+      return Object.values(rows);
+    }
+  },
+
+  watch: {
+    options: {
+      handler () {
+        //this.getLines();
+      },
+      deep: true
+    }
+  },
+
+  methods: {
+
+    async getEventCount () {
+      //this.eventCount = await this.api([`/project/${this.$route.params.project}/event/?count`]);
+      this.eventCount = null;
+    },
+
+    async getEvents () {
+      this.loading = true;
+
+      const query = new URLSearchParams(this.options);
+      if (this.options.itemsPerPage < 0) {
+        query.delete("itemsPerPage");
+      }
+
+      if (this.$route.params.sequence) {
+        query.set("sequence", this.$route.params.sequence);
+      }
+
+      if (this.$route.params.date0) {
+        query.set("date0", this.$route.params.date0);
+      }
+
+      if (this.$route.params.date1) {
+        query.set("date1", this.$route.params.date1);
+      }
+
+      const url = `/project/${this.$route.params.project}/event?${query.toString()}`;
+
+      this.items = await this.api([url]) || [];
+
+      this.loading = false;
+    },
+
+    async getLabels () {
+      const url = `/project/${this.$route.params.project}/label`;
+
+      const labels = await this.api([url]) || [];
+      labels.forEach( l => this.labels[l.name] = l.data );
+    },
+
+    ...mapActions(["api"])
+  },
+
+  async mounted () {
+    await this.getLabels()
+    this.getEventCount();
+    this.getEvents();
+  }
+
 }
 
 </script>

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

@@ -4,7 +4,7 @@
       <v-col cols="12">
         <!-- Show component here according to selected route -->
         <keep-alive>
-          <router-view></router-view>
+          <router-view :key="$route.path"></router-view>
         </keep-alive>
       </v-col>
     </v-row>