tobias/eventmaster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

Append icons in toolbar shows tooltips, exercise page icon adds open exercises badge

Browse Source
This commit is contained in:
Tobias Zoghaib
2025-08-30 13:39:16 +02:00
parent 052bb7694a
commit cde3c84bc7
5 changed files with 134 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
src/components/navigation/navigationAppendItems.vue
View File

@@ -2,54 +2,121 @@
import { useAccountStore } from "@/stores/account.store";
import { useBasketStore } from "@/stores/basket.store";
import { useExerciseStore } from "@/stores/exercise.store";
import { ref, watch } from "vue";
const accountStore = useAccountStore();
const basketStore = useBasketStore();
const exerciseStore = useExerciseStore();
const basketItems = ref(0);
exerciseStore.getAllExercises();
watch(
() => basketStore.itemsInBasket,
() => {
basketItems.value = basketStore.itemsInBasket.reduce((tot, item) => {
return tot + item.seats.length;
}, 0);
}
);
</script>
<template>
<v-btn variant="plain" icon="mdi-magnify" to="/search" />
<!-- Global search -->
<v-tooltip :text="$t('misc.search.globalsearch')" location="bottom">
<template #activator="{ props }">
<v-btn v-bind="props" variant="plain" icon="mdi-magnify" to="/search" />
</template>
</v-tooltip>
<v-btn
v-if="accountStore.userAccountToken == ''"
variant="plain"
icon="mdi-account"
to="/account/login"
/>
<!-- Account -->
<v-tooltip :text="$t('account.account')" location="bottom">
<template #activator="{ props }">
<v-btn
v-if="accountStore.userAccountToken == ''"
v-bind="props"
variant="plain"
icon="mdi-account"
to="/account/login"
/>
<v-btn v-else variant="plain" icon="mdi-account-check" to="/account/home" />
<v-btn
v-else
v-bind="props"
variant="plain"
icon="mdi-account-check"
to="/account/home"
/>
</template>
</v-tooltip>
<div>
<v-badge
:content="
basketStore.itemsInBasket.reduce((tot, item) => {
return tot + item.seats.length;
}, 0)
"
color="error"
offset-x="8"
offset-y="8"
>
<v-btn variant="plain" icon="mdi-cart" to="/basket" />
</v-badge>
</div>
<!-- Basket -->
<v-tooltip :text="$t('basket.basket')" location="bottom">
<template #activator="{ props }">
<v-badge
v-if="basketItems > 0"
:content="basketItems"
color="error"
offset-x="8"
offset-y="8"
>
<v-btn v-bind="props" variant="plain" icon="mdi-cart" to="/basket" />
</v-badge>
<v-btn
v-if="accountStore.adminPanelVisible"
variant="plain"
icon="mdi-table-cog"
to="/admin"
/>
<v-btn
v-else
v-bind="props"
variant="plain"
icon="mdi-cart"
to="/basket"
/>
</template>
</v-tooltip>
<v-btn
v-if="exerciseStore.exercisePageVisible"
variant="plain"
icon="mdi-book-open-blank-variant"
to="/help"
/>
<!-- Exercise page -->
<v-tooltip :text="$t('misc.firstStartup.exercises')" location="bottom">
<template #activator="{ props }">
<v-badge
v-if="exerciseStore.exercisePageVisible"
:content="
exerciseStore.exercises.reduce((tot, exercise) => {
if (exercise.available && !exercise.solved) {
return tot + 1;
} else {
return tot;
}
}, 0)
"
color="error"
offset-x="8"
offset-y="8"
>
<v-btn
v-bind="props"
variant="plain"
icon="mdi-book-open-blank-variant"
to="/help"
/>
</v-badge>
</template>
</v-tooltip>
<v-btn variant="plain" icon="mdi-cog" to="/preferences" />
<!-- Admin panel -->
<v-tooltip :text="$t('admin.adminpanel')" location="bottom">
<template #activator="{ props }">
<v-btn
v-if="accountStore.adminPanelVisible"
v-bind="props"
variant="plain"
icon="mdi-table-cog"
to="/admin"
/>
</template>
</v-tooltip>
<v-tooltip :text="$t('preferences.preferences')" location="bottom">
<template #activator="{ props }">
<v-btn v-bind="props" variant="plain" icon="mdi-cog" to="/preferences" />
</template>
</v-tooltip>
</template>