index.vue 3.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  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 { EXPERIMENT as experimentMsgId } from '@/../config.messagesId'
  10. export default {
  11. name: 'ExperimentBase',
  12. props: {
  13. sceneName: {
  14. type: String,
  15. required: true
  16. }
  17. },
  18. data() {
  19. return {
  20. experimentName: null, // Must be redefined in parent component
  21. loadingMessage: null,
  22. loadingErrorMessage: null,
  23. qualities: null,
  24. lockConfig: null
  25. }
  26. },
  27. computed: {
  28. ...mapGetters(['getHostURI', 'getExperimentProgress', 'isExperimentDone'])
  29. },
  30. mounted() {
  31. if (!this.getExperimentProgress({ experimentName: this.experimentName, sceneName: this.sceneName }).experimentName)
  32. this.sendMessage({ msgId: experimentMsgId.STARTED })
  33. // Check if the experiment is already finished
  34. if (this.experimentName && this.sceneName && this.isExperimentDone({ experimentName: this.experimentName, sceneName: this.sceneName })) {
  35. console.warn('Redirected from experiment. You can\'t go back in an experiment after finishing it.')
  36. this.$router.push(`/experiments/${this.experimentName}`)
  37. }
  38. },
  39. methods: {
  40. ...mapActions(['setExperimentProgress', 'setExperimentDone', 'sendMessage']),
  41. // Load progress from store into local state
  42. loadProgress() {
  43. if (!this.experimentName || !this.sceneName)
  44. return console.warn('Could not load progress : experimentName and sceneName must be defined')
  45. const progress = this.getExperimentProgress({ experimentName: this.experimentName, sceneName: this.sceneName })
  46. Object.assign(this.$data, progress)
  47. // console.log('Loaded data from store to local state.', progress)
  48. },
  49. // Save progress from local state into store
  50. saveProgress() {
  51. if (!this.experimentName || !this.sceneName)
  52. return console.warn('Could not save progress : experimentName and sceneName must be defined')
  53. this.setExperimentProgress({ experimentName: this.experimentName, sceneName: this.sceneName, data: this.$data })
  54. // console.log('Saved data from local state to store.', this.$data)
  55. },
  56. // Load a config object into the local state
  57. async loadConfig(configFn) {
  58. const config = (await configFn())(this.sceneName)
  59. // console.log('Loaded configuration', config)
  60. Object.assign(this.$data, config)
  61. },
  62. // Finish an experiment, sending full data to the server
  63. // Don't forget to surcharge this function when using this mixin to add more data
  64. finishExperiment() {
  65. const obj = Object.assign(this.$data, { sceneName: this.sceneName })
  66. obj.loadingMessage = undefined
  67. obj.loadingErrorMessage = undefined
  68. this.sendMessage({ msgId: experimentMsgId.VALIDATED, msg: obj })
  69. this.setExperimentDone({ experimentName: this.experimentName, sceneName: this.sceneName, done: true })
  70. this.$router.push(`/experiments/${this.experimentName}`)
  71. },
  72. // Load qualities list from the API
  73. async getQualitiesList() {
  74. if (this.qualities) return
  75. const URI = `${this.getHostURI}${API_ROUTES.listSceneQualities(this.sceneName)}`
  76. const { data } = await fetch(URI).then(res => res.json())
  77. this.qualities = data
  78. this.saveProgress()
  79. }
  80. }
  81. }
  82. </script>