From 5307c74f85d8805af83de8e6910cd1a8cc33e555 Mon Sep 17 00:00:00 2001
From: Dave Conway-Jones <conway@uk.ibm.com>
Date: Sun, 14 Jan 2018 22:16:51 +0000
Subject: [PATCH] remove inject node at specific time spinner

to close #1406
perform better validation / truncation of input for crontab,
adult spacing on page to be less cramped/more aligned
---
 nodes/core/core/20-inject.html | 67 +++++++++++++---------------------
 1 file changed, 25 insertions(+), 42 deletions(-)

diff --git a/nodes/core/core/20-inject.html b/nodes/core/core/20-inject.html
index ac653b3f9..c8b0d38f4 100644
--- a/nodes/core/core/20-inject.html
+++ b/nodes/core/core/20-inject.html
@@ -28,9 +28,9 @@
 
     <div class="form-row" id="node-once">
         <label for="node-input-once">&nbsp;</label>
-        <input type="checkbox" id="node-input-once" style="display:inline-block;width:15px;vertical-align:baseline;">
+        <input type="checkbox" id="node-input-once" style="display:inline-block; width:15px; vertical-align:baseline;">
         <span data-i18n="inject.onstart"></span>&nbsp;
-        <input type="text" id="node-input-onceDelay" placeholder="0.1" style="width:45px">&nbsp;
+        <input type="text" id="node-input-onceDelay" placeholder="0.1" style="width:45px; height:26px;">&nbsp;
         <span data-i18n="inject.onceDelay"></span>
     </div>
 
@@ -49,7 +49,7 @@
     <div class="form-row inject-time-row hidden" id="inject-time-row-interval">
         <span data-i18n="inject.every"></span>
         <input id="inject-time-interval-count" class="inject-time-count" value="1"></input>
-        <select style="width: 100px" id="inject-time-interval-units">
+        <select style="width:100px" id="inject-time-interval-units">
             <option value="s" data-i18n="inject.seconds"></option>
             <option value="m" data-i18n="inject.minutes"></option>
             <option value="h" data-i18n="inject.hours"></option>
@@ -57,7 +57,7 @@
     </div>
 
     <div class="form-row inject-time-row hidden" id="inject-time-row-interval-time">
-        <span data-i18n="inject.every"></span> <select style="width:90px" id="inject-time-interval-time-units" class="inject-time-int-count" value="1">
+        <span data-i18n="inject.every"></span> <select style="width:90px; margin-left:20px;" id="inject-time-interval-time-units" class="inject-time-int-count" value="1">
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
@@ -74,7 +74,7 @@
         <span data-i18n="inject.between"></span> <select id="inject-time-interval-time-start" class="inject-time-times"></select>
         <span data-i18n="inject.and"></span> <select id="inject-time-interval-time-end" class="inject-time-times"></select><br/>
         <div id="inject-time-interval-time-days" class="inject-time-days">
-            <div style="display: inline-block; vertical-align: top;margin-right:5px;" data-i18n="inject.on">on</div>
+            <div style="display:inline-block; vertical-align:baseline; margin-right:5px;" data-i18n="inject.on">on</div>
             <div style="display:inline-block;">
                 <div>
                     <label><input type='checkbox' checked value='1'/> <span data-i18n="inject.days.0"></span></label>
@@ -94,9 +94,9 @@
     </div>
 
     <div class="form-row inject-time-row hidden" id="inject-time-row-time">
-        <span data-i18n="inject.at"></span> <input id="inject-time-time" value="12:00"></input><br/>
+        <span data-i18n="inject.at"></span> <input type="text" id="inject-time-time" value="12:00"></input><br/>
         <div id="inject-time-time-days" class="inject-time-days">
-            <div style="display: inline-block; vertical-align: top;margin-right: 5px;" data-i18n="inject.on"></div>
+            <div style="display:inline-block; vertical-align:baseline; margin-right:5px;" data-i18n="inject.on"></div>
             <div style="display:inline-block;">
                 <div>
                     <label><input type='checkbox' checked value='1'/> <span data-i18n="inject.days.0"></span></label>
@@ -134,17 +134,20 @@
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
-        vertical-align: top;
+        vertical-align: baseline;
         width: 100px;
     }
-     .inject-time-days input {
-         width: auto;
-     }
+    .inject-time-days input {
+        width: auto;
+        vertical-align: baseline;
+    }
     .inject-time-times {
         width: 90px;
     }
     #inject-time-time {
         width: 75px;
+        margin-left: 8px;
+        margin-bottom: 8px;
     }
     .inject-time-count {
         width: 40px !important;
@@ -275,6 +278,10 @@ If you want every 20 minutes from now - use the <i>"interval"</i> option.</p>
                 }
             });
 
+            $("#node-input-once").change(function() {
+                $("#node-input-onceDelay").attr('disabled', !$("#node-input-once").prop('checked'));
+            })
+
             $(".inject-time-times").each(function() {
                 for (var i=0; i<24; i++) {
                     var l = (i<10?"0":"")+i+":00";
@@ -303,35 +310,6 @@ If you want every 20 minutes from now - use the <i>"interval"</i> option.</p>
                 min:1
             });
 
-            $.widget( "ui.injecttimespinner", $.ui.spinner, {
-                options: {
-                    // seconds
-                    step: 60 * 1000,
-                    // hours
-                    page: 60
-                },
-                _parse: function( value ) {
-                    if ( typeof value === "string" ) {
-                        // already a timestamp
-                        if ( Number( value ) == value ) {
-                            return Number( value );
-                        }
-                        var p = value.split(":");
-                        var offset = new Date().getTimezoneOffset();
-                        return ((Number(p[0])*60)+Number(p[1])+offset)*60*1000;
-                    }
-                    return value;
-                },
-                _format: function( value ) {
-                    var d = new Date(value);
-                    var h = d.getHours();
-                    var m = d.getMinutes();
-                    return ((h < 10)?"0":"")+h+":"+((m < 10)?"0":"")+m;
-                }
-            });
-
-            $("#inject-time-time").injecttimespinner();
-
             var repeattype = "none";
             if (this.repeat != "" && this.repeat != 0) {
                 repeattype = "interval";
@@ -501,8 +479,13 @@ If you want every 20 minutes from now - use the <i>"interval"</i> option.</p>
                         days = days.join(",");
                     }
                     var parts = time.split(":");
-                    repeat = "";
-                    crontab = parts[1]+" "+parts[0]+" * * "+days;
+                    if (parts.length === 2) {
+                        repeat = "";
+                        parts[1] = ("00" + (parseInt(parts[1]) % 60)).substr(-2);
+                        parts[0] = ("00" + (parseInt(parts[0]) % 24)).substr(-2);
+                        crontab = parts[1]+" "+parts[0]+" * * "+days;
+                    }
+                    else { crontab = ""; }
                 }
             }