vetro/weather-demo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added details

Browse Source
This commit is contained in:
Kamil Klecha
2021-10-19 21:57:00 +02:00
parent 7abfb8bc05
commit 2bef009d9d
6 changed files with 349 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
package-lock.json generated
View File

@@ -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",

2
package.json
View File

@@ -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",

18
src/components/City.vue
View File

@@ -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,
};
}
}

138
src/components/Details.vue Normal file
View File

@@ -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>

5
src/main.ts
View File

@@ -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)

2
src/views/Forecast.vue
View File

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