Romain/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

memos home module

Browse Source
This commit is contained in:
Romulus21
2020-05-09 13:04:15 +02:00
parent 7e3529cecf
commit 6ef804c01a
8 changed files with 109 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
resources/js/views/Meteo/OpenWeatherCard.vue
View File

@@ -1,24 +1,22 @@
<template>
<div class="my-2">
<h2>Météo</h2>
<p v-if="loading"></p>
<div v-else class="my-1">
<div class="flex flex-wrap -m-2 mt-2">
<div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4">
<div class="bg-gray-300 rounded text-black m-2 p-2 flex flex-col">
<h3 class="text-2xl font-bold text-center">{{ meteo.city.name }}</h3>
<div class="flex">
<div class="flex flex-col justify-end">
<div>{{ 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 flex-col flex-1 justify-end items-end">
<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 v-if="loading">
<Loader />
</div>
<div v-else class="m-2">
<div class="card">
<div class="text-black m-2 p-2 flex flex-col">
<h2>{{ meteo.city.name }}</h2>
<div class="flex">
<div class="flex flex-col justify-end">
<div>{{ 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 flex-col flex-1 justify-end items-end">
<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>
@@ -28,8 +26,13 @@
</template>
<script>
import Loader from '../../components/Loader'
export default {
name: 'OpenWeatherCard',
components: {
Loader
},
data: function () {
return {
loading: true,