Skip to content

Commit

Permalink
- CHG: When using enter on the last trait input in a single tab in th…
Browse files Browse the repository at this point in the history
…e data input, the data will be validated and the dialog closed.

- CHG: Moved guided walk interface into a separate page to maximize screen space and performance.
-
  • Loading branch information
sebastian-raubach committed Sep 18, 2023
1 parent 7f3df5a commit 7884db5
Show file tree
Hide file tree
Showing 9 changed files with 201 additions and 7 deletions.
2 changes: 1 addition & 1 deletion src/components/Tour.vue
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ export default {
behavior: 'smooth'
})
} else {
this.popoverShow = true
this.popoverShow = false
this.currentIndex++
}
} else {
Expand Down
43 changes: 39 additions & 4 deletions src/components/modals/DataInputModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
ok-variant="primary"
:cancel-variant="isGuidedWalk ? 'primary' : null"
:cancel-disabled="cancelDisabled"
scrollable
no-close-on-backdrop
no-close-on-esc
@cancel.prevent="onCancel"
Expand All @@ -12,6 +13,8 @@
@shown="autofocusFirst"
id="data-input-modal"
no-fade
:dialog-class="fullscreen ? 'fullscreen-dialog' : null"
:content-class="fullscreen ? 'fullscreen-content' : null"
size="xl"
header-class="align-items-center"
ref="dataInputModal">
Expand Down Expand Up @@ -144,6 +147,10 @@ export default {
geolocation: {
type: Object,
default: () => null
},
fullscreen: {
type: Boolean,
default: false
}
},
data: function () {
Expand Down Expand Up @@ -383,6 +390,10 @@ export default {
startTour: function () {
this.$refs.dataInputTour.start()
},
forceGuidedWalk: function (config) {
this.updateCell(config.row, config.column)
this.onSelectGuidedWalk(config.walkName)
},
onSelectGuidedWalk: function (typeName) {
const match = guideOrderTypes.find(g => g.name === typeName)
Expand Down Expand Up @@ -454,9 +465,14 @@ export default {
if (group) {
const traitIndex = group.traits.findIndex(t => t.id === currentTrait.id)
if (traitIndex !== -1 && traitIndex < group.traits.length - 1) {
this.$refs[`trait-section-${group.traits[traitIndex + 1].id}`][0].handleTraverse(0)
emitter.emit('tts', group.traits[traitIndex + 1].name, false)
if (traitIndex !== -1) {
if (traitIndex < group.traits.length - 1) {
this.$refs[`trait-section-${group.traits[traitIndex + 1].id}`][0].handleTraverse(0)
emitter.emit('tts', group.traits[traitIndex + 1].name, false)
} else if (this.traitsByGroup.length === 1) {
// This is the last trait in this tab/group and there's only one tab
this.validate()
}
}
}
},
Expand Down Expand Up @@ -610,7 +626,10 @@ export default {
*/
hide: function () {
this.reset()
this.$nextTick(() => this.$refs.dataInputModal.hide())
this.$nextTick(() => {
this.$refs.dataInputModal.hide()
this.$emit('hidden')
})
},
reset: function () {
this.traitGroupTabIndex = 0
Expand All @@ -621,10 +640,12 @@ export default {
created: function () {
emitter.on('plot-clicked', this.updateCell)
emitter.on('plot-cache-changed', this.updateCellComments)
emitter.on('force-guided-walk', this.forceGuidedWalk)
},
beforeDestroy: function () {
emitter.off('plot-clicked', this.updateCell)
emitter.off('plot-cache-changed', this.updateCellComments)
emitter.off('force-guided-walk', this.forceGuidedWalk)
}
}
</script>
Expand All @@ -633,4 +654,18 @@ export default {
.trait-group-tab-content section:first-child hr {
display: none;
}
.fullscreen-dialog {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 0;
padding: 0;
max-width: unset;
}
.fullscreen-content {
min-height: 100vh;
}
</style>
11 changes: 9 additions & 2 deletions src/components/modals/GuidedWalkSelectorModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,18 @@ export default {
methods: {
onSubmit: function () {
const order = this.$refs.guideOrderSelector.getOrder()
this.$emit('change', order)
emitter.emit('plausible-event', { key: 'guided-walk-started', props: { order: order } })
this.$router.push({ name: 'guided-walk', query: { row: this.cell.row, column: this.cell.column, guidedWalkName: order } })
this.$nextTick(() => this.hide())
// this.$nextTick(() => this.hide())
// const order = this.$refs.guideOrderSelector.getOrder()
// this.$emit('change', order)
// emitter.emit('plausible-event', { key: 'guided-walk-started', props: { order: order } })
// this.$nextTick(() => this.hide())
},
/**
* Shows and resets modal dialog
Expand Down
4 changes: 4 additions & 0 deletions src/plugins/changelog/de_DE.json
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,10 @@
"type": "new",
"title": "Visuelle Änderungen",
"text": "Die Form, Größe und Kompaktheit der Hauptdatenanzeige kann jetzt verändert werden. Aktuell stehen Kreise und Quadrate als Formen und drei Auswahlmöglichkeiten für Größen und Kompaktheit zur Auswahl."
}, {
"type": "update",
"title": "Gelenkter Ablaub Änderung",
"text": "Um sowohl den verfügbaren Bildschirmbereich als auch die Leistung zu maximieren haben wir den gelenkten Ablauf auf eine eigenständige Seite verlagert wo er den maximalen Bildschirmbereich ausnutzen kann."
}
]
}
Expand Down
4 changes: 4 additions & 0 deletions src/plugins/changelog/en_GB.json
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,10 @@
"type": "new",
"title": "Visual changes",
"text": "You can change the shape, size and compactness of the main data display to match your needs. Currently circles and squares are available as the shapes and three different settings for sizes and compactness are available."
}, {
"type": "update",
"title": "Guided walk change",
"text": "To maximize the available screen space as well as performance, we have moved the guided walk to its own page where it will use all the available screen space."
}
]
}
Expand Down
1 change: 1 addition & 0 deletions src/plugins/i18n/de_DE.json
Original file line number Diff line number Diff line change
Expand Up @@ -490,6 +490,7 @@
"pageArchiveTextExportedOn": "Daten archiviert am: {date}",
"pageArchiveTextUpdatedOn": "Versuch zuletzt aktualisiert am: {date}",
"pageArchiveNoArchiveFound": "Es wurde kein Archiv für diesen Versuch gefunden. Dies bedeutet entweder, dass es sehr, sehr lange her ist das GridScore benutzt wurde oder, dass etwas mit der Archivierung schief gegangen ist. Bitte mit den Entwicklern von GridScore in Verbingung setzen.",
"pageGuidedWalkInvalidConfig": "Ungültige Konfiguration für gelenkten Ablauf. Bitte erneut versuchen.",
"tabTitleSettingsShareExport": "Deine Einstellungen teilen",
"tabTextSettingsShareExport": "Der QR-Code unten kann von anderen genutzt werden um deine Einstellungen zu laden und ihre eigenen zu überschreiben.",
"tabTitleSettingsShareImport": "Andere Einstellungen laden",
Expand Down
1 change: 1 addition & 0 deletions src/plugins/i18n/en_GB.json
Original file line number Diff line number Diff line change
Expand Up @@ -497,6 +497,7 @@
"pageArchiveTextExportedOn": "Data archived on: {date}",
"pageArchiveTextUpdatedOn": "Trial last updated on: {date}",
"pageArchiveNoArchiveFound": "No archive has been found for your trial. This either means that it has been a long, long time since you last used GridScore or that there has been an issue with backups. Please get in touch with the maintainers of GridScore.",
"pageGuidedWalkInvalidConfig": "Invalid configuration for guided walk. Please try again.",
"tabTitleSettingsShareExport": "Share your settings",
"tabTextSettingsShareExport": "The QR code below will let others load your settings and overwrite their own settings.",
"tabTitleSettingsShareImport": "Load other settings",
Expand Down
4 changes: 4 additions & 0 deletions src/router/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,10 @@ const routes = [
path: '/data-entry',
name: 'data-entry',
component: () => import('@/views/DataEntryView.vue')
}, {
path: '/guided-walk',
name: 'guided-walk',
component: () => import('@/views/GuidedWalkView.vue')
}, {
path: '/trial-setup',
name: 'trial-setup',
Expand Down
138 changes: 138 additions & 0 deletions src/views/GuidedWalkView.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
<template>
<div>
<DataInputModal :fullscreen="true"
:geolocation="geolocation"
:trial="trial"
@hidden="onHidden"
ref="dataInputModal"
v-model="show"
v-if="validConfig" />
<b-container>
<p>{{ $t('pageGuidedWalkInvalidConfig') }}</p>
</b-container>
</div>
</template>

<script>
import DataInputModal from '@/components/modals/DataInputModal'
import { mapGetters } from 'vuex'
import { getTrialById } from '@/plugins/idb'
const emitter = require('tiny-emitter/instance')
export default {
components: {
DataInputModal
},
computed: {
...mapGetters([
'storeGpsEnabled',
'storeSelectedTrial'
]),
validConfig: function () {
return this.column !== null && this.row !== null && this.guidedWalkName && this.trial
}
},
data: function () {
return {
geolocation: null,
trial: null,
guidedWalkName: null,
row: null,
column: null
}
},
watch: {
storeSelectedTrial: function () {
this.loadTrial()
},
trial: function () {
this.show = true
this.$nextTick(() => {
emitter.emit('force-guided-walk', {
row: this.row,
column: this.column,
walkName: this.guidedWalkName
})
})
}
},
methods: {
onHidden: function () {
this.$router.push({ name: 'data-entry' })
},
loadTrial: function () {
getTrialById(this.storeSelectedTrial).then(trial => {
this.trial = trial
this.startGeoTracking()
})
},
startGeoTracking: function () {
if (navigator.geolocation && this.storeGpsEnabled) {
const options = { enableHighAccuracy: true, maximumAge: 5000, timeout: 20000 }
this.geolocationWatchId = navigator.geolocation.watchPosition(position => {
if (position && position.coords) {
this.geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude,
elv: position.coords.altitude,
heading: position.coords.heading
}
}
}, null, options)
}
},
tts: function (text, interruptPrev = true) {
if (this.textSynth) {
if (interruptPrev) {
this.textSynth.cancel()
}
const utterance = new SpeechSynthesisUtterance(text)
utterance.rate = 1.0
// utterance.rate = 1.2
this.textSynth.speak(utterance)
}
}
},
mounted: function () {
const q = this.$route.query
if (q) {
if (q.guidedWalkName) {
this.guidedWalkName = q.guidedWalkName
}
if (q.row !== undefined && q.row !== null) {
this.row = q.row
}
if (q.column !== undefined && q.row !== null) {
this.column = +q.column
}
}
if (this.row !== null && this.column !== null && this.guidedWalkName) {
if (this.storeSelectedTrial) {
this.loadTrial()
}
if (this.storeVoiceFeedbackEnabled && window.speechSynthesis) {
this.textSynth = window.speechSynthesis
}
emitter.on('tts', this.tts)
}
},
beforeDestroy: function () {
emitter.off('tts', this.tts)
if (this.geolocationWatchId && navigator.geolocation) {
navigator.geolocation.clearWatch(this.geolocationWatchId)
}
}
}
</script>

<style>
</style>

0 comments on commit 7884db5

Please sign in to comment.