add home meteo card

resources/js/views/Meteo/OpenWeatherCard.vue

@@ -1,16 +1,22 @@
 <template>
-    <div>
+    <div class="my-2">
         <h2>Météo</h2>
         <p v-if="loading"></p>
-        <div v-else>
-            <div>{{ meteo.city.name }}</div>
-            <div>
-                <div>{{ meteo.list[0].dt_txt }}</div>
-                <div>Temp : {{ meteo.list[0].main.temp }} °C</div>
-                <div>Hum : {{ meteo.list[0].main.humidity }} %</div>
-                <div>Pres : {{ meteo.list[0].main.pressure }} hPa</div>
-                <div>{{ meteo.list[0].weather[0].description }}</div>
+        <div v-else class="meteo card my-1">
+            <h3>{{ meteo.city.name }}</h3>
+            <div class="flex flex-end">
+                <div class="flex-1 flex-col flex-end">
+                    <div class="meteo-date">{{ dateFormat(meteo.list[0].dt_txt) }}</div>
+                    <div><strong>{{ meteo.list[0].main.temp }}</strong> °C</div>
+                    <div><strong>{{ meteo.list[0].main.humidity }}</strong> %</div>
+                    <div><strong>{{ meteo.list[0].main.pressure }}</strong> hPa</div>
+                </div>
+                <div class="flex-1 text-right">
+                    <i v-bind:class="'owf owf-5x owf-' + meteo.list[0].weather[0].id"></i>
+                    <div><strong>{{ meteo.list[0].weather[0].description }}</strong></div>
+                </div>
             </div>
+
         </div>
     </div>
 </template>
@@ -24,6 +30,14 @@
                 meteo: null,
             }
         },
+        methods : {
+            dateFormat(date) {
+                const d = new Date(date)
+                const dtf = new Intl.DateTimeFormat('fr', { year: '2-digit', month: 'short', day: '2-digit', hour: 'numeric' })
+                const [{ value: mo },,{ value: da },,{ value: ye },,{value: ho }] = dtf.formatToParts(d)
+                return `${mo}/${da} - ${ho}h`
+            }
+        },
         mounted() {
             let refreshMeteo = false
 
@@ -34,7 +48,7 @@
                     refreshMeteo = true
                 }
                 this.loading = false
-                console.log('in storage', this.meteo, this.meteo.city.name)
+                console.log('in storage', this.meteo.list[0], this.meteo.list[0].dt_txt)
             } else {
                 refreshMeteo = true
             }