Better container centering and fixed getImage and getImageExtracts links

README.md

@@ -167,7 +167,7 @@ yarn test
 ```
 
 ## Documentation
-The `docker-compose` script will automatically build the documentation. Use the following command to build it by hand.
+The `docker-compose` script will automatically build the API documentation. Use the following command to build it by hand.
 ```sh
 yarn doc
 ```

src/mixins/ExperimentBase.vue

@@ -114,6 +114,7 @@ export default {
           if (!res.ok) throw new Error(res.json.message + res.json.data ? `\n${res.json.data}` : '')
           return res.json
         })
+      data.link = this.getHostURI + data.link
       return data
     }
   }

src/mixins/ExperimentBaseAreSameImages.vue

@@ -34,11 +34,7 @@ export default {
 
     // Get images links for a test
     async getTest(leftQuality, rightQuality) {
-      const res = await Promise.all([this.getImage(leftQuality), this.getImage(rightQuality)])
-      const [image1, image2] = res.map(x => {
-        x.link = `${this.getHostURI}${x.link}`
-        return x
-      })
+      const [image1, image2] = await Promise.all([this.getImage(leftQuality), this.getImage(rightQuality)])
       return { image1, image2 }
     },
 

src/mixins/ExperimentBaseExtracts.vue

@@ -44,13 +44,14 @@ export default {
           if (!res.ok) throw new Error(res.json.message + res.json.data ? `\n${res.json.data}` : '')
           return res.json
         })
+      data.extracts = data.extracts.map(x => this.getHostURI + x)
       return data
     },
 
     // Convert a simple API extracts object to get more informations
     getExtractFullObject(extractsApiObj) {
       return extractsApiObj.extracts.map((url, i) => ({
-        link: this.getHostURI + url,
+        link: url,
         quality: extractsApiObj.info.image.quality,
         zone: i + 1,
         index: i,
@@ -109,7 +110,7 @@ export default {
 
         // Loading new extract
         const data = await this.getExtracts(newQuality)
-        this.extracts[index].link = this.getHostURI + data.extracts[index]
+        this.extracts[index].link = data.extracts[index]
         this.extracts[index].quality = data.info.image.quality
         this.extracts[index].nextQuality = findNearestUpper(data.info.image.quality, this.qualities)
         this.extracts[index].precQuality = findNearestLower(data.info.image.quality, this.qualities)

src/views/Experiments/AreSameImagesReferenceOneExtract.vue

@@ -129,17 +129,13 @@ export default {
       // Apply the random quality extract
       maxExtracts.extracts[randomZoneIndex] = randomExtracts.extracts[randomZoneIndex]
 
-      // Fix uris
-      const referenceWithOneExtract = maxExtracts.extracts.map(url => this.getHostURI + url)
-      maxImage.link = this.getHostURI + maxImage.link
-
       // Backup test data
       this.randomZoneIndex = randomZoneIndex
       this.randomZoneQuality = randomQuality
       this.imageOneExtractPosition = rand(0, 1) === 0 ? 'left' : 'right'
 
       return {
-        image1: referenceWithOneExtract,
+        image1: maxExtracts.extracts,
         image2: maxImage
       }
     },

src/views/Experiments/IsImageCorrect.vue

@@ -13,9 +13,7 @@
       <!-- ## Actual experiment template ## -->
 
       <!-- Image -->
-      <v-flex xs0 sm3 />
-
-      <v-flex xs12 sm6>
+      <v-flex xs12 sm6 offset-sm3>
         <v-card dark color="primary">
           <v-card-text class="px-0">Reconstructed image</v-card-text>
           <v-container class="pa-1">
@@ -23,9 +21,7 @@
           </v-container>
         </v-card>
       </v-flex>
-
-
-      <v-flex xs0 sm3 />
+      <!--/ Image -->
 
       <!-- Experiment validation button -->
       <v-layout justify-center align-content-center>
@@ -129,8 +125,9 @@ export default {
 
       // construct new image with two different parts
       maxExtracts.extracts[position] = randomExtracts.extracts[position]
-      this.reconstructedImage = maxExtracts.extracts.map(url => this.getHostURI + url)
+      this.reconstructedImage = maxExtracts.extracts
     },
+
     // get next reconstructed image
     async nextReconstructedImage(correct) {
       this.loadingMessage = 'Loading new test...'

src/views/Experiments/IsImageCorrectOneExtract.vue

@@ -13,9 +13,7 @@
       <!-- ## Actual experiment template ## -->
 
       <!-- Image -->
-      <v-flex xs0 sm3 />
-
-      <v-flex xs12 sm6>
+      <v-flex xs12 sm6 offset-sm3>
         <v-card dark color="primary">
           <v-card-text class="px-0">Reconstructed image</v-card-text>
           <v-container class="pa-1">
@@ -23,9 +21,7 @@
           </v-container>
         </v-card>
       </v-flex>
-
-
-      <v-flex xs0 sm3 />
+      <!--/ Image -->
 
       <!-- Experiment validation button -->
       <v-layout justify-center align-content-center>
@@ -129,7 +125,7 @@ export default {
 
       // construct new image with two different parts
       maxExtracts.extracts[position] = randomExtracts.extracts[position]
-      this.reconstructedImage = maxExtracts.extracts.map(url => this.getHostURI + url)
+      this.reconstructedImage = maxExtracts.extracts
     },
     // get next reconstructed image
     async nextReconstructedImage(correct) {

src/views/Experiments/MatchExtractsWithReference.vue

@@ -7,7 +7,12 @@
   >
     <template v-slot:header>
       <!-- Extract configuration -->
-      <extract-configuration v-if="lockConfig === false" @setExtractConfig="setExtractConfig($event, $refs.configurator)" :loading-error-message="loadingErrorMessage" ref="configurator" />
+      <extract-configuration
+        v-if="lockConfig === false"
+        @setExtractConfig="setExtractConfig($event, $refs.configurator)"
+        :loading-error-message="loadingErrorMessage"
+        ref="configurator"
+      />
       <!--/ Extract configuration -->
     </template>
 
@@ -104,11 +109,7 @@ export default {
 
     // Load scene data from the API
     await Promise.all([
-      this.getImage('max')
-        .then(res => {
-          this.referenceImage = this.getHostURI + res.link
-          this.saveProgress()
-        }),
+      this.getImage('max').then(res => (this.referenceImage = res.link)),
       this.getQualitiesList()
     ])
 
@@ -119,8 +120,6 @@ export default {
     if (this.extracts.length === 0) await this.setExtractConfig(this.extractConfig, this.$refs.configurator)
 
     this.saveProgress()
-  },
-
-  methods: {}
+  }
 }
 </script>

src/views/Experiments/PercentQualityRandom.vue

@@ -13,7 +13,7 @@
       <!-- ## Actual experiment template ## -->
 
       <!-- Image -->
-      <v-flex xs6>
+      <v-flex xs12 sm6 offset-sm3>
         <v-card dark color="primary">
           <v-card-text class="px-0">Image 1</v-card-text>
 
@@ -26,6 +26,7 @@
           </v-img>
         </v-card>
       </v-flex>
+      <!--/ Image -->
 
       <!-- Quality Slider -->
       <v-flex xs12>
@@ -35,6 +36,7 @@
           thumb-label
         />
       </v-flex>
+      <!--/ Quality Slider -->
 
 
       <!-- Experiment validation button -->
@@ -44,7 +46,7 @@
             <h2>Test {{ testCount }} / {{ maxTestCount }}</h2>
             <v-layout row wrap>
               <v-flex sm12 xs12>
-                <v-btn @click="nextRandomImage()" color="primary" large>Validate quality</v-btn>
+                <v-btn @click="nextRandomImage" color="primary" large>Validate quality</v-btn>
               </v-flex>
             </v-layout>
           </v-container>
@@ -111,9 +113,7 @@ export default {
     // load image
     async getTest() {
       let randomQuality = this.qualities[rand(0, this.qualities.length - 1)]
-      let image = await this.getImage(randomQuality)
-      image.link = this.getHostURI + image.link
-      this.image1 = image
+      this.image1 = await this.getImage(randomQuality)
       this.selectedQuality = 50
     },