Ensure consistency in case of component reuse

This reverts commit ea0d0a0a2f.

package.json

@@ -2,6 +2,9 @@
   "name": "sotlas",
   "version": "0.1.0",
   "private": true,
+  "engines": {
+    "node": "20.x"
+  },
   "scripts": {
     "serve": "vue-cli-service serve",
     "prebuild": "vsvg -s ./svg-icons -t ./src/compiled-icons",
@@ -20,10 +23,10 @@
     "@fortawesome/vue-fontawesome": "^0.1.10",
     "@mapbox/mapbox-gl-draw": "github:manuelkasper/mapbox-gl-draw#sotlas",
     "@tmcw/togeojson": "^3.2.0",
-    "axios": "^1.6.3",
+    "axios": "^1.6.8",
     "buefy": "^0.8.20",
     "cheap-ruler": "^2.5.1",
-    "core-js": "^2.6.12",
+    "core-js": "^3.8.3",
     "filepond": "^4.30.4",
     "filepond-plugin-file-validate-type": "^1.2.5",
     "flagpack": "^1.0.5",
@@ -49,17 +52,17 @@
     "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.12.1",
-    "@vue/cli-plugin-eslint": "^3.12.1",
-    "@vue/cli-service": "^3.12.1",
+    "@babel/eslint-parser": "^7.24.1",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
     "@vue/eslint-config-standard": "^4.0.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.2.3",
-    "git-revision-webpack-plugin": "^3.0.6",
-    "node-sass": "^6.0.1",
-    "sass": "^1.62.1",
-    "sass-loader": "^10.3.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.24.0",
+    "git-revision-webpack-plugin": "^5.0.0",
+    "node-sass": "^9.0.0",
+    "sass": "^1.75.0",
+    "sass-loader": "^14.2.1",
     "vue-svgicon": "^3.2.9",
     "vue-template-compiler": "^2.7.14"
   },
@@ -72,9 +75,13 @@
       "plugin:vue/essential",
       "@vue/standard"
     ],
