From c9f3c6f4a30b3fd3c8fd0937c4db247d4406c739 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Wed, 1 Jul 2015 22:36:27 +0100
Subject: [PATCH] Update trigger node ui

---
 nodes/core/core/89-trigger.html        | 128 +++++++++++++++----------
 nodes/core/locales/en-US/messages.json |  44 +++++----
 2 files changed, 101 insertions(+), 71 deletions(-)

diff --git a/nodes/core/core/89-trigger.html b/nodes/core/core/89-trigger.html
index b610704c7..2c7e602b0 100644
--- a/nodes/core/core/89-trigger.html
+++ b/nodes/core/core/89-trigger.html
@@ -1,5 +1,5 @@
 <!--
-  Copyright 2014 IBM Corp.
+  Copyright 2014, 2015 IBM Corp.
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
@@ -16,64 +16,48 @@
 
 <script type="text/x-red" data-template-name="trigger">
     <div class="form-row">
-        <label for="node-input-op1type"><i class="fa fa-arrow-up"></i> <span data-i18n="trigger.output1"></span></label>
-        <select id="node-input-op1type" style="width:73% !important">
-            <option value="val" data-i18n="trigger.below"></option>
-            <option value="pay" data-i18n="trigger.payload"></option>
-            <option value="nul" data-i18n="trigger.nothing"></option>
+        <span data-i18n="trigger.send"></span>
+        <select id="node-input-op1type" style="width:200px !important">
+            <option value="val" data-i18n="trigger.output.string"></option>
+            <option value="pay" data-i18n="trigger.output.existing"></option>
+            <option value="nul" data-i18n="trigger.output.nothing"></option>
         </select>
-    </div>
-    <div class="form-row" id="node-op1">
-        <label for="node-input-op1">&nbsp;</label>
-        <input type="text" id="node-input-op1">
+        <input style="width: 180px !important" type="text" id="node-input-op1">
     </div>
     <div class="form-row">
-        <label for="node-input-duration"><i class="fa fa-clock-o"></i> <span data-i18n="trigger.wait"></span></label>
-        <input type="text" id="node-input-duration" placeholder="250" style="direction:rtl; width:70px !important">
-        <select id="node-input-units" style="width:140px !important">
-            <option value="ms" data-i18n="trigger.milisecs"></option>
-            <option value="s" data-i18n="trigger.secs"></option>
-            <option value="min" data-i18n="trigger.mins"></option>
-            <option value="hr" data-i18n="trigger.hours"></option>
+        <span data-i18n="trigger.then"></span>
+        <select id="node-then-type" style="width:150px;">
+            <option value="block" data-i18n="trigger.wait-reset"></option>
+            <option value="wait" data-i18n="trigger.wait-for"></option>
         </select>
+        <span class="node-type-wait">
+            <input type="text" id="node-input-duration" style="text-align:right; width:70px !important">
+            <select id="node-input-units" style="width:140px !important">
+                <option value="ms" data-i18n="trigger.duration.ms"></option>
+                <option value="s" data-i18n="trigger.duration.s"></option>
+                <option value="min" data-i18n="trigger.duration.m"></option>
+                <option value="hr" data-i18n="trigger.duration.h"></option>
+            </select>
+       </span>
     </div>
-    <div class="form-row">
-        <label for="node-input-op2type"><i class="fa fa-arrow-down"></i> <span data-i18n="trigger.output2"></span></label>
-        <select id="node-input-op2type" style="width:73% !important">
-            <option value="val" data-i18n="trigger.below"></option>
-            <option value="pay" data-i18n="trigger.payload"></option>
-            <option value="nul" data-i18n="trigger.nothing"></option>
+    <div class="form-row node-type-wait">
+        <span data-i18n="trigger.then-send"></span>
+        <select id="node-input-op2type" style="width:200px !important">
+            <option value="val" data-i18n="trigger.output.string"></option>
+            <option value="pay" data-i18n="trigger.output.existing"></option>
+            <option value="nul" data-i18n="trigger.output.nothing"></option>
         </select>
+        <input style="width: 145px !important" type="text" id="node-input-op2">
     </div>
-    <div class="form-row" id="node-op2">
-        <label for="node-input-op2">&nbsp;</label>
-        <input type="text" id="node-input-op2">
-    </div>
-    <div class="form-row">
-        <label for="node-input-extend"><i class="fa fa-repeat"></i> <span data-i18n="trigger.and"></span></label>
-        <select id="node-input-extend" style="width:73% !important">
-            <option value="false" data-i18n="trigger.notext"></option>
-            <option value="true" data-i18n="trigger.extend"></option>
-        </select>
+    <div class="form-row node-type-wait">
+        <input type="checkbox" id="node-input-extend" style="margin-left: 5px; vertical-align: top; width: auto !important;"> <label style="width:auto !important;" for="node-input-extend" data-i18n="trigger.extend"></label>
     </div>
+    <br/>
     <div class="form-row">
         <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-tips">Tip: Outputs can be values, null, {{templated}} or msg.payload<br/> -->
