You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
2.3 KiB
101 lines
2.3 KiB
|
|
import weather from 'https://cdn.skypack.dev/openweather-apis';
|
|
|
|
import vueWeatherWidget from 'https://cdn.skypack.dev/vue-weather-widget';
|
|
|
|
|
|
weather.setLang('en');
|
|
//weather.setCityId(4367872);
|
|
weather.setCity('Zürich, CH');
|
|
weather.setUnits('metric');
|
|
weather.setAPPID('e242774170c5404aac3dcfe4d3686fd0');
|
|
|
|
// get the Temperature
|
|
weather.getTemperature(function(err, temp){
|
|
console.log(temp);
|
|
});
|
|
|
|
// get the Atm Pressure
|
|
weather.getPressure(function(err, pres){
|
|
console.log(pres);
|
|
});
|
|
|
|
// get the Humidity
|
|
weather.getHumidity(function(err, hum){
|
|
console.log(hum);
|
|
});
|
|
|
|
// get the Description of the weather condition
|
|
weather.getDescription(function(err, desc){
|
|
console.log(desc);
|
|
});
|
|
|
|
// get all the JSON file returned from server (rich of info)
|
|
weather.getAllWeather(function(err, JSONObj){
|
|
console.log(JSONObj);
|
|
});
|
|
|
|
// Adds support for the onecall api endpoint.
|
|
weather.getWeatherOneCall = function(err, data){
|
|
|
|
};
|
|
|
|
// get 3 days forecast
|
|
weather.getWeatherForecastForDays(3, function(err, obj){
|
|
console.log(obj);
|
|
});
|
|
|
|
|
|
// get a simple JSON Object with temperature, humidity, pressure and description
|
|
weather.getSmartJSON(function(err, smart){
|
|
console.log(smart);
|
|
});
|
|
|
|
Vue(() => {
|
|
<template>
|
|
<vue-weather api-key="e242774170c5404aac3dcfe4d3686fd0" units="fr" />
|
|
<vue-weather api-key="e242774170c5404aac3dcfe4d3686fd0" use-dark-sky-api units="fr" />
|
|
</template>
|
|
|
|
default {
|
|
components: {
|
|
vueWeatherWidget,
|
|
},
|
|
};
|
|
|
|
});
|
|
|
|
return (
|
|
<script
|
|
src="https://code.jquery.com/jquery-3.2.1.min.js"
|
|
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<script
|
|
type="text/javascript"
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"
|
|
></script>
|
|
|
|
<!-- vue-weather-widget -->
|
|
<script type="text/javascript" src="vue-weather-widget.js"></script>
|
|
<link href="vue-weather-widget.css" rel="stylesheet" />
|
|
|
|
<!-- Vue app -->
|
|
<div id="app">
|
|
<weather
|
|
api-key="e242774170c5404aac3dcfe4d3686fd0"
|
|
latitude="47.3667"
|
|
longitude="8.55"
|
|
language="en"
|
|
units="fr"
|
|
>
|
|
</weather>
|
|
</div>
|
|
|
|
new Vue({
|
|
el: "#app",
|
|
components: {
|
|
weather: VueWeatherWidget,
|
|
},
|
|
});
|
|
); |