From 8e61783c9afffd237996aa70ea2631aa9857a730 Mon Sep 17 00:00:00 2001
From: vkaelin <kalanehd@gmail.com>
Date: Thu, 28 Nov 2019 10:06:27 +0100
Subject: [PATCH] feat: add tooltip on match data to see full date

---
 client/src/components/Match/Match.vue | 17 ++++++++++++++++-
 client/src/helpers/functions.js       | 11 -----------
 client/src/helpers/summoner.js        |  4 ++++
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Match/Match.vue b/client/src/components/Match/Match.vue
index 51d870b..436a4a9 100644
--- a/client/src/components/Match/Match.vue
+++ b/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>
-            <div class="text-xs text-white font-medium">{{ data.date }}</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,
   },
diff --git a/client/src/helpers/functions.js b/client/src/helpers/functions.js
index 58728b1..ed9aaff 100644
--- a/client/src/helpers/functions.js
+++ b/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'
-}
diff --git a/client/src/helpers/summoner.js b/client/src/helpers/summoner.js
index 92fbdf3..d27c2ff 100644
--- a/client/src/helpers/summoner.js
+++ b/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]