From c194ad2c972955c932e6f2400e3ee63813b4a615 Mon Sep 17 00:00:00 2001
From: Manuel Riquelme <clonbg@gmail.com>
Date: Tue, 26 Sep 2023 08:18:04 +0200
Subject: [PATCH] =?UTF-8?q?A=C3=B1adido=20esperando?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/IndexPage.vue | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
index 9edb5cd..0af9fe9 100644
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="flex flex-center">
-    <h5 class="q-py-xl">{{ fecha }}</h5>
+    <h5 v-if="fecha == '' && !presionado" class="q-py-xl">
+      Cálculo de los días de riego de mis plantas
+    </h5>
+    <h5 v-else-if="presionado" class="q-py-xl">Loading...</h5>
+    <h5 v-else class="q-py-xl">{{ fecha }}</h5>
     <q-btn
       class="fixed-center"
       color="deep-orange"
@@ -13,13 +17,18 @@
 
 <script setup>
 import { ref } from "vue";
-import { date } from "quasar";
+import { date, useQuasar } from "quasar";
 
 const data = ref([]);
 const fecha = ref("");
 const days = ref(0);
-
+const presionado = ref(false);
+const $q = useQuasar();
 const calcular = async () => {
+  $q.loading.show({
+    message: "Se está descargando la información, espere...",
+  });
+  presionado.value = true;
   const result = fetch(
     "https://api.openweathermap.org/data/2.5/forecast?lat=39.55&lon=-0.5667&units=metric&appid=1ce95ef35a6852cecee421a923fe4400"
   )
@@ -29,6 +38,10 @@ const calcular = async () => {
     })
     .catch((err) => console.error(err));
   data.value = await result;
+  if (data.value != []) {
+    $q.loading.hide();
+    presionado.value = false;
+  }
   console.log(data.value.list);
   let temp = 0;