AreSameImagesReference.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  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. </v-flex>
  15. <!-- Loading screen -->
  16. <loader v-if="loadingMessage" :message="loadingMessage" />
  17. <!--/ Loading screen -->
  18. <!-- Experiment -->
  19. <template v-else-if="!loadingErrorMessage">
  20. <v-flex xs12 sm6>
  21. <v-card dark color="primary">
  22. <v-card-text class="px-0">Image 1</v-card-text>
  23. <v-img v-if="image1 && image1.link" :src="image1.link">
  24. <template v-slot:placeholder>
  25. <v-layout fill-height align-center justify-center ma-0>
  26. <v-progress-circular indeterminate color="grey lighten-5" />
  27. </v-layout>
  28. </template>
  29. </v-img>
  30. </v-card>
  31. </v-flex>
  32. <v-flex sm6 xs12>
  33. <v-card dark color="primary">
  34. <v-card-text>Image 2</v-card-text>
  35. <v-img v-if="image2 && image2.link" :src="image2.link" @load="scrollToChoiceButtons">
  36. <template v-slot:placeholder>
  37. <v-layout fill-height align-center justify-center ma-0>
  38. <v-progress-circular indeterminate color="grey lighten-5" />
  39. </v-layout>
  40. </template>
  41. </v-img>
  42. </v-card>
  43. </v-flex>
  44. <!-- Experiment validation button -->
  45. <v-layout justify-center align-content-center>
  46. <div id="choice">
  47. <v-container grid-list-md text-xs-center fluid>
  48. <h2>Test {{ testCount }} / {{ maxTestCount }}</h2>
  49. <v-layout row wrap>
  50. <v-flex sm6 xs12>
  51. <v-btn @click="areTheSameAction(false, getReferenceTest)" color="error" large>Images are NOT the same</v-btn>
  52. </v-flex>
  53. <v-flex sm6 xs12>
  54. <v-btn @click="areTheSameAction(true, getReferenceTest)" color="success" large>Images are the same</v-btn>
  55. </v-flex>
  56. </v-layout>
  57. </v-container>
  58. </div>
  59. </v-layout>
  60. <!--/ Experiment validation button -->
  61. </template>
  62. <!--/ Experiment -->
  63. </v-layout>
  64. </v-container>
  65. </div>
  66. </template>
  67. <script>
  68. import ExperimentBaseAreSameImages from '@/mixins/ExperimentBaseAreSameImages'
  69. import Loader from '@/components/Loader.vue'
  70. export default {
  71. name: 'AreSameImagesReference',
  72. components: {
  73. Loader
  74. },
  75. mixins: [ExperimentBaseAreSameImages],
  76. data() {
  77. return {
  78. experimentName: 'AreSameImagesReference',
  79. referenceImagePosition: null
  80. }
  81. },
  82. async mounted() {
  83. // Load config for this scene to local state
  84. this.loadConfig()
  85. // Load progress from store into local state
  86. this.loadProgress()
  87. // Load scene data from the API
  88. await this.getQualitiesList()
  89. // Load a test if not already one loaded
  90. if (!this.image1 || !this.image1.link || !this.image2 || !this.image2.link) {
  91. const { image1, image2 } = await this.getReferenceTest()
  92. this.image1 = image1
  93. this.image2 = image2
  94. }
  95. this.saveProgress()
  96. },
  97. methods: {}
  98. }
  99. </script>