Added details

package-lock.json

@@ -8,12 +8,14 @@
       "name": "weather-demo",
       "version": "0.1.0",
       "dependencies": {
+        "apexcharts": "^3.29.0",
         "axios": "^0.23.0",
         "core-js": "^3.18.3",
         "firebase": "^9.1.3",
         "moment": "^2.29.1",
         "nanoid": "^3.1.30",
         "vue": "^2.6.14",
+        "vue-apexcharts": "^1.6.2",
         "vue-class-component": "^7.2.6",
         "vue-property-decorator": "^9.1.2",
         "vuetify": "^2.5.10",
@@ -3488,6 +3490,19 @@
         "node": ">= 8"
       }
     },
+    "node_modules/apexcharts": {
+      "version": "3.29.0",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.29.0.tgz",
+      "integrity": "sha512-PhI17VayidYAbLb5/g+7WOeirgFrVopzt0qGwLq8V+cd6NXx4CeHYq3S0pDZiUGO7UFQ4YIrT8+ie9/Fnler+w==",
+      "dependencies": {
+        "svg.draggable.js": "^2.2.2",
+        "svg.easing.js": "^2.0.0",
+        "svg.filter.js": "^2.0.2",
+        "svg.pathmorphing.js": "^0.1.3",
+        "svg.resize.js": "^1.4.3",
+        "svg.select.js": "^3.0.1"
+      }
+    },
     "node_modules/aproba": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
@@ -13491,6 +13506,89 @@
       "integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=",
       "dev": true
     },
+    "node_modules/svg.draggable.js": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
+      "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
+      "dependencies": {
+        "svg.js": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.easing.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
+      "integrity": "sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=",
+      "dependencies": {
+        "svg.js": ">=2.3.x"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.filter.js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
+      "integrity": "sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=",
+      "dependencies": {
+        "svg.js": "^2.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
+      "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
+    },
+    "node_modules/svg.pathmorphing.js": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
+      "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
+      "dependencies": {
+        "svg.js": "^2.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.resize.js": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
+      "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
+      "dependencies": {
+        "svg.js": "^2.6.5",
+        "svg.select.js": "^2.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.resize.js/node_modules/svg.select.js": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
+      "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
+      "dependencies": {
+        "svg.js": "^2.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.select.js": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
+      "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
+      "dependencies": {
+        "svg.js": "^2.6.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/svgo": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
@@ -14564,6 +14662,14 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
       "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
     },
+    "node_modules/vue-apexcharts": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/vue-apexcharts/-/vue-apexcharts-1.6.2.tgz",
+      "integrity": "sha512-9HS3scJwWgKjmkcWIf+ndNDR0WytUJD8Ju0V2ZYcjYtlTLwJAf2SKUlBZaQTkDmwje/zMgulvZRi+MXmi+WkKw==",
+      "peerDependencies": {
+        "apexcharts": "^3.26.0"
+      }
+    },
     "node_modules/vue-class-component": {
       "version": "7.2.6",
       "resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-7.2.6.tgz",
@@ -18971,6 +19077,19 @@
         "picomatch": "^2.0.4"
       }
     },
+    "apexcharts": {
+      "version": "3.29.0",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.29.0.tgz",
+      "integrity": "sha512-PhI17VayidYAbLb5/g+7WOeirgFrVopzt0qGwLq8V+cd6NXx4CeHYq3S0pDZiUGO7UFQ4YIrT8+ie9/Fnler+w==",
+      "requires": {
+        "svg.draggable.js": "^2.2.2",
+        "svg.easing.js": "^2.0.0",
+        "svg.filter.js": "^2.0.2",
+        "svg.pathmorphing.js": "^0.1.3",
+        "svg.resize.js": "^1.4.3",
+        "svg.select.js": "^3.0.1"
+      }
+    },
     "aproba": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
@@ -27045,6 +27164,70 @@
       "integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=",
       "dev": true
     },
+    "svg.draggable.js": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
+      "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
+      "requires": {
+        "svg.js": "^2.0.1"
+      }
+    },
+    "svg.easing.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
+      "integrity": "sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=",
+      "requires": {
+        "svg.js": ">=2.3.x"
+      }
+    },
+    "svg.filter.js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
+      "integrity": "sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=",
+      "requires": {
+        "svg.js": "^2.2.5"
+      }
+    },
+    "svg.js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
+      "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
+    },
+    "svg.pathmorphing.js": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
+      "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
+      "requires": {
+        "svg.js": "^2.4.0"
+      }
+    },
+    "svg.resize.js": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
+      "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
+      "requires": {
+        "svg.js": "^2.6.5",
+        "svg.select.js": "^2.1.2"
+      },
+      "dependencies": {
+        "svg.select.js": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
+          "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
+          "requires": {
+            "svg.js": "^2.2.5"
+          }
+        }
+      }
+    },
+    "svg.select.js": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
+      "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
+      "requires": {
+        "svg.js": "^2.6.5"
+      }
+    },
     "svgo": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
