Merge pull request #245 from KenEucker/develop

3.3.3

package.json

@@ -1,6 +1,6 @@
 {
   "name": "biketag-vue",
-  "version": "3.3.2",
+  "version": "3.3.3",
   "license": "AGPL-3.0-or-later",
   "author": "Ken Eucker",
   "bugs": {
@@ -31,7 +31,7 @@
     "@vueuse/head": "^2.0.0",
     "ajv": "^8.12.0",
     "autoprefixer": "^10.4.17",
-    "biketag": "^3.3.2",
+    "biketag": "^3.3.3",
     "bootstrap": "^5.3.2",
     "bootstrap-vue-next": "^0.15.5",
     "crypto-js": "^4.2.0",

src/App.vue

@@ -138,18 +138,25 @@ function checkForNewBikeTagPost() {
 async function created() {
   const initResults = []
   /// Set it first thing
+  await router.isReady()
   const _gameIsSet = store.gameName?.length !== 0
-  if (_gameIsSet && router.currentRoute.value.name !== 'landing') {
+  const routeIsRoot = router.currentRoute.value.path === '/'
+  const routeIsLanding = router.currentRoute.value.name === 'Landing'
+
+  if (_gameIsSet && (!routeIsLanding || routeIsRoot)) {
     const game = await store.setGame().catch((err) => {
       debug('view::data-init', err)
       // router.push('/landing')
     })
     gameIsSet.value = true
+    const routeIsHome = routeIsRoot ? true : router.currentRoute.value?.name === 'Home'
 
     initResults.push(await store.fetchCurrentBikeTag())
 
-    if (game) {
-      await router.push({ name: 'Home' })
+    if (game && routeIsHome) {
+      const tagnumber = parseInt(router.currentRoute.value.path.split('/')[1]) ?? undefined
+      const params = { tagnumber }
+      await router.push({ name: 'Home', params })
     }
 
     initResults.push(store.fetchTags())

src/assets/styles/style.scss

@@ -12,6 +12,8 @@ body {
 
 .popover {
   z-index: 99;
+  max-width: 60vw;
+  min-width: 400px;
 }
 
 #app {

src/components/BikeTagMap.vue

@@ -34,7 +34,7 @@ const emit = defineEmits(['dragend'])
 const store = useBikeTagStore()
 const worldZoom = 3
 const cityZoom = 10
-const tagsZoom = 20
+const playZoom = 15
 const centerNorthAmerica = [40, -45]
 let map
 
@@ -114,7 +114,7 @@ onMounted(async () => {
       draggable: true,
     }).addTo(map)
     L.control.locate().addTo(map)
-    map.setView(props.start, tagsZoom)
+    map.setView(props.start, playZoom)
     marker.on('dragend', (e) => {
       emit('dragend', e.target._latlng)
     })

src/components/BikeTagMenu.vue

@@ -217,10 +217,9 @@ function onScroll() {
 async function resetBikeTagApp() {
   if (await isOnline()) {
     store.resetBikeTagCache()
-    router.push({ name: 'Home' })
-  } else {
-    router.push('/')
   }
+
+  router.push({ name: 'Home' })
 }
 function login() {
   closeCollapsible()

src/components/QueueFound.vue

@@ -87,7 +87,7 @@
             placeholder="Enter a location"
           />
         </bike-tag-input>
-        <b-popover target="found" triggers="click focus" placement="top">
+        <b-popover target="found" :hide="!showMap" placement="top">
           <template #title> Location: {{ getLocation }} </template>
           <p v-if="locationDisabled">{{ t('pages.round.image_first') }}</p>
           <bike-tag-map
@@ -172,6 +172,7 @@ const gps = ref({ lat: null, lng: null })
 const isGpsDefault = ref(true)
 const inputDOM = ref(null)
 const showModal = ref(false)
+const showMap = ref(false)
 const uploadInProgress = ref(false)
 const location = ref('')
 const player = ref('')
@@ -442,6 +443,7 @@ const setImage = async (event) => {
               lng: round(GPSData.longitude),
             }
             isGpsDefault.value = false
+            showMap.value = true
             center.value = { ...gps.value }
           } else if (getGame.value?.boundary.lat && getGame.value?.boundary.lng) {
             gps.value = {
@@ -451,6 +453,7 @@ const setImage = async (event) => {
             isGpsDefault.value = true
             center.value = { ...gps.value }
           } else {
+            showMap.value = true
             isGpsDefault.value = false
           }
           location.value = ''

src/views/Home.vue

@@ -80,21 +80,16 @@ import { useI18n } from 'vue-i18n'
 // data
 const router = useRouter()
 const route = useRoute()
-let tagnumber = ref(route.params?.tagnumber ? parseInt(route.params.tagnumber) : 0)
 const tagIsLoading = ref(true)
 const store = useBikeTagStore()
 const { t } = useI18n()
+const tagnumber = computed(() => (route.params?.tagnumber ? parseInt(route.params.tagnumber) : 0))
 
 // computed
 const getCurrentBikeTag = computed(() => store.getCurrentBikeTag)
 const getImgurImageSized = computed(() => store.getImgurImageSized)
 const getTags = computed(() => store.getTags)
 
-/// Support legacy webHashHistory urls
-if (tagnumber.value === 0 && window.location.hash.indexOf('#/') === 0) {
-  tagnumber.value = parseInt(window.location.hash.split('#/')[1])
-}
-
 const tag = computed(() => {
   if (tagnumber.value !== 0) {
     const tag = getTags.value?.filter((t) => t.tagnumber === tagnumber.value)
@@ -108,21 +103,26 @@ function tagImageLoaded() {
   tagIsLoading.value = false
 }
 function goNextSingle() {
-  tagnumber.value++
   if (tagnumber.value === getCurrentBikeTag.value.tagnumber) {
-    tagnumber.value = 0
+    router.push('/')
   } else {
-    router.push(`/${tagnumber.value}`)
+    router.push(`/${tagnumber.value + 1}`)
   }
 }
 function goPreviousSingle() {
-  tagnumber.value = tagnumber.value > 0 ? tagnumber.value : getCurrentBikeTag.value.tagnumber
-  tagnumber.value--
-  router.push(`/${tagnumber.value}`)
+  const newTagnumber = tagnumber.value > 0 ? tagnumber.value : getCurrentBikeTag.value.tagnumber
+  router.push(`/${newTagnumber - 1}`)
 }
 
 // mounted
-onMounted(() => (tagIsLoading.value = tagnumber.value === 0))
+onMounted(async () => {
+  await router.isReady()
+  /// Support legacy webHashHistory urls
+  if (tagnumber.value === 0 && window.location.hash.indexOf('#/') === 0) {
+    tagnumber.value = parseInt(window.location.hash.split('#/')[1])
+  }
+  tagIsLoading.value = tagnumber.value === 0
+})
 </script>
 
 <style lang="scss">

vite.config.ts

@@ -31,8 +31,8 @@ export default defineConfig({
     EnvironmentPlugin(BikeTagEnv),
     VitePWA({
       srcDir: 'src',
-      filename: 'worker.ts',
-      strategies: 'injectManifest',
+      // filename: 'worker.ts',
+      strategies: 'generateSW',
       registerType: 'autoUpdate',
       includeAssets: ['**/*'],
       // includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'mask-icon.png'],