Replace hard-coded navigation bar with dynamic alternative.

Navigation bars should be coded as their own component and
added to the meta section of the Vue Router's route(s) in which
they are to be used.

lib/www/client/source/src/App.vue

@@ -35,7 +35,7 @@
 </style>
 
 <script>
-import { mapActions } from 'vuex';
+import { mapActions, mapGetters } from 'vuex';
 import DougalNavigation from './components/navigation';
 import DougalFooter from './components/footer';
 
@@ -53,7 +53,8 @@ export default {
 
   computed: {
     snackText () { return this.$store.state.snack.snackText },
-    snackColour () { return this.$store.state.snack.snackColour }
+    snackColour () { return this.$store.state.snack.snackColour },
+    ...mapGetters(["serverEvent"])
   },
 
   watch: {
@@ -75,17 +76,25 @@ export default {
       if (!newVal) {
         this.$store.commit('setSnackText', "");
       }
+    },
+
+    async serverEvent (event) {
+      if (event.channel == "project" && event.payload?.schema == "public") {
+        // Projects changed in some way or another
+        await this.refreshProjects();
+      }
     }
   },
 
   methods: {
-    ...mapActions(["setCredentials"])
+    ...mapActions(["setCredentials", "refreshProjects"])
   },
 
-  mounted () {
+  async mounted () {
     // Local Storage values are always strings
     this.$vuetify.theme.dark = localStorage.getItem("darkTheme") == "true";
-    this.setCredentials()
+    await this.setCredentials();
+    this.refreshProjects();
   }
 
 };

lib/www/client/source/src/components/app-bar-extension-project.vue

@@ -0,0 +1,48 @@
+<template>
+  <v-tabs :value="tab" show-arrows>
+    <v-tab v-for="tab, index in tabs" :key="index" link :to="tabLink(tab.href)" v-text="tab.text"></v-tab>
+  </v-tabs>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex';
+
+export default {
+  name: 'DougalAppBarExtensionProject',
+  data() {
+    return {
+      tabs: [
+        { href: "summary", text: "Summary" },
+        { href: "lines", text: "Lines" },
+        { href: "plan", text: "Plan" },
+        { href: "sequences", text: "Sequences" },
+        { href: "calendar", text: "Calendar" },
+        { href: "log", text: "Log" },
+        { href: "qc", text: "QC" },
+        { href: "graphs", text: "Graphs" },
+        { href: "map", text: "Map" }
+      ]
+    };
+  },
+
+  computed: {
+
+    page () {
+      return this.$route.path.split(/\/+/)[3];
+    },
+
+    tab () {
+      return this.tabs.findIndex(t => t.href == this.page);
+    },
+
+  },
+
+  methods: {
+
+    tabLink (href) {
+      return `/projects/${this.$route.params.project}/${href}`;
+    }
+
+  }
+}
+</script>

lib/www/client/source/src/components/navigation.vue

@@ -71,17 +71,10 @@
 
         </v-menu>
 
-        <!--
-        <v-btn small text class="ml-2" title="Log out" link to="/?logout=1">
-          <v-icon small>mdi-logout</v-icon>
-        </v-btn>
-        -->
       </template>
     </template>
-    <template v-slot:extension v-if="$route.matched.find(i => i.name == 'Project')">
+    <template v-slot:extension v-if="appBarExtension">
-      <v-tabs :value="tab" show-arrows align-with-title>
+      <div :is="appBarExtension"></div>
-        <v-tab v-for="tab, index in tabs" :key="index" link :to="tabLink(tab.href)" v-text="tab.text"></v-tab>
-      </v-tabs>
     </template>
   </v-app-bar>
 
@@ -95,24 +88,17 @@ export default {
   data() {
     return {
       drawer: false,
-      tabs: [
-        { href: "summary", text: "Summary" },
-        { href: "lines", text: "Lines" },
-        { href: "plan", text: "Plan" },
-        { href: "sequences", text: "Sequences" },
-        { href: "calendar", text: "Calendar" },
-        { href: "log", text: "Log" },
-        { href: "qc", text: "QC" },
-        { href: "graphs", text: "Graphs" },
-        { href: "map", text: "Map" }
-      ],
       path: []
     };
   },
 
   computed: {
-    tab () {
+
-      return this.tabs.findIndex(t => t.href == this.$route.path.split(/\/+/)[3]);
+    appBarExtension () {
+      return this.$route.matched
+        .filter(i => i.meta?.appBarExtension)
+        .map(i => i.meta.appBarExtension)
+        .pop()?.component;
     },
 
     ...mapGetters(['user', 'loading'])
@@ -131,9 +117,6 @@ export default {
   },
 
   methods: {
-    tabLink (href) {
-      return `/projects/${this.$route.params.project}/${href}`;
-    },
 
     breadcrumbs () {
       this.path = this.$route.matched

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

@@ -16,7 +16,7 @@ import Log from '../views/Log.vue'
 import QC from '../views/QC.vue'
 import Graphs from '../views/Graphs.vue'
 import Map from '../views/Map.vue'
-
+import DougalAppBarExtensionProject from '../components/app-bar-extension-project'
 
 Vue.use(VueRouter)
 
@@ -100,7 +100,10 @@ Vue.use(VueRouter)
           text: (ctx) => ctx.$store.state.project.projectName || "…",
           href: (ctx) => `/projects/${ctx.$store.state.project.projectId || ctx.$route.params.project || ""}/`
         }
-      ]
+      ],
+      appBarExtension: {
+        component: DougalAppBarExtensionProject
+      }
     },
     children: [
       {

lib/www/server/lib/db/event/list.js

@@ -25,7 +25,6 @@ async function list (projectId, opts = {}) {
 		WHERE
 			($1::numeric IS NULL OR sequence = $1) AND
 			($2::numeric[] IS NULL OR sequence = ANY( $2 )) AND
-			($3::timestamptz IS NULL OR date(tstamp) = $3) AND
 			($3::timestamptz IS NULL OR
 				(($4::timestamptz IS NULL AND date(tstamp) = $3) OR
 					date(tstamp) BETWEEN SYMMETRIC $3 AND $4)) AND