<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Material Design und Javaskript]]></title><description><![CDATA[<p dir="auto">Hallo zusammen,</p>
<p dir="auto">Das ist der Stand der Dinge:</p>
<p dir="auto"><img src="/assets/uploads/files/1614763039376-fensterjson.png" alt="FensterJson.png" class=" img-fluid img-markdown" /></p>
<p dir="auto">Hier das Java Skript:</p>
<pre><code>const moment = require("moment");
 
// Skript Einstellungen *************************************************************************************************************************************************

let dpList = '0_userdata.0.vis.Fenster.Status.jsonList';          // Datenpunkt für IconList Widget (Typ: Zeichenkette (String))
 
let dpSortMode = '0_userdata.0.vis.Fenster.Status.sortMode';      // Datenpunkt für Sortieren (Typ: Zeichenkette (String))
let dpFilterMode = '0_userdata.0.vis.Fenster.Status.filterMode';  // Datenpunkt für Filter (Typ: Zeichenkette (String))
 
const checkInterval = 30;                                         // Interval wie oft Status der Skripte aktualisiert werden soll (in Sekunden)
 
let sprache = 'de';                                               // Sprache für formatierung letzte Änderung
let formatierungLastChange = "ddd DD.MM - HH:mm";                 // Formatierung letzte Änderung -&gt; siehe momentjs library

let farbeFensterZu = 'green';                                  // Status Bar Farbe wenn Geräte online ist
let farbeFensterAuf = 'FireBrick';                             // Status Bar Farbe wenn Geräte offline ist

let sortResetAfter = 120;                                         // Sortierung nach X Sekunden auf sortReset zurücksetzen (0=deaktiviert)
let sortReset = 'name'                                         // Sortierung auf die zurückgesetzt werden soll
 
let filterResetAfter = 120;                                       // Filter nach X Sekunden zurücksetzen (0=deaktiviert)

// Ein Array welches alle Geräte beinhaltet, unterteilt noch nach Etagen:
var all_fenster_items = new Array ();

var iconPfad = '/vis-icontwo/Rooms/'

// ### Keller ####
var fenster = '';
var open = '0_userdata.0.vis.Fenster.Open';             //DP wann wurde das Fenster geöffnet
var toBeOpen = '0_userdata.0.vis.Fenster.ToBeOpen';     //DP wielange war das Fenster auf

all_fenster_items[0] = new Array();

// ### Erdgeschoss ###
fenster = 'bshb.0.hdm:HomeMaticIP:3014F711A000009A18592597';
var fenster_eg_schlafzimmer_1 = [
    fenster + '.ShutterContact.value',      	// [0] Geraete-ID
    1,                                          // [1] EtageID
    'Schlafzimmer',                             // [2] Raum
    'Schlafzimmer Links',                   	// [3] Kurzname
    iconPfad + 'bedroom1.png',                  // [4] VIS-Icon
    open + '.Schlafzimmer_Schrank',             // [5] Geöffnet  
    toBeOpen + '.Schlafzimmer_Schrank',	        // [6] wielange auf
    'Erdgeschoss'                               // [7] Etage Text
];

fenster = 'bshb.0.hdm:HomeMaticIP:3014F711A000009A18592781';
var fenster_eg_schlafzimmer_2 = [
    fenster + '.ShutterContact.value',      	// [0] Geraete-ID
    1,                                          // [1] EtageID
    'Schlafzimmer',                             // [2] Raum
    'Schlafzimmer Rechts',                      // [3] Kurzname
    iconPfad + 'bedroom1.png',                  // [4] VIS-Icon
    open + '.Schlafzimmer_Wand',                // [5] Geöffnet  
    toBeOpen + '.Schlafzimmer_Wand',            // [6] wielange auf
    'Erdgeschoss'                               // [7] Etage Text
];

fenster = 'bshb.0.hdm:HomeMaticIP:3014F711A000009A1858FA66'
var fenster_eg_toilette = [
    fenster + '.ShutterContact.value',      	// [0] Geraete-ID
    1,                                          // [1] EtageID
    'Toilette',                                 // [2] Raum
    'Toilette',                                 // [3] Kurzname
    iconPfad + 'bathroom2.png',                 // [4] VIS-Icon
    open + '.Toilette',                         // [5] Geöffnet  
    toBeOpen + '.Toilette',                     // [6] wielange auf
    'Erdgeschoss'                               // [7] Etage Text
];

fenster = 'bshb.0.hdm:HomeMaticIP:3014F711A000009A18587C9D'
var fenster_eg_kueche_1 = [
    fenster + '.ShutterContact.value',      	// [0] Geraete-ID
    1,                                          // [1] EtageID
    'Kueche',                                   // [2] Raum
    'Küche Rechts',                             // [3] Kurzname
    iconPfad + 'kitchen.png',                   // [4] VIS-Icon
    open + '.KuecheWand',                       // [5] Geöffnet  
    toBeOpen + '.KuecheWand',                   // [6] wielange auf
    'Erdgeschoss'                               // [7] Etage Text
];

fenster = 'bshb.0.hdm:HomeMaticIP:3014F711A000009A18597070'
var fenster_eg_kueche_2 = [
    fenster + '.ShutterContact.value',      	// [0] Geraete-ID
    1,                                          // [1] EtageID
    'Kueche',                                   // [2] Raum
    'Küche Links',                              // [3] Kurzname
    iconPfad + 'kitchen.png',                   // [4] VIS-Icon
    open + '.KuecheKuehlschrank',               // [5] Geöffnet  
    toBeOpen + '.KuecheKuehlschrank',           // [6] wielange auf
    'Erdgeschoss'                               // [7] Etage Text
];

fenster = 'bshb.0.hdm:HomeMaticIP:3014F711A000009A18590405'
var fenster_eg_wohnzimmer = [
    fenster + '.ShutterContact.value',      	// [0] Geraete-ID
    1,                                          // [1] EtageID
    'Wohnzimmer',                               // [2] Raum
    'TV-Wand',                                  // [3] Kurzname
    iconPfad + 'livingroom.png',                // [4] VIS-Icon
    open + '.Wohnzimmer',                       // [5] Geöffnet  
    toBeOpen + '.Wohnzimmer',                   // [6] wielange auf
    'Erdgeschoss'                               // [7] Etage Text
];

all_fenster_items[1] = new Array(
    fenster_eg_schlafzimmer_1,
    fenster_eg_schlafzimmer_2,
    fenster_eg_toilette,
    fenster_eg_kueche_1,
    fenster_eg_kueche_2,
    fenster_eg_wohnzimmer
);

// ### Obergeschoss ###
fenster = 'bshb.0.hdm:HomeMaticIP:3014F711A000009A185924F2'
var fenster_og_bad = [
    fenster + '.ShutterContact.value',      	// [0] Geraete-ID
    2,                                          // [1] EtageID
    'Bad',                                      // [2] Raum
    'Bad',                                      // [3] Kurzname
    iconPfad + 'bathroom3.png',                 // [4] VIS-Icon
    open + '.Bad',                              // [5] Geöffnet  
    toBeOpen + '.Bad',                          // [6] wielange auf
    'Obergeschoss'                              // [7] Etage Text
];

fenster = 'bshb.0.hdm:HomeMaticIP:3014F711A000009A185904C8'
var fenster_og_buero_1 = [
    fenster + '.ShutterContact.value',      	// [0] Geraete-ID
    2,                                          // [1] EtageID
    'Buero',                                    // [2] Raum
    'Büro Strasse',                             // [3] Kurzname
    iconPfad + 'office.png',                    // [4] VIS-Icon
    open + '.BueroStrasse',                     // [5] Geöffnet  
    toBeOpen + '.BueroStrasse',                 // [6] wielange auf
    'Obergeschoss'                              // [7] Etage Text
];

fenster = 'bshb.0.hdm:HomeMaticIP:3014F711A000009A1859254A'
var fenster_og_buero_2 = [
    fenster + '.ShutterContact.value',      	// [0] Geraete-ID
    2,                                          // [1] EtageID
    'Buero',                                    // [2] Raum
    'Büro Haustuer',                            // [3] Kurzname
    iconPfad + 'office.png',                    // [4] VIS-Icon
    open + '.BueroHaustuer',                    // [5] Geöffnet  
    toBeOpen + '.BueroHaustuer',                // [6] wielange auf
    'Obergeschoss'                              // [7] Etage Text
];

all_fenster_items[2] = new Array(
    fenster_og_bad,
    fenster_og_buero_1,
    fenster_og_buero_2
);

// **********************************************************************************************************************************************************************

// Fomate für moment Lib
moment.locale(sprache);

// auf Änderungen der Sortieung hören
on({ id: dpSortMode, change: 'any' }, fensterStatus);
on({ id: dpSortMode, change: 'any' }, resetSort);
 
// // auf Änderungen der Filter hören
on({ id: dpFilterMode, change: 'any' }, fensterStatus);
on({ id: dpFilterMode, change: 'any' }, resetFilter);
 
// Funktion adapterStatus alle x Sekunden ausführen
//schedule('*/' + checkInterval + ' * * * * *', fensterStatus);

on({id: 'bshb.0.hdm:HomeMaticIP:3014F711A000009A185904C8.ShutterContact.value', change: 'any' }, fensterStatus);
on({id: 'bshb.0.hdm:HomeMaticIP:3014F711A000009A18592597.ShutterContact.value', change: 'any' }, fensterStatus);
on({id: 'bshb.0.hdm:HomeMaticIP:3014F711A000009A18592781.ShutterContact.value', change: 'any' }, fensterStatus);
on({id: 'bshb.0.hdm:HomeMaticIP:3014F711A000009A1858FA66.ShutterContact.value', change: 'any' }, fensterStatus);
on({id: 'bshb.0.hdm:HomeMaticIP:3014F711A000009A18587C9D.ShutterContact.value', change: 'any' }, fensterStatus);
on({id: 'bshb.0.hdm:HomeMaticIP:3014F711A000009A18597070.ShutterContact.value', change: 'any' }, fensterStatus);
on({id: 'bshb.0.hdm:HomeMaticIP:3014F711A000009A18590405.ShutterContact.value', change: 'any' }, fensterStatus);
on({id: 'bshb.0.hdm:HomeMaticIP:3014F711A000009A185924F2.ShutterContact.value', change: 'any' }, fensterStatus);
on({id: 'bshb.0.hdm:HomeMaticIP:3014F711A000009A1859254A.ShutterContact.value', change: 'any' }, fensterStatus);

function fensterStatus() {

	try {

		let deviceList = [];
        
		for (var i = 0; i &lt;= all_fenster_items.length - 1; i++) {
			
            var etageArray = all_fenster_items[i];
			
            etageArray.forEach(function(element) {
                let buttonLink = '';

                let temp = element[5];
				//let open = getState(temp).val;
				let open = formatDate(getState(temp).val, "DD-MM-YYYY hh-mm");
                
				temp = element[6];
                let toBeOpen = getState(temp).val;
                let image = element[4];

				let listType = 'text';
				let imageColor = 'black';
				
                let statusBarColor = farbeFensterZu;
				let status = 1;				
				if (getState(element[0]).val === 'OPEN') {
					statusBarColor = farbeFensterAuf;
					status = 2;
				};
 
				let subText = `&lt;div style="display: flex; flex-direction: row; line-height: 1.3; padding-left: 1px; padding-right: 8px; align-items: center;"&gt;
                                    &lt;div style="flex: 1;"&gt;Etage:&lt;/div&gt;
                                    &lt;div style="color: grey; font-size: 14px; font-family: RobotoCondensed-LightItalic; text-align: right;"&gt;${element[7]}&lt;/div&gt;
                                &lt;/div&gt;
							   &lt;div style="display: flex; flex-direction: row; line-height: 1.3; padding-left: 1px; padding-right: 8px; align-items: center;"&gt;
                                    &lt;div style="flex: 1;"&gt;Raum:&lt;/div&gt;
                                    &lt;div style="color: grey; font-size: 14px; font-family: RobotoCondensed-LightItalic; text-align: right;"&gt;${element[2]}&lt;/div&gt;
                                &lt;/div&gt;
                               &lt;div style="display: flex; flex-direction: row; line-height: 1.3; padding-left: 1px; padding-right: 8px; align-items: center;"&gt;
                                    &lt;div style="flex: 1;"&gt;Geöffnet am:&lt;/div&gt;
                                    &lt;div style="color: grey; font-size: 14px; font-family: RobotoCondensed-LightItalic; text-align: right;"&gt;${open}&lt;/div&gt;
                                &lt;/div&gt;
                               &lt;div style="display: flex; flex-direction: row; line-height: 1.3; padding-left: 1px; padding-right: 8px; align-items: center;"&gt;
                                    &lt;div style="flex: 1;"&gt;Dauer:&lt;/div&gt;
                                    &lt;div style="color: grey; font-size: 14px; font-family: RobotoCondensed-LightItalic; text-align: right;"&gt;${toBeOpen}&lt;/div&gt;
                                &lt;/div&gt;`		 

				deviceList.push({
					text: element[3],
					subText: subText,
					statusBarColor: statusBarColor,
                    deviceName: element[0],
					image: image,
					imageColor: imageColor,
					listType: listType,
					buttonLink: buttonLink,
					showValueLabel: false,
					name: element[3],
                    etageid: element[1],
                    etage: element[7],
					status: status,
                    raum: element[2]                    
                });	
            });
        };
                
        let sortMode = myHelper().getStateValueIfExist(dpSortMode, 'name');
		if (sortMode === 'name') {
			deviceList.sort(function (a, b) {
				return a[sortMode].toLowerCase() == b[sortMode].toLowerCase() ? 0 : +(a[sortMode].toLowerCase() &gt; b[sortMode].toLowerCase()) || -1;
			});
		} else if (sortMode === 'etageid') {
			deviceList.sort(function (a, b) {
		    	return a[sortMode] == b[sortMode] ? 0 : +(a[sortMode] &lt; b[sortMode]) || -1;
			});
		} else {
			// default: nach name sortieren
			sortMode = 'name'
			deviceList.sort(function (a, b) {
				return a[sortMode].toLowerCase() == b[sortMode].toLowerCase() ? 0 : +(a[sortMode].toLowerCase() &gt; b[sortMode].toLowerCase()) || -1;
			});
		};                

		let filterMode = myHelper().getStateValueIfExist(dpFilterMode, null);
 
		if (filterMode &amp;&amp; filterMode !== null &amp;&amp; filterMode !== '') {

			if (filterMode === 'auf') {
				deviceList = deviceList.filter(function (item) {
					return item.status === 2;
				});
			} else if (filterMode === 'zu') {
				deviceList = deviceList.filter(function (item) {
					return item.status === 1;
				});
			}
		}
  
		let result = JSON.stringify(deviceList);
		    if (getState(dpList) !== result) {
				setState(dpList, result, true);
			}
	} catch (err) {
        console.error(`[FensterStatus] error: ${err.message}, stack: ${err.stack}`);
    }
}

function resetSort() {

    log("bin in resetsort");
    
    let sortMode = myHelper().getStateValueIfExist(dpSortMode, null);
 
    if (sortResetAfter &gt; 0) {
        setTimeout(function () {
            if (sortMode !== null &amp;&amp; sortMode === myHelper().getStateValueIfExist(dpSortMode, null)) {
                setState(dpSortMode, sortReset);
            };
        }, sortResetAfter * 1000);
    }
}
 
function resetFilter() {
    let filterMode = myHelper().getStateValueIfExist(dpFilterMode, null);
 
    if (filterResetAfter &gt; 0) {
        setTimeout(function () {
            if (filterMode !== null &amp;&amp; filterMode === myHelper().getStateValueIfExist(dpFilterMode, null)) {
                setState(dpFilterMode, '');
            };
        }, filterResetAfter * 1000);
    }
}

// Beim Staren des Skriptes Geraete Status abrufen
fensterStatus();
 
function myHelper() {
    return {
        getStateValueIfExist: function (id, nullValue = undefined, prepand = '', append = '') {
            if (existsState(id)) {
                return prepand + getState(id).val + append;
            } else {
                return nullValue;
            }
        },
        getCommonPropertyIfExist: function (object, prop, nullValue = undefined, prepand = '', append = '') {
            if (myHelper().checkCommonPropertyExist(object, prop)) {
                return prepand + object.common[prop] + append;
            } else {
                return nullValue;
            }
        },
        checkCommonPropertyExist: function (object, prop) {
            if (object &amp;&amp; object.common &amp;&amp; object.common[prop]) {
                return true;
            } else {
                return false;
            }
        }
    }
}
</code></pre>
<p dir="auto">Filtern nach ist OK.</p>
<p dir="auto">Sortieren nach<br />
1 Fenster OK<br />
2 Etage	mein Problem</p>
<p dir="auto">Es wird nach Etagen sortiert (siehe Bild) aber ich möchte es so haben:</p>
<p dir="auto">Keller		Keller		Keller		<br />
Erdgeschoss	Erdgeschoss	Erdgeschoss	Erdgeschoss	Erdgeschoss	Erdgeschoss<br />
Erdgeschoss	<br />
Obergeschoss	Obergeschoss	Obergeschoss	Obergeschoss	Obergeschoss	Obergeschoss<br />
Dachgeschoss	Dachgeschoss</p>
<p dir="auto">Dafür habe ich "EtageID" in die Struktur aufgenommen, wonach bei Auswahl "Sortiert nach ETAGE" sortiert werden sollte<br />
und wie oben dargestellt ausgegeben werden sollte.</p>
<p dir="auto">Wie sieht die Sortieranweisung aus?</p>
<p dir="auto">Ich hoffe mich einiger Massen verständlich ausgedrückt zu haben, ansonsten ich bin ein absoluter Java Skript-Neuling.<br />
Das Skript habe ich aus mehreren Teilen, die hier im Forum gezeigten wurden, zusammen gebaut.<br />
Auch für Vorschläge wie das Skript besser werden kann, bitte ich um Hilfe.</p>
<p dir="auto">Danke für Eure Hilfe</p>
<p dir="auto">MfG<br />
Wastl</p>
]]></description><link>https://forum.iobroker.net/topic/42850/material-design-und-javaskript</link><generator>RSS for Node</generator><lastBuildDate>Tue, 28 Apr 2026 14:42:27 GMT</lastBuildDate><atom:link href="https://forum.iobroker.net/topic/42850.rss" rel="self" type="application/rss+xml"/><pubDate>Wed, 03 Mar 2021 09:20:44 GMT</pubDate><ttl>60</ttl></channel></rss>