Node-Red configuration
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

ui_date_picker.html 3.8KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <script type="text/javascript">
  2. RED.nodes.registerType('ui_date_picker',{
  3. category: RED._("node-red-dashboard/ui_base:ui_base.label.category"),
  4. color: 'rgb(176, 223, 227)',
  5. defaults: {
  6. name: {value: ''},
  7. label: {value: 'date'},
  8. group: {type: 'ui_group', required: true},
  9. order: {value: 0},
  10. width: {value: 0, validate: function(v) {
  11. var width = v||0;
  12. var currentGroup = $('#node-input-group').val()||this.group;
  13. var groupNode = RED.nodes.node(currentGroup);
  14. var valid = !groupNode || +width <= +groupNode.width;
  15. $("#node-input-size").toggleClass("input-error",!valid);
  16. return valid;
  17. }
  18. },
  19. height: {value: 0},
  20. passthru: {value: true},
  21. topic: {value: 'topic', validate: (RED.validators.hasOwnProperty('typedInput')?RED.validators.typedInput('topicType'):function(v) { return true})},
  22. topicType: {value: 'msg'},
  23. className: {value: ''}
  24. },
  25. inputs:1,
  26. outputs:1,
  27. outputLabels: ["epoch mS"],
  28. icon: "ui_date_picker.png",
  29. paletteLabel: 'date picker',
  30. label: function() { return this.name || (~this.label.indexOf("{{") ? null : this.label) || 'date picker'; },
  31. labelStyle: function() { return this.name?"node_label_italic":""; },
  32. oneditprepare: function() {
  33. $("#node-input-size").elementSizer({
  34. width: "#node-input-width",
  35. height: "#node-input-height",
  36. group: "#node-input-group"
  37. });
  38. $('#node-input-topic').typedInput({
  39. default: 'str',
  40. typeField: $("#node-input-topicType"),
  41. types: ['str','msg','flow','global']
  42. });
  43. }
  44. });
  45. </script>
  46. <script type="text/html" data-template-name="ui_date_picker">
  47. <div class="form-row">
  48. <label for="node-input-group"><i class="fa fa-table"></i> Group</label>
  49. <input type="text" id="node-input-group">
  50. </div>
  51. <div class="form-row">
  52. <label><i class="fa fa-object-group"></i> Size</label>
  53. <input type="hidden" id="node-input-width">
  54. <input type="hidden" id="node-input-height">
  55. <button class="editor-button" id="node-input-size"></button>
  56. </div>
  57. <div class="form-row">
  58. <label for="node-input-label"><i class="fa fa-i-cursor"></i> Label</label>
  59. <input type="text" id="node-input-label">
  60. </div>
  61. <div class="form-row">
  62. <label style="width:auto" for="node-input-passthru"><i class="fa fa-arrow-right"></i> If <code>msg</code> arrives on input, pass through to output: </label>
  63. <input type="checkbox" checked id="node-input-passthru" style="display:inline-block; width:auto; vertical-align:top;">
  64. </div>
  65. <div class="form-row">
  66. <label style="width:auto" for="node-input-payload"><i class="fa fa-envelope-o"></i> When changed, send:</label>
  67. </div>
  68. <div class="form-row">
  69. <label style="padding-left:25px; margin-right:-25px">Payload</label>
  70. <label style="width:auto">Current value</label>
  71. </div>
  72. <div class="form-row">
  73. <label for="node-input-topic" style="padding-left:25px; margin-right:-25px">Topic</label>
  74. <input type="text" id="node-input-topic">
  75. <input type="hidden" id="node-input-topicType">
  76. </div>
  77. <div class="form-row">
  78. <label for="node-input-className"><i class="fa fa-code"></i> Class</label>
  79. <input type="text" id="node-input-className" placeholder="Optional CSS class name(s) for widget"/>
  80. </div>
  81. <div class="form-row">
  82. <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
  83. <input type="text" id="node-input-name">
  84. </div>
  85. </script>