feat: add tooltip on match data to see full date

client/src/components/Match/Match.vue

@@ -127,7 +127,20 @@
           <div class="ml-auto flex flex-col items-center justify-center">
             <img class="w-5 h-5" src="@/assets/img/icons/Stopwatch.svg" alt="Stopwatch" />
             <div class="text-lg text-teal-400 font-medium">{{ data.time|secToTime }}</div>
+            <Dropdown>
+              <template v-slot:trigger>
                 <div class="text-xs text-white font-medium">{{ data.date }}</div>
+              </template>
+              <template v-slot:default>
+                <div class="px-2 text-white text-center text-xs leading-tight select-none">
+                  <svg class="w-4 h-4 mx-auto text-teal-400">
+                    <use xlink:href="#time" />
+                  </svg>
+                  <div class="mt-1">{{ data.fullDate.date }}</div>
+                  <div>{{ data.fullDate.time }}</div>
+                </div>
+              </template>
+            </Dropdown>
           </div>
         </div>
       </div>
@@ -138,6 +151,7 @@
 
 <script>
 import { mapActions, mapState, mapGetters } from 'vuex'
+import Dropdown from '@/components/Dropdown'
 import DetailedMatch from '@/components/Match/DetailedMatch'
 import MatchItems from '@/components/Match/MatchItems'
 import Ripple from '@/components/Ripple.vue'
@@ -145,6 +159,7 @@ import Ripple from '@/components/Ripple.vue'
 export default {
   components: {
     DetailedMatch,
+    Dropdown,
     MatchItems,
     Ripple,
   },

client/src/helpers/functions.js

@@ -25,14 +25,3 @@ export function timeDifference(previous) {
     return day + '.' + month + '.' + oldDate.getFullYear().toString().substr(-2)
   }
 }
-
-
-/**
- *  Return time in a formatted way
- * @param sec  : time in seconds to convert
- */
-export function secToTime(sec) {
-  const min = Math.floor(sec / 60)
-  const newSec = sec - min * 60
-  return min + 'm' + (newSec < 10 ? '0' + newSec : newSec) + 's'
-}

client/src/helpers/summoner.js

@@ -32,6 +32,10 @@ export function createMatchData(matches) {
     match.firstSum = getSummonerLink(match.firstSum)
     match.secondSum = getSummonerLink(match.secondSum)
 
+    const date = new Date(match.date)
+    const dateOptions = { day: '2-digit', month: '2-digit', year: 'numeric' }
+    const timeOptions = { hour12: false, hour: '2-digit', minute:'2-digit' }
+    match.fullDate = { date: date.toLocaleString('fr', dateOptions), time: date.toLocaleString('fr', timeOptions) }
     match.date = timeDifference(match.date)
 
     match.map = maps[match.map]