ExtractConfiguration.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  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-slide-y-transition mode="out-in">
  8. <div v-if="isExpanded" key="configurator">
  9. <v-card-text class="px-0">Extracts per line (horizontal)</v-card-text>
  10. <v-slider
  11. v-model="experimentConfig.x"
  12. always-dirty
  13. persistent-hint
  14. thumb-label="always"
  15. min="1"
  16. max="15"
  17. />
  18. <v-card-text class="px-0">Extracts per row (vertical)</v-card-text>
  19. <v-slider
  20. v-model="experimentConfig.y"
  21. always-dirty
  22. persistent-hint
  23. thumb-label="always"
  24. min="1"
  25. max="15"
  26. />
  27. <v-btn @click="setExtractConfig" :disabled="!isConfigNew">Confirm</v-btn>
  28. </div>
  29. </v-slide-y-transition>
  30. <div>
  31. <v-btn flat round @click="isExpanded = !isExpanded">
  32. <v-icon class="rotated180-duration" :class="{ rotated180: isExpanded }" key="arrow-down">keyboard_arrow_down</v-icon>
  33. </v-btn>
  34. </div>
  35. <v-alert v-if="loadingErrorMessage" :value="true" type="error" v-text="loadingErrorMessage" />
  36. </v-flex>
  37. </v-layout>
  38. </v-container>
  39. </v-card>
  40. </template>
  41. <script>
  42. export default {
  43. name: 'ExtractConfiguration',
  44. props: {
  45. loadingErrorMessage: {
  46. type: String,
  47. required: false,
  48. default: null
  49. }
  50. },
  51. data() {
  52. return {
  53. isExpanded: true,
  54. // Experiment config sliders
  55. experimentConfig: {
  56. x: 4,
  57. y: 4
  58. },
  59. // Updated when `setExtractConfig` is called
  60. extractConfig: {
  61. x: 4,
  62. y: 4
  63. }
  64. }
  65. },
  66. computed: {
  67. isConfigNew() {
  68. return this.extractConfig.x !== this.experimentConfig.x || this.extractConfig.y !== this.experimentConfig.y
  69. }
  70. },
  71. methods: {
  72. setVisibility(bool) {
  73. this.isExpanded = bool
  74. },
  75. setDefaultConfig(config) {
  76. this.experimentConfig.x = config.x
  77. this.experimentConfig.y = config.y
  78. this.extractConfig.x = this.experimentConfig.x
  79. this.extractConfig.y = this.experimentConfig.y
  80. },
  81. setExtractConfig() {
  82. this.extractConfig.x = this.experimentConfig.x
  83. this.extractConfig.y = this.experimentConfig.y
  84. this.$emit('setExtractConfig', this.experimentConfig)
  85. }
  86. }
  87. }
  88. </script>
  89. <style scoped>
  90. .rotated180 {
  91. transform: rotate(180deg);
  92. }
  93. .rotated180-duration {
  94. transition: transform .5s ease-in-out !important;
  95. }
  96. </style>