Obsidian/00.01 Admin/React/Weather.md

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(() => {

default { components: { vueWeatherWidget, }, };

});

return (

new Vue({ el: "#app", components: { weather: VueWeatherWidget, }, }); );

const C = props=>{
	const ref = useRef();
	useEffect(()=>{
		(async ()=>{
		let iframe = ref.current;
			//replace outdated api keys
    const response =await fetch("https://unpkg.com/vue-weather-widget@3.0.2/dist/js/vue-weather-widget.js");
    let js  = await response.text();
    js = js.replaceAll("c3bb8aa0a56b21122dea6a2a8ada70c8", "7f9c71310f410847fceb9537a83f3882");
	const dataUri = 'data:text/javascript;charset=utf-8,'
  + encodeURIComponent(js);
			
		var html = `
<!-- Requirements -->
<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="${dataUri}"></script>
<link href="https://unpkg.com/vue-weather-widget@3.0.2/dist/css/vue-weather-widget.css" rel="stylesheet" /> 

<!-- Vue app -->
<div id="app">
  <weather
  	api-key="e20753dfcaae902ab091fbb4925d432a" 
    latitude="47.3667"
    longitude="8.55"
    language="en"
    units="ca"
  > 
  </weather>
</div>
 
<script>
  new Vue({
    el: "#app",
    components: {
      weather: VueWeatherWidget, 
    },
  });
</script>

`;
		iframe.contentWindow.document.open();
		iframe.contentWindow.document.write(html);
		iframe.contentWindow.document.close();
})()
	})
	return <iframe ref={ref} width="100%" height="300" frameBorder="0"/>
}
<C />