feat(street): use panoramax viewer

Author: ofr1tz

src/components/StreetProject.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 import createInformationPages from '@/utils/createInformationPages'
 import StreetProjectTask from './StreetProjectTask.vue'
+import StreetProjectTaskPanoramax from './StreetProjectTaskPanoramax.vue'
 import StreetProjectTutorial from '@/components/StreetProjectTutorial.vue'
 import OptionButtons from './OptionButtons.vue'
 import ProjectHeader from './ProjectHeader.vue'
@@ -14,6 +15,7 @@ export default defineComponent({
   components: {
     streetProjectInstructions: StreetProjectInstructions,
     streetProjectTask: StreetProjectTask,
+    streetProjectTaskPanoramax: StreetProjectTaskPanoramax,
     streetProjectTutorial: StreetProjectTutorial,
     optionButtons: OptionButtons,
     projectHeader: ProjectHeader,
@@ -170,7 +172,16 @@ export default defineComponent({
       </template>
     </project-info>
   </project-header>
+  <street-project-task-panoramax
+    v-if="project.tileServer?.name == 'panoramax'"
+    :taskId="taskId"
+    :endpoint="project.tileServer?.url"
+    @dataloading="(e) => (isLoading = e)"
+    @imageError="handleImageError(taskId)"
+    style="position: relative; height: calc(100vh - 390px)"
+  />
   <street-project-task
+    v-else
     :taskId="taskId"
     @dataloading="(e) => (isLoading = e.loading)"
     @imageError="handleImageError(taskId)"

src/components/StreetProjectTaskPanoramax.vue

@@ -5,13 +5,17 @@ import '@panoramax/web-viewer'
 
 export default defineComponent({
   props: {
+    containerId: {
+      type: String,
+      default: 'panoramax',
+      required: true,
+    },
     taskId: { type: String, required: true },
+    endpoint: { type: String, default: 'https://api.panoramax.xyz/api' },
   },
   data() {
     return {
       viewer: null as HTMLElement | null,
-      endpoint: 'https://api.panoramax.xyz/api',
-      pictureId: '362aba76-f730-49b6-ae04-aebcbfb958e0',
     }
   },
   watch: {
@@ -20,6 +24,24 @@ export default defineComponent({
     },
   },
   methods: {
+    initialiseViewer() {
+      this.viewer = this.$refs.viewer as HTMLElement
+      this.viewer.addEventListener('ready', () => {
+        this.removeArrows()
+      })
+      this.viewer.addEventListener('psv:picture-loading', () => {
+        this.$emit('dataloading', true)
+      })
+      this.viewer.addEventListener('psv:picture-loaded', () => {
+        this.$emit('dataloading', false)
+      })
+      /* TODO
+      this.viewer.addEventListener('broken', () => {
+        this.$emit('imageError', this.taskId)
+        console.log("broken")
+      })
+      */
+    },
     moveViewer(pictureId) {
       this.viewer.select(undefined, pictureId, true)
     },
@@ -29,26 +51,22 @@ export default defineComponent({
     },
   },
   mounted() {
-    this.viewer = this.$refs.viewer as HTMLElement
-    this.viewer.addEventListener('ready', () => {
-      this.removeArrows()
-      console.log('Web component viewer ready')
-    })
+    this.initialiseViewer()
+    this.moveViewer(this.taskId)
   },
 })
 </script>
 
 <template>
-  <div>
+  <v-container :id="`${containerId}`" class="ma-0 pa-0">
     <pnx-photo-viewer
       ref="viewer"
       :endpoint="endpoint"
-      :picture="pictureId"
       widgets="false"
       url-parameters="false"
       keyboard-shortcuts="false"
-    ></pnx-photo-viewer>
-  </div>
+    />
+  </v-container>
 </template>
 
 <style scoped></style>