ExperimentsList.vue 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  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. export default {
  41. name: 'ExperimentsList',
  42. data() {
  43. return {
  44. search: '',
  45. pagination: { rowsPerPage: 10 },
  46. headers: [
  47. { text: 'Experiment name', value: 'name' },
  48. { text: 'Completion', value: 'completion', align: 'center' },
  49. { text: 'Start', value: 'name', sortable: false, align: 'center' }
  50. ],
  51. items: null
  52. }
  53. },
  54. computed: {
  55. ...mapState(['scenesList', 'progression'])
  56. },
  57. mounted() {
  58. this.items = Experiments.map(expe => {
  59. const res = {
  60. name: expe.meta.fullName,
  61. link: `/experiments/${expe.name}`
  62. }
  63. // Check cache has an entry for each scenes in this experiment
  64. if (this.progression[expe.name] && Object.keys(this.progression[expe.name]).every(y => this.scenesList.includes(y))) {
  65. // Set experiment completion percentage
  66. const numberOfDoneScenes = Object.keys(this.progression[expe.name]).filter(y => this.progression[expe.name][y].done).length
  67. const percentage = Math.round(numberOfDoneScenes / this.scenesList.length * 100)
  68. res.completion = `${percentage}%`
  69. }
  70. else res.completion = '0%'
  71. return res
  72. })
  73. }
  74. }
  75. </script>