12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879 |
- <template>
- <v-card dark>
- <v-container grid-list-sm fluid>
- <v-layout row wrap>
- <v-flex xs12>
- <h1>Configuration</h1>
- <v-card-text class="px-0">Extracts per line (horizontal)</v-card-text>
- <v-slider
- v-model="experimentConfig.x"
- always-dirty
- persistent-hint
- thumb-label="always"
- min="1"
- max="25"
- />
- <v-card-text class="px-0">Extracts per row (vertical)</v-card-text>
- <v-slider
- v-model="experimentConfig.y"
- always-dirty
- persistent-hint
- thumb-label="always"
- min="1"
- max="25"
- />
- <v-btn @click="setConfig" :disabled="!isConfigNew">Confirm</v-btn>
- <v-alert v-if="loadingErrorMessage" :value="true" type="error" v-text="loadingErrorMessage" />
- </v-flex>
- </v-layout>
- </v-container>
- </v-card>
- </template>
- <script>
- export default {
- name: 'ExtractConfiguration',
- props: {
- loadingErrorMessage: {
- type: String,
- required: false,
- default: null
- }
- },
- data() {
- return {
- // Experiment config sliders
- experimentConfig: {
- x: 4,
- y: 4
- },
- // Updated when `setConfig` is called
- extractConfig: {
- x: 4,
- y: 4
- }
- }
- },
- computed: {
- isConfigNew() {
- return this.extractConfig.x !== this.experimentConfig.x || this.extractConfig.y !== this.experimentConfig.y
- }
- },
- methods: {
- setDefaultConfig(config) {
- this.experimentConfig.x = config.x
- this.experimentConfig.y = config.y
- this.extractConfig.x = this.experimentConfig.x
- this.extractConfig.y = this.experimentConfig.y
- },
- setConfig() {
- this.extractConfig.x = this.experimentConfig.x
- this.extractConfig.y = this.experimentConfig.y
- this.$emit('setConfig', this.experimentConfig)
- }
- }
- }
- </script>
|