Autor Thema: JS Menü-Punkte gruppieren  (Gelesen 630 mal)

Offline DanielS

  • New Member
  • *
  • Beiträge: 48
JS Menü-Punkte gruppieren
« am: 14 März 2017, 19:30:04 »
Moin moin,

Falls es sowas schon gibt und ich hier offene Türen einrenne, bitte ich das hiermit zu entschuldigen. Andernfalls... enjoy:
$(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 attr WEB JavaScripts pgm2/daniels.js gesetzt.

Ich hoffe ihr findet gefallen an dieser Bastelei...

VG
 Daniel










Offline sash.sc

  • Sr. Member
  • ****
  • Beiträge: 937
Antw:JS Menü-Punkte gruppieren
« Antwort #1 am: 14 März 2017, 21:26:15 »
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
Raspi 2  Jessie aktuell; IT , div. TFA 433 MHz;div. TX29 DTH; HomeMatic; 1x TX 29 als Lichtsensor umgebaut;ESP8622 ;nanoCUL a-fw (433 & 868 MHz);minCULwlan; WLANduino; MySensors

Offline DanielS

  • New Member
  • *
  • Beiträge: 48
Antw:JS Menü-Punkte gruppieren
« Antwort #2 am: 15 März 2017, 15:08:59 »
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

Offline DeeSPe

  • Developer
  • Hero Member
  • ****
  • Beiträge: 2992
  • Wer anderen eine Bratwurst brät...
Antw:JS Menü-Punkte gruppieren
« Antwort #3 am: 15 März 2017, 15:44:02 »
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... ;)
« Letzte Änderung: 15 März 2017, 15:47:46 von DeeSPe »
FHEM 5.8, Brix, VIVO mini, RPi3, Debian Jessie, ZME_UZB1
HM-CFG-LAN, HM-MOD-UART-WIFI, HUE, HarmonyHub, JeeLink, CO20
Hyperion auf RPi Zero W, Sonos, viel Z-Wave und HM
alles per HomeKit steuerbar
MAINTAINER: 22_HOMEMODE, 98_Hyperion, 98_FileLogConvert

Offline carlos

  • Full Member
  • ***
  • Beiträge: 145
Antw:JS Menü-Punkte gruppieren
« Antwort #4 am: 15 März 2017, 16:30:18 »
Also bei mir funktioniert es auch nicht.
Habe auch schon Default, Dark und Bright probiert.
Gehen alle nicht.
Gruß

Carlos
1 UDOO, 3 Raspberry Pi, Add-On Board mit 1.8" TFT LCD und IR-Sender, FHEM V5.7, nanoCUL V 1.21.00 a-culfw, signalduino, div. Homematic Komponenten, toom Baumarkt Funksteckdosen

Offline DanielS

  • New Member
  • *
  • Beiträge: 48
Antw:JS Menü-Punkte gruppieren
« Antwort #5 am: 15 März 2017, 17:01:04 »
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 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

Offline DeeSPe

  • Developer
  • Hero Member
  • ****
  • Beiträge: 2992
  • Wer anderen eine Bratwurst brät...
Antw:JS Menü-Punkte gruppieren
« Antwort #6 am: 15 März 2017, 17:40:30 »
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... 8)
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! 8)
Andere fühlen sich bei solchen Aussagen schnell mal auf "den Schlips getreten".

Gruß
Dan
FHEM 5.8, Brix, VIVO mini, RPi3, Debian Jessie, ZME_UZB1
HM-CFG-LAN, HM-MOD-UART-WIFI, HUE, HarmonyHub, JeeLink, CO20
Hyperion auf RPi Zero W, Sonos, viel Z-Wave und HM
alles per HomeKit steuerbar
MAINTAINER: 22_HOMEMODE, 98_Hyperion, 98_FileLogConvert

Offline DanielS

  • New Member
  • *
  • Beiträge: 48
Antw:JS Menü-Punkte gruppieren
« Antwort #7 am: 15 März 2017, 18:18:01 »
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. ;D


Offline DeeSPe

  • Developer
  • Hero Member
  • ****
  • Beiträge: 2992
  • Wer anderen eine Bratwurst brät...
Antw:JS Menü-Punkte gruppieren
« Antwort #8 am: 15 März 2017, 18:47:24 »
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. ;D

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
FHEM 5.8, Brix, VIVO mini, RPi3, Debian Jessie, ZME_UZB1
HM-CFG-LAN, HM-MOD-UART-WIFI, HUE, HarmonyHub, JeeLink, CO20
Hyperion auf RPi Zero W, Sonos, viel Z-Wave und HM
alles per HomeKit steuerbar
MAINTAINER: 22_HOMEMODE, 98_Hyperion, 98_FileLogConvert

Offline sash.sc

  • Sr. Member
  • ****
  • Beiträge: 937
Antw:JS Menü-Punkte gruppieren
« Antwort #9 am: 16 März 2017, 10:57:28 »
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
Raspi 2  Jessie aktuell; IT , div. TFA 433 MHz;div. TX29 DTH; HomeMatic; 1x TX 29 als Lichtsensor umgebaut;ESP8622 ;nanoCUL a-fw (433 & 868 MHz);minCULwlan; WLANduino; MySensors

Offline jvbsh

  • Newbie
  • Beiträge: 1
Antw:JS Menü-Punkte gruppieren
« Antwort #10 am: 31 Mai 2017, 17:23:20 »
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 var list = $("a[href*='?room=']").parents("table:first"); statt 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:

$(document).ready(function(){

var sep = ':';

var list = $("a[href*='?room=']").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
 

 

decade-submarginal