Browse Source

Don't crash when resetting the app while no data is present. Scroll to choices buttons

rigwild 1 year ago
parent
commit
444589fa79

+ 6 - 1
src/mixins/ExperimentBaseAreSameImages/index.vue

@@ -28,6 +28,11 @@ export default {
     ...mapGetters(['getHostURI'])
   },
   methods: {
+    scrollToChoiceButtons() {
+      const ele = document.querySelector('#choice')
+      if (ele) ele.scrollIntoView({ behavior: 'smooth' })
+    },
+
     async getTest(leftQuality, rightQuality) {
       const left = this.qualities[leftQuality]
       const right = this.qualities[rightQuality]
@@ -64,7 +69,7 @@ export default {
         this.rightImage = rightImage
 
         // Experiment end
-        if (this.testCount >= this.maxTestCount) this.finishExperiment()
+        if (this.testCount > this.maxTestCount) return this.finishExperiment()
       }
       catch (err) {
         console.error('Failed to load new test', err)

+ 9 - 2
src/store/mutations.js

@@ -34,7 +34,14 @@ export default {
 
   resetApp(state, { gdprConsent, hostConfig, progression }) {
     const defaultStateObj = defaultState()
-    if (gdprConsent) state.gdprConsent = false
+    if (gdprConsent) {
+      state.gdprConsent = false
+      delete state.hostConfig
+      delete state.progression
+      delete state.scenesList
+      return
+    }
+
     if (hostConfig) {
       if (state.socket.isConnected)
         this._vm.$disconnect()
@@ -43,7 +50,7 @@ export default {
     if (progression) {
       // Reset progression and recreate the progression object
       state.progression = defaultStateObj.progression
-      createProgressionObj(state, state.scenesList)
+      if (state.scenesList) createProgressionObj(state, state.scenesList)
     }
   },
 

+ 2 - 3
src/views/Experiments/AreSameImages/index.vue

@@ -35,7 +35,7 @@
             <v-card dark color="primary">
               <v-card-text>Image 2</v-card-text>
 
-              <v-img v-if="rightImage && rightImage.link" :src="rightImage.link">
+              <v-img v-if="rightImage && rightImage.link" :src="rightImage.link" @load="scrollToChoiceButtons">
                 <template v-slot:placeholder>
                   <v-layout fill-height align-center justify-center ma-0>
                     <v-progress-circular indeterminate color="grey lighten-5" />
@@ -47,9 +47,8 @@
 
 
           <!-- Experiment validation button -->
-
           <v-layout justify-center align-content-center>
-            <div>
+            <div id="choice">
               <h2>Test {{ testCount }} / {{ maxTestCount }}</h2>
               <v-layout justify-center align-content-center>
                 <v-btn @click="areTheSameActionRandom(false)" color="error" large>Images are NOT the same</v-btn>