From 7080d8afa31cb231ac4c07a6fbe4ae5fa8efefac Mon Sep 17 00:00:00 2001
From: Amam Mustofa <mustofa@binary.com>
Date: Fri, 9 Nov 2018 14:26:04 +0800
Subject: [PATCH] add error message according to range end time duration

---
 src/main.css               |  7 ++++++-
 src/trade/tradeDialog.es6  | 21 +++++++++++++++++++++
 src/trade/tradeDialog.html |  9 +++++++++
 src/trade/tradeDialog.scss |  2 ++
 4 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/main.css b/src/main.css
index 7b03ca015c..88123fc42a 100755
--- a/src/main.css
+++ b/src/main.css
@@ -605,4 +605,9 @@ label.checkbox input:checked ~ span.check {
 .ui-dialog-titlebar {
     display: flex;
     align-items: center;
-}
\ No newline at end of file
+}
+
+.error-field {
+    border-color: #c03!important;
+    color: #c03;
+} 
\ No newline at end of file
diff --git a/src/trade/tradeDialog.es6 b/src/trade/tradeDialog.es6
index 3f4eee8072..0867c9641b 100644
--- a/src/trade/tradeDialog.es6
+++ b/src/trade/tradeDialog.es6
@@ -628,6 +628,8 @@ function init_state(available,root, dialog, symbol, contracts_for_spot){
     if (!range) return;
     state.duration_count.min = range.min;
     state.duration_count.max = range.max;
+    $('#minimum_hint').html(range.min)
+    $('#maximum_hint').html(range.max)
     if(try_to_keep_value !== true) {
       state.duration_count.value = range.min;
     }
@@ -800,6 +802,25 @@ function init_state(available,root, dialog, symbol, contracts_for_spot){
       });
     }
 
+    var $duration_input = $('#duration-input')
+    var $duration_hint_minimum = $('#duration-hint-minimum')
+    var $duration_hint_maximum = $('#duration-hint-maximum')
+    if($duration_input.val() < state.duration_count.min){
+      $duration_input.addClass('error-field')
+      $duration_hint_maximum.addClass('invisible')
+      $duration_hint_minimum.removeClass('invisible')
+    }
+    else if($duration_input.val() > state.duration_count.max){
+      $duration_input.addClass('error-field')
+      $duration_hint_minimum.addClass('invisible')
+      $duration_hint_maximum.removeClass('invisible')
+      }
+    else{
+      $duration_hint_maximum.addClass('invisible')
+      $duration_hint_minimum.addClass('invisible')
+      $duration_input.removeClass('error-field')
+    }
+
     async function subscribeProposalHandler(request, times_to_retry, required_err_code_for_retry) {
       let response;
       for (let i = 0; i < times_to_retry; i++) {
diff --git a/src/trade/tradeDialog.html b/src/trade/tradeDialog.html
index 80c2c088ba..91368b42cf 100644
--- a/src/trade/tradeDialog.html
+++ b/src/trade/tradeDialog.html
@@ -106,6 +106,15 @@
         </li>
     </ul>
 
+    <ul class="duration-hint error-field invisible" id="duration-hint-minimum">
+        <li>Minimum:</li>
+        <li id="minimum_hint"></li>
+    </ul>
+    <ul class="duration-hint error-field invisible" id="duration-hint-maximum">
+        <li>Maximum:</li>
+        <li id="maximum_hint"></li>
+    </ul>
+
     <ul class="barriers-barrier-row"
         rv-css-padding-top="categories.paddingTop < value"
         rv-show="barriers.barrier_count | eq 1">
diff --git a/src/trade/tradeDialog.scss b/src/trade/tradeDialog.scss
index 6ccec2bfb5..c30e26b0ef 100644
--- a/src/trade/tradeDialog.scss
+++ b/src/trade/tradeDialog.scss
@@ -47,7 +47,9 @@
   .error { background: #fef1cf; }
   ul.categories-row li select.contract-category-display + .ui-selectmenu-button { max-width: 145px; }
   .ui-selectmenu-text { margin-top: -4px; }
+  .duration-hint {font-style: italic;}
   .duration-row li,
+  .duration-hint li,
   .date-start-row li,
   .categories-row {
     justify-content: space-between;