Merge pull request #35 from mapswipe/information-pages

Add information pages to project instructions

src/components/CompareProject.vue

@@ -1,7 +1,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
+import createInformationPages from '@/utils/createInformationPages'
 import OptionButtons from '@/components/OptionButtons.vue'
 import ProjectHeader from '@/components/ProjectHeader.vue'
+import ProjectInfo from '@/components/ProjectInfo.vue'
 import TaskProgress from '@/components/TaskProgress.vue'
 import TileMap from '@/components/TileMap.vue'
 import ImageTile from '@/components/ImageTile.vue'
@@ -13,6 +15,7 @@ export default defineComponent({
     taskProgress: TaskProgress,
     optionButtons: OptionButtons,
     projectHeader: ProjectHeader,
+    projectInfo: ProjectInfo,
     imageTile: ImageTile,
     tileMap: TileMap,
   },
@@ -72,10 +75,15 @@ export default defineComponent({
       type: Array,
       require: true,
     },
+    tutorial: {
+      type: Object,
+      require: false,
+    },
   },
   data() {
     return {
       allAnswered: false,
+      arrowKeys: true,
       overlay: true,
       results: {},
       startTime: null,
@@ -111,6 +119,11 @@ export default defineComponent({
         this.taskId = this.tasks[this.taskIndex].taskId
       }
     },
+    createInformationPages,
+    // currently no fallback information pages defined in mobile map, same here
+    createFallbackInformationPages() {
+      return undefined
+    },
     forward() {
       if (this.isAnswered() && this.taskIndex + 1 < this.tasks.length) {
         this.taskIndex++
@@ -135,13 +148,20 @@ export default defineComponent({
 <template>
   <project-header :instructionMessage="instructionMessage" :title="project.projectTopic">
     <tile-map :page="[tasks[taskIndex]]" :zoomLevel="project.zoomLevel" />
-    <compare-project-instructions
-      :attribution="attribution"
+    <project-info
       :first="first"
-      :instructionMessage="instructionMessage"
+      :informationPages="createInformationPages(tutorial, project, createFallbackInformationPages)"
       :manualUrl="project?.manualUrl"
-      :options="options"
-    />
+      @toggle-dialog="arrowKeys = !arrowKeys"
+    >
+      <template #instructions>
+        <compare-project-instructions
+          :attribution="attribution"
+          :instructionMessage="instructionMessage"
+          :options="options"
+        />
+      </template>
+    </project-info>
   </project-header>
   <v-container class="pa-0" v-touch="{ left: () => forward(), right: () => back() }">
     <v-row>
@@ -215,7 +235,7 @@ export default defineComponent({
       color="secondary"
       :disabled="taskIndex <= 0"
       @click="back"
-      v-shortkey.once="['arrowleft']"
+      v-shortkey.once="[arrowKeys ? 'arrowleft' : '']"
       @shortkey="back"
     />
     <v-btn
@@ -231,7 +251,7 @@ export default defineComponent({
       color="secondary"
       :disabled="!isAnswered() || taskIndex + 1 === tasks.length"
       @click="forward"
-      v-shortkey.once="['arrowright']"
+      v-shortkey.once="[arrowKeys ? 'arrowright' : '']"
       @shortkey="forward"
     />
     <v-spacer />

src/components/CompareProjectInstructions.vue

@@ -11,118 +11,69 @@ export default defineComponent({
       type: String,
       require: false,
     },
-    first: {
-      type: Boolean,
-      default: false,
-    },
-    manualUrl: {
-      type: String,
-      require: false,
-    },
     options: {
       type: Array,
       required: true,
     },
   },
-  data: () => ({
-    results: {},
-    dialog: false,
-  }),
-  created() {
-    this.dialog = this.first
-  },
 })
 </script>
 
 <template>
-  <v-btn
-    :title="$t('findProjectInstructions.howToContribute')"
-    icon="mdi-information"
-    color="primary"
-    @click="dialog = true"
-  />
-  <v-dialog v-model="dialog" max-width="800" eager scrollable>
-    <v-card>
-      <v-card-title class="text-h5">{{
-        $t('findProjectInstructions.howToContribute')
-      }}</v-card-title>
-      <v-card-text>
-        <div class="text-h6">{{ $t('findProjectInstructions.classifyTitle') }}</div>
-        <div class="text-p">
-          {{ instructionMessage }}. {{ $t('findProjectInstructions.classifyInstruction') }}.
-        </div>
+  <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>
+    <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('compareProjectInstructions.whereIamTitle') }}</div>
-        <div class="text-p mt-2">
-          <v-row align="center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn color="primary" icon="mdi-earth" size="small" variant="text"> </v-btn>
-            </v-col>
-            <v-col>{{ $t('compareProjectInstructions.whereIamInstruction') }}</v-col>
-          </v-row>
-        </div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.whereIamTitle') }}</div>
+    <div class="text-p mt-2">
+      <v-row align="center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn color="primary" icon="mdi-earth" size="small" variant="text"> </v-btn>
+        </v-col>
+        <v-col>{{ $t('projectInstructions.whereIamInstruction') }}</v-col>
+      </v-row>
+    </div>
 
-        <div class="text-h6 mt-10">{{ $t('findProjectInstructions.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('findProjectInstructions.moveColumn') }}</v-col>
-          </v-row>
-          <v-row class="align-center" dense>
-            <v-col cols="auto" class="mr-4">
-              <v-btn icon="mdi-chevron-double-left" color="secondary" class="mr-2" variant="text" />
-              <v-btn icon="mdi-chevron-double-right" color="secondary" variant="text" />
-            </v-col>
-            <v-col>{{ $t('findProjectInstructions.movePage') }}</v-col>
-          </v-row>
-        </div>
+    <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('findProjectInstructions.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('findProjectInstructions.seenAll') }}</v-col>
-          </v-row>
-        </div>
-        <div class="text-h6 mt-10">{{ $t('findProjectInstructions.imageCredits') }}</div>
-        <div class="text-p">{{ attribution }}</div>
-      </v-card-text>
-      <v-card-actions class="justify-end">
-        <v-spacer />
-        <v-btn
-          v-if="manualUrl"
-          color="primary"
-          :href="manualUrl"
-          target="_blank"
-          prepend-icon="mdi-help-circle"
-          >{{ $t('findProjectInstructions.moreInfo') }}</v-btn
-        >
-        <v-btn color="primary" @click="dialog = false">{{
-          $t('findProjectInstructions.close')
-        }}</v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+    <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>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.imageCredits') }}</div>
+    <div class="text-p">{{ attribution }}</div>
+  </v-card-text>
 </template>
 
 <style scoped></style>

src/components/DigitizeProject.vue

@@ -1,10 +1,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
+import createInformationPages from '@/utils/createInformationPages'
 import hex2rgb from '@/utils/hex2rgb'
 import makeXyzUrl from '@/utils/makeXyzUrl'
 import { theme } from '@/plugins/vuetify'
 import DigitizeProjectInstructions from '@/components/DigitizeProjectInstructions.vue'
 import ProjectHeader from '@/components/ProjectHeader.vue'
+import ProjectInfo from '@/components/ProjectInfo.vue'
 import TaskProgress from '@/components/TaskProgress.vue'
 import { GeoJSON } from 'ol/format'
 import { createBox } from 'ol/interaction/Draw'
@@ -15,6 +17,7 @@ export default defineComponent({
     digitizeProjectInstructions: DigitizeProjectInstructions,
     taskProgress: TaskProgress,
     projectHeader: ProjectHeader,
+    projectInfo: ProjectInfo,
   },
   props: {
     group: {
@@ -33,9 +36,14 @@ export default defineComponent({
       type: Array,
       require: true,
     },
+    tutorial: {
+      type: Object,
+      require: false,
+    },
   },
   data() {
     return {
+      arrowKeys: true,
       endReached: false,
       center: [0, 0],
       drawing: false,
@@ -86,6 +94,11 @@ export default defineComponent({
         this.updateTaskFeature()
       }
     },
+    createInformationPages,
+    // fallback information pages for digitize projects tbd
+    createFallbackInformationPages() {
+      return undefined
+    },
     drawCondition() {
       return this.withinTaskGeom || this.drawing
     },
@@ -234,12 +247,19 @@ export default defineComponent({
       @click="fitView()"
       color="primary"
     />
-    <digitize-project-instructions
+    <project-info
       :first="first"
-      :drawType="drawType"
-      :instructionMessage="instructionMessage"
+      :informationPages="createInformationPages(tutorial, project, createFallbackInformationPages)"
       :manualUrl="project?.manualUrl"
-    />
+      @toggle-dialog="arrowKeys = !arrowKeys"
+    >
+      <template #instructions>
+        <digitize-project-instructions
+          :drawType="drawType"
+          :instructionMessage="instructionMessage"
+        />
+      </template>
+    </project-info>
   </project-header>
   <v-container class="ma-0 pa-0">
     <ol-map
@@ -375,7 +395,7 @@ export default defineComponent({
       color="secondary"
       :disabled="taskIndex <= 0"
       @click="back"
-      v-shortkey.once="['arrowleft']"
+      v-shortkey.once="[arrowKeys ? 'arrowleft' : '']"
       @shortkey="back"
     />
     <v-btn
@@ -391,7 +411,7 @@ export default defineComponent({
       color="secondary"
       :disabled="taskIndex + 1 === tasks.length"
       @click="forward"
-      v-shortkey.once="['arrowright']"
+      v-shortkey.once="[arrowKeys ? 'arrowright' : '']"
       @shortkey="forward"
     />
     <v-spacer />