From 8b5ad6352f2ee88bf55ab95fc3ef2088c248ac00 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Wed, 9 Oct 2024 17:11:29 +0200
Subject: [PATCH 01/10] feat(street): add mapillary api entry to env templates

---
 .env.development.local.sample | 2 ++
 .env.production.local.sample  | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/.env.development.local.sample b/.env.development.local.sample
index f4dd354..721a563 100644
--- a/.env.development.local.sample
+++ b/.env.development.local.sample
@@ -8,3 +8,5 @@ VITE_FIREBASE_STORAGE_BUCKET=
 VITE_FIREBASE_MESSAGING_SENDER_ID=
 VITE_FIREBASE_APP_ID=
 VITE_FIREBASE_MEASUREMENT_ID=
+
+VITE_MAPILLARY_API_KEY=
diff --git a/.env.production.local.sample b/.env.production.local.sample
index b4d18fe..7886077 100644
--- a/.env.production.local.sample
+++ b/.env.production.local.sample
@@ -8,3 +8,5 @@ VITE_FIREBASE_STORAGE_BUCKET=
 VITE_FIREBASE_MESSAGING_SENDER_ID=
 VITE_FIREBASE_APP_ID=
 VITE_FIREBASE_MEASUREMENT_ID=
+
+VITE_MAPILLARY_API_KEY=

From ff40cef2dbf82f953997d07277802be9cc8b443c Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Thu, 10 Oct 2024 11:27:00 +0200
Subject: [PATCH 02/10] feat(street-level): add street level to project types
 config

---
 src/config/projectTypes.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/config/projectTypes.ts b/src/config/projectTypes.ts
index c408426..f15c9ec 100644
--- a/src/config/projectTypes.ts
+++ b/src/config/projectTypes.ts
@@ -23,6 +23,10 @@ const projectTypes = {
     name: 'Digitize',
     component: 'digitizeProject',
   },
+  '7': {
+    name: 'Street',
+    component: 'streetProject',
+  },
 }
 
 export default projectTypes

From 9fed0a7820e9d9d8628998d2268339379dc0aab8 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Thu, 10 Oct 2024 16:33:14 +0200
Subject: [PATCH 03/10] feat(street-project): add basic street project
 component

---
 src/components/StreetProject.vue | 198 +++++++++++++++++++++++++++++++
 src/views/ProjectView.vue        |   2 +
 2 files changed, 200 insertions(+)
 create mode 100644 src/components/StreetProject.vue

diff --git a/src/components/StreetProject.vue b/src/components/StreetProject.vue
new file mode 100644
index 0000000..3cc5d1a
--- /dev/null
+++ b/src/components/StreetProject.vue
@@ -0,0 +1,198 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+// import createInformationPages from '@/utils/createInformationPages'
+import OptionButtons from './OptionButtons.vue'
+import ProjectHeader from './ProjectHeader.vue'
+// import ProjectInfo from './ProjectInfo.vue'
+import TaskProgress from '@/components/TaskProgress.vue'
+// import StreetProjectInstructions from './StreetProjectInstructions.vue'
+
+export default defineComponent({
+  components: {
+    // streetProjectInstructions: StreetProjectInstructions,
+    optionButtons: OptionButtons,
+    projectHeader: ProjectHeader,
+    // projectInfo: ProjectInfo,
+    taskProgress: TaskProgress,
+  },
+  props: {
+    group: {
+      type: Object,
+      required: true,
+    },
+    /*
+    first: {
+      type: Boolean,
+      default: false,
+    },
+    */
+    options: {
+      type: Array,
+      options: {
+        type: Array,
+        default() {
+          return [
+            {
+              mdiIcon: 'mdi-check-bold',
+              iconColor: '#bbcb7d',
+              shortkey: 1,
+              title: 'Yes',
+              value: 1,
+            },
+            {
+              mdiIcon: 'mdi-close-thick',
+              iconColor: '#fd5054',
+              shortkey: 2,
+              title: 'No',
+              value: 0,
+            },
+            {
+              mdiIcon: 'mdi-minus-thick',
+              iconColor: '#adadad',
+              title: 'Not sure',
+              shortkey: 3,
+              value: 2,
+            },
+          ]
+        },
+      },
+    },
+    project: {
+      type: Object,
+      required: true,
+    },
+    tasks: {
+      type: Array,
+      required: true,
+    },
+    /*
+    tutorial: {
+      type: Object,
+      require: false,
+    },
+    */
+  },
+  data() {
+    return {
+      arrowKeys: true,
+      results: {},
+      startTime: null,
+      taskId: undefined,
+      taskIndex: 0,
+    }
+  },
+  inject: {
+    logMappingStarted: 'logMappingStarted',
+    saveResults: 'saveResults',
+  },
+  computed: {
+    instructionMessage() {
+      const message = this.project?.lookFor
+      return message
+    },
+  },
+  methods: {
+    // TODO: add geometry to result value?
+    addResult(value) {
+      this.results[this.taskId] = value
+    },
+    back() {
+      if (!this.taskIndex <= 0) {
+        this.taskIndex--
+        this.taskId = this.tasks[this.taskIndex].taskId
+      }
+    },
+    /* 
+    createInformationPages,
+    // fallback information pages for media projects tbd (could be similar to find projects)
+    createFallbackInformationPages() {
+      return undefined
+    },
+    */
+    forward() {
+      if (this.isAnswered() && this.taskIndex + 1 < this.tasks.length) {
+        this.imageLoaded = false
+        this.taskIndex++
+        this.taskId = this.tasks[this.taskIndex].taskId
+      }
+    },
+    isAnswered() {
+      const result = this.results[this.taskId]
+      const defined = result !== undefined
+      return defined
+    },
+  },
+  created() {
+    this.startTime = new Date().toISOString()
+    this.taskId = this.tasks[this.taskIndex].taskId
+    this.$emit('created')
+    this.logMappingStarted(this.project.projectType)
+  },
+})
+</script>
+
+<template>
+  <project-header :instructionMessage="instructionMessage" :title="project?.projectTopic">
+    <!--project-info
+      :first="first"
+      :informationPages="createInformationPages(tutorial, project, createFallbackInformationPages)"
+      :manualUrl="project?.manualUrl"
+      @toggle-dialog="arrowKeys = !arrowKeys"
+    >
+      <template #instructions>
+        <street-project-instructions
+          :instructionMessage="instructionMessage"
+          :options="options"
+        />
+      </template>
+    </project-info-->
+  </project-header>
+  <v-container
+    class="ma-0 pa-0"
+    v-touch="{ left: () => forward(), right: () => back() }"
+    style="position: relative"
+  >
+    {{ taskId }}
+  </v-container>
+  <option-buttons
+    v-if="taskId"
+    :options="options"
+    :result="results[taskId]"
+    :taskId="taskId"
+    @addResult="addResult"
+  />
+  <v-toolbar color="white" extension-height="20" density="compact" extended>
+    <v-spacer />
+    <v-btn
+      :title="$t('mediaProject.moveLeft')"
+      icon="mdi-chevron-left"
+      color="secondary"
+      :disabled="taskIndex <= 0"
+      @click="back"
+      v-shortkey.once="[arrowKeys ? 'arrowleft' : '']"
+      @shortkey="back"
+    />
+    <v-btn
+      :title="$t('projectView.saveResults')"
+      icon="mdi-content-save"
+      color="primary"
+      :disabled="Object.keys(results).length < tasks.length"
+      @click="saveResults(results, startTime)"
+    />
+    <v-btn
+      :title="$t('mediaProject.moveRight')"
+      icon="mdi-chevron-right"
+      color="secondary"
+      :disabled="!isImageLoaded || !isAnswered() || taskIndex + 1 === tasks.length"
+      @click="forward"
+      v-shortkey.once="[arrowKeys ? 'arrowright' : '']"
+      @shortkey="forward"
+    />
+    <v-spacer />
+    <template #extension>
+      <task-progress :progress="taskIndex + isAnswered()" :total="tasks.length" />
+    </template>
+  </v-toolbar>
+</template>
+
+<style scoped></style>
diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
index 8938156..ecdf40e 100644
--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -23,6 +23,7 @@ import FindProject from '@/components/FindProject.vue'
 import MediaProject from '@/components/MediaProject.vue'
 import ValidateProject from '@/components/ValidateProject.vue'
 import DigitizeProject from '@/components/DigitizeProject.vue'
