covcharts/src/components/ChartConfig.vue

246 lines
7.4 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>
<b>Maths Functions</b>
</v-list-item-action>
</v-list-item>
<v-list-item>
<v-list-item-action>
<v-switch
label=" Exp"
v-model="configs.math.exp.display"
color="blue-grey darken-1"
></v-switch>
</v-list-item-action>
<v-list-item-content v-if="configs.math.exp.display">
F:
<v-text-field
class="numFieldsm"
v-model="configs.math.exp.factor"
label="Factor"
solo
hide-details
single-line
/>
D:
<v-text-field
class="numFieldsm"
v-model="configs.math.exp.dayPrev"
label="Days"
solo
hide-details
single-line
/>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-action>
<v-switch
label=" Pow"
v-model="configs.math.pow.display"
color="blue-grey darken-1"
></v-switch>
</v-list-item-action>
<v-list-item-content v-if="configs.math.pow.display">
F:
<v-text-field
class="numFieldsm"
v-model="configs.math.pow.factor"
solo
hide-details
single-line
/>
D:
<v-text-field
class="numFieldsm"
v-model="configs.math.pow.dayPrev"
solo
hide-details
single-line
/>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-action>
<v-switch
label=" Logi"
v-model="configs.math.logi.display"
color="blue-grey darken-1"
></v-switch>
</v-list-item-action>
<v-list-item-content v-if="configs.math.logi.display">
F:
<v-text-field
class="numFieldsm"
v-model="configs.math.logi.factor"
solo
hide-details
single-line
/>
D:
<v-text-field
class="numFieldsm"
v-model="configs.math.logi.dayPrev"
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%;
}
.numFieldsm {
max-width: 50px;
}
</style>