Skip to content

Commit

Permalink
HOTFIX: options and settings update
Browse files Browse the repository at this point in the history
  • Loading branch information
@ArielMant0
ArielMant0 committed Dec 13, 2023
1 parent 77b7843 commit ae5c4ff
Show file tree
Hide file tree
Showing 8 changed files with 319 additions and 223 deletions.
172 changes: 99 additions & 73 deletions src/components/TimeSeriesCollectionSettings.vue
View file
Original file line number Diff line number Diff line change
@@ -1,109 +1,135 @@
<template>
<div class="tsc-settings">
<div class="d-flex mb-1">
<v-text-field v-model="start"
label="start date"
type="date"
hide-details
class="mr-1"
density="compact"
:rules="[v => v < end ? true : 'must be earlier than end']"
@update:modelValue="setStart"/>

<v-text-field v-model="end"
label="end date"
type="date"
hide-details
density="compact"
:rules="[v => v > start ? true : 'must be later than start']"
@update:modelValue="setEnd"/>
<div class="tsc-settings mb-1">
<div v-if="collapsible" @click="collapsed=!collapsed" class="text-caption clickable">
<v-icon :icon="collapsed ? 'mdi-menu-right' : 'mdi-menu-down'" size="large"/>
collection settings
</div>

<v-switch v-model="dynamicRange"
class="d-flex justify-center"
label="dynamic range"
color="primary"
density="compact"
@update:model-value="setDynamicRange"/>
<div v-if="!collapsed">
<div class="d-flex mb-1">
<v-text-field v-model="start"
label="start date"
type="date"
hide-details
class="mr-1"
density="compact"
:rules="[v => v < end ? true : 'must be earlier than end']"
@update:modelValue="setStart"/>

<div class="d-flex mb-1">
<v-text-field v-model.number="numSamples"
label="# samples"
type="number"
density="compact"
class="mr-1"
hide-details
min="3"
step="1"
:rules="[v => v > 2 && Number.isInteger(v) ? true : 'must be an integer >3']"
@update:modelValue="setSamples"/>
<v-text-field v-model="end"
label="end date"
type="date"
hide-details
density="compact"
:rules="[v => v > start ? true : 'must be later than start']"
@update:modelValue="setEnd"/>
</div>

<v-text-field v-if="!dynamicRange"
v-model.number="min"
label="minimum value"
type="number"
step="0.01"
<v-switch v-model="dynamicRange"
class="d-flex justify-center"
label="dynamic range"
color="primary"
density="compact"
hide-details
class="mr-1"
:rules="[v => v < max ? true : 'must be smaller than maximum']"
@update:modelValue="setMin"/>
@update:model-value="setDynamicRange"/>

<v-text-field v-if="!dynamicRange"
v-model.number="max"
label="maximum value"
type="number"
step="0.01"
density="compact"
hide-details
:rules="[v => v > min ? true : 'must be larger than minimum']"
@update:modelValue="setMax"/>
<div class="d-flex mb-1">
<v-text-field v-model.number="numSamples"
label="# samples"
type="number"
density="compact"
class="mr-1"
hide-details
min="3"
step="1"
:rules="[v => v > 2 && Number.isInteger(v) ? true : 'must be an integer >3']"
@update:modelValue="setSamples"/>

<v-text-field v-if="!dynamicRange"
v-model.number="min"
label="minimum value"
type="number"
step="0.01"
density="compact"
hide-details
class="mr-1"
:rules="[v => v < max ? true : 'must be smaller than maximum']"
@update:modelValue="setMin"/>

<v-text-field v-if="!dynamicRange"
v-model.number="max"
label="maximum value"
type="number"
step="0.01"
density="compact"
hide-details
:rules="[v => v > min ? true : 'must be larger than minimum']"
@update:modelValue="setMax"/>
</div>
</div>
</div>
</template>

