Vorschlag - neues FHEMWEB Widget zur Sortierung von Values

[Markus Bloch]

Hallo zusammen,

ich stehe beim FB_CALLMONITOR aktuell vor einem Problem. Ich möchte gerne eine Möglichkeit anbieten mit der man als Attribut eine Reihenfolge von vorgegebenen Werten einstellen kann. Es geht im speziellen Fall um die Rückwärtssuche. Der User soll einstellen können, wie die Rückwärtssuche ablaufen soll (zuerst Telefonbuch, dann Cache und anschließend Internetabfrage). Dazu habe ich mir überlegt ein neues Widget zu bauen, mit denen man vorgegebene (und eigene) Werte graphisch sortieren kann (so wie: http://jqueryui.com/sortable/).

Dazu hatte ich gedacht folgende Widgets mit Hilfe von jquery-ui zu bauen:

- ein Widget was aus aus freien Werten bestückt werden kann und alle hinzugefügten Werte dann entsprechend sortieren und Elemente löschen kann.
- ein Widget was aus einer vorgegebenen Liste nur diese Werte zur Sortierung anbietet (evtl. mit der Möglichkeit nicht alle Werte verwenden zu müssen; ähnlich zu: http://jqueryui.com/sortable/#empty-lists)

Bevor ich aber das Wochenende dafür draufgehen lass, möchte ich gerne eure Meinung dazu hören, ob das überhaupt sinnvoll ist, oder nicht. Evtl. kann man das auch an anderen stellen nutzen, wo man bereits Werte einsortieren muss.

Das Ergebnis wäre dann eine kommaseparierte Werteliste von links nach rechts aufsteigend sortiert.

Was haltet ihr davon?

Vielen Dank

Gruß
Markus

[rudolfkoenig]

Ich gehe davon aus, dass wenn man Eintraege entfernen kann, dann man auch welche hinzufuegen will.
Vielleicht kann man sortable mit dem multiple widget verheiraten.

[Markus Bloch]

Natürlich, sonst macht das recht wenig Sinn. Ich würde es aber jetzt nicht direkt als Ablöse für multiple sehen, auch wenn es deren Funktion impliziert.

[Markus Bloch]

Hallo zusammen,

hier mal der erste Versuch.

Es gibt 3 verschiedene Widgets:

• sortable - Ermöglicht das einfügen und sortieren von vorgegeben Werten als auch von selbst hinzugefügten Werten.
• sortable-strict - Ermöglicht das einfügen und sortieren von ausschließlich vorgegeben Werten (es müssen nicht alle Werte benutzt werden)
• sortable-given - Ermöglicht nur das sortieren von ausschließlich vorgegeben Werten (es können keine Werte entfernt oder hinzugefügt werden)

Das Widget benötigt ein paar CSS-Statements die ich aktuell direkt im Javascript untergebracht habe, damit es einfacher zu testen ist. Getestet wurden die CSS-Settings mit dem default-Theme.

Ich habe zum testen bei mir folgende dummy-Definition angelegt:

Code Auswählen Erweitern

define test dummy
attr test userattr sortable:sortable,foo,bar,apple,banana sortable-given:sortable-given,foo,bar,apple,banana sortable-strict:sortable-strict,foo,bar,apple,banana sortable-empty-list:sortable
attr test setList sortable:sortable,foo,bar,apple,banana sortable-given:sortable-given,foo,bar,apple,banana sortable-strict:sortable-strict,foo,bar,apple,banana sortable-empty-list:sortable

Man kann die Elemente in der Liste hin und her schieben. Es werden nach jeder Änderung die entsprechende Nummer davor geschrieben. Elemente können einmal durch schieben hinzugefügt werden oder durch klicken auf das entsprechende Element in der "available"-Liste. Gelöscht werden können Elemente durch klick auf das rote X. Jenachdem ob sie manuellen Ursprungs sind, oder zu den verfügbaren Elementen gehören wird das Element wieder in die "available"-Liste verschoben oder eben direkt gelöscht.

Wo ich noch Probleme habe ist mit den Icons in jquery. Ich würde gerne für die Links zum löschen und hinzufügen Symbole aus der jquery-Welt nutzen, allerdings funktioniert das bei mir nicht so einfach, wie es in der Doku steht. Evtl. kann mir hier jemand einen Tipp geben.

Zum testen einfach das angehangene .js-File nach www\pgm2 kopieren und anschließend einen "shutdown restart" durchführen.

Bei Farbe und Design habe ich erstmal das erst beste genommen. Wenn jemand hier Vorschläge hat, immer her damit.

Bin gespannt, was ihr dazu sagt.

Viele Grüße

Markus

[Markus Bloch]

Hallo zusammen,

nachdem Rudi ein Update von jquery/jquery-ui samt vollständiger Icon List eingecheckt hat, habe ich mich nochmal rangemacht an die Icons. Nun funktionieren die Icons perfekt und ich habe das sortable-Widget entsprechend angepasst.

Dazu habe ich noch ein paar kleinere Fehler behoben.

Änderungen sind seit der initialen Version:

- Beim hinzufügen von Freitextelemente werden kommagetrennte Werte als jeweils einzelne Items erkannt.
- Eingabeprüfung, ob überhaupt ein Text eingegeben wurde bevor ein Item hinzugefügt wird.
- Löschen Icon nun von jquery verwendet
- leichte Style-Anpassungen
- CSS Statements auf Minimum reduziert

Aus meiner Sicht währe das Widget an sich fertig. Man müsste jetzt noch die CSS Definitionen an die entsprechenden Themes anpassen die in FHEM aktuell existieren (primär wegen Farben).

Sofern das Widget an sich in der Funktionalität und Aufbau eurer Meinung nach passt, würde ich die entsprechenden CSS Definitionen für die Themes erstellen und dann ein gesammeltes Diff erzeugen.

Viele Grüße

Markus

[Markus Bloch]

Hallo zusammen,

anbei ein kompletter Patch inkl. CSS für default- und dark-Style (ios-Styles habe ich bewusst ausgelassen, weil ich dazu vorher Sandra kontaktieren würde), sowie FHEMWEB-commandref und natürlich dem js-File.

Würde mich freuen, wenn das eingecheckt werden würde.

Vielen Dank

Gruß
Markus

[fhainz]

iOS7 Style kannst gerne mit aufnehmen, wenn du das möchtest.

[rudolfkoenig]

Habs eingecheckt, vorher die englische Beschreibung umformatiert.
Bei mir sind die Loesch-Buttons deplaziert, siehe Screenshot.

[Markus Bloch]

Welchen Browser nutzt du? Bei mir mit Firefox und Chrome sieht es entsprechend meiner Screenshots aus.

[rudolfkoenig]

In Chrome schaut auch bei mir richtig aus, Firefox 35 und 37 hat aber das gezeigte Problem. Merkwuerdig.

[Markus Bloch]

Ich schau es mir an und melde mich

[Markus Bloch]

Anbei ein Patch für die verschobenen delete-Links in FF sowie die CSS Definitionen für ios7 Style.

Der Übeltäter war white-space: nowrap;

Gruß
Markus

[rudolfkoenig]

Jetzt stimmt es im Firefox, habs auch eingecheckt.

[Markus Bloch]

Vielen Dank. Ich hab gesehen, dass Andre als Maintainer für fhemweb_uzsu.js eingetragen ist. Würde ich ebenfalls für fhem_sortable.js anbieten, falls du das möchtest.

Gruß
Markus

[rudolfkoenig]

gerne