If you don't need to log the data and you just want to display the weather on your dashboard then you can definitely just add a widget.
The fiddle you linked needed some changes for the latest version of AngularJS (1.6.4) but I got it working as an example of how to add custom directives to the user module.
To add the a user AngularJS module go to Administration... UI Settings then at the bottom click the icon next to User module URL
. Click the plus icon (Create new file
) then copy paste this code (taken from the JSFiddle).
The code had to be modified for SCE, strict dependency injection and some changes to the way JSONP requests work.
define(['angular', 'require'], function(angular, require) {
'use strict';
var userModule = angular.module('userModule', ['maUiApp']);
userModule.config(['$sceDelegateProvider', function($sceDelegateProvider) {
var whiteList = $sceDelegateProvider.resourceUrlWhitelist();
whiteList.push('http://api.openweathermap.org/**');
$sceDelegateProvider.resourceUrlWhitelist(whiteList);
}]);
userModule.factory('weatherService', ['$http', '$sce', function($http, $sce) {
return {
getWeather: function() {
var weather = { temp: {}, clouds: null };
$http.jsonp('http://api.openweathermap.org/data/2.5/weather?q=Salzburg,at&units=metric&APPID=f9dbd911bc01df1d9ce563b2ba4d3209', {jsonpCallbackParam: 'callback'}).then(function(data) {
if (data && data.data) {
data = data.data;
if (data.main) {
weather.temp.current = data.main.temp;
weather.temp.min = data.main.temp_min;
weather.temp.max = data.main.temp_max;
}
weather.clouds = data.clouds ? data.clouds.all : undefined;
}
});
return weather;
}
};
}]);
userModule.filter('temp', ['$filter', function($filter) {
return function(input, precision) {
if (!precision) {
precision = 1;
}
var numberFilter = $filter('number');
return numberFilter(input, precision) + '\u00B0C';
};
}]);
userModule.controller('WeatherCtrl', ['$scope', 'weatherService', function ($scope, weatherService) {
$scope.weather = weatherService.getWeather();
}]);
userModule.directive('weatherIcon', function() {
return {
restrict: 'E', replace: true,
scope: {
cloudiness: '@'
},
controller: ['$scope', function($scope) {
$scope.imgurl = function() {
var baseUrl = 'https://ssl.gstatic.com/onebox/weather/128/';
if ($scope.cloudiness < 20) {
return baseUrl + 'sunny.png';
} else if ($scope.cloudiness < 90) {
return baseUrl + 'partly_cloudy.png';
} else {
return baseUrl + 'cloudy.png';
}
};
}],
template: '<div style="float:left"><img ng-src="{{ imgurl() }}"></div>'
};
});
return userModule;
}); // define
The markup will look like this (you dont need the ng-app).
<div ng-controller="WeatherCtrl">
<h2>Weather in Salzburg, Austria</h2>
<weather-icon cloudiness="{{ weather.clouds }}"></weather-icon>
<h3>Current: {{ weather.temp.current | temp:2 }}</h3>
min: {{ weather.temp.min | temp }}, max: {{ weather.temp.max | temp }}
</div>