lychiyu/frequi_origin
1
0
Fork 0
mirror of https://github.com/freqtrade/frequi.git synced 2024-11-23 11:35:14 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Navbar to script setup

Browse Source
This commit is contained in:
Matthias 2023-03-23 19:30:13 +01:00
parent b1ceb7158a
commit 5ed68096e6
1 changed files with 82 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/layout/NavBar.vue
View File

@ -122,37 +122,33 @@
</header> </header>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import LoginModal from '@/views/LoginModal.vue'; import LoginModal from '@/views/LoginModal.vue';
import BootswatchThemeSelect from '@/components/BootswatchThemeSelect.vue'; import BootswatchThemeSelect from '@/components/BootswatchThemeSelect.vue';
import Favico from 'favico.js'; import Favico from 'favico.js';
import ReloadControl from '@/components/ftbot/ReloadControl.vue'; import ReloadControl from '@/components/ftbot/ReloadControl.vue';
import BotEntry from '@/components/BotEntry.vue'; import BotEntry from '@/components/BotEntry.vue';
import BotList from '@/components/BotList.vue'; import BotList from '@/components/BotList.vue';
import { defineComponent, ref, onBeforeUnmount, onMounted, watch } from 'vue'; import { ref, onBeforeUnmount, onMounted, watch } from 'vue';
import { OpenTradeVizOptions, useSettingsStore } from '@/stores/settings'; import { OpenTradeVizOptions, useSettingsStore } from '@/stores/settings';
import { useLayoutStore } from '@/stores/layout'; import { useLayoutStore } from '@/stores/layout';
import { useBotStore } from '@/stores/ftbotwrapper'; import { useBotStore } from '@/stores/ftbotwrapper';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
export default defineComponent({ const botStore = useBotStore();
name: 'NavBar',
components: { LoginModal, BootswatchThemeSelect, ReloadControl, BotEntry, BotList },
setup() {
const botStore = useBotStore();
const settingsStore = useSettingsStore(); const settingsStore = useSettingsStore();
const layoutStore = useLayoutStore(); const layoutStore = useLayoutStore();
const route = useRoute(); const route = useRoute();
const favicon = ref<Favico | undefined>(undefined); const favicon = ref<Favico | undefined>(undefined);
const pingInterval = ref<number>(); const pingInterval = ref<number>();
const clickLogout = () => { const clickLogout = () => {
botStore.removeBot(botStore.selectedBot); botStore.removeBot(botStore.selectedBot);
// TODO: This should be per bot // TODO: This should be per bot
}; };
const setOpenTradesAsPill = (tradeCount: number) => { const setOpenTradesAsPill = (tradeCount: number) => {
if (!favicon.value) { if (!favicon.value) {
favicon.value = new Favico({ favicon.value = new Favico({
animation: 'none', animation: 'none',
@ -168,8 +164,8 @@ export default defineComponent({
favicon.value.reset(); favicon.value.reset();
console.log('reset'); console.log('reset');
} }
}; };
const resetDynamicLayout = (): void => { const resetDynamicLayout = (): void => {
console.log(`resetLayout called for ${route?.fullPath}`); console.log(`resetLayout called for ${route?.fullPath}`);
switch (route?.fullPath) { switch (route?.fullPath) {
case '/trade': case '/trade':
@ -180,8 +176,8 @@ export default defineComponent({
break; break;
default: default:
} }
}; };
const setTitle = () => { const setTitle = () => {
let title = 'freqUI'; let title = 'freqUI';
if (settingsStore.openTradesInTitle === OpenTradeVizOptions.asTitle) { if (settingsStore.openTradesInTitle === OpenTradeVizOptions.asTitle) {
title = `(${botStore.activeBotorUndefined?.openTradeCount}) ${title}`; title = `(${botStore.activeBotorUndefined?.openTradeCount}) ${title}`;
@ -190,32 +186,32 @@ export default defineComponent({
title = `${title} - ${botStore.activeBotorUndefined?.botName}`; title = `${title} - ${botStore.activeBotorUndefined?.botName}`;
} }
document.title = title; document.title = title;
}; };
onBeforeUnmount(() => { onBeforeUnmount(() => {
if (pingInterval) { if (pingInterval) {
clearInterval(pingInterval.value); clearInterval(pingInterval.value);
} }
}); });
onMounted(async () => { onMounted(async () => {
await settingsStore.loadUIVersion(); await settingsStore.loadUIVersion();
pingInterval.value = window.setInterval(botStore.pingAll, 60000); pingInterval.value = window.setInterval(botStore.pingAll, 60000);
}); });
settingsStore.$subscribe((_, state) => { settingsStore.$subscribe((_, state) => {
const needsUpdate = settingsStore.openTradesInTitle !== state.openTradesInTitle; const needsUpdate = settingsStore.openTradesInTitle !== state.openTradesInTitle;
if (needsUpdate) { if (needsUpdate) {
setTitle(); setTitle();
setOpenTradesAsPill(botStore.activeBotorUndefined?.openTradeCount || 0); setOpenTradesAsPill(botStore.activeBotorUndefined?.openTradeCount || 0);
} }
}); });
watch( watch(
() => botStore.activeBotorUndefined?.botName, () => botStore.activeBotorUndefined?.botName,
() => setTitle(), () => setTitle(),
); );
watch( watch(
() => botStore.activeBotorUndefined?.openTradeCount, () => botStore.activeBotorUndefined?.openTradeCount,
() => { () => {
if (settingsStore.openTradesInTitle === OpenTradeVizOptions.showPill) { if (settingsStore.openTradesInTitle === OpenTradeVizOptions.showPill) {
@ -224,21 +220,7 @@ export default defineComponent({
setTitle(); setTitle();
} }
}, },
); );
return {
favicon,
clickLogout,
resetDynamicLayout,
setTitle,
layoutStore,
botStore,
settingsStore,
route,
};
},
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>