<script setup>
import TimeSeriesCollection from '@/use/timeseries-collection.js';
import { ref } from 'vue';
import { ref, watch } from 'vue';
const props = defineProps({
collection: {
type: TimeSeriesCollection,
required: true
},
collapsible: {
type: Boolean,
default: false,
}
})
const emit = defineEmits(["update"])
const collapsed = ref(false);
const numSamples = ref(props.collection.samples);
const start = ref(props.collection.start);
const end = ref(props.collection.end);
const min = ref(props.collection.min);
const max = ref(props.collection.max);
const dynamicRange = ref(props.collection.dynamicRange);
function setMin() {
props.collection.min = min.value;
}
function setMax() {
props.collection.max = max.value;
}
function setStart() {
props.collection.start = start.value;
emit("update", { key: "start", value: start.value });
}
function setEnd() {
props.collection.end = end.value;
emit("update", { key: "end", value: end.value });
}
function setMin() { updateSettings("min", min.value); }
function setMax() { updateSettings("max", max.value); }
function setStart() { updateSettings("start", start.value); }
function setEnd() { updateSettings("end", end.value); }
function setDynamicRange() { updateSettings("dynamicRange", dynamicRange.value); }
function setSamples() {
if (numSamples.value > 2 && Number.isInteger(numSamples.value)) {
props.collection.samples = numSamples.value;
emit("update", { key: "samples", value: numSamples.value });
updateSettings("samples", numSamples.value);
}
}
function readSettings() {
if (numSamples.value !== props.collection.samples) {
numSamples.value = props.collection.samples
}
if (start.value !== props.collection.start) {
start.value = props.collection.start
}
if (end.value !== props.collection.end) {
end.value = props.collection.end
}
if (dynamicRange.value !== props.collection.dynamicRange) {
dynamicRange.value = props.collection.dynamicRange
}
if (min.value !== props.collection.min) {
min.value = props.collection.min
}
if (max.value !== props.collection.max) {
max.value = props.collection.max
}
}
function setDynamicRange() {
props.collection.dynamicRange = dynamicRange.value;
emit("update", { key: "dynamicRange", value: dynamicRange.value });
function updateSettings(key, value) {
props.collection.setOption(key, value);
emit("update", key, value);
}
watch(() => props.collection.lastUpdate, readSettings);
</script>
5 changes: 1 addition & 4 deletions src/components/TimeSeriesCollectionViewer.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div>
<TimeSeriesCollectionSettings :collection="collection" @update="updateSettings"/>
<TimeSeriesCollectionSettings :collection="collection" collapsible/>

<v-btn rounded="sm" color="primary" @click="add" style="width: 100%;" class="mb-1 new-ts" elevation="0">
<v-icon icon="mdi-plus"/> new time series
Expand Down Expand Up @@ -51,9 +51,6 @@
}
});
function updateSettings(payload) {
props.collection.setOption(payload.key, payload.value);
}
function add() {
try {
props.collection.addTimeSeries();
Expand Down
19 changes: 15 additions & 4 deletions src/components/TimeSeriesComponentViewer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@

<script setup>
import { ref, reactive, watch } from 'vue';
import { ref, reactive, watch, onMounted } from 'vue';
const props = defineProps({
component: {
Expand All @@ -50,9 +50,6 @@
const seed = ref(props.component.generator.seeds[0])
const options = reactive({});
for (const oKey in props.component.generator.options) {
options[oKey] = props.component.generator.options[oKey].copy();
}
function setOption(key) {
if (options[key].value !== props.component.generator.getOpt(key)) {
Expand All @@ -62,6 +59,17 @@
}
}
}
function readOptions() {
for (const key in options){
if (options.hasOwnProperty(key)){
delete options[key];
}
}
for (const key in props.component.generator.options) {
options[key] = props.component.generator.options[key].copy();
}
}
function update() {
if (props.component.isValid()) {
props.component.update();
Expand All @@ -77,10 +85,13 @@
update();
}
onMounted(readOptions)
watch(() => props.component.generator.seeds, function(newseeds) {
if (newseeds[0] !== seed.value) {
seed.value = newseeds[0];
}
}, { deep: true })
watch(() => props.component.lastUpdate, readOptions)
</script>
Loading

0 comments on commit ae5c4ff

Please sign in to comment.