Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Admin 5.0.3 - React UI - Archivierung der Datenpunkte #692

Closed
arteck opened this issue Apr 18, 2021 · 59 comments
Closed

Admin 5.0.3 - React UI - Archivierung der Datenpunkte #692

arteck opened this issue Apr 18, 2021 · 59 comments

Comments

@arteck
Copy link

arteck commented Apr 18, 2021

installiere telegramm adapter
installiere sql

setze ein Object auf protokollierung
grafik

@Apollon77
Copy link
Collaborator

Yes, adapters with custom_m/custom needs to be adjusted!

List is:

  • ioBroker.history/admin/custom_m.html
  • ioBroker.homee/admin/custom_m.html
  • ioBroker.influxdb/admin/custom_m.html
  • ioBroker.iogo/admin/custom_m.html
  • ioBroker.iqontrol/admin/custom_m.html
  • ioBroker.linkeddevices/admin/custom_m.html
  • ioBroker.lovelace/admin/custom_m.html
  • ioBroker.minmax/admin/custom_m.html
  • ioBroker.mqtt-client/admin/custom_m.html
  • ioBroker.powermonitor/admin/custom_m.html
  • ioBroker.sourceanalytix/admin/custom_m.html
  • ioBroker.sql/admin/custom_m.html
  • ioBroker.statistics/admin/custom_m.html
  • ioBroker.telegram/admin/custom_m.html
  • ioBroker.upnp/admin/custom_m.html
  • ioBroker.valuetrackerovertime/admin/custom_m.html
  • ioBroker.virtualpowermeter/admin/custom_m.html

@sbormann
Copy link

Working on customs. I have three problems/questions, the rest seems to work so far.

  1. i118n on defaultFunc: "defaultFunc": "_('Foo')" seems not to work

  2. "type": "json" gives me only an empty place:
    image
    image

  3. table: Using this crashes the page when opening the custom. Could you provide an example how to use it?
    This is what i need:

I have an object like:

"targetValues": {
  "left": {
	"targetValue": "true",
	"targetDatapointId": "broadlink2.0.RM:0x2737_78:0f:77:d8:e6:84.L.WZ_AppleTV_Left"
  },
  "right": {
	"targetValue": "true",
	"targetDatapointId": "broadlink2.0.RM:0x2737_78:0f:77:d8:e6:84.L.WZ_AppleTV_Right"
  },
  "up": {
	"targetValue": "true",
	"targetDatapointId": "broadlink2.0.RM:0x2737_78:0f:77:d8:e6:84.L.WZ_AppleTV_Up"
  },
  "down": {
	"targetValue": "true",
	"targetDatapointId": "broadlink2.0.RM:0x2737_78:0f:77:d8:e6:84.L.WZ_AppleTV_Down"
  },
  "ok": {
	"targetValue": "true",
	"targetDatapointId": "broadlink2.0.RM:0x2737_78:0f:77:d8:e6:84.L.WZ_AppleTV_OK"
  },
  "back": {
	"targetValue": "true",
	"targetDatapointId": "broadlink2.0.RM:0x2737_78:0f:77:d8:e6:84.L.WZ_AppleTV_Back"
  },
  "menu": {
	"targetValue": "true",
	"targetDatapointId": "broadlink2.0.RM:0x2737_78:0f:77:d8:e6:84.L.WZ_AppleTV_Home"
  }
}

Result should be something like that:
image

Is that possible?

@sbormann
Copy link

4th Question:
4. Please provide a short example how to use autocomplete function for textfields. I read https://github.com/ioBroker/ioBroker.admin/blob/master/src-rx/src/components/JsonConfigComponent/SCHEMA.md#common-attributes-of-controls a 1000times - but i just don't understand how to use it. Where has this data: { timeout: [1000, 2000, 3000] } to be?

@GermanBluefox
Copy link
Contributor

There is no autocomplete control yet. Do you need it?

Autocomplete is automatically ON by text/number if you edit more than one object, but is it not the autocomplete what you can use in your controls

@sbormann
Copy link

