JS Menü-Punkte gruppieren

[DanielS]

Moin moin,

Falls es sowas schon gibt und ich hier offene Türen einrenne, bitte ich das hiermit zu entschuldigen. Andernfalls... enjoy:

Code Auswählen Erweitern


$(document).ready(function(){
var list = $('table.roomBlock2');
var groups = {};

list.find('td').each(function(index) {
var a = $(this).find('a');
var a_name = a.html();
var a_href = a.attr('href');
var tr = $(this).parent();

var room = a_name.split(/--/);
if (room.length > 1) {
x = room[0].match(/(<svg.*?\/svg>)&nbsp;(.*)$/);
if(x.length > 1) {
icon = x[1];
group_name = x[2];
} else {
icon = '';
group_name = room[0];
}
if (!groups[group_name]) {
tr.before('<tr id="' + group_name + '" class="group"><td>' + group_name + '</td></tr>');
groups[group_name] = group_name;
}

a.html(a_name.replace(group_name+'--', '&nbsp;'));
tr.attr("group",group_name);
tr.hide();
}
});

$('.sel').each(function(e) {
group_name = $(this).attr("group");
$('*[group="' + group_name + '"]').toggle();
});

$('.group').bind('click', function(e){
group_name = $(this).attr("id");
$('*[group="' + group_name + '"]').toggle();
});

});

Dieser JS Code gruppiert alle Räume unter einem Oberpunkt über den diese ein- und  ausgeblendet werden können. Voraussetzung ist, daß die Räume folgendem Namensschema folgen: <Gruppenname>--<NameDesRaumes>

Anders gesagt: Richtet man "Räume--Schlafzimmer","Räume--Wohnzimmer" und"Räume--Badezimmer" ein, so sieht man zunächst nur den Punkt "Räume". Klickt man darauf blättern sich darunter "Schlafzimmer", "Wohnzimmer" und "Badezimmer" auf. Siehe hier:http://imgur.com/a/FG3wh

Inspiriert ist dies von https://blog.krannich.de/2017/02/neue-visualisierung-fuer-fhem/

Allerdings habe ich bewußt drauf verzichtet, die Navigation neu aufzubauen  und habe versucht das in die bestehende Struktur einzubinden, damit man weiterhin zwischen den verschieden Styles wechseln kann. Desweiteren habe ich noch dafür gesorgt, daß das Script auch noch funktioniert, wenn man roomIcons verwendet. Das brachte das Originalskript aus dem Tritt.

Es muss lediglich das Javascript eingebunden werden. In meinem Fall liegt es unter dem Names "daniels.js" und "fhem/www/pgm2/". Dann habe ich

Code Auswählen Erweitern

attr WEB JavaScripts pgm2/daniels.js gesetzt.

Ich hoffe ihr findet gefallen an dieser Bastelei...

VG
Daniel

[sash.sc]

Hallo Daniel.

Habe es mal ausprobiert. Deinen Code in Notepad++ kopiert und gespeichert. Dateiendung .js, ab ins entsprechende Verzeichniss auf dem PI und Rechte vergeben. Im WEB mit JavaScript das Attribut gesetzt.

Funktioniert leider nicht.

Eine Idee ?

Gruß
Sascha

[DanielS]

Moin Sascha,

Dreh und Angelpunkt des ganzen Scriptes ist, daß die Raumnamen ein doppeltes Minus ("--") enthalten. Sind deine Räume entsprechend benannt? Das wäre jetzt der erste Ansatzpunkt, den ich hätte.

Desweiteren ist es für die Menüstruktur des Default-Skins gedacht. Funktioniert aber auch mit "Dark" und "Bright". Also falls die Menü-Struktur anders aussieht, kann es auch daran liegen.

Das ist beides jetzt aber erstmal ins Dunkele geraten.

VG

[DeeSPe]

Beachtet das Skript auch die Sortierung aus sortRooms?
Im verlinkten Beitrag sortiert das Skript ja stur nach Alphabet.

Warum die Gerätename angepasst werden müssen für die "Eingruppierung" ist mir auch ein Rätsel.
Das kann ein extrem hoher Aufwand sein in einem jahrelang gewachsenen System, denn es muss dann auch an allen anderen Stellen (notify(s), DOIF(s), eigene Funktionen, usw.) der Name geändert werden. Manchmal ist es vielleicht sogar gar nicht möglich den Namen zu ändern, da diese evtl. an andere Module gekoppelt sind und einem bestimmten Namensschema entsprechen müssen.
Wieso kein eigenes Attribut (userattr) für die Gruppierung benutzen, welches man dann entweder per Devspec gleich auf alle Devices oder nur auf bestimmte zuweisen kann!?

