index.vue 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  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. }
  25. },
  26. computed: {
  27. ...mapGetters(['getHostURI', 'getExperimentProgress', 'isExperimentDone'])
  28. },
  29. mounted() {
  30. if (!this.getExperimentProgress({ experimentName: this.experimentName, sceneName: this.sceneName }).experimentName)
  31. this.sendMessage({ msgId: experimentMsgId.STARTED, experimentName: this.experimentName, sceneName: this.sceneName })
  32. // Check if the experiment is already finished
  33. if (this.experimentName && this.sceneName && this.isExperimentDone({ experimentName: this.experimentName, sceneName: this.sceneName })) {
  34. console.warn('Redirected from experiment. You can\'t go back in an experiment after finishing it.')
  35. this.$router.push(`/experiments/${this.experimentName}`)
  36. }
  37. },
  38. methods: {
  39. ...mapActions(['setExperimentProgress', 'setExperimentDone', 'sendMessage']),
  40. // Load progress from store into local state
  41. loadProgress() {
  42. if (!this.experimentName || !this.sceneName)
  43. return console.warn('Could not load progress : experimentName and sceneName must be defined')
  44. const progress = this.getExperimentProgress({ experimentName: this.experimentName, sceneName: this.sceneName })
  45. Object.assign(this.$data, progress)
  46. // console.log('Loaded data from store to local state.', progress)
  47. },
  48. // Save progress from local state into store
  49. saveProgress() {
  50. if (!this.experimentName || !this.sceneName)
  51. return console.warn('Could not save progress : experimentName and sceneName must be defined')
  52. this.setExperimentProgress({ experimentName: this.experimentName, sceneName: this.sceneName, data: this.$data })
  53. // console.log('Saved data from local state to store.', this.$data)
  54. },
  55. // Finish an experiment, sending full data to the server
  56. // Don't forget to surcharge this function when using this mixin to add more data
  57. finishExperiment() {
  58. const obj = Object.assign(this.$data, { sceneName: this.sceneName })
  59. obj.loadingMessage = undefined
  60. obj.loadingErrorMessage = undefined
  61. this.sendMessage({ msgId: experimentMsgId.VALIDATED, msg: obj })
  62. this.setExperimentDone({ experimentName: this.experimentName, sceneName: this.sceneName, done: true })
  63. this.$router.push(`/experiments/${this.experimentName}`)
  64. },
  65. // Load qualities list from the API
  66. async getQualitiesList() {
  67. if (this.qualities) return
  68. const URI = `${this.getHostURI}${API_ROUTES.listSceneQualities(this.sceneName)}`
  69. const { data } = await fetch(URI).then(res => res.json())
  70. this.qualities = data
  71. this.saveProgress()
  72. }
  73. }
  74. }
  75. </script>