ExtractConfiguration.vue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <template>
  2. <v-card dark>
  3. <v-container grid-list-sm fluid>
  4. <v-layout row wrap>
  5. <v-flex xs12>
  6. <h1>Configuration</h1>
  7. <v-card-text class="px-0">Extracts per line (horizontal)</v-card-text>
  8. <v-slider
  9. v-model="experimentConfig.x"
  10. always-dirty
  11. persistent-hint
  12. thumb-label="always"
  13. min="1"
  14. max="25"
  15. />
  16. <v-card-text class="px-0">Extracts per row (vertical)</v-card-text>
  17. <v-slider
  18. v-model="experimentConfig.y"
  19. always-dirty
  20. persistent-hint
  21. thumb-label="always"
  22. min="1"
  23. max="25"
  24. />
  25. <v-btn @click="setConfig" :disabled="!isConfigNew">Confirm</v-btn>
  26. <v-alert v-if="loadingErrorMessage" :value="true" type="error" v-text="loadingErrorMessage" />
  27. </v-flex>
  28. </v-layout>
  29. </v-container>
  30. </v-card>
  31. </template>
  32. <script>
  33. export default {
  34. name: 'ExtractConfiguration',
  35. props: {
  36. loadingErrorMessage: {
  37. type: String,
  38. required: false,
  39. default: null
  40. }
  41. },
  42. data() {
  43. return {
  44. // Experiment config sliders
  45. experimentConfig: {
  46. x: 4,
  47. y: 4
  48. },
  49. // Updated when `setConfig` is called
  50. extractConfig: {
  51. x: 4,
  52. y: 4
  53. }
  54. }
  55. },
  56. computed: {
  57. isConfigNew() {
  58. return this.extractConfig.x !== this.experimentConfig.x || this.extractConfig.y !== this.experimentConfig.y
  59. }
  60. },
  61. methods: {
  62. setDefaultConfig(config) {
  63. this.experimentConfig.x = config.x
  64. this.experimentConfig.y = config.y
  65. this.extractConfig.x = this.experimentConfig.x
  66. this.extractConfig.y = this.experimentConfig.y
  67. },
  68. setConfig() {
  69. this.extractConfig.x = this.experimentConfig.x
  70. this.extractConfig.y = this.experimentConfig.y
  71. this.$emit('setConfig', this.experimentConfig)
  72. }
  73. }
  74. }
  75. </script>