ExperimentsList.vue 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <template>
  2. <div>
  3. List of experiments
  4. <v-card>
  5. <v-card-title>
  6. Choose an experiment
  7. <v-spacer />
  8. <v-text-field
  9. v-model="search"
  10. append-icon="search"
  11. label="Search"
  12. single-line
  13. hide-details
  14. />
  15. </v-card-title>
  16. <v-data-table
  17. v-if="items"
  18. :headers="headers"
  19. :items="items"
  20. :search="search"
  21. :pagination.sync="pagination"
  22. >
  23. <template v-slot:items="props">
  24. <td>{{ props.item.name }}</td>
  25. <td class="text-xs-center">{{ props.item.completion }}</td>
  26. <td class="text-xs-center"><v-btn small dark :to="props.item.link">Start</v-btn></td>
  27. <td class="text-xs-center"><v-btn small dark :to="props.item.linkRandom">Start with random scene</v-btn></td>
  28. </template>
  29. <template v-slot:no-results>
  30. <v-alert :value="true" color="error" icon="warning">
  31. Your search for "{{ search }}" found no results.
  32. </v-alert>
  33. </template>
  34. </v-data-table>
  35. </v-card>
  36. </div>
  37. </template>
  38. <script>
  39. import { mapGetters } from 'vuex'
  40. import Experiments from '@/router/experiments'
  41. import { getExperimentSceneList } from '@/config.utils'
  42. import { rand } from '@/functions'
  43. export default {
  44. name: 'ExperimentsList',
  45. data() {
  46. return {
  47. search: '',
  48. pagination: { rowsPerPage: 10 },
  49. headers: [
  50. { text: 'Experiment name', value: 'name' },
  51. { text: 'Completion', value: 'completion', align: 'center' },
  52. { text: 'Start', value: 'start', sortable: false, align: 'center' },
  53. { text: 'Start random scene', value: 'startRandom', sortable: false, align: 'center' }
  54. ],
  55. items: null
  56. }
  57. },
  58. computed: {
  59. ...mapGetters(['getAllExperimentProgress'])
  60. },
  61. mounted() {
  62. this.items = Experiments.map(expe => {
  63. const scenesList = getExperimentSceneList(expe.name)
  64. const res = {
  65. name: expe.meta.fullName,
  66. link: `/experiments/${expe.name}`
  67. }
  68. // load current user progression
  69. this.progression = this.getAllExperimentProgress()
  70. // Check cache has an entry for each scenes in this experiment
  71. if (this.progression && this.progression[expe.name]) {
  72. // Set experiment completion percentage
  73. const numberOfDoneScenes = Object.keys(this.progression[expe.name]).filter(y => this.progression[expe.name][y].done).length
  74. const percentage = Math.round(numberOfDoneScenes / scenesList.length * 100)
  75. res.completion = `${numberOfDoneScenes}/${scenesList.length} - ${percentage}%`
  76. // Get scenes that are NOT done
  77. const unDoneScenes = Object.keys(this.progression[expe.name]).filter(y => scenesList.includes(y) && !this.progression[expe.name][y].done)
  78. // Select a random scenes
  79. const randomScene = unDoneScenes[rand(0, unDoneScenes.length - 1)]
  80. res.linkRandom = `/experiments/${expe.name}/${randomScene}`
  81. }
  82. else res.completion = '0%'
  83. return res
  84. })
  85. }
  86. }
  87. </script>