Ich sehe in der jetzigen Version leider keinen wirklichen Mehrwert, außer mehr Aufwand um dann mit der alphabetischen Sortierung leben zu müssen.

Gruß
Dan

EDIT: Sorry für's Spielverderber spielen...

[carlos]

Also bei mir funktioniert es auch nicht.
Habe auch schon Default, Dark und Bright probiert.
Gehen alle nicht.
Gruß

Carlos

[DanielS]

Ahoy,

Also das Skript formatiert lediglich die vorhandene HMTL Ausgabe um. Es wird nicht sortiert, sondern die Reihenfolge übernommen, wie sie aus FHEM kommt.

Was den Punkt angeht, daß das schwer in ein vorhandenes System zu integrieren ist, bin ich bei dir. Der Gerätename muss aber nicht geändert werden, sondern "nur" das "room" Attribut. (Hab mich da vielleicht auch blöd ausgedrückt). Somit bleiben notify, DOIF, etc unangetastet. Mit

Code Auswählen Erweitern

attr room=<alter Name> room <neuer name> sollte das gehen. Ich danke aber auch, daß das evtl zu kompliziert sein könnte bestehende Systeme anzupassen.

Ich bin ja auch noch recht frisch dabei und mir hatte es ein wenig geholfen mehr Übersicht zu bekommen. Und da dachte ich teile ich das mal. Ganz so einfach scheint es ja aber doch nicht zu sein.

Mit userattr hab ich mich noch nicht beschäftigt... bin wie gesagt noch frisch dabei.

Apropos Spielverderber: das war doch eine echt konstruktive Kritik. Damit sollte doch jeder leben können. ich kann es es auf jeden Fall. 

VG

[DeeSPe]

Also das Skript formatiert lediglich die vorhandene HMTL Ausgabe um. Es wird nicht sortiert, sondern die Reihenfolge übernommen, wie sie aus FHEM kommt.

Was den Punkt angeht, daß das schwer in ein vorhandenes System zu integrieren ist, bin ich bei dir. Der Gerätename muss aber nicht geändert werden, sondern "nur" das "room" Attribut. (Hab mich da vielleicht auch blöd ausgedrückt). Somit bleiben notify, DOIF, etc unangetastet.

Das ist gut dass es die Reihenfolge behält.
Finde es allerdings trotzdem zu kompliziert die ganzen Raumnamen anpassen zu müssen. Wie gesagt, ein userattr (z.B. roomGroup) an dieser Stelle wäre sicher sinnvoller, dann könntest Du dieses Value als Gruppennamen nehmen. Vor allem wenn man das Ganze nur mal ausprobieren will ohne gleich seine ganze vorhandene Raumnamenstruktur komplett über den Haufen werfen zu müssen.

Ich bin ja auch noch recht frisch dabei und mir hatte es ein wenig geholfen mehr Übersicht zu bekommen. Und da dachte ich teile ich das mal. Ganz so einfach scheint es ja aber doch nicht zu sein.

Drum versuche ich Dich ja in eine möglicherweise bessere Richtung zu schubsen...
Um solche Sachen zu integrieren sollte einem das ganze Ausmaß derer bewusst sein.

Apropos Spielverderber: das war doch eine echt konstruktive Kritik. Damit sollte doch jeder leben können. ich kann es es auf jeden Fall. 

So war es gemeint und schön dass Du es so siehst!
Andere fühlen sich bei solchen Aussagen schnell mal auf "den Schlips getreten".

Gruß
Dan

[DanielS]

Könnte es auch sein, mal ganz vorsichtig gefragt, daß man hier unter Codeschnipsel eher was posten sollte, mit dem man meint FHEM sinnvoll erweitern zu können? Dann wäre ich nämlich ordentlich auf dem Holzweg gewesen... 

Das Skript war nur als harmlose Bastelei gedacht und hatte in keinster weise  den Anspruch reif zu sein für eine offizielle Absegnung. Daher ja auch schnödes Javascript und kein Perl-Code. 

Sollte ich mich da verrannt haben und den Eindruck habe ich, bitte ich das zu entschuldigen.

[DeeSPe]

Könnte es auch sein, mal ganz vorsichtig gefragt, daß man hier unter Codeschnipsel eher was posten sollte, mit dem man meint FHEM sinnvoll erweitern zu können? Dann wäre ich nämlich ordentlich auf dem Holzweg gewesen... 

Das Skript war nur als harmlose Bastelei gedacht und hatte in keinster weise  den Anspruch reif zu sein für eine offizielle Absegnung. Daher ja auch schnödes Javascript und kein Perl-Code. 

Sollte ich mich da verrannt haben und den Eindruck habe ich, bitte ich das zu entschuldigen.

Was Du hier unter Codeschnipsel postest unterliegt soweit ich weiß keinerlei Auflagen.
Schön wäre es trotzdem wenn es nicht nur bei Dir funktioniert, sondern möglichst bei allen!

Gruß
Dan

[sash.sc]

Halli Hallo Hallöle.

habe es jetzt auch nochmal ausprobiert unter verschiedenen Themes.
Es klappt nicht. (siehe Bild)

Ich denke auch, dass es vielleicht besser ist, ein zusätzliches Attribut oder so, einzuführen, indem man die Gruppierung festlegt.

Gruß
Sascha

[jvbsh]

Das ist gerade was ich gesucht habe! Hat erstens nicht funktioniert, da bei mir die Räume nicht im roomBlock2 sind, sondern in roomBlock3! Das war jedoch einfach abzuändern... Funktioniert jezt unter verschiedenen Themen wunderschön!

Mit

Code Auswählen Erweitern

var list = $("#menu a[href*='?room=']:last").parents("table:first"); statt

Code Auswählen Erweitern

var list = $('table.roomBlock2'); wird das richtige roomBlock eben automatisch gefunden.

Bei mir ist der Namenschema <Gruppenname>:<Raumname>, ich habe deswegen der Separator flexibilisiert. Und die Gruppenname-Angabe etwas schöner gemacht; eigentlich sollte das mittels eine Klasse 'group' in einem Style-sheet gemacht werden ...

Schaut insgesamt jetzt so aus:

Code Auswählen Erweitern

$(document).ready(function(){

var sep = ':';

var list = $("#menu a[href*='?room=']:last").parents("table:first");

if (list.length !== 0) {

var groups = {};
var group_name;

list.find('td').each(function(index) {
var a = $(this).find('a');
var a_name = a.html();
var a_href = a.attr('href');
var tr = $(this).parent();

var room = a_name.split(sep);

if (room.length > 1) {

var x;
var icon;
if (x = room[0].match(/(<svg.*?\/svg>)&nbsp;(.*)$/) && x.length > 1) {
icon = x[1];
group_name = x[2];
} else {
icon = '';
group_name = room[0];
}
if (!groups[group_name]) {
tr.before('<tr id="' + group_name + '" class="group" style="cursor: pointer"><td><div class="menu_' + group_name + '"><a><b>' + group_name + '</b></a></div></td></tr>');
groups[group_name] = group_name;
}

a.html(a_name.replace(group_name+sep, '&nbsp;'));
tr.attr("group",group_name);
tr.hide();
}
});

$('.sel').each(function(e) {
group_name = $(this).attr("group");
$('*[group="' + group_name + '"]').toggle();
});

$('.group').bind('click', function(e){
group_name = $(this).attr("id");
$('*[group="' + group_name + '"]').toggle();
});
}
});

Gruppen sind leicht in WEB mittels sortRooms zu sortieren; innerhalb eine Gruppe sind die Räume alfabetisch sortiert.

Noch Achtung darauf unter welchem Name es abgespeichert wird: under dem Name fhemweb* in  "fhem/www/pgm2/" wird die Code beim Neustart automatisch eingebunden. Wenn dann auch noch ein "attr WEB JavaScripts pgm2/fhemweb*" definiert ist, wird die Code zweimal geladen, wodurch beim Clicken auf den Gruppenname die Räume ein- und  ausgeblendet werden, und die Code somit nicht erscheint zu funktionieren...

Grüße,

Jason

[peterboeckmann]

Hallo zusammen,