-    <div class="form-tips"><span data-i18n="trigger.tip"></span></div>
-    <script>
-    {
-        $("#node-input-op1type").change(function() {
-            if ($("#node-input-op1type").val() == "val") { $("#node-op1").show(); }
-            else { $("#node-op1").hide(); }
-        });
-        $("#node-input-op2type").change(function() {
-            if ($("#node-input-op2type").val() == "val") { $("#node-op2").show(); }
-            else { $("#node-op2").hide(); }
-        });
-    }
-    </script>
+    <div class="form-tips" data-i18n="[html]trigger.tip"></div>
 </script>
 
 <script type="text/x-red" data-help-name="trigger">
@@ -111,20 +95,60 @@
         icon: "trigger.png",
         label: function() {
             if (this.duration > 0) {
-                return this.name|| this._("trigger.triggerlabel")+" "+this.duration+this.units;
+                return this.name|| this._("trigger.label.trigger")+" "+this.duration+this.units;
             }
             else {
-                return this.name|| this._("trigger.triggeroncelabel");
+                return this.name|| this._("trigger.label.trigger-block");
             }
         },
         labelStyle: function() {
             return this.name?"node_label_italic":"";
         },
         oneditprepare: function() {
-            $( "#node-input-duration" ).spinner({
-                min:1,
-                increment:25
+            $("#node-then-type").change(function() {
+                if ($(this).val() == "block") {
+                    $(".node-type-wait").hide();
+                    $(".form-tips").show();
+                } else {
+                    $(".node-type-wait").show();
+                    $(".form-tips").hide();
+                }
             });
+            $("#node-input-op1type").change(function() {
+                if ($(this).val() == "val") {
+                    $("#node-input-op1").show();
+                } else {
+                    $("#node-input-op1").hide();
+                }
+            });
+            $("#node-input-op2type").change(function() {
+                if ($(this).val() == "val") {
+                    $("#node-input-op2").show();
+                } else {
+                    $("#node-input-op2").hide();
+                }
+            });
+            if (this.duration == "0") {
+                $("#node-then-type").val("block");
+            } else {
+                $("#node-then-type").val("wait");
+            }
+            $("#node-then-type").change();
+            $("#node-input-op1type").change();
+            $("#node-input-op2type").change();
+
+            if (this.extend === "true" || this.extend === true) {
+                $("#node-input-extend").prop("checked",true);
+            } else {
+                $("#node-input-extend").prop("checked",false);
+            }
+
+        },
+        oneditsave: function() {
+            if ($("#node-then-type").val() == "block") {
+                $("#node-input-duration").val("0");
+            }
+
         }
     });
 </script>
diff --git a/nodes/core/locales/en-US/messages.json b/nodes/core/locales/en-US/messages.json
index bdc98b0a6..040b4a959 100644
--- a/nodes/core/locales/en-US/messages.json
+++ b/nodes/core/locales/en-US/messages.json
@@ -141,27 +141,33 @@
         }
     },
     "trigger": {
-        "output1": "Output",
-        "wait": "then wait",
-        "output2": "output",
-        "and": "and",
-        "below": "the value below",
-        "payload": "the existing payload",
-        "nothing": "nothing (no output)",
-        "milisecs": "Miliseconds",
-        "secs": "Seconds",
-        "mins": "Minutes",
-        "hours": "Hours",
-        "notext": "don't extend the timer if retriggered",
-        "extend": "extend the timer if retriggered",
-        "tip": "Setting the timeout to 0 sets an infinite timeout = single shot.",
-        "triggerlabel": "trigger",
-        "triggeroncelabel": "trigger once & infinite"
+        "send": "Send",
+        "then": "then",
+        "then-send": "then send",
+        "output": {
+            "string": "the string payload",
+            "existing": "the existing message",
+            "nothing": "nothing"
+        },
+        "wait-reset": "wait to be reset",
+        "wait-for": "wait for",
+        "duration": {
+            "ms": "Milliseconds",
+            "s": "Seconds",
+            "m": "Minutes",
+            "h": "Hours"
+        },
+        "extend": "extend delay if new message arrives",
+        "tip": "The node can be reset by sending a message with the <b>msg.reset</b> property set",
+        "label": {
+            "trigger": "trigger",
+            "trigger-block": "trigger & block"
+        }
     },
     "comment": {
         "label": {
             "title": "Title",
-            "body": "Body" 
+            "body": "Body"
         },
         "tip": "Tip: The text can be styled as <a href=\"https://help.github.com/articles/markdown-basics/\" target=\"_new\">Github flavoured Markdown</a>",
         "defaulttitle": "Comment node",
@@ -292,14 +298,14 @@
             "connection-closed": "connection closed from __host__:__port__",
             "connections": "__count__ connection",
             "connections_plural": "__count__ connections"
-            
+
         },
         "errors": {
             "connection-lost": "connection lost to __host__:__port__",
             "timeout": "timeout closed socket port __port__",
             "cannot-listen": "unable to listen on port __port__, error: __error__",
             "error": "error: __error__",
-            
+
             "socket-error": "socket error from __host__:__port__",
             "no-host": "Host and/or port not set",
             "connect-timeout": "connect timeout",