add margins x

.gitignore

@@ -27,3 +27,5 @@ yarn-error.log*
 *.ntvs*
 *.njsproj
 *.sln
+
+.vscode/

.vscode/settings.json

@@ -3,13 +3,9 @@
   "editor.guides.bracketPairs": true,
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.codeActionsOnSave": [
-    "source.fixAll.eslint"
-  ],
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "vue"
-  ]
-}
+  "editor.codeActionsOnSave": ["source.fixAll.eslint"],
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

Dockerfile

@@ -1,5 +1,5 @@
 # develop stage
-FROM node:14.21.2-alpine as develop-stage
+FROM node:18.17.0-alpine as develop-stage
 WORKDIR /app
 COPY package*.json ./
 RUN npm install -g npm@latest
@@ -9,6 +9,7 @@ COPY . .
 # build stage
 FROM develop-stage as build-stage
 RUN npm i
+RUN npx --yes update-browserslist-db@latest
 RUN quasar build
 
 # production stage

README.md

@@ -1,41 +1,17 @@
-# PlantasCalc (plantas)
+# Quasar App (ejercicio_quasar)
 
-Cálculo de los días de riego de mis l
-
-## Install the dependencies
-```bash
-yarn
-# or
-npm install
+### Crear la imagen
+```
+docker build -t regar2509231522 .
 ```
 
-### Start the app in development mode (hot-code reloading, error reporting, etc.)
-```bash
-quasar dev
+### borrar y crear contenedor
+```
+docker rm -f plantas && docker run -d --name=plantas --restart unless-stopped -p 33331:80 regar2509231522
 ```
 
-
-### Lint the files
-```bash
-yarn lint
-# or
-npm run lint
+### purgar docker
 ```
-
-
-### Format the files
-```bash
-yarn format
-# or
-npm run format
+docker system prune
+docker image prune -a
 ```
-
-
-
-### Build the app for production
-```bash
-quasar build
-```
-
-### Customize the configuration
-See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-vite/quasar-config-js).

package-lock.json

@@ -1060,9 +1060,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001473",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001473.tgz",
-      "integrity": "sha512-ewDad7+D2vlyy+E4UJuVfiBsU69IL+8oVmTuZnH5Q6CIUbxNfI50uVpRHbUPDD6SUaN2o0Lh4DhTrvLG/Tn1yg==",
+      "version": "1.0.30001539",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001539.tgz",
+      "integrity": "sha512-hfS5tE8bnNiNvEOEkm8HElUHroYwlqMMENEzELymy77+tJ6m+gA2krtHl5hxJaj71OlpC2cHZbdSMX1/YEqEkA==",
       "dev": true,
       "funding": [
         {

package.json

@@ -11,24 +11,23 @@
     "test": "echo \"No test specified\" && exit 0"
   },
   "dependencies": {
-    "axios": "^1.2.1",
     "@quasar/extras": "^1.0.0",
     "quasar": "^2.6.0",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0"
   },
   "devDependencies": {
-    "eslint": "^8.10.0",
-    "eslint-plugin-vue": "^9.0.0",
-    "eslint-config-prettier": "^8.1.0",
-    "prettier": "^2.5.1",
     "@quasar/app-vite": "^1.0.0",
     "autoprefixer": "^10.4.2",
-    "postcss": "^8.4.14"
+    "eslint": "^8.10.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-vue": "^9.0.0",
+    "postcss": "^8.4.14",
+    "prettier": "^2.5.1"
   },
   "engines": {
     "node": "^18 || ^16 || ^14.19",
     "npm": ">= 6.13.4",
     "yarn": ">= 1.21.1"
   }
-}
+}

quasar.config.js

@@ -8,9 +8,7 @@
 // Configuration for your app
 // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js
 
