71 lines
1.5 KiB
Vue
71 lines
1.5 KiB
Vue
<template>
|
|
<v-row no-gutters class="vertical-tuner">
|
|
<!-- eslint-disable-next-line -->
|
|
<v-col v-for="(_ , idx) in weights" :key="idx" class="tuner-item">
|
|
<vue-slider
|
|
class="slider"
|
|
v-model="weights[idx]"
|
|
@change="updateWeight(idx, $event)"
|
|
direction="ltr"
|
|
:width="100"
|
|
:min="-1"
|
|
:max="1"
|
|
:interval="0.01"
|
|
/>
|
|
<v-checkbox class="ma-0 checkbox" v-model="store.weights_fixed[idx]" />
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { usePStore } from "@/store/PolicyStore";
|
|
|
|
import VueSlider from "vue-slider-component";
|
|
import "vue-slider-component/theme/default.css";
|
|
import { computed } from "vue";
|
|
import { useCStore } from "@/store/ControlStore";
|
|
|
|
const store = usePStore();
|
|
const cstore = useCStore();
|
|
|
|
const weights = computed({
|
|
get: () => store.weights,
|
|
set: (value) => store.setWeights(value),
|
|
});
|
|
|
|
const updateWeight = (index, newValue) => {
|
|
const newWeights = weights.value.slice();
|
|
newWeights[index] = newValue;
|
|
store.setWeights(newWeights);
|
|
store.setTrigger();
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.vertical-tuner {
|
|
height: 100%;
|
|
transform: rotate(90deg);
|
|
//transform-origin: bottom left;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.tuner-item {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transform: rotate(-90deg);
|
|
transform-origin: center;
|
|
}
|
|
|
|
.slider {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.checkbox {
|
|
padding: 0;
|
|
}
|
|
</style>
|