From 205220a901dba9caba70c52d69f354c9dc43b81a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?=
 <38253764+wazolab@users.noreply.github.com>
Date: Mon, 26 Feb 2024 17:20:07 +0100
Subject: [PATCH] Contrib Mode (#163)

---
 README.md                               |  3 ++
 components/Fields/ContribFieldGroup.vue | 42 ++++++++++++++++++
 components/PoisCard/PoiCardContent.vue  |  8 +++-
 components/PoisDetails/PoiDetails.vue   | 22 +++++-----
 components/PoisList/PoisList.vue        |  4 +-
 components/PoisList/PoisTable.vue       | 11 ++++-
 lib/apiPois.ts                          |  2 +-
 locales/en-GB.ts                        |  6 +++
 locales/es-ES.ts                        |  6 +++
 locales/fr-FR.ts                        |  6 +++
 middleware/contrib-mode.global.ts       | 58 +++++++++++++++++++++++++
 mixins/contribution.ts                  | 25 +++++++++++
 plugins/fontawesome.ts                  |  4 ++
 stores/contrib.ts                       | 19 ++++++++
 stores/map.ts                           |  6 +--
 15 files changed, 200 insertions(+), 22 deletions(-)
 create mode 100644 components/Fields/ContribFieldGroup.vue
 create mode 100644 middleware/contrib-mode.global.ts
 create mode 100644 mixins/contribution.ts
 create mode 100644 stores/contrib.ts

diff --git a/README.md b/README.md
index e7c181d00..7ce6dca42 100644
--- a/README.md
+++ b/README.md
@@ -172,3 +172,6 @@ Special formatting support:
 | Action on details page | details_event | favorite | details_event | action, title, poiId | trackEvent | event, action, title, poiId |
 
 Note on Matomo. `Origin` is a set as dimension `1` and should be configured as is on Matomo.
+
+## Contributor Mode
+Enable/Disable: Add the following query parameter in the URL: `?contrib=true|false`
diff --git a/components/Fields/ContribFieldGroup.vue b/components/Fields/ContribFieldGroup.vue
new file mode 100644
index 000000000..b2ad0874b
--- /dev/null
+++ b/components/Fields/ContribFieldGroup.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+/* eslint-disable vue/prop-name-casing */
+import { pickBy } from 'lodash'
+import type { ContribFields, Link } from '~/middleware/contrib-mode.global'
+import ExternalLink from '~/components/UI/ExternalLink.vue'
+
+const props = defineProps<{
+  editor_id: ContribFields['editor_id']
+  mapillary_link: ContribFields['mapillary_link']
+  osm_note: ContribFields['osm_note']
+}>()
+
+const onlyDefinedProps = computed(() => {
+  return pickBy(props, p => !!p)
+}) as ComputedRef<Record<string, Link>>
+</script>
+
+<template>
+  <div>
+    <ExternalLink
+      v-for="(field, key, index) in onlyDefinedProps"
+      :key="key"
+      :class="{ 'mt-2': index > 0 }"
+      :icon="field.icon"
+      :href="field.url"
+    >
+      {{ $t(`fields.contrib.${key}`) }}
+    </ExternalLink>
+  </div>
+</template>
+
+<style scoped>
+div  {
+  margin: 1rem 0;
+}
+
+@media print {
+  div {
+   display: none;
+  }
+}
+</style>
diff --git a/components/PoisCard/PoiCardContent.vue b/components/PoisCard/PoiCardContent.vue
index 8097bfd8f..9c57a94ac 100644
--- a/components/PoisCard/PoiCardContent.vue
+++ b/components/PoisCard/PoiCardContent.vue
@@ -2,7 +2,6 @@
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { mapState } from 'pinia'
 import type { PropType } from 'vue'
-
 import { defineNuxtComponent } from '#app'
 import Fields from '~/components/PoisCard/Fields.vue'
 import FavoriteIcon from '~/components/UI/FavoriteIcon.vue'
@@ -12,6 +11,7 @@ import { coordinatesHref } from '~/lib/coordinates'
 import { favoritesStore } from '~/stores/favorite'
 import { mapStore } from '~/stores/map'
 import { isIOS } from '~/utils/isIOS'
+import ContributionMixin from '~/mixins/contribution'
 
 export default defineNuxtComponent({
   components: {
@@ -20,7 +20,7 @@ export default defineNuxtComponent({
     FavoriteIcon,
     Fields,
   },
-
+  mixins: [ContributionMixin],
   props: {
     poi: {
       type: Object as PropType<ApiPoi>,
@@ -217,6 +217,10 @@ export default defineNuxtComponent({
       {{ description }}
     </p>
 
+    <ClientOnly v-if="contribMode && isContribEligible(poi.properties)">
+      <ContribFieldGroup v-bind="getContributorFields(poi)" />
+    </ClientOnly>
+
     <div v-else class="tw-h-auto tw-flex-grow tw-shrink-0">
       <Fields
         :fields="
diff --git a/components/PoisDetails/PoiDetails.vue b/components/PoisDetails/PoiDetails.vue
index 11cb3ad2f..3ea16ad02 100644
--- a/components/PoisDetails/PoiDetails.vue
+++ b/components/PoisDetails/PoiDetails.vue
@@ -21,12 +21,15 @@ import type { Settings } from '~/lib/apiSettings'
 import { PropertyTranslationsContextEnum } from '~/plugins/property-translations'
 import { favoritesStore } from '~/stores/favorite'
 import { OriginEnum } from '~/utils/types'
+import ContributionMixin from '~/mixins/contribution'
+import FieldsHeader from '~/components/UI/FieldsHeader.vue'
 
 export default defineNuxtComponent({
   components: {
     PoiLayout,
     IconButton,
     FavoriteIcon,
+    FieldsHeader,
     TeritorioIcon,
     Share,
     Carousel,
@@ -36,7 +39,7 @@ export default defineNuxtComponent({
     FieldsGroup,
     RelativeDate,
   },
-
+  mixins: [ContributionMixin],
   props: {
     settings: {
       type: Object as PropType<Settings>,
@@ -210,6 +213,12 @@ export default defineNuxtComponent({
     <template #body>
       <div class="detail-wrapper">
         <div class="detail-left">
+          <ClientOnly v-if="contribMode && isContribEligible(poi.properties)">
+            <FieldsHeader :recursion-stack="[]">
+              {{ $t('fields.contrib.heading') }}
+            </FieldsHeader>
+            <ContribFieldGroup v-bind="getContributorFields(poi)" />
+          </ClientOnly>
           <FieldsGroup
             v-if="detailsFields"
             :group="{
@@ -280,16 +289,7 @@ export default defineNuxtComponent({
     <template #footer>
       <span v-if="poi.properties.metadata.updated_at">
         {{ $t('poiDetails.lastUpdate') }}
-        <a
-          v-if="
-            poi.properties.metadata.osm_type && poi.properties.metadata.osm_id
-          "
-          :href="`https://www.openstreetmap.org/${poi.properties.metadata.osm_type}/${poi.properties.metadata.osm_id}`"
-          target="_blank"
-        >
-          <RelativeDate :date="poi.properties.metadata.updated_at" />
-        </a>
-        <RelativeDate v-else :date="poi.properties.metadata.updated_at" />
+        <RelativeDate :date="poi.properties.metadata.updated_at" />
       </span>
     </template>
   </PoiLayout>
diff --git a/components/PoisList/PoisList.vue b/components/PoisList/PoisList.vue
index d063e3f2d..d9257a3a3 100644
--- a/components/PoisList/PoisList.vue
+++ b/components/PoisList/PoisList.vue
@@ -87,9 +87,7 @@ export default defineNuxtComponent({
           geometry_as: 'point',
           short_description: true,
         },
-      ).then((pois) => {
-        this.pois = pois
-      })
+      ).then(pois => this.pois = pois)
     },
   },
 
diff --git a/components/PoisList/PoisTable.vue b/components/PoisList/PoisTable.vue
index a3627918e..73f2df965 100644
--- a/components/PoisList/PoisTable.vue
+++ b/components/PoisList/PoisTable.vue
@@ -1,16 +1,16 @@
 <script lang="ts">
 import type { PropType } from 'vue'
-
 import { defineNuxtComponent } from '#app'
 import Field from '~/components/Fields/Field.vue'
 import type { ApiPois, FieldsListItem } from '~/lib/apiPois'
 import { PropertyTranslationsContextEnum } from '~/plugins/property-translations'
+import ContributionMixin from '~/mixins/contribution'
 
 export default defineNuxtComponent({
   components: {
     Field,
   },
-
+  mixins: [ContributionMixin],
   props: {
     fields: {
       type: Array as PropType<FieldsListItem[]>,
@@ -32,6 +32,8 @@ export default defineNuxtComponent({
         ),
       }))
       h.push({ value: '', text: '' })
+      if (this.contribMode)
+        h.push({ value: 'contrib', text: this.$t('fields.contrib.heading') })
       return h
     },
 
@@ -68,6 +70,11 @@ export default defineNuxtComponent({
             {{ $t('poisTable.details') }}
           </NuxtLink>
         </td>
+        <ClientOnly v-if="contribMode && isContribEligible(feature.properties)">
+          <td class="tw-align-top">
+            <ContribFieldGroup v-bind="getContributorFields(feature)" />
+          </td>
+        </ClientOnly>
       </tr>
     </tbody>
     <tbody v-else>
diff --git a/lib/apiPois.ts b/lib/apiPois.ts
index 4acdc6874..385ee4dfd 100644
--- a/lib/apiPois.ts
+++ b/lib/apiPois.ts
@@ -16,7 +16,7 @@ export interface FieldsListGroup {
   fields: FieldsList
 
   display_mode: 'standard' | 'card'
-  icon: string
+  icon?: string
 }
 
 export type FieldsList = (FieldsListItem | FieldsListGroup)[]
diff --git a/locales/en-GB.ts b/locales/en-GB.ts
index 4cd4cb41d..a598a3073 100644
--- a/locales/en-GB.ts
+++ b/locales/en-GB.ts
@@ -156,6 +156,12 @@ export default defineI18nLocale(() => {
       label: 'Search or add a value',
     },
     fields: {
+      contrib: {
+        editor_id: 'Edit in iD Editor',
+        heading: 'Contribution',
+        osm_note: 'Add an OSM note',
+        mapillary_link: 'Explore on Mapillary',
+      },
       phone: {
         callNumber: 'Call this number',
       },
diff --git a/locales/es-ES.ts b/locales/es-ES.ts
index d3e7f36c1..5bee28d1e 100644
--- a/locales/es-ES.ts
+++ b/locales/es-ES.ts
@@ -156,6 +156,12 @@ export default defineI18nLocale(() => {
       label: 'Busca o añade un valor',
     },
     fields: {
+      contrib: {
+        editor_id: 'Editar en iD editor',
+        heading: 'Contribución',
+        osm_note: 'Añadir una nota en OSM',
+        mapillary_link: 'Explorar en Mapillary',
+      },
       phone: {
         callNumber: 'Llama a este número',
       },
diff --git a/locales/fr-FR.ts b/locales/fr-FR.ts
index dcd617061..2f01b1d70 100644
--- a/locales/fr-FR.ts
+++ b/locales/fr-FR.ts
@@ -157,6 +157,12 @@ export default defineI18nLocale(() => {
       label: 'Recherchez ou ajoutez une valeur',
     },
     fields: {
+      contrib: {
+        editor_id: 'Éditer dans l\'éditeur iD',
+        heading: 'Contribution',
+        osm_note: 'Ajouter une note à OSM',
+        mapillary_link: 'Explorer sur Mapillary',
+      },
       phone: {
         callNumber: 'Appeler ce numéro',
       },
diff --git a/middleware/contrib-mode.global.ts b/middleware/contrib-mode.global.ts
new file mode 100644
index 000000000..578b37063
--- /dev/null
+++ b/middleware/contrib-mode.global.ts
@@ -0,0 +1,58 @@
+import type { ApiPoi, ApiPoiProperties } from '~/lib/apiPois'
+import { STORE_NAME, useContribStore } from '~/stores/contrib'
+
+export interface Link {
+  icon: string
+  url: string
+}
+
+export interface ContribFields {
+  editor_id: Link
+  mapillary_link?: Link
+  osm_note: Link
+}
+
+export default defineNuxtRouteMiddleware((to) => {
+  if (process.server)
+    return
+
+  if (process.client) {
+    const { setEnabled } = useContribStore()
+    const contribLocalStorage = localStorage.getItem(STORE_NAME)
+
+    if (to.query.contrib !== undefined) {
+      setEnabled(to.query.contrib === 'true')
+      return
+    }
+
+    if (contribLocalStorage)
+      setEnabled(contribLocalStorage === 'true')
+  }
+})
+
+export function getContributorFields(feature: ApiPoi): ContribFields {
+  const { mapillary } = feature.properties
+  const { osm_id, osm_type } = feature.properties.metadata
+  const { coordinates } = feature.geometry as GeoJSON.Point
+
+  return {
+    editor_id: {
+      icon: 'pen-to-square',
+      url: `https://www.openstreetmap.org/edit?${osm_type}=${osm_id}`,
+    },
+    mapillary_link: mapillary
+      ? {
+          icon: 'external-link-alt',
+          url: `https://www.mapillary.com/app/?pKey=${mapillary}&focus=photo`,
+        }
+      : undefined,
+    osm_note: {
+      icon: 'note-sticky',
+      url: `https://www.openstreetmap.org/note/new#map=19/${coordinates[1]}/${coordinates[0]}&layers=N`,
+    },
+  }
+}
+
+export function isContribEligible(properties: ApiPoiProperties): boolean {
+  return !!(properties.metadata.osm_id && properties.metadata.osm_type && properties.editorial)
+}
diff --git a/mixins/contribution.ts b/mixins/contribution.ts
new file mode 100644
index 000000000..5004477a0
--- /dev/null
+++ b/mixins/contribution.ts
@@ -0,0 +1,25 @@
+import { mapState } from 'pinia'
+import type { ApiPoi, ApiPoiProperties } from '~/lib/apiPois'
+import { useContribStore } from '~/stores/contrib'
+import type { ContribFields } from '~/middleware/contrib-mode.global'
+import { getContributorFields, isContribEligible } from '~/middleware/contrib-mode.global'
+import ContribFieldGroup from '~/components/Fields/ContribFieldGroup.vue'
+
+export default {
+  components: {
+    ContribFieldGroup,
+  },
+  computed: {
+    ...mapState(useContribStore, {
+      contribMode: 'enabled',
+    }),
+  },
+  methods: {
+    isContribEligible(properties: ApiPoiProperties): boolean {
+      return isContribEligible(properties)
+    },
+    getContributorFields(feature: ApiPoi): ContribFields {
+      return getContributorFields(feature)
+    },
+  },
+}
diff --git a/plugins/fontawesome.ts b/plugins/fontawesome.ts
index 62a6cad85..efcf7ec26 100644
--- a/plugins/fontawesome.ts
+++ b/plugins/fontawesome.ts
@@ -42,6 +42,8 @@ import {
   faMap,
   faMapMarkerAlt,
   faMinus,
+  faNoteSticky,
+  faPenToSquare,
   faPhone,
   faPlus,
   faPrint,
@@ -115,6 +117,8 @@ library.add(
   faCopy,
   faCog,
   faEnvelope,
+  faPenToSquare,
+  faNoteSticky,
 )
 
 export default defineNuxtPlugin(_nuxtApp => undefined)
diff --git a/stores/contrib.ts b/stores/contrib.ts
new file mode 100644
index 000000000..a6c995697
--- /dev/null
+++ b/stores/contrib.ts
@@ -0,0 +1,19 @@
+import { defineStore } from 'pinia'
+
+export const STORE_NAME = 'contrib'
+
+interface State {
+  enabled: boolean
+}
+
+export const useContribStore = defineStore(STORE_NAME, {
+  state: (): State => ({
+    enabled: false,
+  }),
+  actions: {
+    setEnabled(state: boolean) {
+      this.enabled = state
+      localStorage.setItem(STORE_NAME, JSON.stringify(state))
+    },
+  },
+})
diff --git a/stores/map.ts b/stores/map.ts
index c02dfbd17..84250ac2c 100644
--- a/stores/map.ts
+++ b/stores/map.ts
@@ -1,5 +1,4 @@
 import { defineStore } from 'pinia'
-
 import type { ApiPoi, ApiPoiProperties } from '~/lib/apiPois'
 import type { LatLng, Pitch } from '~/utils/types'
 import { Mode } from '~/utils/types'
@@ -59,14 +58,15 @@ export const mapStore = defineStore('map', {
         }
 
         if (feature?.properties) {
-          const cleanProperties: { [key: string]: any } = {}
+          const cleanProperties: ApiPoiProperties = {} as ApiPoiProperties
 
           Object.keys(feature.properties).forEach((key) => {
             if (isJsonObject(feature.properties[key]))
               cleanProperties[key] = JSON.parse(feature.properties[key])
             else cleanProperties[key] = feature.properties[key]
           })
-          goodFeature.properties = cleanProperties as ApiPoiProperties
+
+          goodFeature.properties = cleanProperties
         }
 
         this.selectedFeature = goodFeature