index.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. <template>
  2. <div>
  3. <slot></slot>
  4. </div>
  5. </template>
  6. <script>
  7. import './style.css'
  8. import ExperimentBase from '@/mixins/ExperimentBase'
  9. import { mapGetters } from 'vuex'
  10. import { API_ROUTES, findNearestUpper, findNearestLower } from '@/functions'
  11. import { EXPERIMENT as experimentMsgId } from '@/../config.messagesId'
  12. export default {
  13. name: 'ExperimentBaseExtracts',
  14. mixins: [ExperimentBase],
  15. data() {
  16. return {
  17. // Updated when `setExtractConfig` is called
  18. extractConfig: {
  19. x: null,
  20. y: null
  21. },
  22. extracts: [],
  23. showHoverBorder: null
  24. }
  25. },
  26. computed: {
  27. ...mapGetters(['getHostURI'])
  28. },
  29. methods: {
  30. // Load extracts from the API
  31. async getExtracts(quality = 'min') {
  32. const URI = `${this.getHostURI}${API_ROUTES.getImageExtracts(this.sceneName, quality, this.extractConfig.x, this.extractConfig.y)}`
  33. const { data } = await fetch(URI)
  34. .then(async res => {
  35. res.json = await res.json()
  36. return res
  37. })
  38. .then(res => {
  39. if (!res.ok) throw new Error(res.json.message + res.json.data ? `\n${res.json.data}` : '')
  40. return res.json
  41. })
  42. return data
  43. },
  44. // Config was updated, load extracts and save progression
  45. async setExtractConfig(config, configuratorRef) {
  46. if (!config) return
  47. this.loadingMessage = 'Loading configuration extracts...'
  48. this.loadingErrorMessage = null
  49. try {
  50. this.extractConfig.x = config.x
  51. this.extractConfig.y = config.y
  52. const data = await this.getExtracts()
  53. const hostURI = this.getHostURI
  54. this.extracts = data.extracts.map((url, i) => ({
  55. link: hostURI + url,
  56. quality: data.info.image.quality,
  57. zone: i + 1,
  58. index: i,
  59. nextQuality: findNearestUpper(data.info.image.quality, this.qualities),
  60. precQuality: findNearestLower(data.info.image.quality, this.qualities),
  61. loading: false
  62. }))
  63. // If there is a configurator, retract it
  64. if (configuratorRef) configuratorRef.setVisibility(false)
  65. }
  66. catch (err) {
  67. console.error('Failed to load new configuration', err)
  68. this.loadingErrorMessage = 'Failed to load new configuration. ' + err.message
  69. }
  70. finally {
  71. this.loadingMessage = null
  72. this.saveProgress()
  73. }
  74. },
  75. // An action was triggered, load extracts and save progression
  76. async extractAction(event, extractObj) {
  77. console.log(event, extractObj)
  78. const { index, nextQuality, precQuality, quality } = extractObj
  79. let newQuality
  80. if (event.button === 0) newQuality = precQuality // Left click
  81. if (event.button === 2) newQuality = nextQuality // Right click
  82. // Do not load a new extract if same quality
  83. if (newQuality === quality) return
  84. // Set loading state
  85. this.extracts[index].loading = true
  86. try {
  87. // Loading new extract
  88. const data = await this.getExtracts(newQuality)
  89. this.extracts[index].link = this.getHostURI + data.extracts[index]
  90. this.extracts[index].quality = data.info.image.quality
  91. this.extracts[index].nextQuality = findNearestUpper(data.info.image.quality, this.qualities)
  92. this.extracts[index].precQuality = findNearestLower(data.info.image.quality, this.qualities)
  93. this.extracts[index].loading = false
  94. // Sending event to WebSocket server
  95. // this.sendMessage({ msgId: experimentMsgId.DATA, msg: obj })
  96. }
  97. catch (err) {
  98. // TODO: toast message if fail
  99. console.error('Failed to load extract', err)
  100. }
  101. finally {
  102. this.extracts[index].loading = false
  103. this.saveProgress()
  104. }
  105. },
  106. // Finish an experiment, sending full data to the server
  107. // Don't forget to surcharge this function when using this mixin to add more data
  108. finishExperiment() {
  109. const obj = {
  110. experimentName: this.experimentName,
  111. sceneName: this.sceneName,
  112. extractConfig: this.extractConfig,
  113. extracts: this.extracts.map(x => ({
  114. index: x.index,
  115. link: x.link,
  116. nextQuality: x.nextQuality,
  117. precQuality: x.precQuality,
  118. quality: x.quality,
  119. zone: x.zone
  120. })),
  121. qualities: this.qualities,
  122. referenceImage: this.referenceImage
  123. }
  124. this.sendMessage({ msgId: experimentMsgId.VALIDATED, msg: obj })
  125. this.setExperimentDone({ experimentName: this.experimentName, sceneName: this.sceneName, done: true })
  126. this.$router.push(`/experiments/${this.experimentName}`)
  127. }
  128. }
  129. }
  130. </script>
  131. <style>
  132. /* White border when hovering on extracts */
  133. .extract-hover-border:hover {
  134. z-index: 1;
  135. outline: 2px #f4f4f4 solid;
  136. }
  137. </style>