@@ -27908,6 +28091,12 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
       "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
     },
+    "vue-apexcharts": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/vue-apexcharts/-/vue-apexcharts-1.6.2.tgz",
+      "integrity": "sha512-9HS3scJwWgKjmkcWIf+ndNDR0WytUJD8Ju0V2ZYcjYtlTLwJAf2SKUlBZaQTkDmwje/zMgulvZRi+MXmi+WkKw==",
+      "requires": {}
+    },
     "vue-class-component": {
       "version": "7.2.6",
       "resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-7.2.6.tgz",

package.json

@@ -7,12 +7,14 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "apexcharts": "^3.29.0",
     "axios": "^0.23.0",
     "core-js": "^3.18.3",
     "firebase": "^9.1.3",
     "moment": "^2.29.1",
     "nanoid": "^3.1.30",
     "vue": "^2.6.14",
+    "vue-apexcharts": "^1.6.2",
     "vue-class-component": "^7.2.6",
     "vue-property-decorator": "^9.1.2",
     "vuetify": "^2.5.10",

src/components/City.vue

@@ -31,7 +31,7 @@
       </v-list-item>
       <v-divider></v-divider>
       <v-row justify="space-around">
-        <v-col class="text-center pb-0" v-for="i in 5" :key="i">
+        <v-col class="text-center" v-for="i in 5" :key="i">
           <div>{{ getMoment(data.hourly[i * 3].dt, "HH:mm") }}</div>
           <v-tooltip bottom>
             <template v-slot:activator="{ on }">
@@ -49,27 +49,36 @@
             </template>
             <span>{{ data.hourly[i * 3].weather[0].description }}</span>
           </v-tooltip>
-
           <div>{{ Math.round(data.hourly[i * 3].temp) }} °C</div>
         </v-col>
       </v-row>
+      <v-divider></v-divider>
+      <v-card-actions>
+        <v-btn block class="primary" @click="details = true">Pokaż szczegóły</v-btn>
+      </v-card-actions>
     </v-card>
     <v-skeleton-loader type="card" v-else></v-skeleton-loader>
+    <Details v-model="details" :city="city" :wdata="data" v-if="city && data"></Details>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
+import Details from '@/components/Details.vue';
 import axios from "axios";
 const moment = require("moment");
 
-@Component
+@Component({
+  components: {
+    Details,
+  }
+})
 export default class City extends Vue {
   @Prop({ required: true }) private readonly city!: any;
 
   private created() {
     this.getData();
-    setInterval(this.getData, 1000 * 60);
+    //setInterval(this.getData, 1000 * 60);
   }
 
   private getData() {
@@ -99,6 +108,7 @@ export default class City extends Vue {
     return {
       data: undefined,
       forecast: undefined,
+      details: false,
     };
   }
 }

src/components/Details.vue

@@ -0,0 +1,138 @@
+<template>
+  <v-dialog v-model="overlay">
+    <v-card>
+      <v-card-title class="justify-center text-break"
+        >Szczegółowa prognoza pogody dla {{ city.name }}
+      </v-card-title>
+      <v-card-text class="px-1 pb-1">
+        <apexchart
+          :options="temperatureOptions"
+          :series="temperatureSeries"
+        ></apexchart>
+        <apexchart
+          :options="humidityOptions"
+          :series="humiditySeries"
+        ></apexchart>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn class="primary" @click="overlay = false">Zamknij</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+const moment = require("moment");
+
+@Component
+export default class Details extends Vue {
+  @Prop({ required: true }) private readonly value!: boolean;
+  @Prop({ required: true }) private readonly city!: any;
+  @Prop({ required: true }) private readonly wdata!: any;
+
+  get overlay() {
+    return this.value;
+  }
+
+  set overlay(val: boolean) {
+    this.$emit("input", val);
+  }
+
+  get temperatureSeries() {
+    const ts = this.wdata.hourly
+      .slice(0, this.$vuetify.breakpoint.xsOnly ? 12 : 24)
+      .map((element: any) => {
+        return {
+          x: moment.unix(element.dt).format("HH:mm"),
+          y: Math.round(element.temp),
+        };
+      });
+    return [
+      {
+        name: "temperatura",
+        data: ts,
+      },
+    ];
+  }
+
+  get humiditySeries() {
+    const ts = this.wdata.hourly
+      .slice(0, this.$vuetify.breakpoint.xsOnly ? 12 : 24)
+      .map((element: any) => {
+        return {
+          x: moment.unix(element.dt).format("HH:mm"),
+          y: Math.round(element.humidity),
+        };
+      });
+    return [
+      {
+        name: "wilgotność",
+        data: ts,
+      },
+    ];
+  }
+
+  private data() {
+    return {
+      temperatureOptions: {
+        chart: {
+          type: "line",
+          toolbar: false,
+        },
+        title: {
+          text: "Prognoza temperatury",
+          align: "center",
+        },
+        xaxis: {
+          labels: {
+            showDuplicates: true,
+            rotateAlways: true,
+          },
+          title: {
+            text: "Godzina",
+            offsetY: -30,
+          },
+        },
+        yaxis: {
+          title: {
+            text: "Temperatura",
+          },
+        },
+        stroke: {
+          curve: "smooth",
+        },
+      },
+      humidityOptions: {
+        chart: {
+          type: "line",
+          toolbar: false,
+        },
+        title: {
+          text: "Prognoza wilgotności",
+          align: "center",
+        },
+        xaxis: {
+          labels: {
+            showDuplicates: true,
+            rotateAlways: true,
+          },
+          title: {
+            text: "Godzina",
+            offsetY: -30,
+          },
+        },
+        yaxis: {
+          title: {
+            text: "Wilgotność",
+          },
+        },
+        stroke: {
+          curve: "smooth",
+        },
+      },
+    };
+  }
+}
+</script>

src/main.ts

@@ -2,11 +2,14 @@ import Vue from "vue";
 import App from "./App.vue";
 import store from "./store";
 import vuetify from "./plugins/vuetify";
+import VueApexCharts from 'vue-apexcharts'
 
 import { initializeApp } from "firebase/app";
 
 Vue.config.productionTip = false;
 
+Vue.use(VueApexCharts)
+
 const firebaseConfig = {
   apiKey: process.env.VUE_APP_FIREBASE_apiKey,
   authDomain: process.env.VUE_APP_FIREBASE_authDomain,
@@ -24,3 +27,5 @@ new Vue({
   vuetify,
   render: (h) => h(App),
 }).$mount("#app");
+
+Vue.component('apexchart', VueApexCharts)

src/views/Forecast.vue

@@ -11,7 +11,7 @@
             <v-card
               tile
               outlined
-              height="230"
+              height="283"
               width="350"
               :color="hover ? 'grey lighten-2' : ''"
               class="rounded-xl"