index.vue 3.6 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="leftImage && leftImage.link" :src="leftImage.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="rightImage && rightImage.link" :src="rightImage.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 ExperimentBaseAreTheSame from '@/mixins/ExperimentBaseAreSameImages'
  69. import Loader from '@/components/Loader.vue'
  70. import experimentConfig from './config'
  71. export default {
  72. name: 'ExperimentAreSameImagesRandom',
  73. components: {
  74. Loader
  75. },
  76. mixins: [ExperimentBaseAreTheSame],
  77. data() {
  78. return {
  79. experimentName: 'ExperimentAreSameImagesReference'
  80. }
  81. },
  82. async mounted() {
  83. // Load config for this scene to local state
  84. await this.loadConfig(experimentConfig)
  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.leftImage || !this.leftImage.link || !this.rightImage || !this.rightImage.link) {
  91. const { leftImage, rightImage } = await this.getReferenceTest()
  92. this.leftImage = leftImage
  93. this.rightImage = rightImage
  94. }
  95. this.saveProgress()
  96. },
  97. methods: {}
  98. }
  99. </script>