Better detection for when sidebar links show

For logged out links, better detect when relevant Adds titles for better usage on the calendar page Related to Issue #44
oengusio · Dec 27, 2021 · 05c40f3 · 05c40f3
1 parent 670e31e
commit 05c40f3
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 12 deletions.
diff --git a/components/marathon/sidebar/Admin.vue b/components/marathon/sidebar/Admin.vue
@@ -3,7 +3,7 @@
     <p class="menu-label">
       {{ $t('marathon.menu.admin') }}
     </p>
-    <ul class="menu-list">
+    <ul class="menu-list" :title="$t('marathon.menu.settings')">
       <li>
         <ElementLink :to="`/marathon/${marathonId}/settings`" class="menu-item-link">
           <FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'cogs' ]" />
@@ -12,23 +12,23 @@
           </span>
         </ElementLink>
       </li>
-      <li>
+      <li :title="$t('marathon.menu.selectRuns')">
         <ElementLink :to="`/marathon/${marathonId}/selection`" class="menu-item-link">
           <FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'check-square' ]" />
           <span class="menu-item-label">
             {{ $t('marathon.menu.selectRuns') }}
           </span>
         </ElementLink>
       </li>
-      <li>
+      <li :title="$t('marathon.menu.manageSchedule')">
         <ElementLink :to="`/marathon/${marathonId}/schedule/manage`" class="menu-item-link">
           <FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'calendar-check' ]" />
           <span class="menu-item-label">
             {{ $t('marathon.menu.manageSchedule') }}
           </span>
         </ElementLink>
       </li>
-      <li>
+      <li :title="$t('marathon.menu.manageIncentives')">
         <ElementLink :to="`/marathon/${marathonId}/incentives/manage`" class="menu-item-link">
           <FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'dot-circle' ]" />
           <span class="menu-item-label">

diff --git a/components/marathon/sidebar/Overview.vue b/components/marathon/sidebar/Overview.vue
@@ -4,31 +4,31 @@
       {{ $t('marathon.menu.overview') }}
     </p>
     <ul class="menu-list">
-      <li>
+      <li :title="$t('marathon.menu.home')">
         <ElementLink :to="`/marathon/${marathonId}`" class="menu-item-link">
           <FontAwesomeIcon class="menu-item-icon" :class="{ 'fa-lg': isBigHome }" :icon="[ 'fas', 'home' ]" />
           <span class="menu-item-label">
             {{ $t('marathon.menu.home') }}
           </span>
         </ElementLink>
       </li>
-      <li>
+      <li v-if="marathon.scheduleDone" :title="$t('marathon.menu.schedule')">
         <ElementLink :to="`/marathon/${marathonId}/schedule`" class="menu-item-link">
           <FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'calendar' ]" />
           <span class="menu-item-label">
             {{ $t('marathon.menu.schedule') }}
           </span>
         </ElementLink>
       </li>
-      <li>
+      <li :title="$t('marathon.menu.viewSubmissions')">
         <ElementLink :to="`/marathon/${marathonId}/submissions`" class="menu-item-link">
           <FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'book' ]" />
           <span class="menu-item-label">
             {{ $t('marathon.menu.viewSubmissions') }}
           </span>
         </ElementLink>
       </li>
-      <li v-if="shouldShowRedirectLinks">
+      <li v-if="shouldShowRedirectLinks" :title="$t('marathon.menu.submitRuns')">
         <ElementLink :to="`/marathon/${marathonId}/submit`" class="menu-item-link">
           <FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'paper-plane' ]" />
           <span class="menu-item-label">
@@ -42,6 +42,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { mapActions } from 'vuex';
+import { FullMarathon, MarathonState } from '~/types/api/marathon';
 
 export default Vue.extend({
   props: {
@@ -64,6 +66,24 @@ export default Vue.extend({
       shouldShowRedirectLinks: !this.$config.env.DOMAIN_V1,
     };
   },
+
+  async fetch(): Promise<void> {
+    await Promise.allSettled([
+      this.getMarathon(this.marathonId),
+    ]);
+  },
+
+  computed: {
+    marathon(): FullMarathon|undefined {
+      return (this.$store.state.api.marathon as MarathonState).marathons[this.marathonId];
+    },
+  },
+
+  methods: {
+    ...mapActions({
+      getMarathon: 'api/marathon/get',
+    }),
+  },
 });
 </script>
 

diff --git a/components/marathon/sidebar/Tracker.vue b/components/marathon/sidebar/Tracker.vue
@@ -1,26 +1,26 @@
 <template>
-  <div v-if="shouldShowRedirectLinks" :class="{ collapsed }">
+  <div v-if="marathon.hasDonations || marathon.hasIncentives" :class="{ collapsed }">
     <p class="menu-label">
       {{ $t('marathon.menu.tracker') }}
     </p>
     <ul class="menu-list">
-      <li>
+      <li v-if="acceptingDonations" :title="$t('marathon.menu.donate')">
         <ElementLink :to="`/marathon/${marathonId}/donate`" class="menu-item-link">
           <FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'donate' ]" />
           <span class="menu-item-label">
             {{ $t('marathon.menu.donate') }}
           </span>
         </ElementLink>
       </li>
-      <li>
+      <li v-if="marathon.hasDonations" :title="$t('marathon.menu.donations')">
         <ElementLink :to="`/marathon/${marathonId}/donations`" class="menu-item-link">
           <FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'money-bill' ]" />
           <span class="menu-item-label">
             {{ $t('marathon.menu.donations') }}
           </span>
         </ElementLink>
       </li>
-      <li>
+      <li v-if="marathon.hasIncentives" :title="$t('marathon.menu.incentives')">
         <ElementLink :to="`/marathon/${marathonId}/incentives`" class="menu-item-link">
           <FontAwesomeIcon class="menu-item-icon" :icon="[ 'fas', 'bullseye' ]" />
           <span class="menu-item-label">
@@ -34,6 +34,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { mapActions } from 'vuex';
+import { FullMarathon, MarathonState } from '~/types/api/marathon';
 
 export default Vue.extend({
   props: {
@@ -52,6 +54,34 @@ export default Vue.extend({
       shouldShowRedirectLinks: !this.$config.env.DOMAIN_V1,
     };
   },
+
+  async fetch(): Promise<void> {
+    await Promise.allSettled([
+      this.getMarathon(this.marathonId),
+    ]);
+  },
+
+  computed: {
+    marathon(): FullMarathon|undefined {
+      return (this.$store.state.api.marathon as MarathonState).marathons[this.marathonId];
+    },
+    acceptingDonations(): boolean {
+      if (!this.marathon) {
+        return false;
+      }
+
+      const start = new Date(this.marathon.startDate).getTime();
+      const end = new Date(this.marathon.endDate).getTime();
+      const now = Date.now();
+      return this.marathon.hasDonations && this.marathon.donationsOpen && (start <= now && now <= end);
+    },
+  },
+
+  methods: {
+    ...mapActions({
+      getMarathon: 'api/marathon/get',
+    }),
+  },
 });
 </script>