Re: [GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen? 2. Version
Verfasst: 1. Aug 2020 10:50
Heute kommt noch eine lokalisierte Formatierung der Datums- und Zeitangaben von DWDUnwetter hinzu. Dazu verwendet ich die JS-Bibliothek moment. Lustiger Name, aber ist so. Bei mir sieht das Ergebnis nun so aus:
Hier kommen jetzt also nur die Neuigkeiten. Die komplette Installation ist weiter oben im Thread beschrieben.
dwdunwetter2.html
dwdunwetter.js
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
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