Add Pretty print option to JSON node and

make XML and CSV nodes more consistent look and feel
This commit is contained in:
Dave Conway-Jones 2017-05-23 09:35:37 +01:00
parent bd14acb68a
commit 7978f85f7a
No known key found for this signature in database
GPG Key ID: 81B04231572A9A2D
5 changed files with 34 additions and 37 deletions

View File

@ -643,6 +643,10 @@
"dropped-object": "Ignored non-object payload",
"dropped": "Ignored unsupported payload type",
"dropped-error": "Failed to convert payload"
},
"label": {
"o2j": "Object-to-String options",
"pretty": "Pretty print JSON string"
}
},
"yaml": {
@ -656,7 +660,8 @@
"label": {
"represent": "Represent XML tag attributes as a property named",
"prefix": "Prefix to access character content",
"advanced": "Advanced options"
"advanced": "Advanced options",
"x2o": "XML-to-Object options"
},
"tip": "There is no simple way to convert XML attributes to JSON so the approach taken here is to add a property, named $ by default, to the JSON structure.",
"errors": {
@ -672,6 +677,7 @@
"type": "Type",
"initpin": "Initialise pin state?",
"debounce": "Debounce",
"freq": "Frequency",
"button": "Button",
"pimouse": "Pi Mouse",
"pikeyboard": "Pi Keyboard",

View File

@ -6,7 +6,7 @@
</div>
<div class="form-row">
<label for="node-input-select-sep"><i class="fa fa-text-width"></i> <span data-i18n="csv.label.separator"></span></label>
<select style="width: 150px" id="node-input-select-sep">
<select style="width:150px" id="node-input-select-sep">
<option value="," data-i18n="csv.separator.comma"></option>
<option value="\t" data-i18n="csv.separator.tab"></option>
<option value=" " data-i18n="csv.separator.space"></option>
@ -15,7 +15,7 @@
<option value="#" data-i18n="csv.separator.hashtag"></option>
<option value="" data-i18n="csv.separator.other"></option>
</select>
<input style="width: 40px;" type="text" id="node-input-sep" pattern=".">
<input style="width:40px;" type="text" id="node-input-sep" pattern=".">
</div>
<div class="form-row">
@ -24,12 +24,12 @@
</div>
<hr align="middle"/>
<div class="form-row">
<label style="width: 100%;"><i class="fa fa-gears"></i> <span data-i18n="csv.label.c2o"></span></label>
<label style="margin-left: 10px; margin-right: -10px;"><i class="fa fa-sign-in"></i> <span data-i18n="csv.label.input"></span></label>
<input style="width: 30px" type="checkbox" id="node-input-hdrin"><label style="width: auto;" for="node-input-hdrin"><span data-i18n="csv.label.firstrow"></span></span>
<label style="width:100%;"><i class="fa fa-gears"></i> <span data-i18n="csv.label.c2o"></span></label>
<label style="margin-left:16px; margin-right:-16px;"><i class="fa fa-sign-in"></i> <span data-i18n="csv.label.input"></span></label>
<input style="width:30px" type="checkbox" id="node-input-hdrin"><label style="width: auto;" for="node-input-hdrin"><span data-i18n="csv.label.firstrow"></span>
</div>
<div class="form-row">
<label style="margin-left: 10px; margin-right: -10px;"><i class="fa fa-sign-out"></i> <span data-i18n="csv.label.output"></span></label>
<label style="margin-left:16px; margin-right:-16px;"><i class="fa fa-sign-out"></i> <span data-i18n="csv.label.output"></span></label>
<select type="text" id="node-input-multi" style="width: 250px;">
<option value="one" data-i18n="csv.output.row"></option>
<option value="mult" data-i18n="csv.output.array"></option>
@ -37,13 +37,13 @@
</div>
<hr align="middle"/>
<div class="form-row">
<label style="width: 100%;"><i class="fa fa-gears"></i> <span data-i18n="csv.label.o2c"></span></label>
<label style="margin-left: 10px; margin-right: -10px;"><i class="fa fa-sign-in"></i> <span data-i18n="csv.label.output"></span></label>
<input style="width: 30px" type="checkbox" id="node-input-hdrout"><label style="width: auto;" for="node-input-hdrout"><span data-i18n="csv.label.includerow"></span></span>
<label style="width:100%;"><i class="fa fa-gears"></i> <span data-i18n="csv.label.o2c"></span></label>
<label style="margin-left:16px; margin-right:-16px;"><i class="fa fa-sign-in"></i> <span data-i18n="csv.label.output"></span></label>
<input style="width:30px" type="checkbox" id="node-input-hdrout"><label style="width:auto;" for="node-input-hdrout"><span data-i18n="csv.label.includerow"></span></span>
</div>
<div class="form-row">
<label style="margin-left: 10px; margin-right: -10px;"><i class="fa fa-align-left"></i> <span data-i18n="csv.label.newline"></span></label>
<select style="width: 150px" id="node-input-ret">
<label style="margin-left:16px; margin-right:-16px;"><i class="fa fa-align-left"></i> <span data-i18n="csv.label.newline"></span></label>
<select style="width:150px" id="node-input-ret">
<option value='\n' data-i18n="csv.newline.linux"></option>
<option value='\r' data-i18n="csv.newline.mac"></option>
<option value='\r\n' data-i18n="csv.newline.windows"></option>

View File

@ -4,6 +4,11 @@
<label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
<input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">
</div>
<hr align="middle"/>
<div class="form-row">
<label style="width:100%;"><i class="fa fa-gears"></i> <span data-i18n="json.label.o2j"></span></label>
<input style="margin-left:16px; width:20px; vertical-align:top;" type="checkbox" id="node-input-pretty"><span data-i18n="json.label.pretty"></span>
</div>
</script>
<script type="text/x-red" data-help-name="json">
@ -13,7 +18,8 @@
<ul>
<li>If the input is a JSON string it tries to parse it to a javascript object.</li>
<li>If the input is a javascript object it creates a JSON string.</li>
<ul>
</ul>
<p>When converting a JSON object to a string the output may optionally be pretty printed.</p>
</script>
<script type="text/javascript">
@ -21,7 +27,8 @@
category: 'function',
color:"#DEBD5C",
defaults: {
name: {value:""}
name: {value:""},
pretty: {value:"false"}
},
inputs:1,
outputs:1,

View File

@ -19,6 +19,7 @@ module.exports = function(RED) {
function JSONNode(n) {
RED.nodes.createNode(this,n);
this.indent = n.pretty ? 4 : 0;
var node = this;
this.on("input", function(msg) {
if (msg.hasOwnProperty("payload")) {
@ -32,7 +33,7 @@ module.exports = function(RED) {
else if (typeof msg.payload === "object") {
if (!Buffer.isBuffer(msg.payload)) {
try {
msg.payload = JSON.stringify(msg.payload);
msg.payload = JSON.stringify(msg.payload,null,node.indent);
node.send(msg);
}
catch(e) { node.error(RED._("json.errors.dropped-error")); }

View File

@ -4,14 +4,14 @@
<label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
<input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">
</div>
<div class="form-row" id="advanced">
</div>
<div id="advanced-options">
<hr align="middle"/>
<div class="form-row">
<label style="width:100%;"><i class="fa fa-gears"></i> <span data-i18n="xml.label.x2o"></span></label>
<div class="form-row">
<i class="fa fa-key"></i> <span data-i18n="xml.label.represent"></span> <input type="text" id="node-input-attr" style="text-align:center; width:40px" placeholder="$">
<i style="margin-left:16px;" class="fa fa-key"></i> <span data-i18n="xml.label.represent"></span> <input type="text" id="node-input-attr" style="text-align:center; width:40px" placeholder="$">
</div>
<div class="form-row">
<i class="fa fa-key"></i> <span data-i18n="xml.label.prefix"></span> <input type="text" id="node-input-chr" style="text-align:center; width:40px" placeholder="_">
<i style="margin-left:16px;" class="fa fa-key"></i> <span data-i18n="xml.label.prefix"></span> <input type="text" id="node-input-chr" style="text-align:center; width:40px" placeholder="_">
</div>
<div class="form-tips"><span data-i18n="xml.tip"></span></div>
</div>
@ -52,23 +52,6 @@
},
labelStyle: function() {
return this.name?"node_label_italic":"";
},
oneditprepare: function() {
var showadvanced = showadvanced || true;
var advanced = this._("xml.label.advanced");
var showall = function() {
showadvanced = !showadvanced;
if (showadvanced) {
$("#advanced-options").show();
$("#advanced").html('<label for="node-advanced" style="width:200px !important"><i class="fa fa-minus-square"></i> '+advanced+'</label>');
}
else {
$("#advanced-options").hide();
$("#advanced").html('<label for="node-advanced" style="width:200px !important"><i class="fa fa-plus-square"></i> '+advanced+' ...</label>');
}
};
showall();
$("#advanced").click( function() { showall(); });
}
});
</script>