Move plotconfig logic to plotStore

This commit is contained in:
Matthias 2023-05-05 06:42:27 +02:00
parent a6535822da
commit 7649390156
2 changed files with 48 additions and 44 deletions

View File

@ -83,7 +83,7 @@
variant="secondary" variant="secondary"
size="sm" size="sm"
title="Load configuration from text box below" title="Load configuration from text box below"
@click="resetConfig" @click="clearConfig"
>Reset</b-button >Reset</b-button
> >
<b-button <b-button
@ -130,11 +130,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { PlotConfig, EMPTY_PLOTCONFIG, IndicatorConfig } from '@/types'; import { PlotConfig, EMPTY_PLOTCONFIG, IndicatorConfig } from '@/types';
import { getCustomPlotConfig } from '@/shared/storage';
import PlotIndicator from '@/components/charts/PlotIndicator.vue'; import PlotIndicator from '@/components/charts/PlotIndicator.vue';
import { showAlert } from '@/stores/alerts'; import { showAlert } from '@/stores/alerts';
import { computed, ref, onMounted } from 'vue'; import { computed, ref, onMounted, onUnmounted } from 'vue';
import { useBotStore } from '@/stores/ftbotwrapper'; import { useBotStore } from '@/stores/ftbotwrapper';
import { usePlotConfigStore } from '@/stores/plotConfig'; import { usePlotConfigStore } from '@/stores/plotConfig';
@ -146,8 +145,6 @@ defineProps({
const plotStore = usePlotConfigStore(); const plotStore = usePlotConfigStore();
const botStore = useBotStore(); const botStore = useBotStore();
const plotConfig = ref<PlotConfig>(EMPTY_PLOTCONFIG);
const plotConfigNameLoc = ref('default'); const plotConfigNameLoc = ref('default');
const newSubplotName = ref(''); const newSubplotName = ref('');
const selIndicatorName = ref(''); const selIndicatorName = ref('');
@ -163,43 +160,41 @@ const isMainPlot = computed(() => {
const currentPlotConfig = computed(() => { const currentPlotConfig = computed(() => {
if (isMainPlot.value) { if (isMainPlot.value) {
return plotConfig.value.main_plot; return plotStore.editablePlotConfig.main_plot;
} }
return plotConfig.value.subplots[selSubPlot.value]; return plotStore.editablePlotConfig.subplots[selSubPlot.value];
}); });
const subplots = computed((): string[] => { const subplots = computed((): string[] => {
// Subplot keys (for selection window) // Subplot keys (for selection window)
return ['main_plot', ...Object.keys(plotConfig.value.subplots)]; return ['main_plot', ...Object.keys(plotStore.editablePlotConfig.subplots)];
}); });
const usedColumns = computed((): string[] => { const usedColumns = computed((): string[] => {
if (isMainPlot.value) { if (isMainPlot.value) {
return Object.keys(plotConfig.value.main_plot); return Object.keys(plotStore.editablePlotConfig.main_plot);
} }
if (selSubPlot.value in plotConfig.value.subplots) { if (selSubPlot.value in plotStore.editablePlotConfig.subplots) {
return Object.keys(plotConfig.value.subplots[selSubPlot.value]); return Object.keys(plotStore.editablePlotConfig.subplots[selSubPlot.value]);
} }
return []; return [];
}); });
function addIndicator(newIndicator: Record<string, IndicatorConfig>) { function addIndicator(newIndicator: Record<string, IndicatorConfig>) {
console.log(plotConfig.value);
// const { plotConfig.value } = this; // const { plotConfig.value } = this;
const name = Object.keys(newIndicator)[0]; const name = Object.keys(newIndicator)[0];
const indicator = newIndicator[name]; const indicator = newIndicator[name];
if (isMainPlot.value) { if (isMainPlot.value) {
console.log(`Adding ${name} to MainPlot`); console.log(`Adding ${name} to MainPlot`);
plotConfig.value.main_plot[name] = { ...indicator }; plotStore.editablePlotConfig.main_plot[name] = { ...indicator };
} else { } else {
console.log(`Adding ${name} to ${selSubPlot.value}`); console.log(`Adding ${name} to ${selSubPlot.value}`);
plotConfig.value.subplots[selSubPlot.value][name] = { ...indicator }; plotStore.editablePlotConfig.subplots[selSubPlot.value][name] = { ...indicator };
} }
plotConfig.value = { ...plotConfig.value }; plotStore.editablePlotConfig = { ...plotStore.editablePlotConfig };
// Reset random color // Reset random color
addNewIndicator.value = false; addNewIndicator.value = false;
plotStore.setPlotConfig(plotConfig.value); plotStore.setPlotConfig(plotStore.editablePlotConfig);
} }
const selIndicator = computed({ const selIndicator = computed({
@ -229,7 +224,7 @@ const selIndicator = computed({
const plotConfigJson = computed({ const plotConfigJson = computed({
get() { get() {
return JSON.stringify(plotConfig.value, null, 2); return JSON.stringify(plotStore.editablePlotConfig, null, 2);
}, },
set(newValue: string) { set(newValue: string) {
try { try {
@ -243,54 +238,53 @@ const plotConfigJson = computed({
}); });
function removeIndicator() { function removeIndicator() {
console.log(plotConfig.value); console.log(plotStore.editablePlotConfig);
// const { plotConfig } = this; // const { plotConfig } = this;
if (isMainPlot.value) { if (isMainPlot.value) {
console.log(`Removing ${selIndicatorName.value} from MainPlot`); console.log(`Removing ${selIndicatorName.value} from MainPlot`);
delete plotConfig.value.main_plot[selIndicatorName.value]; delete plotStore.editablePlotConfig.main_plot[selIndicatorName.value];
} else { } else {
console.log(`Removing ${selIndicatorName.value} from ${selSubPlot.value}`); console.log(`Removing ${selIndicatorName.value} from ${selSubPlot.value}`);
delete plotConfig.value.subplots[selSubPlot.value][selIndicatorName.value]; delete plotStore.editablePlotConfig.subplots[selSubPlot.value][selIndicatorName.value];
} }
plotConfig.value = { ...plotConfig.value }; plotStore.editablePlotConfig = { ...plotStore.editablePlotConfig };
console.log(plotConfig.value); console.log(plotStore.editablePlotConfig);
selIndicatorName.value = ''; selIndicatorName.value = '';
plotStore.setPlotConfig(plotConfig.value); plotStore.setPlotConfig(plotStore.editablePlotConfig);
} }
function addSubplot() { function addSubplot() {
plotConfig.value.subplots = { plotStore.editablePlotConfig.subplots = {
...plotConfig.value.subplots, ...plotStore.editablePlotConfig.subplots,
[newSubplotName.value]: {}, [newSubplotName.value]: {},
}; };
selSubPlot.value = newSubplotName.value; selSubPlot.value = newSubplotName.value;
newSubplotName.value = ''; newSubplotName.value = '';
plotStore.setPlotConfig(plotConfig.value); plotStore.setPlotConfig(plotStore.editablePlotConfig);
} }
function delSubplot() { function delSubplot() {
delete plotConfig.value.subplots[selSubPlot.value]; delete plotStore.editablePlotConfig.subplots[selSubPlot.value];
plotConfig.value.subplots = { ...plotConfig.value.subplots }; plotStore.editablePlotConfig.subplots = { ...plotStore.editablePlotConfig.subplots };
selSubPlot.value = ''; selSubPlot.value = '';
plotStore.setPlotConfig(plotConfig.value); plotStore.setPlotConfig(plotStore.editablePlotConfig);
} }
function loadPlotConfig() { function loadPlotConfig() {
plotConfig.value = getCustomPlotConfig(plotConfigNameLoc.value); // Reset from store
console.log(plotConfig.value); plotStore.editablePlotConfig = plotStore.customPlotConfigs[plotStore.plotConfigName];
console.log('loading config');
plotStore.setPlotConfig(plotConfig.value);
} }
function loadConfigFromString() { function loadConfigFromString() {
// this.plotConfig = JSON.parse(); // this.plotConfig = JSON.parse();
if (tempPlotConfig.value !== undefined && tempPlotConfigValid.value) { if (tempPlotConfig.value !== undefined && tempPlotConfigValid.value) {
plotConfig.value = tempPlotConfig.value; plotStore.editablePlotConfig = tempPlotConfig.value;
plotStore.setPlotConfig(plotConfig.value); plotStore.setPlotConfig(plotStore.editablePlotConfig);
} }
} }
function resetConfig() { function clearConfig() {
plotConfig.value = { ...EMPTY_PLOTCONFIG }; // Use empty config
plotStore.editablePlotConfig = { ...EMPTY_PLOTCONFIG };
} }
async function loadPlotConfigFromStrategy() { async function loadPlotConfigFromStrategy() {
if (botStore.activeBot.isWebserverMode && !botStore.activeBot.strategy.strategy) { if (botStore.activeBot.isWebserverMode && !botStore.activeBot.strategy.strategy) {
@ -300,8 +294,8 @@ async function loadPlotConfigFromStrategy() {
try { try {
await botStore.activeBot.getStrategyPlotConfig(); await botStore.activeBot.getStrategyPlotConfig();
if (botStore.activeBot.strategyPlotConfig) { if (botStore.activeBot.strategyPlotConfig) {
plotConfig.value = botStore.activeBot.strategyPlotConfig; plotStore.editablePlotConfig = botStore.activeBot.strategyPlotConfig;
plotStore.setPlotConfig(plotConfig.value); plotStore.setPlotConfig(plotStore.editablePlotConfig);
} }
} catch (data) { } catch (data) {
// //
@ -310,14 +304,19 @@ async function loadPlotConfigFromStrategy() {
} }
function savePlotConfig() { function savePlotConfig() {
plotStore.saveCustomPlotConfig(plotConfigNameLoc.value, plotConfig.value); plotStore.saveCustomPlotConfig(plotConfigNameLoc.value, plotStore.editablePlotConfig);
} }
onMounted(() => { onMounted(() => {
// console.log('Config Mounted', props); // Deep clone and assign to editable
plotConfig.value = plotStore.plotConfig; plotStore.editablePlotConfig = JSON.parse(JSON.stringify(plotStore.plotConfig));
plotStore.isEditing = true;
plotConfigNameLoc.value = plotStore.plotConfigName; plotConfigNameLoc.value = plotStore.plotConfigName;
}); });
onUnmounted(() => {
// TODO: Unmounted is not called when closing in Chart view
plotStore.isEditing = false;
});
</script> </script>
<style scoped> <style scoped>

View File

@ -28,11 +28,16 @@ export const usePlotConfigStore = defineStore('plotConfig', {
return { return {
customPlotConfigs: {} as PlotConfigStorage, customPlotConfigs: {} as PlotConfigStorage,
plotConfigName: 'default', plotConfigName: 'default',
isEditing: false,
editablePlotConfig: { ...EMPTY_PLOTCONFIG } as PlotConfig,
}; };
}, },
getters: { getters: {
availablePlotConfigNames: (state) => Object.keys(state.customPlotConfigs), availablePlotConfigNames: (state) => Object.keys(state.customPlotConfigs),
plotConfig: (state) => state.customPlotConfigs[state.plotConfigName] || { ...EMPTY_PLOTCONFIG }, plotConfig: (state) =>
(state.isEditing
? state.editablePlotConfig
: state.customPlotConfigs[state.plotConfigName]) || { ...EMPTY_PLOTCONFIG },
// plotConfig: (state) => state.customPlotConfig[state.plotConfigName] || { ...EMPTY_PLOTCONFIG }, // plotConfig: (state) => state.customPlotConfig[state.plotConfigName] || { ...EMPTY_PLOTCONFIG },
}, },
actions: { actions: {