mcm1957
commented
2 weeks ago Open oweitman opened 2 weeks ago
mcm1957
commented
2 weeks ago 
oweitman
commented
2 weeks ago das sind tabs
ich spreche von Tabelle
mcm1957
commented
2 weeks ago Jep - sorry, ungenau gelesen.
simatec
commented
2 weeks ago Finde ich einen guten Vorschlag... Kannst du dazu bitte ein Issue im Admin (jsonConfig) aufmachen?
Jey-Cee
commented
2 weeks ago Cards Klingt zwar im ersten Augenblick Sinnvoll, aber eine Karte ist ein für sich Stehendes Element und abgegrenzt von anderen. Deswegen sehe ich hier eher Accordion, da die Elemente so Optisch auch weiterhin Zusammen bleiben.
oweitman
commented
2 weeks ago Der Haupteffekt von Akkordeon ist ja das auf und zuklappen von Elementen. Falls das opttische zusammenhängen der Elemente wichtig ist, könnte man das mit kleinem oder mit entsprechenden Rahmen optisch schon darstellen. Hier mal ein optischer Vergleich wie ich das in einem meiner Adapter gelöst habe. Das ist allerdings eine Customkomponente und nicht direkt jsonConfig, aber daher habe ich die Idee
Darstellung mit MD
Darstellung SM
Darstellung XS
Auch denke ich, stehen die Informationen ja nicht frei schwebend im Raum, sondern ergibt sich der Sinn schon aus der Anwendung (hoffentlich)
oweitman
commented
1 week ago ok, ein erster draft ist fertig. zum testen müssen folgende Schritte durchgeführt werden: 1) Klonen des folgenden Repos in einen Ordner https://github.com/oweitman/ioBroker.admin 2) Den Anweisungen in https://github.com/oweitman/ioBroker.admin/blob/master/DEVELOPER.md im Kapitel Getting started folgen um alle Packete zu installieren und den Admin-Adapter dann mit npm run start laufen zu lassen 3) ein zusätzliches vscode fenster öffnen und dortmit dem iobroker create adapter skript einen neuen adapter in einem separaten ordner erzeugen, bei dem jsonconfig im admin verwendet werden kann. 4) einfügen von Testdaten in io-package.json im knoten native, ich habe die folgenden verwendet:
{
"option1": true,
"option2": "42",
"mydata": [{
"f1": "1f1f1f1f1f1",
"f2": "f2f2f2f2f2",
"f3": "f3f3f3f3f3",
"f4": "f4f4f4f4f4",
"f5": "f5f5f5f5f5",
"f6": "f6f6f6f6f6",
"f7": "f7f7f7f7f7",
"f8": "f8f8f8f8f8",
"f9": "f9f9f9f9f9"
}, {
"f1": "2f1f1f1f1f1",
"f2": "f2f2f2f2f2",
"f3": "f3f3f3f3f3",
"f4": "f4f4f4f4f4",
"f5": "f5f5f5f5f5",
"f6": "f6f6f6f6f6",
"f7": "f7f7f7f7f7",
"f8": "f8f8f8f8f8",
"f9": "f9f9f9f9f9"
}, {
"f1": "3f1f1f1f1f1",
"f2": "f2f2f2f2f2",
"f3": "f3f3f3f3f3",
"f4": "f4f4f4f4f4",
"f5": "f5f5f5f5f5",
"f6": "f6f6f6f6f6",
"f7": "f7f7f7f7f7",
"f8": "f8f8f8f8f8",
"f9": "f9f9f9f9f9"
}, {
"f1": "4f1f1f1f1f1",
"f2": "f2f2f2f2f2",
"f3": "f3f3f3f3f3",
"f4": "f4f4f4f4f4",
"f5": "f5f5f5f5f5",
"f6": "f6f6f6f6f6",
"f7": "f7f7f7f7f7",
"f8": "f8f8f8f8f8",
"f9": "f9f9f9f9f9"
}, {
"f1": "5f1f1f1f1f1",
"f2": "f2f2f2f2f2",
"f3": "f3f3f3f3f3",
"f4": "f4f4f4f4f4",
"f5": "f5f5f5f5f5",
"f6": "f6f6f6f6f6",
"f7": "f7f7f7f7f7",
"f8": "f8f8f8f8f8",
"f9": "f9f9f9f9f9"
}, {
"f1": "6f1f1f1f1f1",
"f2": "f2f2f2f2f2",
"f3": "f3f3f3f3f3",
"f4": "f4f4f4f4f4",
"f5": "f5f5f5f5f5",
"f6": "f6f6f6f6f6",
"f7": "f7f7f7f7f7",
"f8": "f8f8f8f8f8",
"f9": "f9f9f9f9f9"
}, {
"f1": "7f1f1f1f1f1",
"f2": "f2f2f2f2f2",
"f3": "f3f3f3f3f3",
"f4": "f4f4f4f4f4",
"f5": "f5f5f5f5f5",
"f6": "f6f6f6f6f6",
"f7": "f7f7f7f7f7",
"f8": "f8f8f8f8f8",
"f9": "f9f9f9f9f9"
}, {
"f1": "8f1f1f1f1f1",
"f2": "f2f2f2f2f2",
"f3": "f3f3f3f3f3",
"f4": "f4f4f4f4f4",
"f5": "f5f5f5f5f5",
"f6": "f6f6f6f6f6",
"f7": "f7f7f7f7f7",
"f8": "f8f8f8f8f8",
"f9": "f9f9f9f9f9"
}
]
}5) Anlegen der Datei admin/jsonConfig.json
{
"i18n": true,
"type": "panel",
"items": {
"mydata": {
"type": "table",
"label": "mydata",
"newLine": true,
/* "usecardfor": ["XS", "SM", "MD", "LG", "XL"], */
"usecardfor": ["XS", "SM" /* , "MD", "LG", "XL" */],
"compact": false,
"clone": true,
"import": true,
"export": true,
"xs": 12,
"sm": 12,
"md": 12,
"lg": 12,
"xl": 12,
"items": [
{
"title": "f1",
"type": "text",
"attr": "f1",
"filter": true,
"sort": true,
"default": "",
"tooltip": "f1 tooltip"
},
{
"title": "f2",
"type": "text",
"attr": "f2",
"filter": true,
"sort": true,
"default": "",
"tooltip": "f2 tooltip"
},
{
"title": "f3",
"type": "text",
"attr": "f3",
"filter": true,
"sort": true,
"default": "",
"tooltip": "f3 tooltip"
},
{
"title": "f4",
"type": "text",
"attr": "f4",
"filter": true,
"sort": true,
"default": "",
"tooltip": "f4 tooltip"
},
{
"title": "f5",
"type": "text",
"attr": "f5",
"filter": true,
"sort": true,
"default": "",
"tooltip": "f5 tooltip"
},
{
"title": "f6",
"type": "text",
"attr": "f6",
"filter": true,
"sort": true,
"default": "",
"tooltip": "f6 tooltip"
},
{
"title": "f7",
"type": "text",
"attr": "f7",
"filter": true,
"sort": true,
"default": "",
"tooltip": "f7 tooltip"
},
{
"title": "f8",
"type": "text",
"attr": "f8",
"filter": true,
"sort": true,
"default": "",
"tooltip": "f8 tooltip"
},
{
"title": "f9",
"type": "text",
"attr": "f9",
"filter": true,
"sort": true,
"default": "",
"tooltip": "f9 tooltip"
}
]
}
}
}
5) den dev-server installieren und mit setup vorbereiten
6) den dev-server mit watch starten
7) am besten das browserfenster mit dem admin-adapter dann mit f5 auffrischen, dann müsste dort der iobroker erscheinen und unter instanzen der neu erzeugte adapter.
8) ConfigTable unterstützt nun eine zusätzliche Eigenschaft (Name könnte auch noch angepasst werden)
"usecardfor": ["XS", "SM" , "MD", "LG", "XL" ],
In der Auflistung können dann alle Breakpoints aufgelistet werden, bei der die Card View verwendet werden soll. Für alle anderen wird die bisherige Table-View verwendet. Für den Test habe ich mal alle eingetragen. Für Produktion kann dann ein Benutzer am besten nur XS bzw noch zusätzlich SM eintragen oder auch generell die Card-View verwenden.
Die Card-View besitzt an der ersten Position eine Card mit allen Filtermöglichkeiten, wie sie auch von der Table-View bekannt sind, diese muss zur Verwendung aufgeklappt werden und als letztes noch eine Card um neue Datensätze hinzuzufügen.
Besonders ausgiebig habe ich jetzt noch nicht getestet.
Auch sollte man sich für die Installation ein wenig Zeit nehmen, das das ein wenig dauert und auch sehr ressourcenintensiv ist.
Ich freue mich über Rückmeldung.
Bei Problemen einfach hier Fragen.
simatec
commented
1 week ago Hast du ein paar Screenshots?
oweitman
commented
1 week ago XL
XS Anfang
XS einzelne Karte
XS Ende
Dazu habe ich folgenden Vorschlag
Alternative A) jsonConfig erkennt entweder vollautomatisch oder auch per zusätzlichem Properties, bei welchen Auflösungen die Table als Card Auflistung dargestellt werden soll. Das Card-Element enthält dann alle Spalten aus der Tabelle in einer Vertikalen Auflistung:
Alternative B) Es wird das Card-Element als zusätzlichen jsonConfig-Typ eingeführt, so das der Nutzer mehr Kontrolle über das Layout innerhalb der Card hat. Zu überlegen wäre dann, wie man mit den Action-Knöpfen umgeht, da diese heute bei Table Vollautomatisch erzeugt werden, ob die dann ebenfalls vollautomatisch am unteren Ende der Card hinzugefügt werden oder man dem Nutzer ebenfalls eine kontrolle darüber gibt.
Für beide Szenarien müsste man überlegen, wie man mit der Möglichkeit zum filtern umgeht. Mir würde ein FilterCard direkt am Anfang der Liste vorschweben (die man aber per Property auch deaktivieren kann, da ich das in meinen Szenarien nicht benötige) Für jede Spalte gäbe es dann in gleicher Form wie die anderen Cards aufgebaut sind ein Filterfeld anhand dann die Auflistung gefiltert wird.
Um Alternative Ansichten bauen zu können, die in Abhängigkeiten von dem hidden-Attribut ein/ausgeblendet werden, würde dann noch eine Abfragemöglichkeit für die Aktuelle Auflösung notwendig werden. Dazu könnte dann dieser hook von mui react helfen https://mui.com/material-ui/react-use-media-query/