index.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. <template>
  2. <div>
  3. <v-container grid-list-md text-xs-center fluid>
  4. <v-layout row wrap>
  5. <v-flex xs12>
  6. <v-layout justify-start>
  7. <v-btn flat exact :to="`/experiments/${experimentName}`">
  8. <v-icon left>arrow_back</v-icon>
  9. Back to scene selection
  10. </v-btn>
  11. </v-layout>
  12. <h2>Experiment "{{ $route.meta.fullName }}"</h2>
  13. <h3>{{ sceneName }}</h3>
  14. <!-- Extract configuration -->
  15. <extract-configuration v-if="lockConfig === false" @setExtractConfig="setExtractConfig($event, $refs.configurator)" :loading-error-message="loadingErrorMessage" ref="configurator" />
  16. <!--/ Extract configuration -->
  17. </v-flex>
  18. <!-- Loading screen -->
  19. <loader v-if="loadingMessage" :message="loadingMessage" />
  20. <!--/ Loading screen -->
  21. <!-- Experiment -->
  22. <template v-else-if="!loadingErrorMessage">
  23. <v-flex xs12 sm6>
  24. <v-card dark color="primary">
  25. <v-card-text class="px-0">Experiment image</v-card-text>
  26. <v-container class="pa-1">
  27. <template v-for="i in extractConfig.y">
  28. <v-layout row wrap :key="`row-${i}`">
  29. <v-flex
  30. v-for="(anExtract, index) in extracts.slice(extractConfig.x * (i - 1), (extractConfig.x * i))"
  31. :key="`extract-${i}-${extractConfig.x}-${extractConfig.y}-${index}-${anExtract.quality}`"
  32. class="pa-0"
  33. >
  34. <v-card flat tile class="d-flex height100">
  35. <div
  36. v-if="anExtract.loading"
  37. class="img-extract-loader"
  38. @click.right.prevent
  39. >
  40. <v-progress-circular
  41. :indeterminate="true"
  42. />
  43. </div>
  44. <v-img
  45. v-else
  46. :src="anExtract.link"
  47. @click.left.prevent="extractAction($event, anExtract)"
  48. @click.right.prevent="extractAction($event, anExtract)"
  49. class="cursor"
  50. :class="{ 'extract-hover-border': showHoverBorder === true }"
  51. >
  52. <template v-slot:placeholder>
  53. <v-layout
  54. fill-height
  55. align-center
  56. justify-center
  57. ma-0
  58. >
  59. <v-progress-circular indeterminate color="grey lighten-5" />
  60. </v-layout>
  61. </template>
  62. </v-img>
  63. </v-card>
  64. </v-flex>
  65. </v-layout>
  66. </template>
  67. </v-container>
  68. </v-card>
  69. </v-flex>
  70. <v-flex sm6 xs12>
  71. <v-card dark color="primary">
  72. <v-card-text>Reference image</v-card-text>
  73. <v-img v-if="referenceImage" :src="referenceImage" />
  74. </v-card>
  75. </v-flex>
  76. <!-- Experiment validation button -->
  77. <v-layout justify-end align-content-end>
  78. <v-btn @click="finishExperiment" color="primary" large right>Finish experiment</v-btn>
  79. </v-layout>
  80. <!--/ Experiment validation button -->
  81. </template>
  82. <!--/ Experiment -->
  83. </v-layout>
  84. </v-container>
  85. </div>
  86. </template>
  87. <script>
  88. import ExperimentBaseExtracts from '@/mixins/ExperimentBaseExtracts'
  89. import Loader from '@/components/Loader.vue'
  90. import ExtractConfiguration from '@/components/ExperimentsComponents/ExtractConfiguration.vue'
  91. import experimentConfig from './config'
  92. export default {
  93. name: 'ExperimentWithReference',
  94. components: {
  95. Loader,
  96. ExtractConfiguration
  97. },
  98. mixins: [ExperimentBaseExtracts],
  99. data() {
  100. return {
  101. experimentName: 'ExperimentWithReference',
  102. referenceImage: null
  103. }
  104. },
  105. async mounted() {
  106. // Load config for this scene to local state
  107. await this.loadConfig(experimentConfig)
  108. // Load progress from store into local state
  109. this.loadProgress()
  110. // Load scene data from the API
  111. await Promise.all([
  112. this.getImage('max')
  113. .then(res => {
  114. this.referenceImage = this.getHostURI + res.link
  115. this.saveProgress()
  116. }),
  117. this.getQualitiesList()
  118. ])
  119. // Load the cached configuration in the configurator component
  120. if (this.lockConfig === false) this.$refs.configurator.setDefaultConfig(this.extractConfig)
  121. // Load extracts of none were cached
  122. if (this.extracts.length === 0) await this.setExtractConfig(this.extractConfig, this.$refs.configurator)
  123. this.saveProgress()
  124. },
  125. methods: {}
  126. }
  127. </script>