ich habe die obigen Ansätze nochmal ein wenig weiter entwickelt und (aus meiner Sicht) verfeinert.
Optimiert ist das ganze für den dark Skin. Die css-Styles lassen sich auch recht einfach an andere Skins anpassen.

Wie das Ganze bei mir aussieht, könnt ihr im Anhang screenshot.png sehen.

Wenn ihr es nachbauen wollt, müsst ihr:

• den Anhang raumbaum.zip herunterladen und den Inhalt im Ordner /opt/fhem/www/raumbaum/ auf dem Raspi ablegen
• zwei Attribute am device "WEB" anpassen:

Code Auswählen Erweitern


attr WEB JavaScripts raumbaum/raumbaum.js (ggf. weitere mit Leerzeichen getrennt)
attr WEB CssFiles raumbaum/raumbaum.css (ggf. weitere mit Leerzeichen getrennt)


• der größte Aufwand: die Räume umbenennen, die eine Gruppe ergeben sollen. In meinem Beispiel heißt der markierte Raum "Dachgeschoss--Büro".

Wie im Screenshot am Raum "Alarmanlage" zu erkennen ist, müssen nicht alle Räume nach dem Schema benannt werden.
Die Sortierung der Gruppen und Räume kann ganz normal über das attr WEB sortRooms ... vorgenommen werden.
Zu beachten ist, dass die Räume auch im attr WEB column ... und überall sonst umbenannt werden müssen.

Viel Spaß damit!

Gruß,
Peter


Edit: Ich habe in der angehängten raumbaum.zip die raumbaum.js nochmal ausgetauscht. Da war ein Javascript-Fehler drin, wenn man einen Raum angeklickt hat, der nicht in eine Gruppe liegt.

[Amenophis86]

@peterboeckmann:
Ich habe es gerade versucht, aber es klappt bei mir leider nicht. Hier ein list des WEB:

Code Auswählen Erweitern

Internals:
   CONNECTS   9
   CSRFTOKEN  csrf_615784324602858
   DEF        8093 global
   FD         6
   NAME       WEB
   NR         5
   NTFY_ORDER 50-WEB
   PORT       8093
   STATE      Initialized
   TYPE       FHEMWEB
Attributes:
   CssFiles   raumbaum/raumbaum.css
   JavaScripts codemirror/fhem_codemirror.js input/jquery-input-history.js raumbaum/raumbaum.js
   menuEntries restart,cmd=shutdown+restart,update,cmd=update,updatecheck,cmd=update+check,reloadMyUtils,cmd=reload+99_myUtils.pm,CodeImport,/fhem?detail=Import#
   stylesheetPrefix dark

Rechte im Ordner:

Code Auswählen Erweitern

-rw-r--r--  1 fhem dialout  445 Sep 27 20:13 menu_close.svg
-rw-r--r--  1 fhem dialout  445 Sep 27 20:13 menu_closeWhite.svg
-rw-r--r--  1 fhem dialout  445 Sep 27 20:13 menu_open.svg
-rw-r--r--  1 fhem dialout  445 Sep 27 20:13 menu_openWhite.svg
-rw-r--r--  1 fhem dialout  710 Sep 27 20:13 raumbaum.css
-rw-r--r--  1 fhem dialout 1922 Sep 27 20:13 raumbaum.js


Test Device:

Code Auswählen Erweitern

Internals:
   CFGFN
   NAME       test
   NR         54
   STATE      ???
   TYPE       dummy
Attributes:
   room       Test--Test1 Internals:
   CFGFN
   NAME       test
   NR         54
   STATE      ???
   TYPE       dummy
Attributes:
   room       Test--Test1 

Und angezeigt wird im Menü nur Test-Test1

Was mache ich falsch?

[JoWiemann]

Hallo,

im html wird bei mir der Raum als "/fhem?room=CUL%2d%2dEM" dargestellt. Kann das mit var room = a_name.split(/--/); im js überhaupt funktionieren?

Weiterhin sind bei mir die Räume im 'table.roomBlock2' aufgelistet. Somit funktioniert es wenn ich

   var list = $('table.roomBlock3');

durch

   var list = $('table.roomBlock2');

ersetze.



Grüße Jörg

[Amenophis86]

Ah, er hat noch Floorplan als eigenen Roomblock, welchen in nicht habe. Vermutlich liegt es daran bei mir. Muss ich heute Abend mal testen. Danke für den Hinweis Jörg.