diff --git a/assets/img/landscape-gladys-weather.jpg b/assets/img/landscape-gladys-weather.jpg new file mode 100644 index 0000000000..ec37b258d5 Binary files /dev/null and b/assets/img/landscape-gladys-weather.jpg differ diff --git a/assets/img/weather-icon/cloud.svg b/assets/img/weather-icon/cloud.svg new file mode 100644 index 0000000000..db99682e2c --- /dev/null +++ b/assets/img/weather-icon/cloud.svg @@ -0,0 +1,9 @@ + + + + + diff --git a/assets/img/weather-icon/rain.svg b/assets/img/weather-icon/rain.svg new file mode 100644 index 0000000000..5cf8575a8b --- /dev/null +++ b/assets/img/weather-icon/rain.svg @@ -0,0 +1,11 @@ + + + + + diff --git a/assets/img/weather-icon/snow.svg b/assets/img/weather-icon/snow.svg new file mode 100644 index 0000000000..3f6021df26 --- /dev/null +++ b/assets/img/weather-icon/snow.svg @@ -0,0 +1,14 @@ + + + + + diff --git a/assets/img/weather-icon/sun.svg b/assets/img/weather-icon/sun.svg new file mode 100644 index 0000000000..3fa4545435 --- /dev/null +++ b/assets/img/weather-icon/sun.svg @@ -0,0 +1,15 @@ + + + + + diff --git a/assets/img/weather-icon/white/cloud.svg b/assets/img/weather-icon/white/cloud.svg new file mode 100644 index 0000000000..74d7ecdbe5 --- /dev/null +++ b/assets/img/weather-icon/white/cloud.svg @@ -0,0 +1,9 @@ + + + + + diff --git a/assets/img/weather-icon/white/rain.svg b/assets/img/weather-icon/white/rain.svg new file mode 100644 index 0000000000..d044874c22 --- /dev/null +++ b/assets/img/weather-icon/white/rain.svg @@ -0,0 +1,12 @@ + + + + + diff --git a/assets/img/weather-icon/white/sun.svg b/assets/img/weather-icon/white/sun.svg new file mode 100644 index 0000000000..8faeff8ec4 --- /dev/null +++ b/assets/img/weather-icon/white/sun.svg @@ -0,0 +1,15 @@ + + + + + diff --git a/assets/js/app/translate/translate.config.js b/assets/js/app/translate/translate.config.js index 3f711dab73..e5389100d9 100644 --- a/assets/js/app/translate/translate.config.js +++ b/assets/js/app/translate/translate.config.js @@ -16,6 +16,11 @@ var translationsEN = { EVENT: { CREATED_SUCCESS_NOTIFICATION: 'Event created with success : ', CREATED_FAIL_NOTIFICATION: 'Failed to create event : ' + }, + WEATHER: { + day: 'Day', + night: 'Night', + HUMIDITY: 'Humidity' } }; @@ -37,7 +42,12 @@ var translationsFR = { EVENT: { CREATED_SUCCESS_NOTIFICATION: 'Event créé avec succès : ', CREATED_FAIL_NOTIFICATION: 'Erreur lors de la création de l\'event : ' - } + }, + WEATHER: { + day: 'Jour', + night: 'Nuit', + HUMIDITY: 'Humidité' + } }; diff --git a/assets/js/app/weather/weather.controller.js b/assets/js/app/weather/weather.controller.js new file mode 100644 index 0000000000..e627721362 --- /dev/null +++ b/assets/js/app/weather/weather.controller.js @@ -0,0 +1,107 @@ +/** + * Gladys Project + * http://gladysproject.com + * Software under licence Creative Commons 3.0 France + * http://creativecommons.org/licenses/by-nc-sa/3.0/fr/ + * You may not use this software for commercial purposes. + * @author :: Pierre-Gilles Leymarie + */ + +(function () { + 'use strict'; + + angular + .module('gladys') + .controller('WeatherCtrl', WeatherCtrl); + + WeatherCtrl.$inject = ['weatherService', 'geoLocationService', 'cacheService', '$timeout']; + + function WeatherCtrl(weatherService, geoLocationService, cacheService, $timeout) { + + /* jshint validthis: true */ + var vm = this; + vm.weather = []; + var EXPIRATION = 30*60*60*1000; + + activate(); + + function activate() { + refresh(); + + // Start the timer + $timeout(tick, 1000); + return ; + } + + function tick () { + vm.currentTime = Date.now(); + $timeout(tick, 1000); + } + + function refresh() { + + // first get GEOLOCATION from cache if exist + var coords = cacheService.get('GEOLOCATION_USER'); + + // if geoloc exist in cache + if(coords) { + return getWeather(coords); + } + // if not, get geoloc from browser + else { + return geoLocationService.getCurrentPosition() + .then(function(data) { + + if(data.coords && data.coords.latitude && data.coords.longitude) { + + var geoloc = { + latitude: data.coords.latitude, + longitude: data.coords.longitude, + accuracy: data.coords.accuracy + }; + + // save geoloc in cache + cacheService.set('GEOLOCATION_USER', geoloc, EXPIRATION); + return getWeather(geoloc); + } else { + + return null; + } + }); + } + } + + function getWeather(coords) { + + var latitude = coords.latitude; + var longitude = coords.longitude; + + return weatherService.get({latitude: latitude, longitude: longitude}) + .then(function(data) { + vm.weather[0] = data.data; + + // get weather in + return weatherService.get({latitude: latitude, longitude: longitude, offset: 24}); + }) + .then(function(data) { + + vm.weather[1] = data.data; + + // get weather in 48h + return weatherService.get({latitude: latitude, longitude: longitude, offset: 48}); + }) + .then(function(data) { + + vm.weather[2] = data.data; + + // get weather in 72h + return weatherService.get({latitude: latitude, longitude: longitude, offset: 72}); + }) + .then(function(data) { + + vm.weather[3] = data.data; + }); + } + + } +})(); \ No newline at end of file diff --git a/assets/js/app/weather/weather.service.js b/assets/js/app/weather/weather.service.js new file mode 100644 index 0000000000..ad63eab5c3 --- /dev/null +++ b/assets/js/app/weather/weather.service.js @@ -0,0 +1,31 @@ +/** + * Gladys Project + * http://gladysproject.com + * Software under licence Creative Commons 3.0 France + * http://creativecommons.org/licenses/by-nc-sa/3.0/fr/ + * You may not use this software for commercial purposes. + * @author :: Pierre-Gilles Leymarie + */ + +(function () { + 'use strict'; + + angular + .module('gladys') + .factory('weatherService', weatherService); + + weatherService.$inject = ['$http']; + + function weatherService($http) { + + var service = { + get: get + }; + + return service; + + function get(options) { + return $http({method: 'GET', url: '/weather', params: options }); + } + } +})(); \ No newline at end of file diff --git a/assets/styles/global.css b/assets/styles/global.css new file mode 100644 index 0000000000..44bf0119ba --- /dev/null +++ b/assets/styles/global.css @@ -0,0 +1,3 @@ +.box-full-width .box-body{ + padding: 0; +} \ No newline at end of file diff --git a/assets/styles/weather.css b/assets/styles/weather.css new file mode 100644 index 0000000000..1caaa660e8 --- /dev/null +++ b/assets/styles/weather.css @@ -0,0 +1,208 @@ +.row-no-gutter { + margin-right: 0; + margin-left: 0; +} + +.row-no-gutter [class*="col-"] { + padding-right: 0; + padding-left: 0; +} + +.city-selected { + position: relative; + overflow: hidden; + min-height: 200px; + background: #3D6AA2; +} + +article { + position: relative; + z-index: 2; + color: #fff; + padding: 20px; + + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-content: flex-start; + -ms-flex-line-pack: start; + align-content: flex-start; + -webkit-align-items: flex-start; + -ms-flex-align: start; + align-items: flex-start; +} + +.info .city, +.night { + font-size: 24px; + font-weight: 200; + position: relative; + + + -webkit-order: 0; + -ms-flex-order: 0; + order: 0; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-align-self: auto; + -ms-flex-item-align: auto; + align-self: auto; +} + +/*.info .city:after { + content: ''; + width: 15px; + height: 2px; + background: #fff; + position: relative; + display: inline-block; + vertical-align: middle; + margin-left: 10px; +}*/ + +.city span { + color: #fff; + font-size: 13px; + font-weight: bold; + + text-transform: lowercase; + text-align: left; +} + +.night { + font-size: 15px; + text-transform: uppercase; +} + +.icon { + width: 84px; + height: 84px; + -webkit-order: 0; + -ms-flex-order: 0; + order: 0; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + + overflow: visible; + +} + + +.temp { + font-size: 73px; + display: block; + position: relative; + font-weight: bold; +} + +svg { + color: #fff; + fill: currentColor; + width: 32px; + height: 32px; +} + +.svg path { + color: #fff; + fill: white; +} + +img svg { + fill: currentColor; +} + +.svg { + color: #fff; + fill: currentColor; +} + +#Layer_1 path{ + color: #0000; + fill: white; +} + +.wind svg { + width: 18px; + height: 18px; + margin-top: 20px; + margin-right: 10px; + vertical-align: bottom; +} + +.wind span { + font-size: 13px; + text-transform: uppercase; +} + +.city-selected:hover figure { + opacity: 0.4; +} + + +figure { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + background-position: center; + background-size: cover; + opacity: 0.1; + z-index: 1; + + -webkit-transition: all 0.5s ease; + -moz-transition: all 0.5s ease; + -ms-transition: all 0.5s ease; + -o-transition: all 0.5s ease; + transition: all 0.5s ease; +} + +.days .row [class*="col-"]:nth-child(2) .day { + border-width: 0 1px 0 1px; + border-style: solid; + border-color: #eaeaea; +} + +.days .row [class*="col-"] { + -webkit-transition: all 0.5s ease; + -moz-transition: all 0.5s ease; + -ms-transition: all 0.5s ease; + -o-transition: all 0.5s ease; + transition: all 0.5s ease; +} + +.days .row [class*="col-"]:hover{ + background: #eaeaea; +} + +.day { + padding: 10px 0px; + text-align: center; + +} + +.day h1 { + font-size: 14px; + text-transform: uppercase; + margin-top: 10px; +} + +.day .svg { + color: #000; + width: 32px; + height: 32px; +} \ No newline at end of file diff --git a/tasks/pipeline.js b/tasks/pipeline.js index 3af2062722..981509f7c9 100755 --- a/tasks/pipeline.js +++ b/tasks/pipeline.js @@ -26,9 +26,11 @@ var cssFilesToInject = [ 'styles/search.css', 'styles/store.css', 'styles/scenario.css', + 'styles/global.css', 'styles/angular-chart/angular-chart.min.css', 'styles/bootstrap-slider/bootstrap-slider.min.css', 'styles/device.css', + 'styles/weather.css', 'styles/leaflet/leaflet.css', // all styles, disabled by default