ExperimentsList.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  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 experiment</v-btn></td>
  27. </template>
  28. <template v-slot:no-results>
  29. <v-alert :value="true" color="error" icon="warning">
  30. Your search for "{{ search }}" found no results.
  31. </v-alert>
  32. </template>
  33. </v-data-table>
  34. </v-card>
  35. </div>
  36. </template>
  37. <script>
  38. import { mapState } from 'vuex'
  39. import Experiments from '@/router/experiments'
  40. import { getExperimentSceneList } from '@/config.utils'
  41. export default {
  42. name: 'ExperimentsList',
  43. data() {
  44. return {
  45. search: '',
  46. pagination: { rowsPerPage: 10 },
  47. headers: [
  48. { text: 'Experiment name', value: 'name' },
  49. { text: 'Completion', value: 'completion', align: 'center' },
  50. { text: 'Start', value: 'name', sortable: false, align: 'center' }
  51. ],
  52. items: null
  53. }
  54. },
  55. computed: {
  56. ...mapState(['progression'])
  57. },
  58. mounted() {
  59. this.items = Experiments.map(expe => {
  60. const scenesList = getExperimentSceneList(expe.name)
  61. const res = {
  62. name: expe.meta.fullName,
  63. link: `/experiments/${expe.name}`
  64. }
  65. // Check cache has an entry for each scenes in this experiment
  66. if (this.progression && this.progression[expe.name]) {
  67. // Set experiment completion percentage
  68. const numberOfDoneScenes = Object.keys(this.progression[expe.name]).filter(y => this.progression[expe.name][y].done).length
  69. const percentage = Math.round(numberOfDoneScenes / scenesList.length * 100)
  70. res.completion = `${percentage}%`
  71. }
  72. else res.completion = '0%'
  73. return res
  74. })
  75. }
  76. }
  77. </script>