feat(street): use imageProvider, process url, provide fallback for mapcomplete panoramax

Author: ofr1tz

src/components/StreetProject.vue

@@ -173,9 +173,9 @@ export default defineComponent({
     </project-info>
   </project-header>
   <street-project-task-panoramax
-    v-if="project.tileServer?.name == 'panoramax'"
+    v-if="project.imageProvider?.name == 'panoramax'"
     :taskId="taskId"
-    :endpoint="project.tileServer?.url"
+    :endpoint="(project.imageProvider?.url || '').replace(/\/$/, '') + '/api'"
     @dataloading="(e) => (isLoading = e)"
     @imageError="handleImageError()"
     style="position: relative; height: calc(100vh - 390px)"

src/components/StreetProjectTaskPanoramax.vue

@@ -3,14 +3,16 @@ import { defineComponent } from 'vue'
 import '@panoramax/web-viewer/build/index.css'
 import '@panoramax/web-viewer'
 
+const DEFAULT_ENDPOINT = 'https://api.panoramax.xyz/api'
+
 export default defineComponent({
   props: {
     containerId: {
       type: String,
       default: 'panoramax',
     },
     taskId: { type: String, required: true },
-    endpoint: { type: String, default: 'https://api.panoramax.xyz/api' },
+    endpoint: { type: String, default: DEFAULT_ENDPOINT },
   },
   data() {
     return {
@@ -46,6 +48,11 @@ export default defineComponent({
       if (arrows) arrows.remove()
     },
   },
+  computed: {
+    defaultEndpoint() {
+      return DEFAULT_ENDPOINT
+    },
+  },
   mounted() {
     this.initialiseViewer()
     this.moveViewer(this.taskId)
@@ -57,7 +64,7 @@ export default defineComponent({
   <v-container :id="`${containerId}`" class="ma-0 pa-0">
     <pnx-photo-viewer
       ref="viewer"
-      :endpoint="endpoint"
+      :endpoint="endpoint.includes('mapcomplete') ? defaultEndpoint : endpoint"
       widgets="false"
       url-parameters="false"
       keyboard-shortcuts="false"

src/components/StreetProjectTutorial.vue

@@ -218,10 +218,10 @@ export default defineComponent({
     <v-row justify="center">
       <v-col>
         <street-project-task-panoramax
-          v-if="taskId && tutorial && tutorial.tileServer?.name == 'panoramax'"
+          v-if="taskId && tutorial && tutorial.imageProvider?.name == 'panoramax'"
           :key="taskId"
           :taskId="taskId"
-          :endpoint="tutorial.tileServer?.url"
+          :endpoint="(tutorial.imageProvider?.url || '').replace(/\/$/, '') + '/api'"
           :containerId="'panoramax_tutorial'"
           @dataloading="(e) => (isLoading = e)"
           style="position: relative; height: calc(70vh - 390px)"