-
-const { configure } = require('quasar/wrappers');
-
+const { configure } = require("quasar/wrappers");
 
 module.exports = configure(function (/* ctx */) {
   return {
@@ -20,7 +18,7 @@ module.exports = configure(function (/* ctx */) {
       // exclude = [],
       // rawOptions = {},
       warnings: true,
-      errors: true
+      errors: true,
     },
 
     // https://v2.quasar.dev/quasar-cli/prefetch-feature
@@ -29,15 +27,10 @@ module.exports = configure(function (/* ctx */) {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://v2.quasar.dev/quasar-cli/boot-files
-    boot: [
-      
-      'axios',
-    ],
+    boot: [],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
-    css: [
-      'app.css'
-    ],
+    css: ["app.css"],
 
     // https://github.com/quasarframework/quasar/tree/dev/extras
     extras: [
@@ -49,18 +42,18 @@ module.exports = configure(function (/* ctx */) {
       // 'line-awesome',
       // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
 
-      'roboto-font', // optional, you are not bound to it
-      'material-icons', // optional, you are not bound to it
+      "roboto-font", // optional, you are not bound to it
+      "material-icons", // optional, you are not bound to it
     ],
 
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build
     build: {
       target: {
-        browser: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
-        node: 'node16'
+        browser: ["es2019", "edge88", "firefox78", "chrome87", "safari13.1"],
+        node: "node16",
       },
 
-      vueRouterMode: 'hash', // available values: 'hash', 'history'
+      vueRouterMode: "hash", // available values: 'hash', 'history'
       // vueRouterBase,
       // vueDevtools,
       // vueOptionsAPI: false,
@@ -79,7 +72,6 @@ module.exports = configure(function (/* ctx */) {
       // extendViteConf (viteConf) {},
       // viteVuePluginOptions: {},
 
-      
       // vitePlugins: [
       //   [ 'package-name', { ..options.. } ]
       // ]
@@ -88,7 +80,7 @@ module.exports = configure(function (/* ctx */) {
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
     devServer: {
       // https: true
-      open: true // opens browser window automatically
+      open: true, // opens browser window automatically
     },
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
@@ -106,7 +98,7 @@ module.exports = configure(function (/* ctx */) {
       // directives: [],
 
       // Quasar plugins
-      plugins: []
+      plugins: ["Loading"],
     },
 
     // animations: 'all', // --- includes all animations
@@ -128,7 +120,7 @@ module.exports = configure(function (/* ctx */) {
     // https://v2.quasar.dev/quasar-cli/developing-ssr/configuring-ssr
     ssr: {
       // ssrPwaHtmlFilename: 'offline.html', // do NOT use index.html as name!
-                                          // will mess up SSR
+      // will mess up SSR
 
       // extendSSRWebserverConf (esbuildConf) {},
       // extendPackageJson (json) {},
@@ -139,19 +131,19 @@ module.exports = configure(function (/* ctx */) {
       // manualPostHydrationTrigger: true,
 
       prodPort: 3000, // The default port that the production server should use
-                      // (gets superseded if process.env.PORT is specified at runtime)
+      // (gets superseded if process.env.PORT is specified at runtime)
 
       middlewares: [
-        'render' // keep this as last one
-      ]
+        "render", // keep this as last one
+      ],
     },
 
     // https://v2.quasar.dev/quasar-cli/developing-pwa/configuring-pwa
     pwa: {
-      workboxMode: 'generateSW', // or 'injectManifest'
+      workboxMode: "generateSW", // or 'injectManifest'
       injectPwaMetaTags: true,
-      swFilename: 'sw.js',
-      manifestFilename: 'manifest.json',
+      swFilename: "sw.js",
+      manifestFilename: "manifest.json",
       useCredentialsForManifestTag: false,
       // useFilenameHashes: true,
       // extendGenerateSWOptions (cfg) {}
@@ -167,7 +159,7 @@ module.exports = configure(function (/* ctx */) {
 
     // Full list of options: https://v2.quasar.dev/quasar-cli/developing-capacitor-apps/configuring-capacitor
     capacitor: {
-      hideSplashscreen: true
+      hideSplashscreen: true,
     },
 
     // Full list of options: https://v2.quasar.dev/quasar-cli/developing-electron-apps/configuring-electron
@@ -177,17 +169,15 @@ module.exports = configure(function (/* ctx */) {
 
       inspectPort: 5858,
 
-      bundler: 'packager', // 'packager' or 'builder'
+      bundler: "packager", // 'packager' or 'builder'
 
       packager: {
         // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
-
         // OS X / Mac App Store
         // appBundleId: '',
         // appCategoryType: '',
         // osxSign: '',
         // protocol: 'myapp://path',
-
         // Windows only
         // win32metadata: { ... }
       },
@@ -195,18 +185,16 @@ module.exports = configure(function (/* ctx */) {
       builder: {
         // https://www.electron.build/configuration/configuration
 
-        appId: 'plantas'
-      }
+        appId: "plantas",
+      },
     },
 
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex
     bex: {
-      contentScripts: [
-        'my-content-script'
-      ],
+      contentScripts: ["my-content-script"],
 
       // extendBexScriptsConf (esbuildConf) {}
       // extendBexManifestJson (json) {}
-    }
-  }
+    },
+  };
 });

src/pages/ErrorNotFound.vue

@@ -1,21 +1,11 @@
 <template>
-  <div
-    class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center"
-  >
+  <div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
     <div>
       <div style="font-size: 30vh">404</div>
 
       <div class="text-h2" style="opacity: 0.4">Oops. Nothing here...</div>
 
-      <q-btn
-        class="q-mt-xl"
-        color="white"
-        text-color="blue"
-        unelevated
-        to="/"
-        label="Go Home"
-        no-caps
-      />
+      <q-btn class="q-mt-xl" color="white" text-color="blue" unelevated to="/" label="Go Home" no-caps />
     </div>
   </div>
 </template>

src/pages/IndexPage.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="flex flex-center">
-    <h5 class="q-py-xl">{{ fecha }}</h5>
+    <h6 v-if="fecha == '' && !presionado" class="q-py-xl q-px-md">
+      Cálculo de los días de riego
+    </h6>
+    <h6 v-else-if="presionado" class="q-py-xl q-px-md">Loading...</h6>
+    <h6 v-else class="q-py-xl q-px-md">{{ fecha }}</h6>
     <q-btn
       class="fixed-center"
       color="deep-orange"
@@ -12,21 +16,46 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue";
-import axios from "axios";
-import { date } from "quasar";
+import { ref } from "vue";
+import { date, useQuasar } from "quasar";
 
-const humedad_relativa = ref(0);
-const temp_max = ref(0);
+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"
+  )
+    .then((response) => {
+      console.log(response);
+      return response.json();
+    })
+    .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;
+
+  data.value.list.forEach((element) => {
+    temp += element.main.temp;
+  });
+  temp = temp / data.value.list.length;
+  // subimos el 0.25% la temperatura, openweathermap es muy fresquito!!
+  temp = temp * 0.75;
+  console.log(Math.floor(100 / temp), temp);
+  days.value = Math.floor(100 / temp);
 
-const calcular = () => {
-  let valor = 0;
-  valor = temp_max.value - humedad_relativa.value * 0.2;
-  // ajustar
-  valor = valor * 0.27;
   let hoy = new Date();
-  let newDate = date.addToDate(hoy, { days: Math.round(valor) });
+  let newDate = date.addToDate(hoy, { days: days.value });
   fecha.value = newDate.toLocaleDateString("es-es", {
     weekday: "long",
     year: "numeric",
@@ -34,26 +63,4 @@ const calcular = () => {
     day: "numeric",
   });
 };
-
-onMounted(() => {
-  axios
-    .get(
-      `https://api.open-meteo.com/v1/forecast?latitude=39.55&longitude=-0.57&hourly=relativehumidity_2m&models=gfs_global&daily=temperature_2m_max,temperature_2m_min&timezone=Europe%2FLondon`
-    )
-    .then((res) => {
-      //console.log("humedad relativa", res.data.hourly.relativehumidity_2m);
-      let suma_humedad = 0;
-      res.data.hourly.relativehumidity_2m.forEach((element) => {
-        suma_humedad += element;
-      });
-      humedad_relativa.value =
-        suma_humedad / res.data.hourly.relativehumidity_2m.length;
-      //console.log("temp máxima", res.data.daily.temperature_2m_max);
-      let suma_temp_max = 0;
-      res.data.daily.temperature_2m_max.forEach((element) => {
-        suma_temp_max += element;
-      });
-      temp_max.value = suma_temp_max / res.data.daily.temperature_2m_max.length;
-    });
-});
 </script>