Add group map view

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

@@ -1,5 +1,11 @@
 <template>
-  <v-container fluid fill-height class="ma-0 pa-0">
+    <dougal-group-map v-if="mapView"
+      :baseline="baseline"
+      :monitor="monitor"
+      :monitors="monitors"
+      @input="mapView=$event"
+    ></dougal-group-map>
+  <v-container fluid fill-height class="ma-0 pa-0" v-else>
 
     <v-overlay :value="loading && !comparisons.length" absolute>
       <v-progress-circular
@@ -21,7 +27,6 @@
       </v-row>
     </v-overlay>
 
-
     <v-row no-gutters align="stretch" class="fill-height">
       <v-col cols="12" v-if="groupFound">
 
@@ -79,6 +84,14 @@
           </template>
 
           <template v-slot:footer.prepend>
+
+            <v-btn v-if="baseline && !mapView"
+              text
+              color="primary"
+              title="Switch to map view"
+              @click="mapView = true"
+            >View map</v-btn>
+
             <v-btn v-if="comparison"
               text
               color="primary"
@@ -123,6 +136,7 @@ import { mapActions, mapGetters } from 'vuex'
 import AccessMixin from '@/mixins/access';
 import DougalGroupRepeatabilitySummary from '@/components/groups/group-repeatability-summary.vue';
 import DougalGroupComparisonSummary from '@/components/groups/group-comparison-summary';
+import DougalGroupMap from '@/components/groups/group-map';
 
 export default {
   name: 'Group',
@@ -134,7 +148,7 @@ export default {
   components: {
     DougalGroupRepeatabilitySummary,
     DougalGroupComparisonSummary,
-
+    DougalGroupMap
   },
 
   data () {
@@ -182,6 +196,8 @@ export default {
         },
       ],
 
+      mapView: false,
+
       baseline: null,
       monitor: null,
       comparisons: []
@@ -210,6 +226,16 @@ export default {
       return this.projects.indexOf(this.baseline);
     },
 
+    monitors () {
+      if (this.baseline && this.comparisons) {
+        return this.comparisons
+          .filter( i => i.baseline_pid == this.baseline.pid )
+          .map( i => this.projects.find( p => p.pid == i.monitor_pid ));
+      } else {
+        return null;
+      }
+    },
+
     comparison () {
       return this.comparisons.find( row =>
         row.baseline_pid == this.baseline?.pid && row.monitor_pid == this.monitor?.pid