mirror of
https://github.com/freqtrade/frequi.git
synced 2024-11-10 10:21:55 +00:00
pinia: add pinia and update settings store
This commit is contained in:
Matthias
parent
3a2b5dfd5a
commit
9efad28ea6
|
|
@ -27,6 +27,8 @@
|
|||
"echarts": "^5.3.2",
|
||||
"favico.js": "^0.3.10",
|
||||
"humanize-duration": "^3.27.1",
|
||||
"pinia": "^2.0.13",
|
||||
"pinia-plugin-persistedstate": "^1.5.1",
|
||||
"vue": "^2.6.14",
|
||||
"vue-class-component": "^7.2.5",
|
||||
"vue-demi": "0.12.5",
|
||||
|
|
@ -40,8 +42,8 @@
|
|||
"vuex-composition-helpers": "^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@cypress/vue": "^2.2.3",
|
||||
"@cypress/vite-dev-server": "^2.2.2",
|
||||
"@cypress/vue": "^2.2.3",
|
||||
"@types/echarts": "^4.9.14",
|
||||
"@types/jest": "^27.4.1",
|
||||
"@typescript-eslint/eslint-plugin": "^2.33.0",
|
||||
|
|
|
|||
|
|
@ -5,13 +5,20 @@ import App from './App.vue';
|
|||
import store from './store';
|
||||
import router from './router';
|
||||
import { initApi } from './shared/apiService';
|
||||
import { createPinia, PiniaVuePlugin } from 'pinia';
|
||||
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
|
||||
|
||||
initApi(store);
|
||||
|
||||
Vue.use(PiniaVuePlugin);
|
||||
const pinia = createPinia();
|
||||
pinia.use(piniaPluginPersistedstate);
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
new Vue({
|
||||
store,
|
||||
router,
|
||||
render: (h) => h(App),
|
||||
pinia,
|
||||
}).$mount('#app');
|
||||
|
|
|
|||
43
src/stores/settings.ts
Normal file
43
src/stores/settings.ts
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
import { defineStore } from 'pinia';
|
||||
|
||||
import { setTimezone } from '@/shared/formatters';
|
||||
|
||||
const STORE_UI_SETTINGS = 'ftUISettings';
|
||||
|
||||
export enum OpenTradeVizOptions {
|
||||
showPill = 'showPill',
|
||||
asTitle = 'asTitle',
|
||||
noOpenTrades = 'noOpenTrades',
|
||||
}
|
||||
|
||||
export interface SettingsType {
|
||||
openTradesInTitle?: string;
|
||||
timezone?: string;
|
||||
backgroundSync?: boolean;
|
||||
}
|
||||
|
||||
export const useSettingsStore = defineStore('uiSettings', {
|
||||
// other options...
|
||||
state: () => {
|
||||
return {
|
||||
openTradesInTitle: OpenTradeVizOptions.showPill as string,
|
||||
timezone: 'UTC',
|
||||
backgroundSync: true,
|
||||
};
|
||||
},
|
||||
actions: {
|
||||
setOpenTradesInTitle(locked: string) {
|
||||
this.openTradesInTitle = locked;
|
||||
},
|
||||
setTimeZone(timezone: string) {
|
||||
setTimezone(timezone);
|
||||
this.timezone = timezone;
|
||||
},
|
||||
setBackgroundSync(value: boolean) {
|
||||
this.backgroundSync = value;
|
||||
},
|
||||
},
|
||||
persist: {
|
||||
key: STORE_UI_SETTINGS,
|
||||
},
|
||||
});
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
description="Decide if open trades should be visualized"
|
||||
>
|
||||
<b-form-select
|
||||
v-model="openTradesVisualization"
|
||||
v-model="settingsStore.openTradesInTitle"
|
||||
:options="openTradesOptions"
|
||||
></b-form-select>
|
||||
</b-form-group>
|
||||
|
|
@ -24,10 +24,13 @@
|
|||
label="UTC Timezone"
|
||||
description="Select timezone (we recommend UTC is recommended as exchanges usually work in UTC)"
|
||||
>
|
||||
<b-form-select v-model="timezoneLoc" :options="timezoneOptions"></b-form-select>
|
||||
<b-form-select
|
||||
v-model="settingsStore.timezone"
|
||||
:options="timezoneOptions"
|
||||
></b-form-select>
|
||||
</b-form-group>
|
||||
<b-form-group description="Keep background sync running while other bots are selected.">
|
||||
<b-checkbox v-model="backgroundSyncLocal">Background sync</b-checkbox>
|
||||
<b-checkbox v-model="settingsStore.backgroundSync">Background sync</b-checkbox>
|
||||
</b-form-group>
|
||||
</div>
|
||||
</b-card>
|
||||
|
|
@ -37,88 +40,59 @@
|
|||
<script lang="ts">
|
||||
import { AlertActions } from '@/store/modules/alerts';
|
||||
import { LayoutActions, LayoutGetters } from '@/store/modules/layout';
|
||||
import { OpenTradeVizOptions, SettingsActions, SettingsGetters } from '@/store/modules/settings';
|
||||
import StoreModules from '@/store/storeSubModules';
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import { namespace, Getter } from 'vuex-class';
|
||||
import { defineComponent, WritableComputedRef, computed } from '@vue/composition-api';
|
||||
import { useGetters, useNamespacedActions, useNamespacedGetters } from 'vuex-composition-helpers';
|
||||
import { OpenTradeVizOptions, useSettingsStore } from '@/stores/settings';
|
||||
|
||||
const layoutNs = namespace(StoreModules.layout);
|
||||
const uiSettingsNs = namespace(StoreModules.uiSettings);
|
||||
const alerts = namespace(StoreModules.alerts);
|
||||
export default defineComponent({
|
||||
name: 'Settings',
|
||||
setup() {
|
||||
const settingsStore = useSettingsStore();
|
||||
const { getUiVersion } = useGetters(['getUiVersion']);
|
||||
const { setLayoutLocked, resetTradingLayout, resetDashboardLayout } = useNamespacedActions(
|
||||
StoreModules.layout,
|
||||
[
|
||||
LayoutActions.setLayoutLocked,
|
||||
LayoutActions.resetTradingLayout,
|
||||
LayoutActions.resetDashboardLayout,
|
||||
],
|
||||
);
|
||||
const { getLayoutLocked } = useNamespacedGetters(StoreModules.layout, [
|
||||
LayoutGetters.getLayoutLocked,
|
||||
]);
|
||||
const { addAlert } = useNamespacedActions(StoreModules.alerts, [AlertActions.addAlert]);
|
||||
|
||||
@Component({})
|
||||
export default class Settings extends Vue {
|
||||
@Getter getUiVersion!: string;
|
||||
|
||||
@layoutNs.Getter [LayoutGetters.getLayoutLocked]: boolean;
|
||||
|
||||
@layoutNs.Action [LayoutActions.setLayoutLocked];
|
||||
|
||||
@layoutNs.Action [LayoutActions.resetTradingLayout];
|
||||
|
||||
@layoutNs.Action [LayoutActions.resetDashboardLayout];
|
||||
|
||||
@alerts.Action [AlertActions.addAlert];
|
||||
|
||||
@uiSettingsNs.Getter [SettingsGetters.openTradesInTitle]: string;
|
||||
|
||||
@uiSettingsNs.Getter [SettingsGetters.timezone]: string;
|
||||
|
||||
@uiSettingsNs.Getter [SettingsGetters.backgroundSync]: boolean;
|
||||
|
||||
@uiSettingsNs.Action [SettingsActions.setOpenTradesInTitle];
|
||||
|
||||
@uiSettingsNs.Action [SettingsActions.setTimeZone];
|
||||
|
||||
@uiSettingsNs.Action [SettingsActions.setBackgroundSync];
|
||||
|
||||
openTradesOptions = [
|
||||
{ value: OpenTradeVizOptions.showPill, text: 'Show pill in icon' },
|
||||
{ value: OpenTradeVizOptions.asTitle, text: 'Show in title' },
|
||||
{ value: OpenTradeVizOptions.noOpenTrades, text: "Don't show open trades in header" },
|
||||
];
|
||||
|
||||
// Careful when adding new timezones here - eCharts only supports UTC or user timezone
|
||||
timezoneOptions = ['UTC', Intl.DateTimeFormat().resolvedOptions().timeZone];
|
||||
|
||||
get timezoneLoc() {
|
||||
return this.timezone;
|
||||
}
|
||||
|
||||
set timezoneLoc(value: string) {
|
||||
this[SettingsActions.setTimeZone](value);
|
||||
}
|
||||
|
||||
get openTradesVisualization() {
|
||||
return this.openTradesInTitle;
|
||||
}
|
||||
|
||||
set openTradesVisualization(value: string) {
|
||||
this.setOpenTradesInTitle(value);
|
||||
}
|
||||
|
||||
get layoutLockedLocal() {
|
||||
return this.getLayoutLocked;
|
||||
}
|
||||
|
||||
set layoutLockedLocal(value: boolean) {
|
||||
this.setLayoutLocked(value);
|
||||
}
|
||||
|
||||
get backgroundSyncLocal(): boolean {
|
||||
return this.backgroundSync;
|
||||
}
|
||||
|
||||
set backgroundSyncLocal(value: boolean) {
|
||||
this.setBackgroundSync(value);
|
||||
}
|
||||
|
||||
resetDynamicLayout(): void {
|
||||
this.resetTradingLayout();
|
||||
this.resetDashboardLayout();
|
||||
this.addAlert({ message: 'Layouts have been reset.' });
|
||||
}
|
||||
}
|
||||
const timezoneOptions = ['UTC', Intl.DateTimeFormat().resolvedOptions().timeZone];
|
||||
const openTradesOptions = [
|
||||
{ value: OpenTradeVizOptions.showPill, text: 'Show pill in icon' },
|
||||
{ value: OpenTradeVizOptions.asTitle, text: 'Show in title' },
|
||||
{ value: OpenTradeVizOptions.noOpenTrades, text: "Don't show open trades in header" },
|
||||
];
|
||||
const layoutLockedLocal: WritableComputedRef<boolean> = computed({
|
||||
get(): boolean {
|
||||
return getLayoutLocked.value;
|
||||
},
|
||||
set(value: boolean): void {
|
||||
setLayoutLocked(value);
|
||||
},
|
||||
});
|
||||
//
|
||||
const resetDynamicLayout = () => {
|
||||
resetTradingLayout();
|
||||
resetDashboardLayout();
|
||||
addAlert({ message: 'Layouts have been reset.' });
|
||||
};
|
||||
return {
|
||||
getUiVersion,
|
||||
resetDynamicLayout,
|
||||
settingsStore,
|
||||
timezoneOptions,
|
||||
openTradesOptions,
|
||||
layoutLockedLocal,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
20
yarn.lock
20
yarn.lock
|
|
@ -1462,6 +1462,11 @@
|
|||
resolved "https://registry.yarnpkg.com/@vue/composition-api/-/composition-api-1.4.9.tgz#6fa65284f545887b52d421f23b4fa1c41bc0ad4b"
|
||||
integrity sha512-l6YOeg5LEXmfPqyxAnBaCv1FMRw0OGKJ4m6nOWRm6ngt5TuHcj5ZoBRN+LXh3J0u6Ur3C4VA+RiKT+M0eItr/g==
|
||||
|
||||
"@vue/devtools-api@^6.1.4":
|
||||
version "6.1.4"
|
||||
resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.1.4.tgz#b4aec2f4b4599e11ba774a50c67fa378c9824e53"
|
||||
integrity sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ==
|
||||
|
||||
"@vue/eslint-config-prettier@^6.0.0":
|
||||
version "6.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@vue/eslint-config-prettier/-/eslint-config-prettier-6.0.0.tgz#ad5912b308f4ae468458e02a2b05db0b9d246700"
|
||||
|
|
@ -4353,6 +4358,19 @@ pify@^2.2.0:
|
|||
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
|
||||
integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
|
||||
|
||||
pinia-plugin-persistedstate@^1.5.1:
|
||||
version "1.5.1"
|
||||
resolved "https://registry.yarnpkg.com/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-1.5.1.tgz#9ea81e5a245e87941c750fdb5eb303bab399427b"
|
||||
integrity sha512-X0jKWvA3kbpYe8RuIyLaZDEAFvsv3+QmBkMzInBHl0O57+eVJjswXHnIWeFAeFjktrE0cJbGHw2sBMgkcleySQ==
|
||||
|
||||
pinia@^2.0.13:
|
||||
version "2.0.13"
|
||||
resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.0.13.tgz#6656fc290dae120a9f0cb2f5c520df400d41b8c5"
|
||||
integrity sha512-B7rSqm1xNpwcPMnqns8/gVBfbbi7lWTByzS6aPZ4JOXSJD4Y531rZHDCoYWBwLyHY/8hWnXljgiXp6rRyrofcw==
|
||||
dependencies:
|
||||
"@vue/devtools-api" "^6.1.4"
|
||||
vue-demi "*"
|
||||
|
||||
pirates@^4.0.4:
|
||||
version "4.0.5"
|
||||
resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.5.tgz#feec352ea5c3268fb23a37c702ab1699f35a5f3b"
|
||||
|
|
@ -5225,7 +5243,7 @@ vue-class-component@^7.2.5:
|
|||
resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-7.2.6.tgz#8471e037b8e4762f5a464686e19e5afc708502e4"
|
||||
integrity sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w==
|
||||
|
||||
vue-demi@0.12.5, vue-demi@^0.12.1:
|
||||
vue-demi@*, vue-demi@0.12.5, vue-demi@^0.12.1:
|
||||
version "0.12.5"
|
||||
resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.5.tgz#8eeed566a7d86eb090209a11723f887d28aeb2d1"
|
||||
integrity sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user