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