ExperimentBase.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. <template>
  2. <div>
  3. <slot></slot>
  4. </div>
  5. </template>
  6. <script>
  7. import { mapGetters, mapActions } from 'vuex'
  8. import { API_ROUTES } from '@/functions'
  9. import { getExperimentConfig } from '@/config.utils'
  10. import { EXPERIMENT as experimentMsgId } from '@/../config.messagesId'
  11. export default {
  12. name: 'ExperimentBase',
  13. props: {
  14. sceneName: {
  15. type: String,
  16. required: true
  17. }
  18. },
  19. data() {
  20. return {
  21. experimentName: this.$route.name,
  22. loadingMessage: null,
  23. loadingErrorMessage: null,
  24. qualities: null
  25. }
  26. },
  27. computed: {
  28. ...mapGetters(['getHostURI', 'getExperimentProgress', 'isExperimentDone'])
  29. },
  30. mounted() {
  31. // when new session push (if not already there) current user advancement (number of scenes) and redirect to calibration
  32. if (window.sessionStorage.getItem('sin3d-nb-scenes') === null) {
  33. window.sessionStorage.setItem('sin3d-nb-scenes', 1)
  34. this.sceneName = '50_shades_of_grey'
  35. this.$router.push(`/experiments/${this.experimentName}/50_shades_of_grey`)
  36. }
  37. if (!this.getExperimentProgress({ experimentName: this.experimentName, sceneName: this.sceneName }).experimentName)
  38. this.sendMessage({
  39. msgId: experimentMsgId.STARTED,
  40. msg: {
  41. experimentName: this.experimentName,
  42. sceneName: this.sceneName
  43. }
  44. })
  45. // Check if the experiment is already finished
  46. if (this.experimentName && this.sceneName && this.isExperimentDone({ experimentName: this.experimentName, sceneName: this.sceneName }) && this.sceneName !== '50_shades_of_grey') {
  47. console.warn('Redirected from experiment. You can\'t go back in an experiment after finishing it.')
  48. this.$router.push(`/experiments/${this.experimentName}`)
  49. }
  50. },
  51. methods: {
  52. ...mapActions(['setExperimentProgress', 'setExperimentDone', 'sendMessage']),
  53. // Load progress from store into local state
  54. loadProgress() {
  55. if (!this.experimentName || !this.sceneName)
  56. return console.warn('Could not load progress : experimentName and sceneName must be defined')
  57. const progress = this.getExperimentProgress({ experimentName: this.experimentName, sceneName: this.sceneName })
  58. Object.assign(this.$data, progress)
  59. // console.log('Loaded data from store to local state.', progress)
  60. },
  61. // Save progress from local state into store
  62. saveProgress() {
  63. if (!this.experimentName || !this.sceneName)
  64. return console.warn('Could not save progress : experimentName and sceneName must be defined')
  65. this.setExperimentProgress({ experimentName: this.experimentName, sceneName: this.sceneName, data: this.$data })
  66. // console.log('Saved data from local state to store.', this.$data)
  67. },
  68. // Load a config object into the local state
  69. loadConfig() {
  70. const config = getExperimentConfig(this.experimentName, this.sceneName)
  71. // console.log('Loaded configuration', config)
  72. Object.assign(this.$data, config)
  73. },
  74. setExperimentFinished(done = true) {
  75. this.setExperimentDone({ experimentName: this.experimentName, sceneName: this.sceneName, done })
  76. },
  77. // Finish an experiment, sending full data to the server
  78. // Don't forget to surcharge this function when using this mixin to add more data
  79. finishExperiment() {
  80. const obj = Object.assign(this.$data, { sceneName: this.sceneName })
  81. obj.loadingMessage = undefined
  82. obj.loadingErrorMessage = undefined
  83. this.sendMessage({ msgId: experimentMsgId.VALIDATED, msg: obj })
  84. this.setExperimentFinished()
  85. this.$router.push(`/experiments/${this.experimentName}/${this.sceneName}/validated`)
  86. },
  87. // Load qualities list from the API
  88. async getQualitiesList() {
  89. if (this.qualities) return
  90. const URI = `${this.getHostURI}${API_ROUTES.listSceneQualities(this.sceneName)}`
  91. const { data } = await fetch(URI).then(res => res.json())
  92. this.qualities = data
  93. },
  94. // Load an image from the API
  95. async getImage(quality) {
  96. const URI = `${this.getHostURI}${API_ROUTES.getImage(this.sceneName, quality)}`
  97. const { data } = await fetch(URI)
  98. .then(async res => {
  99. res.json = await res.json()
  100. return res
  101. })
  102. .then(res => {
  103. if (!res.ok) throw new Error(res.json.message + res.json.data ? `\n${res.json.data}` : '')
  104. return res.json
  105. })
  106. data.link = this.getHostURI + data.link
  107. return data
  108. }
  109. }
  110. }
  111. </script>