Hier kommen jetzt also nur die Neuigkeiten. Die komplette Installation ist weiter oben im Thread beschrieben.
dwdunwetter2.html
Code: Alles auswählen
<html>
<head>
<link rel="stylesheet" href="lib/bootstrap-4.1.1/bootstrap.min.css">
</head>
<body ng-app="dwdunwetterApp" ng-controller="dwdunwetterCtrl" ng-cloak="ng-cloak">
<div class="form-group">
<label class="btn btn-primary btn-sm" for="titel">Titel</label><span class="form-control" id="titel" ng-bind-html="dwdunwetter.titel | trustAsHtml"></span>
</div>
<div class="form-group">
<label class="btn btn-primary btn-sm" for="typ">Typ</label><span class="form-control" id="typ" ng-bind-html="dwdunwetter.typ | trustAsHtml"></span>
</div>
<div class="form-group">
<label class="btn btn-primary btn-sm" for="beschreibung">Beschreibung</label><span class="form-control" id="beschreibung" ng-bind-html="dwdunwetter.beschreibung | trustAsHtml"></span>
</div>
<div class="form-group">
<label class="btn btn-primary btn-sm" for="ausgabedatum">Ausgabedatum</label><span class="form-control" id="ausgabedatum" ng-bind-html="dwdunwetter.ausgabedatum | trustAsHtml"></span>
</div>
<div class="form-group">
<label class="btn btn-primary btn-sm" for="gueltigab">Gültig ab</label><span class="form-control" id="gueltigab" ng-bind-html="dwdunwetter.gueltigab | trustAsHtml"></span>
</div>
<div class="form-group">
<label class="btn btn-primary btn-sm" for="gueltigbis">Gültig bis</label><span class="form-control" id="gueltigbis" ng-bind-html="dwdunwetter.gueltigbis | trustAsHtml"></span>
</div>
<div class="form-group">
<label class="btn btn-primary btn-sm" for="instruction">Instruktionen</label><span class="form-control" id="instruction" ng-bind-html="dwdunwetter.instruction | trustAsHtml"></span>
</div>
<script type="text/javascript" src="lib/angular-1.7.8/angular.min.js"></script>
<script type="text/javascript" src="lib/angular-1.7.8/angular-sanitize.min.js"></script>
<script type="text/javascript" src="lib/moment-2.27.0/moment.min.js"></script>
<script type="text/javascript" src="lib/moment-2.27.0/locales.min.js"></script>
<script type="text/javascript" src="app/dwdunwetter.js"></script>
</body>
</html>
Code: Alles auswählen
/**
* AngularJS App
* dwdunwetter.js
* 01.08.2020
*/
var app = angular.module( 'dwdunwetterApp', [] );
/* HTML sicher in Webview sitemap einbinden */
app.filter('trustAsHtml', function($sce) {
return function(html) {
return $sce.trustAsHtml(html);
};
});
/* AngularJS Controller */
app.controller(
"dwdunwetterCtrl",
function( $scope, $timeout ) {
/* Liste meiner DWDUnwetter Items */
$scope.dwdunwetter = { titel: '', typ: '', beschreibung: '', ausgabedatum: '', gueltigab: '', gueltigbis: '', instruction:''};
$scope.items = [
{ 'item': 'titel', 'oh_item': 'WarningOrtTitel'},
{ 'item': 'typ', 'oh_item': 'WarningOrtTyp'},
{ 'item': 'beschreibung', 'oh_item':'WarningOrtBeschreibung'},
{ 'item': 'ausgabedatum', 'oh_item': 'WarningOrtAusgabedatum'},
{ 'item': 'gueltigab', 'oh_item': 'WarningOrtGueltigAb'},
{ 'item': 'gueltigbis', 'oh_item': 'WarningOrtGueltigBis'},
{ 'item': 'instruction', 'oh_item': 'WarningOrtInstruction'}
];
/* Daten holen mit native Fetch API */
$scope.fetch = function(oh_item) {
/* https://attacomsian.com/blog/javascript-fetch-api */
console.log('fetch startet...');
/* fetch method */
const options = {
method: 'GET'
};
/* fetch headers */
const headers = new Headers({
'Content-Type': 'application/json'
});
/* items Wertes mit Hilfe OpenHAB REST API holen IP anpassen! */
const request = new Request('http://192.168.x.xxx:8080/rest/items/' + oh_item, {
headers: headers
});
/* fetch startet ...*/
fetch(request, options)
.then(res => res.json())
.then(res => {
$timeout( function(){
switch(oh_item) {
case 'WarningOrtTitel':
$scope.dwdunwetter.titel = res.state;
break;
case 'WarningOrtTyp':
$scope.dwdunwetter.typ = res.state;
break;
case 'WarningOrtBeschreibung':
$scope.dwdunwetter.beschreibung = res.state;
break;
case 'WarningOrtAusgabedatum':
$scope.dwdunwetter.ausgabedatum = $scope.getFormattedDatetime(res.state);
break;
case 'WarningOrtGueltigAb':
$scope.dwdunwetter.gueltigab = $scope.getFormattedDatetime(res.state);
break;
case 'WarningOrtGueltigBis':
$scope.dwdunwetter.gueltigbis = $scope.getFormattedDatetime(res.state);
break;
case 'WarningOrtInstruction':
$scope.dwdunwetter.instruction = res.state;
break;
}
},0);
})
.catch(error => {
console.log('upload error', error);
});
};
// moment 2.27.0 mit "de" Locale
// Datetime YYYY-MM-DDTHH:MM:SS => Wochentag TT.MM.JJJJ HH:MM
// https://momentjs.com/docs/#/displaying/
$scope.getFormattedDatetime = function(stateValue) {
moment.locale('de');
var formattedDate = moment(stateValue).format('dddd L LT');
// console.log(formattedDate);
return formattedDate;
};
// Datenübergabe an AngularJS mit Verzögerung $timeout() wegen native fetch api promise
// @todo - bessere Lösung als Timeout?
Object.keys($scope.items).forEach(function(key) {
$scope.fetch($scope.items[key].oh_item);
});
});
die notwendige JavaScript Bibliothek kommt in das html/lib Verzeichnis in ein neues Unterverzeichnis moment-2.27.0
https://momentjs.com/
Das Wesentliche notwendige habe ich mal als .zip hier angehängt.
Viel Spaß damit...
Grüße
Thomas