+import StreetProject from '@/components/StreetProject.vue'
 import projectTypes from '@/config/projectTypes'
 
 export default defineComponent({
@@ -33,6 +34,7 @@ export default defineComponent({
     mediaProject: MediaProject,
     validateProject: ValidateProject,
     digitizeProject: DigitizeProject,
+    streetProject: StreetProject,
   },
   data() {
     return {

From 588673ac2f49838789b62a94575f11ba3e8601ac Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Thu, 10 Oct 2024 17:38:33 +0200
Subject: [PATCH 04/10] feat(street-project): add mapillary viewer

---
 package.json                     |   1 +
 src/components/StreetProject.vue |  30 +++-
 yarn.lock                        | 232 +++++++++++++++++++++++++++++++
 3 files changed, 257 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index ff6e8e9..77a43f3 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@intlify/unplugin-vue-i18n": "^3.0.1",
     "base-64": "^1.0.0",
     "firebase": "^10.9.0",
+    "mapillary-js": "^4.1.2",
     "ol": "^9.1.0",
     "ol-contextmenu": "^5.4.0",
     "ol-ext": "^4.0.17",
diff --git a/src/components/StreetProject.vue b/src/components/StreetProject.vue
index 3cc5d1a..6b2994b 100644
--- a/src/components/StreetProject.vue
+++ b/src/components/StreetProject.vue
@@ -1,4 +1,6 @@
 <script lang="ts">
+import { Viewer } from 'mapillary-js'
+import 'mapillary-js/dist/mapillary.css'
 import { defineComponent } from 'vue'
 // import createInformationPages from '@/utils/createInformationPages'
 import OptionButtons from './OptionButtons.vue'
@@ -79,6 +81,7 @@ export default defineComponent({
       startTime: null,
       taskId: undefined,
       taskIndex: 0,
+      viewer: null,
     }
   },
   inject: {
@@ -100,6 +103,7 @@ export default defineComponent({
       if (!this.taskIndex <= 0) {
         this.taskIndex--
         this.taskId = this.tasks[this.taskIndex].taskId
+        this.viewer.moveTo(this.taskId)
       }
     },
     /* 
@@ -111,11 +115,23 @@ export default defineComponent({
     */
     forward() {
       if (this.isAnswered() && this.taskIndex + 1 < this.tasks.length) {
-        this.imageLoaded = false
         this.taskIndex++
         this.taskId = this.tasks[this.taskIndex].taskId
+        this.viewer.moveTo(this.taskId)
       }
     },
+    initialiseViewer(imageId) {
+      this.viewer = new Viewer({
+        accessToken: import.meta.env.VITE_MAPILLARY_API_KEY,
+        component: { cover: false },
+        container: 'mapillary',
+        imageId: imageId,
+      })
+
+      this.viewer.deactivateComponent('direction')
+      this.viewer.deactivateComponent('sequence')
+      this.viewer.deactivateComponent('keyboard')
+    },
     isAnswered() {
       const result = this.results[this.taskId]
       const defined = result !== undefined
@@ -128,6 +144,9 @@ export default defineComponent({
     this.$emit('created')
     this.logMappingStarted(this.project.projectType)
   },
+  mounted() {
+    this.initialiseViewer(this.taskId)
+  },
 })
 </script>
 
@@ -148,12 +167,11 @@ export default defineComponent({
     </project-info-->
   </project-header>
   <v-container
+    id="mapillary"
     class="ma-0 pa-0"
     v-touch="{ left: () => forward(), right: () => back() }"
-    style="position: relative"
-  >
-    {{ taskId }}
-  </v-container>
+    style="position: relative; height: calc(100vh - 375px)"
+  />
   <option-buttons
     v-if="taskId"
     :options="options"
@@ -183,7 +201,7 @@ export default defineComponent({
       :title="$t('mediaProject.moveRight')"
       icon="mdi-chevron-right"
       color="secondary"
-      :disabled="!isImageLoaded || !isAnswered() || taskIndex + 1 === tasks.length"
+      :disabled="!isAnswered() || taskIndex + 1 === tasks.length"
       @click="forward"
       v-shortkey.once="[arrowKeys ? 'arrowright' : '']"
       @shortkey="forward"
diff --git a/yarn.lock b/yarn.lock
index 199ef8d..5c60814 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1358,6 +1358,11 @@
   resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.3.16.tgz#b1572967f0b8b60bf3f87fe1d854a5604ea70c82"
   integrity sha512-PatH4iOdyh3MyWtmHVFXLWCCIhUbopaltqddG9BzB+gMIzee2MJrvd+jouii9Z3wzQJruGWAm7WOMjgfG8hQlQ==
 
+"@types/earcut@^2.1.1":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@types/earcut/-/earcut-2.1.4.tgz#5811d7d333048f5a7573b22ddc84923e69596da6"
+  integrity sha512-qp3m9PPz4gULB9MhjGID7wpo3gJ4bTGXm7ltNDsmOvsPduTeHp8wSW9YckBj3mljeOh4F0m2z/0JKAALRKbmLQ==
+
 "@types/estree@1.0.5", "@types/estree@^1.0.0":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
@@ -1384,6 +1389,11 @@
   dependencies:
     undici-types "~5.26.4"
 
+"@types/node@^14.14.31":
+  version "14.18.63"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.63.tgz#1788fa8da838dbb5f9ea994b834278205db6ca2b"
+  integrity sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ==
+
 "@types/node@^18.17.15":
   version "18.19.33"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.19.33.tgz#98cd286a1b8a5e11aa06623210240bcc28e95c48"
@@ -1391,21 +1401,51 @@
   dependencies:
     undici-types "~5.26.4"
 
+"@types/pako@^1.0.2":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@types/pako/-/pako-1.0.7.tgz#aa0e4af9855d81153a29ff84cc44cce25298eda9"
+  integrity sha512-YBtzT2ztNF6R/9+UXj2wTGFnC9NklAnASt3sC0h2m1bbH7G6FyBIkt4AN8ThZpNfxUo1b2iMVO0UawiJymEt8A==
+
+"@types/pbf@^3.0.2":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@types/pbf/-/pbf-3.0.5.tgz#a9495a58d8c75be4ffe9a0bd749a307715c07404"
+  integrity sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA==
+
+"@types/polylabel@^1.0.5":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@types/polylabel/-/polylabel-1.1.3.tgz#15aba4277b03ac0ab60a0dea75a13bde45dcfc01"
+  integrity sha512-9Zw2KoDpi+T4PZz2G6pO2xArE0m/GSMTW1MIxF2s8ZY8x9XDO6fv9um0ydRGvcbkFLlaq8yNK6eZxnmMZtDgWQ==
+
 "@types/raf@^3.4.0":
   version "3.4.3"
   resolved "https://registry.yarnpkg.com/@types/raf/-/raf-3.4.3.tgz#85f1d1d17569b28b8db45e16e996407a56b0ab04"
   integrity sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==
 
+"@types/rbush@^3.0.0":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/rbush/-/rbush-3.0.4.tgz#265d84ec76dc48e464e95ae4f58e085f28f0a227"
+  integrity sha512-knSt9cCW8jj1ZSFcFeBZaX++OucmfPxxHiRwTahZfJlnQsek7O0bazTJHWD2RVj9LEoejUYF2de3/stf+QXcXw==
+
 "@types/semver@^7.5.0":
   version "7.5.8"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"
   integrity sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==
 
+"@types/three@^0.134.0":
+  version "0.134.0"
+  resolved "https://registry.yarnpkg.com/@types/three/-/three-0.134.0.tgz#22ae9892f4490faaf35f0ccea127df18407b8ab3"
+  integrity sha512-4YB+99Rgqq27EjiYTItEoZtdjLnTh8W9LxowgpC9eWsjaQJIL4Kn/ZcUKAnW3gB/jS4hqGN8iqmid+RcUZDzpA==
+
 "@types/tough-cookie@*":
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.5.tgz#cb6e2a691b70cb177c6e3ae9c1d2e8b2ea8cd304"
   integrity sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==
 
+"@types/virtual-dom@^2.1.1":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@types/virtual-dom/-/virtual-dom-2.1.4.tgz#9626e7cda51483d16d20f2d3dee2c4b62357f8dc"
+  integrity sha512-Y7L/frVydXRd16MevczslJZQu+QWsrqZlj6ytk7mST3xen0fkx7Ollw31By/89A8Wq+nfNWm/IoTR1ac/0fRhA==
+
 "@typescript-eslint/eslint-plugin@^6.7.0":
   version "6.21.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz#30830c1ca81fd5f3c2714e524c4303e0194f9cd3"
@@ -1923,6 +1963,11 @@ braces@^3.0.2, braces@~3.0.2:
   dependencies:
     fill-range "^7.1.1"
 
+browser-split@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/browser-split/-/browser-split-0.0.1.tgz#7b097574f8e3ead606fb4664e64adfdda2981a93"
+  integrity sha512-JhvgRb2ihQhsljNda3BI8/UcRHVzrVwo3Q+P8vDtSiyobXuFpuZ9mq+MbRGMnC22CjW3RrfXdg6j6ITX8M+7Ow==
+
 browserslist@^4.22.2:
   version "4.23.0"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.23.0.tgz#8f3acc2bbe73af7213399430890f86c63a5674ab"
@@ -1964,6 +2009,11 @@ camelcase@^6.3.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
+camelize@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3"
+  integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==
+
 caniuse-lite@^1.0.30001587:
   version "1.0.30001618"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001618.tgz#fad74fa006aef0f01e8e5c0a5540c74d8d36ec6f"
@@ -2306,6 +2356,11 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-walk@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
+  integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
+
 domexception@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/domexception/-/domexception-4.0.0.tgz#4ad1be56ccadc86fc76d033353999a8037d03673"
@@ -2375,6 +2430,15 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
+error@^4.3.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/error/-/error-4.4.0.tgz#bf69ff251fb4a279c19adccdaa6b61e90d9bf12a"
+  integrity sha512-SNDKualLUtT4StGFP7xNfuFybL2f6iJujFtrWuvJqGbVQGaN+adE23veqzPz1hjUjTunLi2EnJ+0SJxtbJreKw==
+  dependencies:
+    camelize "^1.0.0"
+    string-template "~0.2.0"
+    xtend "~4.0.0"
+
 es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.23.0, es-abstract@^1.23.2:
   version "1.23.3"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.23.3.tgz#8f0c5a35cd215312573c5a27c87dfd6c881a0aa0"
@@ -2674,6 +2738,13 @@ esutils@^2.0.2:
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
+ev-store@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/ev-store/-/ev-store-7.0.0.tgz#1ab0c7f82136505dd74b31d17701cb2be6d26558"
+  integrity sha512-otazchNRnGzp2YarBJ+GXKVGvhxVATB1zmaStxJBYet0Dyq7A9VhH8IUEB/gRcL6Ch52lfpgPTRJ2m49epyMsQ==
+  dependencies:
+    individual "^3.0.0"
+
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
@@ -2943,6 +3014,14 @@ glob@^7.1.3:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+global@^4.3.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
+  integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
+  dependencies:
+    min-document "^2.19.0"
+    process "^0.11.10"
+
 globals@^11.1.0:
   version "11.12.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
@@ -3125,6 +3204,11 @@ imurmurhash@^0.1.4:
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
 
+individual@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/individual/-/individual-3.0.0.tgz#e7ca4f85f8957b018734f285750dc22ec2f9862d"
+  integrity sha512-rUY5vtT748NMRbEMrTNiFfy29BgGZwGXUi2NFUVMWQrogSLzlJvQV9eeMWi+g1aVaQ53tpyLAQtd5x/JH0Nh1g==
+
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
@@ -3247,6 +3331,11 @@ is-number@^7.0.0:
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
   integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
 
+is-object@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-object/-/is-object-1.0.2.tgz#a56552e1c665c9e950b4a025461da87e72f86fcf"
+  integrity sha512-2rRIahhZr2UWb45fIOuvZGpFtz0TyOZLf32KxBbSoUCeZR495zCKlWUKKUByk3geS2eAs7ZAABt0Y/Rx0GiQGA==
+
 is-path-inside@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
@@ -3495,6 +3584,11 @@ lodash@^4.17.21:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
+long@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/long/-/long-3.2.0.tgz#d821b7138ca1cb581c172990ef14db200b5c474b"
+  integrity sha512-ZYvPPOMqUwPoDsbJaR10iQJYnMuZhRTvHYl62ErLIEX7RgFlziSBUUvrt3OVfc47QlHHpzPZYP17g3Fv7oeJkg==
+
 long@^5.0.0:
   version "5.2.3"
   resolved "https://registry.yarnpkg.com/long/-/long-5.2.3.tgz#a3ba97f3877cf1d778eccbcb048525ebb77499e1"
@@ -3526,6 +3620,30 @@ magic-string@^0.30.0, magic-string@^0.30.1, magic-string@^0.30.10:
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.15"
 
+mapillary-js@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/mapillary-js/-/mapillary-js-4.1.2.tgz#ed4df0e0926a6af6f46d28b73181e154cc429b67"
+  integrity sha512-LYj6xbp/Y9wfBkr/prRwgJGb3+KwvzUri0yl5QEpMEH7oC1p52ErshWmPXysKefmm6JaFML4D7FJ89viwJ4T5g==
+  dependencies:
+    "@types/earcut" "^2.1.1"
+    "@types/node" "^14.14.31"
+    "@types/pako" "^1.0.2"
+    "@types/pbf" "^3.0.2"
+    "@types/polylabel" "^1.0.5"
+    "@types/rbush" "^3.0.0"
+    "@types/three" "^0.134.0"
+    "@types/virtual-dom" "^2.1.1"
+    earcut "^2.2.3"
+    martinez-polygon-clipping "^0.7.1"
+    pako "^2.0.4"
+    pbf "^3.2.1"
+    polylabel "^1.1.0"
+    rbush "^3.0.1"
+    rxjs "^7.3.0"
+    s2-geometry "^1.2.10"
+    three "^0.134.0"
+    virtual-dom "^2.1.1"
+
 markdown-it@^12.3.2:
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-12.3.2.tgz#bf92ac92283fe983fe4de8ff8abfb5ad72cd0c90"
@@ -3537,6 +3655,15 @@ markdown-it@^12.3.2:
     mdurl "^1.0.1"
     uc.micro "^1.0.5"
 
+martinez-polygon-clipping@^0.7.1:
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/martinez-polygon-clipping/-/martinez-polygon-clipping-0.7.4.tgz#f7b27f9bdf05fe8d770531605919eeb84764f237"
+  integrity sha512-jBEwrKtA0jTagUZj2bnmb4Yg2s4KnJGRePStgI7bAVjtcipKiF39R4LZ2V/UT61jMYWrTcBhPazexeqd6JAVtw==
+  dependencies:
+    robust-predicates "^2.0.4"
+    splaytree "^0.1.4"
+    tinyqueue "^1.2.0"
+
 mdurl@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
@@ -3577,6 +3704,13 @@ mime-types@^2.1.12:
   dependencies:
     mime-db "1.52.0"
 
+min-document@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
+  integrity sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==
+  dependencies:
+    dom-walk "^0.1.0"
+
 minimatch@9.0.1:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.1.tgz#8a555f541cf976c622daf078bb28f29fb927c253"
@@ -3640,6 +3774,11 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
+next-tick@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-0.2.2.tgz#75da4a927ee5887e39065880065b7336413b310d"
+  integrity sha512-f7h4svPtl+QidoBv4taKXUjJ70G2asaZ8G28nS0OkqaalX8dwwrtWtyxEDPK62AC00ur/+/E0pUwBwY5EPn15Q==
+
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
@@ -3883,6 +4022,14 @@ pbf@3.2.1:
     ieee754 "^1.1.12"
     resolve-protobuf-schema "^2.1.0"
 
+pbf@^3.2.1:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/pbf/-/pbf-3.3.0.tgz#1790f3d99118333cc7f498de816028a346ef367f"
+  integrity sha512-XDF38WCH3z5OV/OVa8GKUNtLAyneuzbCisx7QUCF8Q6Nutx0WnJrQe5O+kOtBlLfRNUws98Y58Lblp+NJG5T4Q==
+  dependencies:
+    ieee754 "^1.1.12"
+    resolve-protobuf-schema "^2.1.0"
+
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
@@ -3939,6 +4086,13 @@ playwright@1.44.0:
   optionalDependencies:
     fsevents "2.3.2"
 
+polylabel@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/polylabel/-/polylabel-1.1.0.tgz#9483e64fc7a12a49f43e07e7a06752214ed2a8e7"
+  integrity sha512-bxaGcA40sL3d6M4hH72Z4NdLqxpXRsCFk8AITYg6x1rn1Ei3izf00UMLklerBZTO49aPA3CYrIwVulx2Bce2pA==
+  dependencies:
+    tinyqueue "^2.0.3"
+
 possible-typed-array-names@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
@@ -3987,6 +4141,11 @@ pretty-format@^29.5.0:
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
+process@^0.11.10:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+  integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
+
 proj4@^2.11.0:
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/proj4/-/proj4-2.11.0.tgz#795a5790aed30a7535d6a4c5775c0ce2a763cc41"
@@ -4156,6 +4315,11 @@ rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
+robust-predicates@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/robust-predicates/-/robust-predicates-2.0.4.tgz#0a2367a93abd99676d075981707f29cfb402248b"
+  integrity sha512-l4NwboJM74Ilm4VKfbAtFeGq7aEjWL+5kVFcmgFA2MrdnQWx9iE/tUGvxY5HyMI7o/WpSIUFLbC5fbeaHgSCYg==
+
 rollup@^3.27.1:
   version "3.29.4"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.29.4.tgz#4d70c0f9834146df8705bfb69a9a19c9e1109981"
@@ -4200,6 +4364,20 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
+rxjs@^7.3.0:
+  version "7.8.1"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"
+  integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==
+  dependencies:
+    tslib "^2.1.0"
+
+s2-geometry@^1.2.10:
+  version "1.2.10"
+  resolved "https://registry.yarnpkg.com/s2-geometry/-/s2-geometry-1.2.10.tgz#c6ff22f3eccafd0eea491b60b44c141b9887acab"
+  integrity sha512-5WejfQu1XZ25ZerW8uL6xP1sM2krcOYKhI6TbfybGRf+vTQLrm3E+4n0+1lWg+MYqFjPzoe51zKhn2sBRMCt5g==
+  dependencies:
+    long "^3.2.0"
+
 safe-array-concat@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.2.tgz#81d77ee0c4e8b863635227c721278dd524c20edb"
@@ -4363,6 +4541,11 @@ spdx-license-ids@^3.0.0:
   resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.17.tgz#887da8aa73218e51a1d917502d79863161a93f9c"
   integrity sha512-sh8PWc/ftMqAAdFiBu6Fy6JUOYjqDJBJvIhpfDMyHrr0Rbp5liZqd4TjtQ/RgfLjKFZb+LMx5hpml5qOWy0qvg==
 
+splaytree@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/splaytree/-/splaytree-0.1.4.tgz#fc35475248edcc29d4938c9b67e43c6b7e55a659"
+  integrity sha512-D50hKrjZgBzqD3FT2Ek53f2dcDLAQT8SSGrzj3vidNH5ISRgceeGVJ2dQIthKOuayqFXfFjXheHNo4bbt9LhRQ==
+
 stackback@0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/stackback/-/stackback-0.0.2.tgz#1ac8a0d9483848d1695e418b6d031a3c3ce68e3b"
@@ -4378,6 +4561,11 @@ std-env@^3.3.3:
   resolved "https://registry.yarnpkg.com/std-env/-/std-env-3.7.0.tgz#c9f7386ced6ecf13360b6c6c55b8aaa4ef7481d2"
   integrity sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==
 
+string-template@~0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/string-template/-/string-template-0.2.1.tgz#42932e598a352d01fc22ec3367d9d84eec6c9add"
+  integrity sha512-Yptehjogou2xm4UJbxJ4CxgZx12HBfeystp0y3x7s4Dj32ltVVG1Gg8YhKjHZkHicuKpZX/ffilA8505VbUbpw==
+
 "string-width-cjs@npm:string-width@^4.2.0":
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
@@ -4535,6 +4723,11 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
+three@^0.134.0:
+  version "0.134.0"
+  resolved "https://registry.yarnpkg.com/three/-/three-0.134.0.tgz#d7ad4d85d050da0861bf39749b06ddfb5f17157f"
+  integrity sha512-LbBerg7GaSPjYtTOnu41AMp7tV6efUNR3p4Wk5NzkSsNTBuA5mDGOfwwZL1jhhVMLx9V20HolIUo0+U3AXehbg==
+
 tiny-emitter@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
@@ -4555,6 +4748,16 @@ tinypool@^0.7.0:
   resolved "https://registry.yarnpkg.com/tinypool/-/tinypool-0.7.0.tgz#88053cc99b4a594382af23190c609d93fddf8021"
   integrity sha512-zSYNUlYSMhJ6Zdou4cJwo/p7w5nmAH17GRfU/ui3ctvjXFErXXkruT4MWW6poDeXgCaIBlGLrfU6TbTXxyGMww==
 
+tinyqueue@^1.2.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/tinyqueue/-/tinyqueue-1.2.3.tgz#b6a61de23060584da29f82362e45df1ec7353f3d"
+  integrity sha512-Qz9RgWuO9l8lT+Y9xvbzhPT2efIUIFd69N7eF7tJ9lnQl0iLj1M7peK7IoUGZL9DJHw9XftqLreccfxcQgYLxA==
+
+tinyqueue@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/tinyqueue/-/tinyqueue-2.0.3.tgz#64d8492ebf39e7801d7bd34062e29b45b2035f08"
+  integrity sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==
+
 tinyspy@^2.1.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tinyspy/-/tinyspy-2.2.1.tgz#117b2342f1f38a0dbdcc73a50a454883adf861d1"
@@ -4760,6 +4963,20 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+virtual-dom@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/virtual-dom/-/virtual-dom-2.1.1.tgz#80eda2d481b9ede0c049118cefcb4a05f21d1375"
+  integrity sha512-wb6Qc9Lbqug0kRqo/iuApfBpJJAq14Sk1faAnSmtqXiwahg7PVTvWMs9L02Z8nNIMqbwsxzBAA90bbtRLbw0zg==
+  dependencies:
+    browser-split "0.0.1"
+    error "^4.3.0"
+    ev-store "^7.0.0"
+    global "^4.3.0"
+    is-object "^1.0.1"
+    next-tick "^0.2.2"
+    x-is-array "0.1.0"
+    x-is-string "0.1.0"
+
 vite-node@0.34.6:
   version "0.34.6"
   resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-0.34.6.tgz#34d19795de1498562bf21541a58edcd106328a17"
@@ -5085,6 +5302,16 @@ ws@^8.13.0:
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.18.0.tgz#0d7505a6eafe2b0e712d232b42279f53bc289bbc"
   integrity sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==
 
+x-is-array@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/x-is-array/-/x-is-array-0.1.0.tgz#de520171d47b3f416f5587d629b89d26b12dc29d"
+  integrity sha512-goHPif61oNrr0jJgsXRfc8oqtYzvfiMJpTqwE7Z4y9uH+T3UozkGqQ4d2nX9mB9khvA8U2o/UbPOFjgC7hLWIA==
+
+x-is-string@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/x-is-string/-/x-is-string-0.1.0.tgz#474b50865af3a49a9c4657f05acd145458f77d82"
+  integrity sha512-GojqklwG8gpzOVEVki5KudKNoq7MbbjYZCbyWzEz7tyPA7eleiE0+ePwOWQQRb5fm86rD3S8Tc0tSFf3AOv50w==
+
 xml-name-validator@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz#79a006e2e63149a8600f15430f0a4725d1524835"
@@ -5100,6 +5327,11 @@ xmlchars@^2.2.0:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
+xtend@~4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
+  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
+
 y18n@^5.0.5:
   version "5.0.8"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"

From 1ceb8702c4c40012c54a01616e9c163c015741dd Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Wed, 16 Oct 2024 17:39:12 +0200
Subject: [PATCH 05/10] feat(street, media): disable option buttons and forward
 while loading image

---
 src/components/MediaProject.vue  | 5 +++--
 src/components/OptionButtons.vue | 5 +++++
 src/components/StreetProject.vue | 7 +++++--
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/MediaProject.vue b/src/components/MediaProject.vue
index 571f05e..0c54cd2 100644
--- a/src/components/MediaProject.vue
+++ b/src/components/MediaProject.vue
@@ -93,7 +93,7 @@ export default defineComponent({
     },
     back() {
       if (!this.taskIndex <= 0) {
-        this.imageLoaded = false
+        this.isImageLoaded = false
         this.taskIndex--
         this.taskId = this.tasks[this.taskIndex].taskId
       }
@@ -105,7 +105,7 @@ export default defineComponent({
     },
     forward() {
       if (this.isImageLoaded && this.isAnswered() && this.taskIndex + 1 < this.tasks.length) {
-        this.imageLoaded = false
+        this.isImageLoaded = false
         this.taskIndex++
         this.taskId = this.tasks[this.taskIndex].taskId
       }
@@ -170,6 +170,7 @@ export default defineComponent({
   </v-container>
   <option-buttons
     v-if="taskId"
+    :disabled="!isImageLoaded"
     :options="options"
     :result="results[taskId]"
     :taskId="taskId"
diff --git a/src/components/OptionButtons.vue b/src/components/OptionButtons.vue
index dc3ddff..cbe6c0b 100644
--- a/src/components/OptionButtons.vue
+++ b/src/components/OptionButtons.vue
@@ -19,6 +19,10 @@ export interface Option {
 
 export default defineComponent({
   props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
     options: {
       type: Array as PropType<Option[]>,
       required: true,
@@ -86,6 +90,7 @@ export default defineComponent({
       @click="handleOptionButtonClicked(option)"
       v-shortkey="[option.shortkey]"
       @shortkey="handleOptionButtonClicked(option)"
+      :disabled="disabled"
       :title="[option.title, option.description].filter(Boolean).join(': ')"
       :text="'(' + option.shortkey + ') ' + option.title"
       :key="optionIndex"
diff --git a/src/components/StreetProject.vue b/src/components/StreetProject.vue
index 6b2994b..bd0f8ff 100644
--- a/src/components/StreetProject.vue
+++ b/src/components/StreetProject.vue
@@ -77,6 +77,7 @@ export default defineComponent({
   data() {
     return {
       arrowKeys: true,
+      isLoading: true,
       results: {},
       startTime: null,
       taskId: undefined,
@@ -114,7 +115,7 @@ export default defineComponent({
     },
     */
     forward() {
-      if (this.isAnswered() && this.taskIndex + 1 < this.tasks.length) {
+      if (!this.isLoading && this.isAnswered() && this.taskIndex + 1 < this.tasks.length) {
         this.taskIndex++
         this.taskId = this.tasks[this.taskIndex].taskId
         this.viewer.moveTo(this.taskId)
@@ -131,6 +132,7 @@ export default defineComponent({
       this.viewer.deactivateComponent('direction')
       this.viewer.deactivateComponent('sequence')
       this.viewer.deactivateComponent('keyboard')
+      this.viewer.on('dataloading', (e) => (this.isLoading = e.loading))
     },
     isAnswered() {
       const result = this.results[this.taskId]
@@ -174,6 +176,7 @@ export default defineComponent({
   />
   <option-buttons
     v-if="taskId"
+    :disabled="isLoading"
     :options="options"
     :result="results[taskId]"
     :taskId="taskId"
@@ -201,7 +204,7 @@ export default defineComponent({
       :title="$t('mediaProject.moveRight')"
       icon="mdi-chevron-right"
       color="secondary"
-      :disabled="!isAnswered() || taskIndex + 1 === tasks.length"
+      :disabled="isLoading || !isAnswered() || taskIndex + 1 === tasks.length"
       @click="forward"
       v-shortkey.once="[arrowKeys ? 'arrowright' : '']"
       @shortkey="forward"

From 325303b95c77c960d84a5971906b284987d68cbc Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Thu, 24 Oct 2024 15:24:12 +0200
Subject: [PATCH 06/10] refactor(street): move viewer into street-project-task
 component

---
 src/components/StreetProject.vue     | 40 +++------------------
 src/components/StreetProjectTask.vue | 52 ++++++++++++++++++++++++++++
 2 files changed, 56 insertions(+), 36 deletions(-)
 create mode 100644 src/components/StreetProjectTask.vue

diff --git a/src/components/StreetProject.vue b/src/components/StreetProject.vue
index bd0f8ff..c67edb7 100644
--- a/src/components/StreetProject.vue
+++ b/src/components/StreetProject.vue
@@ -1,17 +1,17 @@
 <script lang="ts">
-import { Viewer } from 'mapillary-js'
-import 'mapillary-js/dist/mapillary.css'
-import { defineComponent } from 'vue'
 // import createInformationPages from '@/utils/createInformationPages'
+import StreetProjectTask from './StreetProjectTask.vue'
 import OptionButtons from './OptionButtons.vue'
 import ProjectHeader from './ProjectHeader.vue'
 // import ProjectInfo from './ProjectInfo.vue'
 import TaskProgress from '@/components/TaskProgress.vue'
 // import StreetProjectInstructions from './StreetProjectInstructions.vue'
+import { defineComponent } from 'vue'
 
 export default defineComponent({
   components: {
     // streetProjectInstructions: StreetProjectInstructions,
+    streetProjectTask: StreetProjectTask,
     optionButtons: OptionButtons,
     projectHeader: ProjectHeader,
     // projectInfo: ProjectInfo,
@@ -82,7 +82,6 @@ export default defineComponent({
       startTime: null,
       taskId: undefined,
       taskIndex: 0,
-      viewer: null,
     }
   },
   inject: {
@@ -96,7 +95,6 @@ export default defineComponent({
     },
   },
   methods: {
-    // TODO: add geometry to result value?
     addResult(value) {
       this.results[this.taskId] = value
     },
@@ -104,36 +102,14 @@ export default defineComponent({
       if (!this.taskIndex <= 0) {
         this.taskIndex--
         this.taskId = this.tasks[this.taskIndex].taskId
-        this.viewer.moveTo(this.taskId)
       }
     },
-    /* 
-    createInformationPages,
-    // fallback information pages for media projects tbd (could be similar to find projects)
-    createFallbackInformationPages() {
-      return undefined
-    },
-    */
     forward() {
       if (!this.isLoading && this.isAnswered() && this.taskIndex + 1 < this.tasks.length) {
         this.taskIndex++
         this.taskId = this.tasks[this.taskIndex].taskId
-        this.viewer.moveTo(this.taskId)
       }
     },
-    initialiseViewer(imageId) {
-      this.viewer = new Viewer({
-        accessToken: import.meta.env.VITE_MAPILLARY_API_KEY,
-        component: { cover: false },
-        container: 'mapillary',
-        imageId: imageId,
-      })
-
-      this.viewer.deactivateComponent('direction')
-      this.viewer.deactivateComponent('sequence')
-      this.viewer.deactivateComponent('keyboard')
-      this.viewer.on('dataloading', (e) => (this.isLoading = e.loading))
-    },
     isAnswered() {
       const result = this.results[this.taskId]
       const defined = result !== undefined
@@ -146,9 +122,6 @@ export default defineComponent({
     this.$emit('created')
     this.logMappingStarted(this.project.projectType)
   },
-  mounted() {
-    this.initialiseViewer(this.taskId)
-  },
 })
 </script>
 
@@ -168,12 +141,7 @@ export default defineComponent({
       </template>
     </project-info-->
   </project-header>
-  <v-container
-    id="mapillary"
-    class="ma-0 pa-0"
-    v-touch="{ left: () => forward(), right: () => back() }"
-    style="position: relative; height: calc(100vh - 375px)"
-  />
+  <street-project-task :taskId="taskId" @dataloading="(e) => (isLoading = e.loading)" />
   <option-buttons
     v-if="taskId"
     :disabled="isLoading"
diff --git a/src/components/StreetProjectTask.vue b/src/components/StreetProjectTask.vue
new file mode 100644
index 0000000..be3ffeb
--- /dev/null
+++ b/src/components/StreetProjectTask.vue
@@ -0,0 +1,52 @@
+<script lang="ts">
+import { Viewer } from 'mapillary-js'
+import 'mapillary-js/dist/mapillary.css'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  props: {
+    taskId: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      viewer: null,
+    }
+  },
+  watch: {
+    taskId(newTaskId) {
+      this.viewer.moveTo(newTaskId)
+    },
+  },
+  methods: {
+    initialiseViewer(imageId) {
+      this.viewer = new Viewer({
+        accessToken: import.meta.env.VITE_MAPILLARY_API_KEY,
+        component: { cover: false },
+        container: 'mapillary',
+        imageId: imageId,
+      })
+
+      this.viewer.deactivateComponent('direction')
+      this.viewer.deactivateComponent('sequence')
+      this.viewer.deactivateComponent('keyboard')
+      this.viewer.on('dataloading', (e) => this.$emit('dataloading', e))
+    },
+  },
+  mounted() {
+    this.initialiseViewer(this.taskId)
+  },
+})
+</script>
+
+<template>
+  <v-container
+    id="mapillary"
+    class="ma-0 pa-0"
+    style="position: relative; height: calc(100vh - 375px)"
+  />
+</template>
+
+<style scoped></style>

From ee2526d655bc0a92ebb6126b9a9f1defa811fcb8 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Mon, 28 Oct 2024 18:34:21 +0100
Subject: [PATCH 07/10] feat(street): add instructions and project-info

---
 src/components/DigitizeProject.vue           |  2 +-
 src/components/MediaProject.vue              |  2 +-
 src/components/StreetProject.vue             | 34 +++++-----
 src/components/StreetProjectInstructions.vue | 67 ++++++++++++++++++++
 src/i18n/locales/de.json                     |  4 ++
 src/i18n/locales/en.json                     |  4 ++
 6 files changed, 93 insertions(+), 20 deletions(-)
 create mode 100644 src/components/StreetProjectInstructions.vue

diff --git a/src/components/DigitizeProject.vue b/src/components/DigitizeProject.vue
index 67d3bb0..f66626d 100644
--- a/src/components/DigitizeProject.vue
+++ b/src/components/DigitizeProject.vue
@@ -38,7 +38,7 @@ export default defineComponent({
     },
     tutorial: {
       type: Object,
-      require: false,
+      required: false,
     },
   },
   data() {
diff --git a/src/components/MediaProject.vue b/src/components/MediaProject.vue
index 0c54cd2..cb01990 100644
--- a/src/components/MediaProject.vue
+++ b/src/components/MediaProject.vue
@@ -44,7 +44,7 @@ export default defineComponent({
     },
     tutorial: {
       type: Object,
-      require: false,
+      required: false,
     },
   },
   data() {
diff --git a/src/components/StreetProject.vue b/src/components/StreetProject.vue
index c67edb7..e78da17 100644
--- a/src/components/StreetProject.vue
+++ b/src/components/StreetProject.vue
@@ -1,20 +1,20 @@
 <script lang="ts">
-// import createInformationPages from '@/utils/createInformationPages'
+import createInformationPages from '@/utils/createInformationPages'
 import StreetProjectTask from './StreetProjectTask.vue'
 import OptionButtons from './OptionButtons.vue'
 import ProjectHeader from './ProjectHeader.vue'
-// import ProjectInfo from './ProjectInfo.vue'
+import ProjectInfo from './ProjectInfo.vue'
 import TaskProgress from '@/components/TaskProgress.vue'
-// import StreetProjectInstructions from './StreetProjectInstructions.vue'
+import StreetProjectInstructions from './StreetProjectInstructions.vue'
 import { defineComponent } from 'vue'
 
 export default defineComponent({
   components: {
-    // streetProjectInstructions: StreetProjectInstructions,
+    streetProjectInstructions: StreetProjectInstructions,
     streetProjectTask: StreetProjectTask,
     optionButtons: OptionButtons,
     projectHeader: ProjectHeader,
-    // projectInfo: ProjectInfo,
+    projectInfo: ProjectInfo,
     taskProgress: TaskProgress,
   },
   props: {
@@ -22,12 +22,10 @@ export default defineComponent({
       type: Object,
       required: true,
     },
-    /*
     first: {
       type: Boolean,
       default: false,
     },
-    */
     options: {
       type: Array,
       options: {
@@ -67,12 +65,10 @@ export default defineComponent({
       type: Array,
       required: true,
     },
-    /*
     tutorial: {
       type: Object,
-      require: false,
+      required: false,
     },
-    */
   },
   data() {
     return {
@@ -104,6 +100,11 @@ export default defineComponent({
         this.taskId = this.tasks[this.taskIndex].taskId
       }
     },
+    createInformationPages,
+    // fallback information pages for street projects tbd
+    createFallbackInformationPages() {
+      return undefined
+    },
     forward() {
       if (!this.isLoading && this.isAnswered() && this.taskIndex + 1 < this.tasks.length) {
         this.taskIndex++
@@ -127,19 +128,16 @@ export default defineComponent({
 
 <template>
   <project-header :instructionMessage="instructionMessage" :title="project?.projectTopic">
-    <!--project-info
+    <project-info
       :first="first"
       :informationPages="createInformationPages(tutorial, project, createFallbackInformationPages)"
       :manualUrl="project?.manualUrl"
       @toggle-dialog="arrowKeys = !arrowKeys"
     >
       <template #instructions>
-        <street-project-instructions
-          :instructionMessage="instructionMessage"
-          :options="options"
-        />
+        <street-project-instructions :instructionMessage="instructionMessage" :options="options" />
       </template>
-    </project-info-->
+    </project-info>
   </project-header>
   <street-project-task :taskId="taskId" @dataloading="(e) => (isLoading = e.loading)" />
   <option-buttons
@@ -153,7 +151,7 @@ export default defineComponent({
   <v-toolbar color="white" extension-height="20" density="compact" extended>
     <v-spacer />
     <v-btn
-      :title="$t('mediaProject.moveLeft')"
+      :title="$t('streetProject.moveLeft')"
       icon="mdi-chevron-left"
       color="secondary"
       :disabled="taskIndex <= 0"
@@ -169,7 +167,7 @@ export default defineComponent({
       @click="saveResults(results, startTime)"
     />
     <v-btn
-      :title="$t('mediaProject.moveRight')"
+      :title="$t('streetProject.moveRight')"
       icon="mdi-chevron-right"
       color="secondary"
       :disabled="isLoading || !isAnswered() || taskIndex + 1 === tasks.length"
diff --git a/src/components/StreetProjectInstructions.vue b/src/components/StreetProjectInstructions.vue
new file mode 100644
index 0000000..c1ac113
--- /dev/null
+++ b/src/components/StreetProjectInstructions.vue
@@ -0,0 +1,67 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  props: {
+    instructionMessage: {
+      type: String,
+      required: true,
+    },
+    attribution: {
+      type: String,
+      require: false,
+    },
+    options: {
+      type: Array,
+      required: true,
+    },
+  },
+})
+</script>
+
+<template>
+  <v-card-text>
+    <div class="text-h6">{{ $t('projectInstructions.classifyTitle') }}</div>
+    <div class="text-p">
+      {{ instructionMessage }} {{ $t('projectInstructions.classifyInstruction') }}.
+    </div>
+
+    <v-row v-for="(option, optionIndex) in options" :key="optionIndex" align="center" dense>
+      <v-col cols="auto" class="mr-4">
+        <v-btn
+          class="mx-2 text-caption"
+          width="6rem"
+          :text="'(' + option.shortkey + ') ' + option.title"
+          :color="option.iconColor"
+          :prepend-icon="option.mdiIcon"
+          variant="plain"
+          stacked
+        />
+      </v-col>
+      <v-col>{{ [option.title, option.description].filter(Boolean).join(': ') }}</v-col>
+    </v-row>
+
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.useButtonsToNavigate') }}</div>
+    <div class="text-p mt-2">
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
+          <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
+        </v-col>
+        <v-col>{{ $t('projectInstructions.move') }}</v-col>
+      </v-row>
+    </div>
+
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.saveYourAnswers') }}</div>
+    <div class="text-p mt-2">
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-content-save" color="primary" variant="text" />
+        </v-col>
+        <v-col>{{ $t('projectInstructions.seenAll') }}</v-col>
+      </v-row>
+    </div>
+  </v-card-text>
+</template>
+
+<style scoped></style>
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index 015903a..24c00c5 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -200,6 +200,10 @@
     "moveLeft": "Zurück",
     "moveRight": "Weiter"
   },
+  "streetProject": {
+    "moveLeft": "Zurück",
+    "moveRight": "Weiter"
+  },
   "digitizeProjectInstructions": {
     "switchMode": "Editiermodus umschalten",
     "drawNewFeature": "Neue Objekte einzeichnen",
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 469eac2..7222394 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -200,6 +200,10 @@
     "moveLeft": "Back",
     "moveRight": "Forward"
   },
+  "streetProject": {
+    "moveLeft": "Back",
+    "moveRight": "Forward"
+  },
   "digitizeProjectInstructions": {
     "switchMode": "Switch editing mode",
     "drawNewFeature": "Draw new features",

From fce015a033769e32cfd91b52814c7d29bd935250 Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Wed, 4 Dec 2024 11:59:35 +0100
Subject: [PATCH 08/10] fix(street-project): correctly define default options
 prop

---
 src/components/StreetProject.vue | 51 +++++++++++++++-----------------
 1 file changed, 24 insertions(+), 27 deletions(-)

diff --git a/src/components/StreetProject.vue b/src/components/StreetProject.vue
index e78da17..7ab2163 100644
--- a/src/components/StreetProject.vue
+++ b/src/components/StreetProject.vue
@@ -28,33 +28,30 @@ export default defineComponent({
     },
     options: {
       type: Array,
-      options: {
-        type: Array,
-        default() {
-          return [
-            {
-              mdiIcon: 'mdi-check-bold',
-              iconColor: '#bbcb7d',
-              shortkey: 1,
-              title: 'Yes',
-              value: 1,
-            },
-            {
-              mdiIcon: 'mdi-close-thick',
-              iconColor: '#fd5054',
-              shortkey: 2,
-              title: 'No',
-              value: 0,
-            },
-            {
-              mdiIcon: 'mdi-minus-thick',
-              iconColor: '#adadad',
-              title: 'Not sure',
-              shortkey: 3,
-              value: 2,
-            },
-          ]
-        },
+      default() {
+        return [
+          {
+            mdiIcon: 'mdi-check-bold',
+            iconColor: '#bbcb7d',
+            shortkey: 1,
+            title: 'Yes',
+            value: 1,
+          },
+          {
+            mdiIcon: 'mdi-close-thick',
+            iconColor: '#fd5054',
+            shortkey: 2,
+            title: 'No',
+            value: 0,
+          },
+          {
+            mdiIcon: 'mdi-minus-thick',
+            iconColor: '#adadad',
+            title: 'Not sure',
+            shortkey: 3,
+            value: 2,
+          },
+        ]
       },
     },
     project: {

From d44896678c9f48e1ab1ed93159694bb7f9840d3e Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Thu, 5 Dec 2024 11:10:14 +0100
Subject: [PATCH 09/10] feat(street-project-task): reset view on move

---
 src/components/StreetProjectTask.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/StreetProjectTask.vue b/src/components/StreetProjectTask.vue
index be3ffeb..9e86104 100644
--- a/src/components/StreetProjectTask.vue
+++ b/src/components/StreetProjectTask.vue
@@ -17,7 +17,7 @@ export default defineComponent({
   },
   watch: {
     taskId(newTaskId) {
-      this.viewer.moveTo(newTaskId)
+      this.viewer.moveTo(newTaskId).then(() => this.resetView())
     },
   },
   methods: {
@@ -34,6 +34,10 @@ export default defineComponent({
       this.viewer.deactivateComponent('keyboard')
       this.viewer.on('dataloading', (e) => this.$emit('dataloading', e))
     },
+    resetView() {
+      this.viewer.setCenter([0.5, 0.5])
+      this.viewer.setZoom(0)
+    },
   },
   mounted() {
     this.initialiseViewer(this.taskId)

From 3e3c6d9c665be26abac2d82b14d60e534b9722db Mon Sep 17 00:00:00 2001
From: Oliver Fritz <oliver.fritz@heigit.org>
Date: Thu, 5 Dec 2024 11:19:56 +0100
Subject: [PATCH 10/10] feat(street-project-task): use letterbox render mode

---
 src/components/StreetProjectTask.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/StreetProjectTask.vue b/src/components/StreetProjectTask.vue
index 9e86104..e2d534a 100644
--- a/src/components/StreetProjectTask.vue
+++ b/src/components/StreetProjectTask.vue
@@ -27,6 +27,7 @@ export default defineComponent({
         component: { cover: false },
         container: 'mapillary',
         imageId: imageId,
+        renderMode: 0, // Letterbox
       })
 
       this.viewer.deactivateComponent('direction')