covcharts/src/components/ChartConfig.vue
2020-04-26 23:04:17 +02:00

142 lines
4.0 KiB
Vue

<template>
<div>
<v-list dense >
<v-list-item>
<v-list-item-action>Scale</v-list-item-action>
<v-list-item-content>
<v-select
class="vselect"
:items="configLists.scaleList"
v-model="configs.scaleSelected"
single-line
hide-details
></v-select>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-action>Type</v-list-item-action>
<v-list-item-content>
<v-select
class="vselect"
:items="configLists.typesList"
v-model="configs.typeSelected"
single-line
hide-details
></v-select>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-action>Day Start</v-list-item-action>
<v-list-item-content>
<Counter
v-model="configs.dayStart"
:input="configs.dayStart"
classname="themeGrey"
:max="100"
></Counter>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-action>Day End</v-list-item-action>
<v-list-item-content>
<Counter
v-model="configs.dayEnd"
:input="configs.dayEnd"
classname="themeGrey"
:max="100"
></Counter>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-action>Sync X </v-list-item-action>
<v-list-item-content>
<v-text-field
class="numField"
v-model="configs.syncSince"
label="syncSince"
solo
hide-details
single-line
/>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-action>Limit Y </v-list-item-action>
<v-list-item-content>
<v-text-field
class="numField"
v-model="configs.ymax"
label="ymaxx"
solo
hide-details
single-line
/>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-action></v-list-item-action>
<v-list-item-content>
<v-btn @click="resetConfig()"
x-small
>Reset
</v-btn>
</v-list-item-content>
</v-list-item>
</v-list>
</div>
</template>
<script>
import Counter from './html/Counter'
export default {
name: "ChartConfig",
props: ['configs', 'configLists'],
components: {Counter},
data() {
return {
}
},
watch:{
'configs.syncSince': function(value){
if ( ! (value > 0 ) ){
this.configs.syncSince = 0
}
}
},
methods: {
resetConfig() {
this.configs.resetConfig = true
}
},
computed: { }
}
</script>
<style scoped>
.vselect {
padding: 0px;
margin: 0px;
}
.numField {
max-width: 50%;
}
</style>