Merge branch 'master' of gitlab.com:Romulus21/portal into feature/Game/hangman

resources/js/views/Home.vue

@@ -1,11 +1,17 @@
 <template>
     <div class="p-2">
         <h1>Home</h1>
+        <OpenWeatherCard />
     </div>
 </template>
 
 <script>
+    import OpenWeatherCard from "./Meteo/OpenWeatherCard";
+
     export default {
-        name: "Home"
+        name: "Home",
+        components: {
+            OpenWeatherCard
+        }
     }
 </script>

resources/js/views/Memo/MemoShow.vue

@@ -1,74 +1,28 @@
 <template>
-  <div class="p-2">
-    <div
-      v-if="loading"
-    >
-      > Loading...
-    </div>
-    <div v-else>
-      <div class="flex-between flex-center mb-1">
-        <a
-          href="#"
-          class="link"
-          @click="$router.back()"
-        >< Back</a>
-        <div class="relative">
-          <router-link
-            :to="'/memos/' + memo.memo_id + '/edit'"
-            class="btn-secondary mr-1"
-          >
-            Edit
-          </router-link>
-          <a
-            href="#"
-            class="btn-alert"
-            @click="modal = ! modal"
-          >
-            Delete
-          </a>
-          <div
-            v-if="modal"
-            class="absolute modal mt-2"
-          >
-            <p>Are you sure you want to delete this record ?</p>
-            <div class="flex-end flex-center mt-2">
-              <button
-                class="btn mr-2"
-                @click="modal = ! modal"
-              >
-                Cancel
-              </button>
-              <button
-                class="btn-alert-strong"
-                @click="destroy"
-              >
-                Delete
-              </button>
+    <div class="p-2">
+        <div v-if="loading" >> Loading...</div>
+        <div v-else>
+            <div class="flex-between flex-center mb-1">
+                <a href="#" class="link" @click="$router.back()">< Back</a>
+                <div class="relative">
+                    <router-link :to="'/memos/' + memo.memo_id + '/edit'" class="btn-secondary mr-1" >Edit</router-link>
+                    <a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>
+                    <div v-if="modal" class="absolute modal mt-2">
+                        <p>Are you sure you want to delete this record ?</p>
+                        <div class="flex-end flex-center mt-2">
+                            <button class="btn mr-2" @click="modal = ! modal">Cancel</button>
+                            <button class="btn-alert-strong" @click="destroy"> Delete</button>
+                        </div>
+                    </div>
+                </div>
+                <div v-if="modal" class="modal-background" @click="modal = ! modal" />
             </div>
-          </div>
+    <!--           <TagBox :memo="memo" />-->
+            <h1 class="memo-title flex-center">{{ memo.name }}</h1>
+            <p class="memo-style pt-1" v-html="memoMarkdown"></p>
+            <div class="memo-change">@last update : {{ memo.last_updated }}</div>
         </div>
-        <div
-          v-if="modal"
-          class="modal-background"
-          @click="modal = ! modal"
-         />
     </div>
-<!--           <TagBox :memo="memo" />-->
-      <p class="title-section pt-3">
-        Memo
-      </p>
-      <h1 class="memo-title">
-        {{ memo.name }}
-      </h1>
-      <p
-        class="memo-style pt-1"
-        v-html="memoMarkdown"
-      ></p>
-      <div class="memo-change my-2 p-1">
-        @last update : {{ memo.last_updated }}
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>

resources/js/views/Meteo/OpenWeatherCard.vue

@@ -0,0 +1,71 @@
+<template>
+    <div class="my-2">
+        <h2>Météo</h2>
+        <p v-if="loading"></p>
+        <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>
+
+<script>
+    export default {
+        name: "OpenWeatherCard",
+        data: function () {
+            return {
+                loading: true,
+                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
+
+            if(localStorage.getItem('meteo')) {
+                this.meteo = JSON.parse(localStorage.getItem('meteo'))
+                let deltaTime = new Date() - new Date(this.meteo.list[0].dt_txt)
+                if (deltaTime/1000/3600 > 3) {
+                    refreshMeteo = true
+                }
+                this.loading = false
+                console.log('in storage', this.meteo.list[0], this.meteo.list[0].dt_txt)
+            } else {
+                refreshMeteo = true
+            }
+
+            if (refreshMeteo) {
+                console.log("refreshing meteo data")
+                axios.get('/api/meteo')
+                    .then(response => {
+                        this.meteo = response.data
+                        this.loading = false
+                        localStorage.setItem('meteo', JSON.stringify(response.data));
+                    })
+                    .catch(error => {
+                        alert('Unable to fetch meteo.')
+                    })
+            }
+        },
+    }
+</script>
+