[GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen? 2. Version

GUI Relevanten, PaperUI, BasicUI, HabPanel ...

Moderatoren: seppy, udo1toni

thomas_w

Re: [GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen? 2. Version

Beitrag von thomas_w »

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:
openhab-dwdunwetter-html.jpg

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>
dwdunwetter.js

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/
openhab-dwdunwetter-lib.jpg
Das Wesentliche notwendige habe ich mal als .zip hier angehängt.

Viel Spaß damit...

Grüße
Thomas
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.

SaschaQ
Beiträge: 28
Registriert: 2. Mär 2020 13:50

Re: [GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen? 2. Version

Beitrag von SaschaQ »

Komischerweise bekomme ich im Chrome auf meinem Desktop PC keine Werte angezeigt.

Auf meinem Handy aber schon. Android Handy.

Ist das normal?

thomas_w

Re: [GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen? 2. Version

Beitrag von thomas_w »

SaschaQ hat geschrieben: 13. Aug 2020 18:31 Komischerweise bekomme ich im Chrome auf meinem Desktop PC keine Werte angezeigt.

Auf meinem Handy aber schon. Android Handy.

Ist das normal?
Ich habe getestet mit:
- akt. Firefox Browser Windows 10
- Fennec Browser unter Android (Firefox Browser Ableger)
- OpenHAB App unter Android

Alle drei zeigen Werte an.

Zeigt der Chrome Browser leere Felder an?

Mit [Strg]+[Umschalt]+[J] wird die Entwickler Konsole vom Chrome geöffnet. Vielleicht gibt es einen JavaScript Meldung /Fehler...
http://techfrage.de/question/3100/chrom ... -shortcut/

Ich nutze selber keinen Chrome Browser...

Grüße
Thomas

thomas_w

Re: [GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen? 2. Version

Beitrag von thomas_w »

Auf einem Win-7 PC habe ich einen Chrombrowser, der zeigt die aktuelle DWD Unwetterwarnung korrekt an. Es gibt allerdings eine Warnung in der Developerkonsole, es scheinen .Map Dateien zu fehlen. Ich stelle eine neue .zip Datei zur Verfügung...

Grüße
Thomas

SaschaQ
Beiträge: 28
Registriert: 2. Mär 2020 13:50

Re: [GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen? 2. Version

Beitrag von SaschaQ »

Hallo zusammen,

wie bekomme ich es hin, dass wenn keine Meldung vorliegt nicht "NULL" oder "Invalid Date" erscheint, sondern einfach leer bleibt.

Ist nur ein kleiner Schönheitsfehler aber vielleicht bekommt man das ja irgendwie weg.

Ich hatte es mit Transformation versucht, aber das funktioniert nicht.
Unbenannt.JPG
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.

SaschaQ
Beiträge: 28
Registriert: 2. Mär 2020 13:50

Re: [GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen? 2. Version

Beitrag von SaschaQ »

Keiner eine Idee?

Benutzeravatar
udo1toni
Beiträge: 4338
Registriert: 11. Apr 2018 18:05
Answers: 46
Wohnort: Darmstadt

Re: [GELÖST] DWDUnwetter Bindung - Lange Texte umbrechen? 2. Version

Beitrag von udo1toni »

Also, Du kannst z.B. die visibility nutzen.
Ansonsten kannst Du Proxy Items verwenden und eine Rule.

Antworten