first work on meteo display

app/Http/Controllers/MeteoController.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class MeteoController extends Controller
+{
+    public function index()
+    {
+        $idCity = 2995971;
+        $url = 'https://api.openweathermap.org/data/2.5/forecast?id='.$idCity.'&appid='.env('OPEN_WEATHER_MAP_API_KEY').'&units=metric&lang=fr';
+        $client = new \GuzzleHttp\Client();
+
+        $promise = $client->requestAsync('GET', $url);
+        $response = $promise->wait();
+
+        return $response->getBody()->getContents();
+
+    }
+}

app/Models/Meteo.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class Meteo extends Model
+{
+    //
+}

composer.json

@@ -11,7 +11,7 @@
         "php": "^7.2.5",
         "fideloper/proxy": "^4.2",
         "fruitcake/laravel-cors": "^1.0",
-        "guzzlehttp/guzzle": "^6.3",
+        "guzzlehttp/guzzle": "^6.5",
         "laravel/framework": "^7.0",
         "laravel/passport": "^8.4",
         "laravel/tinker": "^2.0",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "6f990f5e06b9c3d6763a6831231e1770",
+    "content-hash": "d0ff9b31e0a9c20da145f26712575e63",
     "packages": [
         {
             "name": "asm89/stack-cors",

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/Meteo/OpenWeatherCard.vue

@@ -0,0 +1,57 @@
+<template>
+    <div>
+        <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>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "OpenWeatherCard",
+        data: function () {
+            return {
+                loading: true,
+                meteo: null,
+            }
+        },
+        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, this.meteo.city.name)
+            } 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>
+

routes/api.php

@@ -19,10 +19,11 @@ Route::middleware('auth:api')->group(function () {
     Route::get('auth-user', 'AuthUserController@show');
 
     Route::apiResources([
-//        '/posts' => 'PostController',
         '/users' => 'UserController',
         '/memos' => 'MemosController',
+        '/meteo' => 'MeteoController',
 //        '/users/{user}/posts' => 'UserPostController',
 //        '/friend-request' => 'FriendRequestController',
     ]);
+
 });