Add support for MMM-Config form

[sdetweil]

use this issue for discussion

you have lots more variables defined in the code defaults section than in the doc

positions, icons

in all of the modules that support icon and iconImg I think for the user there should only be one field, and the converter split it back out to 2.
I don't think you can set both.. right??

when specifying the list of transformers to use, it may be that order matters.. so I propose an array presentation with drag/drop of those defined in the main section. initially set to the order of the defininition

[Tom-Hirschberger]

Hi and thanks again.

Most of the variables should be described in the Readme in the docs directory. But as conditions and positions may be overwritten by deeper elements (you may define a general, default groupPosition but you may set a special one for only one group and so on) i documented some of them in the special documents like positions.md.

You are right. There can only be either a icon or imgIcon. If both are defined imgIcon is used. This may happen if i.e. a condition defines a imgIcon although the regular config defines a icon.

I like the idea how you want to implement the transformers. The order definitely matters.

[sdetweil]

the example for items, shows

                        items: [
                            {
                                notification: "TEST1",
                                values: [
                                    {
                                        valueTitle: "Value-1",
                                    },
                                ]
                            },

but there is no 'notification' element in the doc

Items

Option	Description	Type	Default
values	The array containing the definitions of the values.	Array	null
itemTitle	Specify a string or a array of strings containing title(s) which will be added as element(s) to the item element.	String or Array of String	null
itemIcon	Specify one or more icon(s) you want to add to the item elment either as String (which contains the Fontawesome 4.7 or Iconify classes of the single icon) or a array of strings which do contain the classes. Look at in the section Icons for more information.	String or array of Strings	null
itemImgIcon	Specify one or more images that should be displayed as icon(s) instead of Fontawesome 4.7 or Iconify icon(s). This value needs to be either a string which contains the path to the icon or an array of strings containing the paths in each element. Look at in the section Icons for more information.	String or array of Strings	null
itemPositions	Specify in which order the elements should be added to the item element. t=title(s), i=icon(s), e=elements (the value elements), d=dummy (empty element to act as placeholder), [] to create a sub wrapper. Look to Positions section to get more information.	String	"tie"
classes	Specify css classes here that will be configured to each element of the item element. The classes need to be specified space separated in a string.	String	null
profiles	Specify a space separated list of profiles if you like this item element only to be displayed if a certain profile is active currently.	Stirng	null
automaticWrapperClassPrefix

[Tom-Hirschberger]

Looks like I missed the most importened one.

I will try to add it this evening.

[sdetweil]

can you explain the usage of the [] in positions

like the default for valuePositions

ti[vu]

I understand the tie meaning

thx

trying to visualize an UI for that

also, in places where some of the config 'strings' could be arrays, I chose to make the UI array.
if only one element its still an array... your code should handle..

[Tom-Hirschberger]

The code should be fine with arrays with only one element. If not it is a bug an I will fix it.

Basically the brackets cause the elements to be wrapped into a div/span element. The wrapper element gets a individual css class added so it can be styled.

[sdetweil]

i understood that set of words, but WHERE/HOW would that appear in the logical config

I want to style this, so I add a set of brackets?
how does the user know?

more how to decide

and it is always only ONE string like ti[vu], never another one too...

sorry, having trouble on me using it.. i understand order.. is this group THESE fields together? for styling.. tivu, same layout, but the last two fields are styled same as 1st two?

[sdetweil]

when does each element of tievu apply?

I can make an initial 'array' of each,
drag/drop to change order, remove an entry to delete its use, (add it back if you made a mistake)

add a start group, and put it anywhere(drag/drop) , and an end group(same) .. if no end group, one is insereted at the end of the list
converter makes the final string

can I deduce the classname, show it as part of the editing.. so they know what to put in custom.css (copy/paste)

[Tom-Hirschberger]

I do have my mobile only at the moment but I will try to describe a example with my notebook tomorrow.

You will be able to calculate the resulting class is calculated with the number of the wrapper (starting at 0) prefixed with the class configured with "automaticWrapperClassPrefix" in the main config (which is usually "wrap").

I.e. If div is the basic element the position string "[[ti]v]u"

Will result in

<div class="wrap0">
  <div class="wrap1">
    <div>TITLE</div>
    <div>ICON</div>
  </div>
  <div>VALUE</div>
</div>
<div>UNIT</div>

I think a array would be a good choice. But I am unsure how the wrappers can be added easily.

[sdetweil]

ok, I see info in positions.md

the doc 'example' looks the same to me, and I don't see a config block that looks different (no config shown)
looking at the doc on github, I don't see the images IN the display example..

I would call dummy, placeholder
vu only applies in a value position entry (or global)

[Tom-Hirschberger]

Correct. vu are only valid on valuePositions.

Placeholder is a good naming for the dummy.

Theoretically the module supports as many wrappers in one position string as you like. I am not sure at the moment but I think even the things like title can be added multiple times.

[sdetweil]

I think a array would be a good choice. But I am unsure how the wrappers can be added easily.

so in a value position config
there is a select list , one for each thing, t, i, e, v, u,, begin group, end group
whatever order we decide is the default. (for converter)

then user can add and reorganize via drag/drop , including adding the group markers
to change, open config again, array is set, drag/drop, add group... remove an entry,
save

oh, multiple of the same item.. good, array works there...

I'll put together a 1st pass tomorrow

[sdetweil]

the things they are selecting are words, title, item, value, unit ... whatever not the letters

[Tom-Hirschberger]

Sounds like a good idea to me and will waaayyyy much better then configure it by hand

[sdetweil]

attached is a draft of what we have been talking about
go here
https://jsonform.github.io/jsonform/playground/index.html

paste the contents of the file into the edit field , like this

then you get an operable form to the right

start at empty position field
and an entry

select a type from the selection list
and again and again

you can reorg buy dragging the entry (use the hamburger menu or just select the anywhere outside the actual fields of the thing)
like this, notice the mouse pointer

the +/- at the end creates another thing to choose its type
the single - is delete this thing.. usable anywhere

so you can add a start group, ([), at the end and drag it where you want it, or move it... or delete it..

if you support multiples then no trouble. it works like this..
converter runs thru the 'list output' and makes a string to match..
(the selection items can be the actual characters in the string, (the file below has thrm like that, the screen shots before I changed them)

sample value composition form.json

[Tom-Hirschberger]

Hi.

Looks good to me.
Great work.

It should be work perfectly with the module.