MatchExtractsWithReference.vue 4.4 KB

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