Gallery view in the ImageDialog.

src/components/header/Header.vue

@@ -8,8 +8,7 @@
         @click="onToggleShowFilters"
       />
       <filter-off-icon class="icon" v-else @click="onToggleShowFilters" />
-      <!-- <map-legend-icon class="icon" /> -->
-      <help-circle-icon
+      <map-legend-icon
         class="icon"
         v-if="!showLegend"
         @click="onToggleShowLegend"
@@ -43,8 +42,7 @@ import Legend from '@/components/header/Legend.vue'
 import ContentSaveIcon from 'icons/ContentSave'
 import FilterIcon from 'icons/Filter'
 import FilterOffIcon from 'icons/FilterOff'
-//import MapLegendIcon from 'icons/MapLegend'
-import HelpCircleIcon from 'icons/HelpCircle'
+import MapLegendIcon from 'icons/MapLegend'
 import HelpCircleOutlineIcon from 'icons/HelpCircleOutline'
 
 export default {
@@ -58,8 +56,7 @@ export default {
     ContentSaveIcon,
     FilterIcon,
     FilterOffIcon,
-    // MapLegendIcon,
-    HelpCircleIcon,
+    MapLegendIcon,
     HelpCircleOutlineIcon
   },
   computed: {
@@ -113,10 +110,10 @@ export default {
   display: grid;
   row-gap: 10px;
   grid-template-rows: 100px 60px auto;
-  grid-template-columns: auto;
+  grid-template-columns: 150px auto 150px;
   grid-template-areas:
-    'averages-map'
-    'context-map';
+    '. averages-map .'
+    '. context-map .';
 }
 
 .context-map {

src/components/image-dialog/Gallery.vue

+<template>
+  <div class="gallery-container">
+    <div v-for="(image, imageName) in closeImageNames" :key="imageName">
+      <img
+        :src="image"
+        :class="{ selectedImage: activeImageName === imageName, image }"
+        width="133px"
+        height="100px"
+        @click="onClick(imageName)"
+      />
+      {{ imageName }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Gallery',
+  data() {
+    return {
+      imageCount: 9 // Should be an odd number.
+    }
+  },
+  computed: {
+    cameraID() {
+      return this.$store.getters.activeCamera
+    },
+    stickID() {
+      return this.$store.getters.activeStick
+    },
+    activeImageName() {
+      return this.$store.getters.activeImageName(this.cameraID)
+    },
+    closeImageNames() {
+      let result = {}
+      let chronology = this.$store.getters.getCameraImagesChronology(
+        this.cameraID
+      )
+
+      let halfCount = (this.imageCount - 1) / 2
+      let firstIndex = null
+      if (chronology.lookup[this.activeImageName] < halfCount) {
+        firstIndex = 0
+      } else if (
+        chronology.lookup[this.activeImageName] + halfCount >
+        chronology.order.length
+      ) {
+        firstIndex = chronology.order.length - this.imageCount
+      } else {
+        firstIndex = chronology.lookup[this.activeImageName] - halfCount
+      }
+
+      for (let i = firstIndex; i < firstIndex + this.imageCount; i++) {
+        result[chronology.order[i]] = this.$store.getters.imageURL(
+          this.cameraID,
+          chronology.order[i]
+        )
+      }
+
+      return result
+    }
+  },
+  methods: {
+    onClick(imageName) {
+      this.$store.dispatch('setActivePoint', {
+        stickID: this.stickID,
+        cameraID: this.cameraID,
+        imageName
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.gallery-container {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  text-align: center;
+}
+
+.image {
+  border-radius: 5px;
+}
+
+.selectedImage {
+  border: 3px solid var(--color-stick-active);
+}
+</style>

src/components/image-dialog/ImageDialog.vue

@@ -98,6 +98,7 @@
             <div>{{ snowHeight }} cm</div>
           </div>
         </div>
+        <Gallery class="card gallery" />
       </div>
     </div>
   </transition>
@@ -106,6 +107,7 @@
 <script>
 import ImageDetail from '@/components/image-dialog/ImageDetail.vue'
 import TimeShift from '@/components/image-dialog/TimeShift.vue'
+import Gallery from '@/components/image-dialog/Gallery.vue'
 import dropdown from 'vue-dropdowns'
 
 import CloseIcon from 'icons/Close'
@@ -119,6 +121,7 @@ export default {
   components: {
     ImageDetail,
     TimeShift,
+    Gallery,
     dropdown,
 
     CloseIcon,
@@ -254,11 +257,12 @@ export default {
   transition: all 0.3s ease;
 
   display: grid;
-  grid-template-rows: 30px auto;
+  grid-template-rows: 30px auto 150px;
   grid-template-columns: 4fr 1fr 2fr;
   grid-template-areas:
     '. . close-button'
-    'image controls info';
+    'image controls info'
+    'gallery gallery gallery';
   gap: 5px;
 }
 
@@ -368,4 +372,8 @@ export default {
   justify-self: right;
   font-weight: bold;
 }
+
+.gallery {
+  grid-area: gallery;
+}
 </style>

src/store/actions.js

@@ -126,6 +126,7 @@ export default {
   },
 
   updateSnowHeightAverage({ commit, state }, { cameraID, imageName, stickID }) {
+    // If the stick is not visible, but there was snow in the picture, don't trust the average and therefore don't measure it.
     if (
       !state.data[cameraID][imageName].sticks[stickID].visible &&
       state.data[cameraID][imageName].weatherConditions === 1
@@ -186,7 +187,7 @@ export default {
         count += 1
       }
     }
-    const average = heightSum / count
+    const average = count === 0 ? 0 : heightSum / count
     commit('UPDATE_SNOW_HEIGHT_AVERAGE', {
       cameraID,
       imageName,