Add dashboard widget (#76)

Add weather dashboard widget
master
Bálint Erdősi 2019-11-22 13:37:19 +01:00 committed by Loïc Blot
parent 7482037e89
commit 80a75d9809
6 changed files with 379 additions and 0 deletions

View File

@ -20,4 +20,7 @@
<settings> <settings>
<admin>OCA\Weather\Settings\AdminSettings</admin> <admin>OCA\Weather\Settings\AdminSettings</admin>
</settings> </settings>
<dashboard>
<widget>OCA\Weather\Widgets\DefaultWidget</widget>
</dashboard>
</info> </info>

47
css/widget.css 100644
View File

@ -0,0 +1,47 @@
.icon-weather {
background-image: url('../img/app-dark.svg');
}
.icon-weather-light {
background-image: url('../img/app.svg');
}
.weatherWidgetContents {
margin: 0 44px;
}
.weatherWidgetContents h3.locationValue {
text-align: left;
}
.weatherWidgetContents .weatherWidgetList {
display: flex;
padding: 0;
flex-wrap: wrap;
}
.weatherWidgetContents .weatherWidgetList .measurement,
.weatherWidgetContents .weatherWidgetList .value {
flex: 1 1 50%;
text-align: left;
min-width: 80px;
}
.weatherWidgetContents .weatherWidgetList .measurement {
font-weight: bold;
}
.weatherWidgetContents .weaterWidgetList .measurement::after {
content:":";
}
.weatherWidgetContents .info {
position: absolute;
bottom: 11px;
left: 0;
margin: 22px;
}
.weatherWidgetContents .info.error {
color: red;
color: var(--color-error);
}

63
img/app-dark.svg 100644
View File

@ -0,0 +1,63 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
width="32px"
height="32px"
viewBox="0 0 32 32"
enable-background="new 0 0 32 32"
xml:space="preserve"><metadata
id="metadata8"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata>
<g
id="layer1"
style="display:inline"><g
id="g4349"
style="fill:#000000;fill-opacity:1"
transform="matrix(1.1903068,0,0,1.1903068,-2.816759,-2.3667145)"><circle
r="7.4333339"
cy="15.566668"
cx="15.733334"
id="path4195"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /><path
id="path4197"
d="m 13.4,6.7 4.866667,0 -2.473718,-4.4227241 z"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /><path
id="path4197-3"
d="m 20.733778,23.806787 -4.806182,0.764873 3.138076,3.978976 z"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /><path
id="path4197-3-6"
d="m 23.890718,19.760651 -2.891058,3.914869 5.027273,0.637412 z"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /><path
id="path4197-3-6-7"
d="m 25.112667,14.565563 -0.909031,4.781012 4.806945,-1.604072 z"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /><path
id="path4197-3-6-7-5"
d="m 23.027612,9.5835333 1.932472,4.4665387 3.076826,-4.026525 z"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /><path
id="path4197-3-6-7-5-3"
d="m 18.639696,6.774351 4.114051,2.5998079 0.271487,-5.0602428 z"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /><path
id="path4197-3-5"
d="m 15.483345,24.558675 -4.721035,-1.181629 1.325855,4.891 z"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /><path
id="path4197-3-5-6"
d="M 10.485285,23.163173 7.2630918,19.515996 5.5864487,24.298113 Z"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /><path
id="path4197-3-5-6-2"
d="M 6.9873601,19.276312 6.7732509,14.414359 2.4636401,17.08026 Z"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /><path
id="path4197-3-5-6-2-9"
d="M 6.8803634,13.939504 8.6508057,9.4062961 3.6312081,10.101577 Z"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /><path
id="path4197-3-5-6-2-9-1"
d="M 8.9216018,9.2344138 13.100504,6.7401755 8.7096644,4.2102933 Z"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /></g></g></svg>

After

Width:  |  Height:  |  Size: 3.9 KiB

78
js/widget.js 100644
View File

@ -0,0 +1,78 @@
/**
*
* @copyright Copyright (c) 2019, Balint Erdosi (erdosib@gmail.com)
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
/** global: OCA */
/** global: net */
(function () {
/**
* @constructs Weather
*/
var Weather = function() {
}
Weather.prototype.divWeather = null;
Weather.prototype.init = function() {
this.getWeather();
}
Weather.prototype.getWeather = function() {
var request = {
widget: "weather",
request: "getWeather"
};
net.requestWidget(request, this.updateWeather);
}
Weather.prototype.updateWeather = function(result) {
var divWeather = document.querySelector("#widget-weather");
var divInfo = divWeather.querySelector(".info");
var temperatureRepresentationLookup = {
"kelvin": "°K",
"imperial":"°F",
"metric": "°C"
}
if (result.value.error) {
divInfo.classList.add("error");
divInfo.innerHTML = "Failed to update: " + result.value.error;
return;
}
try {
divInfo.classList.remove("error");
divInfo.innerHTML = "";
divWeather.querySelector(".locationValue").innerHTML = result.value.location;
divWeather.querySelector(".temperatureValue").innerHTML = result.value.temperature;
divWeather.querySelector(".temperatureRepresentation").innerHTML = temperatureRepresentationLookup[result.value.metric]|| "ERROR";
divWeather.querySelector(".weatherValue").innerHTML = result.value.weather;
divWeather.querySelector(".humidityValue").innerHTML = result.value.humidity;
divWeather.querySelector(".windValue").innerHTML = result.value.wind;
} catch (e) {
divInfo.classList.add("error");
divInfo.innerHTML = "Failed to update some data.";
}
}
OCA.DashBoard.Weather = Weather;
OCA.DashBoard.weather = new Weather();
})()

View File

@ -0,0 +1,167 @@
<?php
/**
*
* @copyright Copyright (c) 2019, Balint Erdosi (erdosib@gmail.com)
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
namespace OCA\Weather\Widgets;
use \OCP\AppFramework\App;
use \OCP\AppFramework\Http;
use \OCP\IContainer;
use OCP\Dashboard\Model\WidgetSetup;
use OCP\Dashboard\Model\WidgetTemplate;
use OCP\Dashboard\IDashboardWidget;
use OCP\Dashboard\Model\IWidgetRequest;
use OCP\Dashboard\Model\IWidgetConfig;
use \OCA\Weather\AppInfo\Application;
use \OCA\Weather\Controller\WeatherController;
use \OCP\IL10N;
use \OCP\ILogger;
class DefaultWidget implements IDashboardWidget {
const WIDGET_ID = 'weather';
/** @var IL19N */
private $l10n;
private $logger;
/**
* DefaultWidget constructor
* @param IL10N $l10n
*/
public function __construct(ILogger $logger, IL10N $l10n) {
$this->l10n = $l10n;
$this->logger = $logger;
}
/**
* @return string
*/
public function getId(): string {
return self::WIDGET_ID;
}
/**
* @return string
*/
public function getName(): string {
return $this->l10n->t('Weather');
}
/**
* @return string
*/
public function getDescription(): string {
return $this->l10n->t('Watch the weather directly on your Nextcloud.');
}
/**
* @return WidgetTemplate
*/
public function getWidgetTemplate(): WidgetTemplate {
$template = new WidgetTemplate();
$template->addCss('widget')
->addJs('widget')
->setIcon('icon-weather')
->setContent('widget')
->setInitFunction('OCA.DashBoard.weather.getWeather');
return $template;
}
/**
* @return WidgetTemplate
*/
public function getWidgetSetup(): WidgetSetup {
$setup = new WidgetSetup();
$setup->addSize(WidgetSetup::SIZE_TYPE_MIN, 2, 1);
$setup->addSize(WidgetSetup::SIZE_TYPE_MAX, 4, 5);
$setup->addSize(WidgetSetup::SIZE_TYPE_DEFAULT, 2, 3);
$setup->addDelayedJob('OCA.DashBoard.weather.getWeather', 600);
return $setup;
}
/**
* @param IWidgetConfig $settings
*/
public function loadWidget(IWidgetConfig $settings) {
}
/**
* @param IWidgetRequest $request
*/
public function requestWidget(IWidgetRequest $request) {
if ($request->getRequest() === 'getWeather') {
$app = new Application();
$container = $app->getContainer();
$weatherController = $container->query('OCA\Weather\Controller\WeatherController');
$cityController = $container->query('OCA\Weather\Controller\CityController');
$settingsController = $container->query('OCA\Weather\Controller\SettingsController');
$allCities = json_decode($cityController->getAll()->render(), true);
if (count($allCities) == 0) {
$request->addResult('error', $this->l10n->t('Please make sure you select cities in the Weather app.'));
return;
}
$homeCityId = $allCities['home'];
$homeCityArray = array_filter(
$allCities['cities'],
function($city) use ($homeCityId) {
return $city['id'] === $homeCityId;
}
);
if (count($homeCityArray) != 1) {
$request->addResult('error', $this->l10n->t('Please make sure you select a home city in the Weather app.'));
return;
}
$homeCity = array_pop($homeCityArray)['name'];
$resultJSONResponse = $weatherController->get($homeCity);
if ($resultJSONResponse->getStatus() != Http::STATUS_OK) {
$request->addResult('error', $this->l10n->t('Failed to get city weather informations. Please contact your administrator'));
return;
}
$result = json_decode($resultJSONResponse->render(), true);
$metric = json_decode($settingsController->metricGet()->render(), true)['metric'];
$request->addResult('location', $homeCity);
$request->addResult('temperature', $result['main']['temp']);
$request->addResult('metric', $metric);
$request->addResult('weather', $result['weather'][0]['description']);
$request->addResult('humidity', $result['main']['humidity']);
$request->addResult('wind', $result['wind']['speed']);
}
}
}
?>

View File

@ -0,0 +1,21 @@
<?php
?>
<div id="widget-weather" class="weatherWidgetContents">
<h3 class="locationValue"></h3>
<div class="info"><?php p($l->t('Updating widget…')); ?></div>
<dl class="weatherWidgetList">
<dt class="measurement"><?php p($l->t('Temperature')); ?></dt>
<dd class="value"><span class="temperatureValue"></span>&nbsp;<span class="temperatureRepresentation"></span></dd>
<dt class="measurement"><?php p($l->t('Cloudiness')); ?></dt>
<dd class="value"><span class="weatherValue"></span></dd>
<dt class="measurement"><?php p($l->t('Humidity')); ?></dt>
<dd class="value"><span class="humidityValue"></span>&nbsp;%</dd>
<dt class="measurement"><?php p($l->t('Wind')); ?></dt>
<dd class="value"><span class="windValue"></span>&nbsp;m/s</dd>
</dl>
</div>