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

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

@ -122,123 +122,105 @@
</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',
// position: 'up', // position: 'up',
// fontStyle: 'normal', // fontStyle: 'normal',
// bgColor: '#', // bgColor: '#',
// textColor: '#FFFFFF', // textColor: '#FFFFFF',
});
}
if (tradeCount !== 0 && settingsStore.openTradesInTitle === 'showPill') {
favicon.value.badge(tradeCount);
} else {
favicon.value.reset();
console.log('reset');
}
};
const resetDynamicLayout = (): void => {
console.log(`resetLayout called for ${route?.fullPath}`);
switch (route?.fullPath) {
case '/trade':
layoutStore.resetTradingLayout();
break;
case '/dashboard':
layoutStore.resetDashboardLayout();
break;
default:
}
};
const setTitle = () => {
let title = 'freqUI';
if (settingsStore.openTradesInTitle === OpenTradeVizOptions.asTitle) {
title = `(${botStore.activeBotorUndefined?.openTradeCount}) ${title}`;
}
if (botStore.activeBotorUndefined?.botName) {
title = `${title} - ${botStore.activeBotorUndefined?.botName}`;
}
document.title = title;
};
onBeforeUnmount(() => {
if (pingInterval) {
clearInterval(pingInterval.value);
}
}); });
}
if (tradeCount !== 0 && settingsStore.openTradesInTitle === 'showPill') {
favicon.value.badge(tradeCount);
} else {
favicon.value.reset();
console.log('reset');
}
};
const resetDynamicLayout = (): void => {
console.log(`resetLayout called for ${route?.fullPath}`);
switch (route?.fullPath) {
case '/trade':
layoutStore.resetTradingLayout();
break;
case '/dashboard':
layoutStore.resetDashboardLayout();
break;
default:
}
};
const setTitle = () => {
let title = 'freqUI';
if (settingsStore.openTradesInTitle === OpenTradeVizOptions.asTitle) {
title = `(${botStore.activeBotorUndefined?.openTradeCount}) ${title}`;
}
if (botStore.activeBotorUndefined?.botName) {
title = `${title} - ${botStore.activeBotorUndefined?.botName}`;
}
document.title = title;
};
onMounted(async () => { onBeforeUnmount(() => {
await settingsStore.loadUIVersion(); if (pingInterval) {
pingInterval.value = window.setInterval(botStore.pingAll, 60000); clearInterval(pingInterval.value);
}); }
settingsStore.$subscribe((_, state) => {
const needsUpdate = settingsStore.openTradesInTitle !== state.openTradesInTitle;
if (needsUpdate) {
setTitle();
setOpenTradesAsPill(botStore.activeBotorUndefined?.openTradeCount || 0);
}
});
watch(
() => botStore.activeBotorUndefined?.botName,
() => setTitle(),
);
watch(
() => botStore.activeBotorUndefined?.openTradeCount,
() => {
if (settingsStore.openTradesInTitle === OpenTradeVizOptions.showPill) {
setOpenTradesAsPill(botStore.activeBotorUndefined?.openTradeCount ?? 0);
} else if (settingsStore.openTradesInTitle === OpenTradeVizOptions.asTitle) {
setTitle();
}
},
);
return {
favicon,
clickLogout,
resetDynamicLayout,
setTitle,
layoutStore,
botStore,
settingsStore,
route,
};
},
}); });
onMounted(async () => {
await settingsStore.loadUIVersion();
pingInterval.value = window.setInterval(botStore.pingAll, 60000);
});
settingsStore.$subscribe((_, state) => {
const needsUpdate = settingsStore.openTradesInTitle !== state.openTradesInTitle;
if (needsUpdate) {
setTitle();
setOpenTradesAsPill(botStore.activeBotorUndefined?.openTradeCount || 0);
}
});
watch(
() => botStore.activeBotorUndefined?.botName,
() => setTitle(),
);
watch(
() => botStore.activeBotorUndefined?.openTradeCount,
() => {
if (settingsStore.openTradesInTitle === OpenTradeVizOptions.showPill) {
setOpenTradesAsPill(botStore.activeBotorUndefined?.openTradeCount ?? 0);
} else if (settingsStore.openTradesInTitle === OpenTradeVizOptions.asTitle) {
setTitle();
}
},
);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>