Update components to use pinia store

This commit is contained in:
Matthias 2022-04-13 21:28:04 +02:00
parent 9efad28ea6
commit 77ad7d20a2
3 changed files with 29 additions and 21 deletions

View File

@ -7,27 +7,24 @@
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import NavBar from '@/components/layout/NavBar.vue';
import NavFooter from '@/components/layout/NavFooter.vue';
import Body from '@/components/layout/Body.vue';
import { namespace } from 'vuex-class';
import { SettingsGetters } from './store/modules/settings';
import { setTimezone } from './shared/formatters';
import StoreModules from './store/storeSubModules';
import { defineComponent, onMounted } from '@vue/composition-api';
import { useSettingsStore } from './stores/settings';
const uiSettingsNs = namespace(StoreModules.uiSettings);
@Component({
export default defineComponent({
name: 'App',
components: { NavBar, Body, NavFooter },
})
export default class App extends Vue {
@uiSettingsNs.Getter [SettingsGetters.timezone]: string;
mounted() {
setTimezone(this.timezone);
}
}
setup() {
const settingsStore = useSettingsStore();
onMounted(() => {
setTimezone(settingsStore.timezone);
});
return {};
},
});
</script>
<style scoped>

View File

@ -104,12 +104,11 @@ import CandleChart from '@/components/charts/CandleChart.vue';
import PlotConfigurator from '@/components/charts/PlotConfigurator.vue';
import { getCustomPlotConfig, getPlotConfigName } from '@/shared/storage';
import { BotStoreGetters } from '@/store/modules/ftbot';
import { SettingsGetters } from '@/store/modules/settings';
import vSelect from 'vue-select';
import StoreModules from '@/store/storeSubModules';
import { useSettingsStore } from '@/stores/settings';
const ftbot = namespace(StoreModules.ftbot);
const uiSettingsNs = namespace(StoreModules.uiSettings);
@Component({ components: { CandleChart, PlotConfigurator, vSelect } })
export default class CandleChartContainer extends Vue {
@ -163,8 +162,6 @@ export default class CandleChartContainer extends Vue {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
@ftbot.Action public getPairHistory!: (payload: PairHistoryPayload) => void;
@uiSettingsNs.Getter [SettingsGetters.timezone]: string;
get dataset(): PairHistory {
if (this.historicView) {
return this.history[`${this.pair}__${this.timeframe}`];
@ -210,7 +207,15 @@ export default class CandleChartContainer extends Vue {
return !!this.dataset;
}
timezone: string = 'UTC';
mounted() {
const settingsStore = useSettingsStore();
this.timezone = settingsStore.timezone;
settingsStore.$subscribe((_, state) => {
this.timezone = state.timezone;
});
if (this.selectedPair) {
this.pair = this.selectedPair;
} else if (this.availablePairs.length > 0) {

View File

@ -122,7 +122,7 @@ import StoreModules from '@/store/storeSubModules';
const ftbot = namespace(StoreModules.ftbot);
const layoutNs = namespace(StoreModules.layout);
const uiSettingsNs = namespace(StoreModules.uiSettings);
import { useSettingsStore } from '@/stores/settings';
@Component({
components: { LoginModal, BootswatchThemeSelect, ReloadControl, BotEntry, BotList },
@ -166,11 +166,17 @@ export default class NavBar extends Vue {
@layoutNs.Action [LayoutActions.setLayoutLocked];
@uiSettingsNs.Getter [SettingsGetters.openTradesInTitle]: string;
openTradesInTitle: string = OpenTradeVizOptions.showPill;
favicon: Favico | undefined = undefined;
mounted() {
const settingsStore = useSettingsStore();
this.openTradesInTitle = settingsStore.openTradesInTitle;
settingsStore.$subscribe((_, state) => {
this.openTradesInTitle = state.openTradesInTitle;
});
this.pingAll();
this.loadUIVersion();
this.pingInterval = window.setInterval(this.pingAll, 60000);