123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131 |
- <template>
- <ExperimentBlock
- :experiment-name="experimentName"
- :scene-name="sceneName"
- :loading-message="loadingMessage"
- :loading-error-message="loadingErrorMessage"
- >
- <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 -->
- </template>
- <template v-slot:content>
- <v-flex xs12 sm6>
- <v-card dark color="primary">
- <v-card-text class="px-0">Experiment image</v-card-text>
- <v-container class="pa-1">
- <template v-for="i in extractConfig.y">
- <v-layout row wrap :key="`row-${i}`">
- <v-flex
- v-for="(anExtract, index) in extracts.slice(extractConfig.x * (i - 1), (extractConfig.x * i))"
- :key="`extract-${i}-${extractConfig.x}-${extractConfig.y}-${index}-${anExtract.quality}`"
- class="pa-0"
- >
- <v-card flat tile class="d-flex height100">
- <div
- v-if="anExtract.loading"
- class="img-extract-loader"
- @click.right.prevent
- >
- <v-progress-circular
- :indeterminate="true"
- />
- </div>
- <v-img
- v-else
- :src="anExtract.link"
- @click.left.prevent="extractAction($event, anExtract)"
- @click.right.prevent="extractAction($event, anExtract)"
- class="cursor"
- :class="{ 'extract-hover-border': showHoverBorder === true }"
- >
- <template v-slot:placeholder>
- <v-layout
- fill-height
- align-center
- justify-center
- ma-0
- >
- <v-progress-circular indeterminate color="grey lighten-5" />
- </v-layout>
- </template>
- </v-img>
- </v-card>
- </v-flex>
- </v-layout>
- </template>
- </v-container>
- </v-card>
- </v-flex>
- <v-flex sm6 xs12>
- <v-card dark color="primary">
- <v-card-text>Reference image</v-card-text>
- <v-img v-if="referenceImage" :src="referenceImage" />
- </v-card>
- </v-flex>
- <!-- Experiment validation button -->
- <v-layout justify-end align-content-end>
- <v-btn @click="finishExperiment" color="primary" large right>Finish experiment</v-btn>
- </v-layout>
- <!--/ Experiment validation button -->
- </template>
- </ExperimentBlock>
- </template>
- <script>
- import ExperimentBlock from '@/components/ExperimentBlock.vue'
- import ExperimentBaseExtracts from '@/mixins/ExperimentBaseExtracts'
- import ExtractConfiguration from '@/components/ExperimentsComponents/ExtractConfiguration.vue'
- import { API_ROUTES } from '@/functions'
- export default {
- components: {
- ExperimentBlock,
- ExtractConfiguration
- },
- mixins: [ExperimentBaseExtracts],
- data() {
- return {
- referenceImage: null
- }
- },
- async mounted() {
- // Load config for this scene to local state
- this.loadConfig()
- // Load progress from store into local state
- this.loadProgress()
- // Load scene data from the API
- await this.getImage('max').then(res => (this.referenceImage = res.link))
- if (this.qualities == null){
- const URI = `${this.getHostURI}${API_ROUTES.listSceneQualities(this.sceneName)}`
- const { data } = await fetch(URI).then(res => res.json())
- this.qualities = data
- // remove reference
- this.qualities.pop()
- }
- // Load the cached configuration in the configurator component
- if (this.lockConfig === false) this.$refs.configurator.setDefaultConfig(this.extractConfig)
- // Load extracts if none were cached
- if (this.extracts.length === 0) await this.setExtractConfig(this.extractConfig, this.$refs.configurator)
- this.saveProgress()
- }
- }
- </script>
|