Widget: Text Input

[joepavitt]

Description

Text input field with the ability to setup different "modes", e.g. password, email, etc. for validation.

Properties

Existing Dashboard 1.0 Properties:

Events

• on-change: this widget would need to send a message back to Node-RED when it's value is changed/updated

Controls

• enabled: this widget can be enabled/disabled

Existing Examples

Vuetify Component: https://vuetifyjs.com/en/components/text-fields/

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

[joepavitt]

First pass added in #33 with the on-change event functional, and basic text-field from Vuetify used.

[joepavitt]

Basic implementation completed in #75

[colinl]

I suggest that we take the opportunity with D2 to fix some anomalies with date/time pickers in D1.

My time zone is GMT+1.
If I configure a D1 Text Input node in Time Picker mode and select a time of 12:00 it passes on the number 39600000 which is 11 hours in milliseconds. It is taking the timezone into account.
If I configure a D1 Time Picker Form field, however, and enter 12:00 it provides the string "1970-01-01T11:00:00.000Z".
Whether either of these is ideal I am not sure. Personally I think I would prefer 12 hours in milliseconds, whatever the timezone.
This flow might be useful if others want to see the behaviour

[{"id":"be4767c3598b35e1","type":"ui_date_picker","z":"bdd7be38.d3b55","name":"","label":"date","group":"903a6ab8.4f4ca8","order":2,"width":0,"height":0,"passthru":true,"topic":"topic","topicType":"msg","className":"","x":130,"y":2360,"wires":[["76337593160c67e4","b7e30851adb09f44"]]},{"id":"76337593160c67e4","type":"debug","z":"bdd7be38.d3b55","name":"debug 99","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":380,"y":2360,"wires":[]},{"id":"db3bd499cfd68178","type":"ui_form","z":"bdd7be38.d3b55","name":"","label":"","group":"903a6ab8.4f4ca8","order":2,"width":0,"height":0,"options":[{"label":"Date","value":"date","type":"date","required":false,"rows":null},{"label":"Time","value":"time","type":"time","required":false,"rows":null}],"formValue":{"date":"","time":""},"payload":"","submit":"submit","cancel":"cancel","topic":"topic","topicType":"msg","splitLayout":"","className":"","x":130,"y":2460,"wires":[["c4b4ac1b8e4653d6","888c9bfc16a3cdeb"]]},{"id":"c4b4ac1b8e4653d6","type":"function","z":"bdd7be38.d3b55","name":"types","func":"msg.payload = `typeof: date: ${typeof msg.payload.date}, time: ${typeof msg.payload.time}`\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":280,"y":2500,"wires":[["888c9bfc16a3cdeb"]]},{"id":"60f9232a0ca40af0","type":"ui_text_input","z":"bdd7be38.d3b55","name":"","label":"text input time","tooltip":"","group":"903a6ab8.4f4ca8","order":2,"width":0,"height":0,"passthru":true,"mode":"time","delay":300,"topic":"topic","sendOnBlur":true,"className":"","topicType":"msg","x":140,"y":2580,"wires":[["1f194237fbb35739","f2433b63be0d877a"]]},{"id":"888c9bfc16a3cdeb","type":"debug","z":"bdd7be38.d3b55","name":"debug 100","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":450,"y":2480,"wires":[]},{"id":"f2433b63be0d877a","type":"debug","z":"bdd7be38.d3b55","name":"debug 101","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":460,"y":2580,"wires":[]},{"id":"7160619699a70b73","type":"ui_text_input","z":"bdd7be38.d3b55","name":"","label":"text input datetime","tooltip":"","group":"903a6ab8.4f4ca8","order":2,"width":0,"height":0,"passthru":true,"mode":"datetime-local","delay":300,"topic":"topic","sendOnBlur":true,"className":"","topicType":"msg","x":140,"y":2660,"wires":[["f40ae0ea29ac190f","2d0a7b77613825c7"]]},{"id":"f40ae0ea29ac190f","type":"debug","z":"bdd7be38.d3b55","name":"debug 102","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":480,"y":2660,"wires":[]},{"id":"1f194237fbb35739","type":"function","z":"bdd7be38.d3b55","name":"type","func":"msg.payload = `typeof: ${typeof msg.payload}`\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":320,"y":2620,"wires":[["f2433b63be0d877a"]]},{"id":"2d0a7b77613825c7","type":"function","z":"bdd7be38.d3b55","name":"type","func":"msg.payload = `typeof: ${typeof msg.payload}`\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":320,"y":2700,"wires":[["f40ae0ea29ac190f"]]},{"id":"b7e30851adb09f44","type":"function","z":"bdd7be38.d3b55","name":"type","func":"msg.payload = `typeof: ${typeof msg.payload}`\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":250,"y":2400,"wires":[["76337593160c67e4"]]},{"id":"903a6ab8.4f4ca8","type":"ui_group","name":"Home","tab":"e2e6f4f5.56f91","order":1,"disp":false,"width":"6","collapse":false,"className":""},{"id":"e2e6f4f5.56f91","type":"ui_tab","name":"Homet","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

I think there are also anomalies with the Date pickers in D1, but I have not fully analysed those yet.