-    "rules": {},
+    "rules": {
+      "vue/multi-word-component-names": "off",
+      "vue/no-reserved-component-names": "off",
+      "vue/no-unused-vars": "off"
+    },
     "parserOptions": {
-      "parser": "babel-eslint"
+      "parser": "@babel/eslint-parser"
     },
     "globals": {
       "VERSION": true,

src/App.vue

@@ -24,5 +24,5 @@ $link: $blue;
 @import "~buefy/src/scss/buefy";
 @import "~flagpack/dist/flagpack.css";
 @import '~mapbox-gl/dist/mapbox-gl.css';
-@import '~@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
+@import '~@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
 </style>

src/components/FirstActivator.vue

@@ -0,0 +1,47 @@
+<template>
+  <span v-if="databaseCallsign">
+    {{ callsign }} (<strong><router-link :to="makeActivatorLinkUserId(userId)">{{ databaseCallsign }}</router-link></strong>)
+  </span>
+  <span v-else>
+    <router-link :to="makeActivatorLinkUserId(userId)"><strong>{{ callsign }}</strong></router-link>
+  </span>
+</template>
+
+<script>
+import api from '../mixins/api.js'
+import utils from '../mixins/utils.js'
+
+export default {
+  name: 'FirstActivator',
+  props: {
+    callsign: String,
+    userId: Number
+  },
+  mixins: [utils, api],
+  methods: {
+    loadDatabaseCallsign () {
+      this.loadActivator(this.userId)
+        .then(activator => {
+          if (this.homeCallsign(this.callsign) !== this.homeCallsign(activator.callsign)) {
+            this.databaseCallsign = this.homeCallsign(activator.callsign)
+          } else {
+            this.databaseCallsign = null
+          }
+        })
+    }
+  },
+  mounted () {
+    this.loadDatabaseCallsign()
+  },
+  watch: {
+    userId () {
+      this.loadDatabaseCallsign()
+    }
+  },
+  data () {
+    return {
+      databaseCallsign: null
+    }
+  }
+}
+</script>

src/main.js

@@ -22,7 +22,6 @@ import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome
 import '@/assets/global.css'
 import store from './store'
 import axios from 'axios'
-import { SnackbarProgrammatic as Snackbar } from 'buefy/dist/components/snackbar'
 
 library.add(faCheck, faCheckCircle, faInfoCircle, faExclamationTriangle, faExclamationCircle, faArrowUp, faPlus, faCheckDouble,
   faAngleRight, faAngleLeft, faAngleDown, faAngleUp, faEye, faEyeSlash, faCaretUp, faUpload, faLink, faHistory, faThList, faImages,
@@ -44,6 +43,8 @@ Vue.use(Buefy, {
 })
 Vue.use(MatchMedia)
 
+let myVue
+
 if (window.performance && performance.navigation.type === 1) {
   // Store last reload timestamp so user reloads can be detected despite SSO redirect
   sessionStorage.setItem('lastReload', new Date().getTime())
@@ -85,8 +86,10 @@ let lastError = null
 axios.interceptors.response.use(response => {
   return response
 }, error => {
-  if ((!lastError || new Date().getTime() - lastError > 9000) && (!error.response || error.response.status !== 404)) {
-    Snackbar.open({
+  if ((!lastError || new Date().getTime() - lastError > 9000) && (!error.response || error.response.status !== 404) && myVue) {
+    // SnackbarProgrammatic.open doesn't work with Webpack 5
+    // See https://github.com/buefy/buefy/issues/2299
+    myVue.$buefy.snackbar.open({
       duration: 9000,
       message: 'Network or server error while loading data, try again later',
       type: 'is-danger',
@@ -101,7 +104,7 @@ axios.interceptors.response.use(response => {
 })
 
 function startVue () {
-  new Vue({
+  myVue = new Vue({
     store,
     router,
     render: h => h(App),

src/mapsession.js

@@ -7,6 +7,7 @@ function reportMapSession () {
     return
   }
   axios.post(process.env.VUE_APP_API_URL + '/mapsession', { type: 'first' })
+    .catch(() => {})
   mapSessionReported = true
 }
 

src/mixins/api.js

@@ -27,6 +27,12 @@ export default {
     },
     reorderPhotos (summitCode, filenames) {
       return this.axiosAuth.post(process.env.VUE_APP_API_URL + '/photos/summits/' + summitCode + '/reorder', { filenames })
+    },
+    loadActivator (userIdOrCallsign) {
+      return axios.get(process.env.VUE_APP_API_URL + '/activators/' + userIdOrCallsign)
+        .then(response => {
+          return response.data
+        })
     }
   }
 }

src/views/Activator.vue

@@ -106,7 +106,6 @@
 </template>
 
 <script>
-import axios from 'axios'
 import moment from 'moment'
 import utils from '../mixins/utils.js'
 import api from '../mixins/api.js'
@@ -340,10 +339,10 @@ export default {
       this.databaseError = false
 
       let loads = []
-      axios.get(process.env.VUE_APP_API_URL + '/activators/' + this.callsign)
-        .then(response => {
-          if (response) {
-            this.activator = response.data
+      this.loadActivator(this.callsign)
+        .then(activator => {
+          if (activator) {
+            this.activator = activator
             if (this.activator && this.activator.callsign !== this.callsign) {
               this.$router.replace('/activators/' + this.activator.callsign)
               return

src/views/Summit.vue

@@ -63,7 +63,7 @@
             <div v-if="firstActivations">
               <span v-if="firstActivations.activators.length == 1">First activation: </span>
               <span v-else>First day's activations: </span>
-              <span v-for="(activator, index) in firstActivations.activators" :key="activator.userId"><router-link :to="makeActivatorLinkUserId(activator.userId)"><strong>{{ activator.callsign }}</strong></router-link>{{ index !== firstActivations.activators.length - 1 ? ' & ' : '' }}</span>
+              <span v-for="(activator, index) in firstActivations.activators" :key="activator.userId"><FirstActivator :callsign="activator.callsign" :userId="activator.userId" />{{ index !== firstActivations.activators.length - 1 ? ' & ' : '' }}</span>
             <span class="has-text-grey"> on {{ firstActivations.date | formatActivationDate }}</span></div>
 
             <SummitAttributes :attributes="summit.attributes" />
@@ -131,6 +131,7 @@
 
 <script>
 import axios from 'axios'
+import api from '../mixins/api.js'
 import utils from '../mixins/utils.js'
 import smptracks from '../mixins/smptracks.js'
 import coverphoto from '../mixins/coverphoto.js'
@@ -153,6 +154,7 @@ import SpotsList from '../components/SpotsList.vue'
 import AlertsList from '../components/AlertsList.vue'
 import EditAlert from '../components/EditAlert.vue'
 import EditSpot from '../components/EditSpot.vue'
+import FirstActivator from '../components/FirstActivator.vue'
 import HikrIcon from '../assets/hikr.png'
 import SACIcon from '../assets/sac.png'
 import SotatrailsIcon from '../assets/sotatrails.png'
@@ -164,9 +166,9 @@ export default {
     summitCode: String
   },
   components: {
-    SummitDatabasePageLayout, MiniMap, SummitActivations, SummitAttributes, ResourceList, SummitRoutes, SummitPhotos, SummitVideos, PhotosUploader, Coordinates, Bearing, SummitPointsLabel, AltitudeLabel, SpotsList, AlertsList, EditAlert, EditSpot
+    SummitDatabasePageLayout, MiniMap, SummitActivations, SummitAttributes, ResourceList, SummitRoutes, SummitPhotos, SummitVideos, PhotosUploader, Coordinates, Bearing, SummitPointsLabel, AltitudeLabel, SpotsList, AlertsList, EditAlert, EditSpot, FirstActivator
   },
-  mixins: [utils, smptracks, coverphoto],
+  mixins: [utils, api, smptracks, coverphoto],
   computed: {
     locator () {
       if (!this.summit.coordinates) {

vue.config.js

@@ -1,7 +1,7 @@
 const webpack = require('webpack')
-const GitRevisionPlugin = require('git-revision-webpack-plugin')
+const { GitRevisionPlugin } = require('git-revision-webpack-plugin')
 
-const gitRevisionPlugin = new GitRevisionPlugin()
+const gitRevisionPlugin = new GitRevisionPlugin({ branch: true })
 
 module.exports = {
   productionSourceMap: false,
@@ -14,7 +14,13 @@ module.exports = {
         'COMMITHASH': JSON.stringify(gitRevisionPlugin.commithash()),
         'BRANCH': JSON.stringify(gitRevisionPlugin.branch())
       })
-    ]
+    ],
+    resolve: {
+      fallback: {
+        fs: false,
+        path: false
+      }
+    }
   },
   publicPath: process.env.PUBLIC_PATH
 }