Hi,
but what means this:
image
(screenshot from https://github.com/ioBroker/ioBroker.admin/blob/master/src-rx/src/components/JsonConfigComponent/SCHEMA.md#common-attributes-of-controls )

I need a combobox: A selectbox with options, but also the ability to enter free text.
Example: https://material-ui.com/components/autocomplete/

@GermanBluefox
Copy link
Contributor

GermanBluefox commented Apr 22, 2021

@sbormann
Copy link

Sensational, thank you very much! I can't believe how busy you guys are right now. Thanks to all the developers who are pushing ioBroker forward!

Is there already a solution idea for the JSON table?

@GermanBluefox
Copy link
Contributor

Check that here: https://github.com/ioBroker/ioBroker.admin/blob/master/admin/jsonConfig.json#L285
But the data must be an array:

[{"ip": "192.168.1.1", "delay": 1000, "enabled": true}, 
{"ip": "192.168.1.2", "delay": 2000, "enabled": false}]

@sbormann
Copy link

Is it possible to insert an objectTable that accepts an object instead of an array? The first column would then be the key, the remaining columns the corresponding object.

Otherwise, already existing custom-settings would become invalid and could no longer be edited by the users.

@GermanBluefox
Copy link
Contributor

How such a table could looks like? I guess, no. Why a table is an object and not array??

@sbormann
Copy link

In my case i made the common.states-object editable. This is defined as an object, not as an table.

If i write a objectToArray and ArrayToObject-Function, could you then extend the table-component with an option that these conversion-functions are used? Im not familiar with react and i don't understand the syntax of ConfigTable.js enough, but i guess, adding conversion-functions isn't such a big deal, if you are familiar with it, or?

@GermanBluefox
Copy link
Contributor

Please give me an example

@sbormann
Copy link

function objectToArray(object, nameOfFirstCol){
	nameOfFirstCol = nameOfFirstCol || "key";
	var array = [];
	var keys = Object.keys(object);
	keys.forEach(function(key){
		var firstCol = {};
		firstCol[nameOfFirstCol] = key;
		array.push(Object.assign(firstCol, object[key]));
	});
	return array;
}

function arrayToObject(array, nameOfFirstCol){
	nameOfFirstCol = nameOfFirstCol || "key";
	var object = {};
	array.forEach(function(row){
		var key = row[nameOfFirstCol];
		delete row[nameOfFirstCol];
		object[key] = row;		
	});
	return object;
}


//++++ Example: ++++
var dataObject = {
	"192.168.1.1": {delay: "1A", enabled: "1B"}, 
	"192.168.1.2": {delay: "2A", enabled: "2B"}
};
//this is the given value (as object, not as array)

var array = objectToArray(dataObject, "ip");
// array = 	[{ip: "192.168.1.1", delay: "1A", enabled: "1B"},
//		 {ip: "192.168.1.2", delay: "2A", enabled: "2B"}]
// use that array to build the table


var returnDataObject = arrayToObject(array, "ip");
// newDataObject = {
//	"192.168.1.1": {delay: "1A", enabled: "1B"}, 
//	"192.168.1.2": {delay: "2A", enabled: "2B"}
// }
// use that as return value when the table has changed

@sbormann
Copy link

After looking exactly i have two different data formats:
One time i have {key: {col1: "value1", col2: "value2", ...}, ...} - this is used in the example above.
But i also have datas in the format {key: "value", ...}, where the value is Not an Object, but a String (or anything else).

Therefore i overworked and extended my code from above. I think, this should work.

function objectToArray(object, nameOfFirstCol, nameOfSecondCol, valueIsNotAnObject){
	console.log("OTA");
	nameOfFirstCol = nameOfFirstCol || "key";
	nameOfSecondCol = nameOfSecondCol || "value";
	var array = [];
	var keys = Object.keys(object);
	keys.forEach(function(key){
		var firstCol = {};
		firstCol[nameOfFirstCol] = key;
		if(valueIsNotAnObject){
			var secondCol = {};
			secondCol[nameOfSecondCol] = object[key];
			array.push(Object.assign(firstCol, secondCol));
		} else { 
			array.push(Object.assign(firstCol, object[key]));
		}
	});
	return array;
}

function arrayToObject(array, nameOfFirstCol, nameOfSecondCol, valueIsNotAnObject){
	console.log("ATO");
	nameOfFirstCol = nameOfFirstCol || "key";
	nameOfSecondCol = nameOfSecondCol || "value";
	var object = {};
	array.forEach(function(row){
		var key = row[nameOfFirstCol];
		delete row[nameOfFirstCol];
		if(valueIsNotAnObject){
			object[key] = row[nameOfSecondCol];
		} else { 
			object[key] = row;		
		}
	});
	return object;
}

//valueIsNotAnObject
//true, if table has only two cols and data is in format {key: "value", ...} instead of {key: {col1: "value1", col2: "value2", ...}, ...}


//++++ Example: ++++
var dataObject = {
	"192.168.1.1": {delay: 1000, enabled: true}, 
	"192.168.1.2": {delay: 2000, enabled: false}
};
//this is the given value (as object, not as array)

var valueIsNotAnObject = (typeof dataObject[Object.keys(dataObject)[0]] != "object");
//false

var dataArray = objectToArray(dataObject, "ip", "delay", valueIsNotAnObject);
// array = 	[{ip: "192.168.1.1", delay: 1000, enabled: true},
//			 {ip: "192.168.1.2", delay: 2000, enabled: false}]
// use that array to build the table


var returnDataObject = arrayToObject(dataArray, "ip", "delay", valueIsNotAnObject);
// newDataObject = {
//		"192.168.1.1": {delay: 1000, enabled: true}, 
//		"192.168.1.2": {delay: 2000, enabled: false}
// }
// use that as return value when the table has changed



//++++ Second Example where value is not an object: ++++
var dataObject2 = {
	"192.168.1.1": "value1", 
	"192.168.1.2": "value2"
};

var valueIsNotAnObject2 = (typeof dataObject2[Object.keys(dataObject2)[0]] != "object");
//true

var dataArray2 = objectToArray(dataObject2, "ip", "value", valueIsNotAnObject2);
// array = 	[{ip: "192.168.1.1", value: "value1"},
//			 {ip: "192.168.1.2", value: "value2"}]


var returnDataObject2 = arrayToObject(dataArray2, "ip", "value", valueIsNotAnObject2);
// newDataObject = {
//		"192.168.1.1": "value1", 
//		"192.168.1.2": "value2"
// }

@sbormann
Copy link

Hey, i have seen, you already implemented it! Great!

But im sorry to say, there are some little bugs left:

  1. In this example the values of col2 and 3 are exchanged (the headings are right, but the values not)
    image

  2. After clicking on (+) to add a new line, the key-col disappears. This is also the case, if you start with an empty table:
    image
    (The browser-log has no errors).

  3. The table should be sortable, as mentioned in SCHEMA.md:
    image

@Scrounger
Copy link

Scrounger commented May 30, 2021

@GermanBluefox

Sorry for late response.
I have done some more test with the 5.1.4 version.

the whole jsonCustom file can be found here:
https://github.com/Scrounger/ioBroker.linkeddevices/blob/master/admin/jsonCustom.json

My Findings:

AutoComplete from type autocompleteSendTo:

                "_prefixId": {
                    "type": "autocompleteSendTo",
                    "label": "prefix for id of linked object",
                    "sm": 4,
                    "noMultiEdit": true,
                    "freeSolo": true,
                    "noTranslation": true,
                    "command": "suggestions_prefixId",
                    "maxLength": 255,
                    "defaultFunc": {
                        "func": "(data.linkedId || '').includes('.') ? data.linkedId.substring(0, data.linkedId.lastIndexOf('.')) : ''",
                        "alsoDependsOn": [
                            "linkedId"
                        ]
                    },
                    "validator": "data._prefixId && data._prefixId.length > 0 && !(/[*?\"'`´,;:<>#/{}ß\\[\\]\\s]/).test(data._prefixId) || data._prefixId === ''",
                    "help": "${data._prefixId && data._prefixId.length > 0 && !(/[*?\"'`´,;:<>#/{}ß\\[\\]\\s]/).test(data._prefixId) || data._prefixId === '' ? '' : 'the following chars are not allowed \\'*?\"\\'`´,;:<>#/{}ß[] \\''}"
                }

defaultFunc not working for type autocompleteSendTo

dynamic label:

                                "number_unit": {
                                    "type": "text",
                                    "label": "change unit '${customObj.common.unit}' to",
                                    "sm": 4,
                                    "newLine": true,
                                    "noMultiEdit": true,
                                    "maxLength": 255
                                },

works if using data.XXX but not using customObj.XXX. The following error is shown:
grafik

Type textSendTo

                "_parentName": {
                    "type": "textSendTo",
                    "label": "parent name",
                    "sm": 12,
                    "noMultiEdit": true,
                    "command": "getParentName",
                    "jsonData": {
                        "parentId": "${data.parentId}"
                    }
                },

Value of property data.parentId is not send to the adapter.

grafik

Feature: Dynamic label for type header

                "_headerExpertSettings": {
                    "type": "header",
                    "text": "expert settings for linked object with type '${customObj.common.type}'",
                    "size": 1,
                    "style": {
                        "width": "100%"
                    }
                },

I also need a dynamic label for the header type

Feature: dynamic href property of type staticLink

                "_linkToParentObject": {
                    "type": "staticLink",
                    "text": "settings of linked object",
                    "sm": 12,
                    "button": true,
                    "icon": "Edit",
                    "href": "#tab-objects/customs/${data.parentId}",
                    "style": {
                        "justifyContent": "flex-start"
                    }
                }

I need to build the href from the data to access from a linked object the parent object directly.

Question:

How i can access default icons (mdi?):

                "_linkToParentObject": {
                    "type": "staticLink",
                    "text": "settings of linked object",
                    "sm": 12,
                    "button": true,
                    "icon": "Edit",
                    "href": "#tab-objects/customs/${data.parentId}",
                    "style": {
                        "justifyContent": "flex-start"
                    }
                }

@Scrounger
Copy link

@GermanBluefox

i also need an option to hide some menu entries of select element:

                        "number_convertTo": {
                            "type": "select",
                            "label": "convert linked object to type",
                            "sm": 12,
                            "noMultiEdit": true,
                            "default": "",
                            "options": [
                                {
                                    "label": "do not convert",
                                    "value": ""
                                },
                                {
                                    "label": "boolean",
                                    "value": "boolean"
                                },
                                {
                                    "label": "duration",
                                    "value": "duration",
                                    "hidden": "!(customObj.common.write == true)"
                                },
                                {
                                    "label": "datetime",
                                    "value": "datetime",
                                    "hidden": "!(customObj.common.write == true)"
                                }
                            ]
                        },

@GermanBluefox GermanBluefox reopened this May 31, 2021
@GermanBluefox
Copy link
Contributor

@Scrounger are trying to build a submarine???? Why do need all the stuff. :(

@Scrounger
Copy link

@GermanBluefox

Just trying to migrate the custom dialog from linkeddevices...
I know that the custom dialog is certainly more complex than others.

Unfortunately, the design of the new custom dialog is no longer as flexible, so I can't implement these functions directly.
If this is not possible, linkeddevices will be dead!

@GermanBluefox
Copy link
Contributor

How i can access default icons (mdi?):

What the default icons? In Admin? There are no icons any more. Please use base64

@Garfonso
Copy link

Garfonso commented Jun 3, 2021

i also need an option to hide some menu entries of select element:

Could use something like that in lovelace, too. Currently I did duplicate the attribute / select and use the hidden option there. But it makes the json and backend code much more complex (because I need to handle different attribute names which otherwise could be the same).

@GermanBluefox
Copy link
Contributor

i also need an option to hide some menu entries of select element:

Could use something like that in lovelace, too. Currently I did duplicate the attribute / select and use the hidden option there. But it makes the json and backend code much more complex (because I need to handle different attribute names which otherwise could be the same).

All features requested by @Scrounger are implemented in 5.1.6

@Scrounger
Copy link

Scrounger commented Jun 9, 2021

@GermanBluefox
Thanks for the implementation and your support.
I've done testing with v5.1.8. Most of the stuff works now. But i still find some issue.

the current jsonCustom file can be found here:
https://github.com/Scrounger/ioBroker.linkeddevices/blob/master/admin/jsonCustom.json

My Findings:

AutoComplete from type autocompleteSendTo:

defaultFunc not works if the custom settings is still enabled and have values, in this case data.linkedId has a value:
issue_autocompleteSendTo

It works if the custom settings is not enabled:
issue_autocompleteSendTo_2

Change event only fired if you hit the enter key, that means that validator will also only fired after hitting enter.
For a better user experience (quick filling) please implement a change listener for keypress or lostFocus event.

dynamic href property of type staticLink

                "_linkToParentObject": {
                    "type": "staticLink",
                    "text": "settings of linked object",
                    "sm": 12,
                    "button": true,
                    "icon": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4NCiAgICA8cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0zIDE3LjI1VjIxaDMuNzVMMTcuODEgOS45NGwtMy43NS0zLjc1TDMgMTcuMjV6TTIwLjcxIDcuMDRjLjM5LS4zOS4zOS0xLjAyIDAtMS40MWwtMi4zNC0yLjM0Yy0uMzktLjM5LTEuMDItLjM5LTEuNDEgMGwtMS44MyAxLjgzIDMuNzUgMy43NSAxLjgzLTEuODN6Ii8+DQo8L3N2Zz4=",
                    "href": "#tab-objects/customs/${data.parentId}",
                    "style": {
                        "justifyContent": "flex-start"
                    }
                }

${data.parentId} in href is not used / interpreted.

Question
In your commit Scrounger/ioBroker.linkeddevices@bfb1e02#diff-23aab522ba0ccd507340a1a36aa2e830bf1ad438981a06843e5352e8279190f0L2 you changed panel to tabs. I thought that tabs not working in custom dialogs?
Result of that is, tabs are shown but without label.

grafik

@Scrounger
Copy link

@GermanBluefox
any news on this?

@Apollon77
Copy link
Collaborator

@GermanBluefox Still needed

@Scrounger
Copy link

@GermanBluefox
any news on this?

@DocGame69
Copy link

tut sich bei dem Problem noch was?
Dae einzige Grund warum ich noch die alte GUI eingestellt habe ist Linkeddevice.
Und das ist bei mir ein elemantarer Teil, da damit alles so super läuft und ich trotz größter Bemühungen noch nicht richig dahinter gekommen bin wie ich (alle benötigten) States als "Alias" anlege.
Ich schaue jeden Tag auf die Github-Seite des Linkeddevice Adapters, habe aber langsam Zweifel, das die Anpassund noch kommt, da der Adapter (aus welchen Gründen auch immer) nicht mehr ins Zukunftskonzept passt.
Wenn dies wirklich so wäre, sind meine ganzen Bekannten und ich aussen vor, da das momentane Handling von "Alias" nichts mehr für "Normale User" ist. Oder gibt es eine Laienanleitung die man ohne Programierkenntnisse versteht?

@Garfonso
Copy link

Garfonso commented Nov 1, 2021

@DocGame69
Zum einen gibt es den Devices Adapter (erzeugt das "Geräte" Tab), der mittlerweile auch ohne Programmierkenntnisse gut zu nutzen ist.

Zum anderen müsste ja, wenn sich an den linkeddevices nichts ändert, trotzdem der neue admin genutzt werden können. Ggf macht es dann Sinn auf den neuen admin umzustellen und für etwaige Änderungen an linkeddevices, einen alten als zweite Instanz in der Hinterhand zu haben.

@stefantaust
Copy link

Wollte mal fragen ob sich was tut beim linked device Adapter und der neuen Ui. Warte schon täglich :-)

@santa81
Copy link

santa81 commented Dec 22, 2021

@GermanBluefox
Wir vermissen den linkedevice Adapter, kannst du dir bitte das Problem noch mal ansehen?

@Rosi8818
Copy link

das nicht immer gleich alles umgesetzt werden kann ist schon klar aber wenn ich die Foren anschauen warten eigentlich alle nur auf eine Aussage ob der Adapter LinkedDevice im neuen Admin UI angegangen wird oder nicht. Ich selber auch, ein klasse Adapter den ich als Anfänger eifrig nutze. Solch Dingen führen dann wieder dazu das die Leute weniger updaten und immer mehr aus dem "normalen" laufen. So bei mir auch... Ich bin kein Verfechter von Zwangsgewöhnung auf anderes wenn mal mal seinen Weg gefunden hat in den vielen Möglichkeiten.
Das ist aber nur meine Meinung und hat nichts mit dem Respekt zu tun den ich vor den Entwicklern habe!
Bitte gebt eine Aussage ob und wie es weitergehen soll/kann/darf
DANKE

@GermanBluefox
Copy link
Contributor

Für ein PR bin ich immer froh.

@GermanBluefox
Copy link
Contributor

GermanBluefox commented Dec 24, 2021

I fixed an error in AutocompleteSendTo. And implemented dynamic staticLink.
Please do not use tabs in customs.

@Scrounger Your case is most complex custom settings what I know. And if it is so important, I would appreciate some help.
Actually the only problem was, that AutocompleteSendTo was not automatically filled up at start (if before enabled) and I can't believe that this small problem can stop linkeddevices from release.
If you will find some errors again, please create for each an extra issue.

@Pix---
Copy link
Contributor

Pix--- commented Feb 10, 2022

Any news on this? Never change a winning team. Linkeddevices is one of the 10 most important adapters in iobroker.

@Apollon77
Copy link
Collaborator

In fact I alsos asked that in the LinkedDevices ticket some days ago ...

@Pittini
Copy link

Pittini commented Mar 22, 2022

Any news on that? Can't believe this doesnt get fixed.

@Scrounger
Copy link

@Pittini:
It will be fixed, but i have no time at the moment.
Current work around, activate old gui in admin adapter, create / edit linkeddevices custom objects and switch back to new gui.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests