From: Chuck Scott <cscott@gaslightmedia.com>
Date: Fri, 2 Aug 2019 16:25:03 +0000 (-0400)
Subject: Fixed min/max issues with number field UI element - added custom validation.
X-Git-Tag: v3.0.0^2~7
X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/index.cgi?a=commitdiff_plain;h=9dbfabe7e89b4b292859a9630c47ee677769b5df;p=WP-Plugins%2Fglm-serverstats.git

Fixed min/max issues with number field UI element - added custom validation.

Other minor fixes.
---

diff --git a/css/admin.css b/css/admin.css
index 84700df..a9c07a6 100644
--- a/css/admin.css
+++ b/css/admin.css
@@ -4,18 +4,32 @@
 
 */
 .glm-usage-admin-wrap {
-    max-width: 98%;
+    max-width:      98%;
 }
 .glm-usage-admin-wrap .glm-usage-copyright {
-    text-align: center;
-    margin: 2em;
+    text-align:     center;
+    margin:         2em;
 }
 .glm-usage-admin-wrap h1 {
-    border-bottom: 1px black solid;
-    margin-bottom: 1rem !important;
+    border-bottom:  1px black solid;
+    margin-bottom:  1rem !important;
 }
 .glm-usage-admin-wrap .glm-required {
-    color: red !important;
+    color:          red !important;
+}
+.glm-notice {
+    color:          #1779ba !important;
+    font-weight:    bold;
+}
+.glm-notice-right {
+    color:          #1779ba !important;
+    font-weight:    bold;
+    font-size:      1.3rem;
+    float:          right;
+}
+.glm-failure-notice {
+    color:          red !important;
+    font-size:      1.3rem;
 }
 /* Fixes input boxes that are different heights. Not sure who's doing that. */
 .glm-usage-admin-wrap input[type="color"],
@@ -32,8 +46,8 @@
 .glm-usage-admin-wrap input[type="time"],
 .glm-usage-admin-wrap input[type="url"],
 .glm-usage-admin-wrap input[type="week"] {
-    height: 2rem;
-    margin: 0 0 0.5rem;
+    height:         2rem;
+    margin:         0 0 0.5rem;
 }
 .glm-usage-admin-wrap .help-text {
 }
@@ -59,39 +73,3 @@
 .glm-ui-f6-editor {
 
 }
-
-
-/*
-
-.glm-error {
-    color: red;
-    font-weight: bold;
-}
-.glm-warning {
-    color: green;
-    font-weight: bold;
-}
-.glm-strong-warning {
-    color: red;
-    font-weight: bold;
-    font-size: 1.3em;
-}
-.glm-notice {
-    color: #0073AA;
-    font-weight: bold;
-}
-.glm-usage-field-not-supplied {
-
-}
-.glm-usage-section-name {
-    text-align: center;
-}
-.glm-usage-form-error {
-    color: green;
-    top: -30px;
-}
-.glm-usage-field-highlight {
-    border: 1px red solid;
-}
-
-*/
\ No newline at end of file
diff --git a/views/adminServerStats.html b/views/adminServerStats.html
index 5d79c6c..dacfc0d 100755
--- a/views/adminServerStats.html
+++ b/views/adminServerStats.html
@@ -215,12 +215,15 @@
                             {$ui = [
                                 'field'         => 'threshold',
                                 'value'         => {$threshold|string_format:"%.0f"},
-                                'label'         => 'Reporting Threshold %',
+                                'label'         => 'Monthly Reporting Threshold %',
                                 'required'      => true,
                                 'min'           => 0,
                                 'max'           => 200,
                                 'width'         => 5,
-                                'helpText'      => 'Percentage above which target percentage should be highlighted in red and site contacts will receive E-Mail reports.'
+                                'helpText'      => '
+                                                    Percentage above which target percentage should be highlighted in red and site contacts will receive E-Mail reports.
+                                                    Set Reporting Threshold to -1% to block all automatic monthly reporting.
+                                                   '
                             ]}
                             {include file="ui/f6/number.html"}
     
diff --git a/views/adminServerStatsConfig.html b/views/adminServerStatsConfig.html
index b88f7db..f8e7ba4 100755
--- a/views/adminServerStatsConfig.html
+++ b/views/adminServerStatsConfig.html
@@ -1,11 +1,10 @@
 {include file='header.html'}
 <a name="glmPageTop"></a>
 
+        {if $connectionUpdated} {* Place Settings Updatd after first title line *}
+            <span class="glm-notice-right glm-flash-updated glm-usage-update-notice">Settings Updated</span>
+        {/if}
         <h2>Server Usage Statistics Configuration</h2>
-            {if $connectError}<p>NOTICE: <span class="glm-error">Unable To Connect - Please check data below</span></p>{/if}
-            {if $connectionUpdated} {* Place Settings Updatd after first title line *}
-                <span class="glm-notice glm-flash-updated glm-usage-update-notice">Settings Updated</span>
-            {/if}
 
         {* Beginning of user interface using view UI elements *}
 
@@ -40,13 +39,31 @@
                                             '
                         ]}
                         {include file="ui/f6/section-start.html"}
-
-                        {* Text Line *}
+                        
+                        {if $connectError}
+                        
+                            {* Text Line *}
                             {$ui = [
-                                'text'         => 'Please ask Gaslight Media Engineering if you need assistance with these settings.'
+                                'text'  => '
+                                            <p class="glm-failure-notice"><b>NOTICE</b>: Unable To Connect - Please check "Database Connection" below</p>
+                                            <p>
+                                                Database connection failures may also be due to the Web server not being able to communicate with the GLM Data Usage
+                                                database. If necessary, please check with Gaslight Media Engineering for assistance.
+                                            </p>       
+                                            '                       
                             ]}
                             {include file="ui/f6/text-line.html"}
-
+                        
+                        {else}                        
+            
+                            {* Text Line *}
+                                {$ui = [
+                                    'text'         => 'Please ask Gaslight Media Engineering if you need assistance with these settings.'
+                                ]}
+                                {include file="ui/f6/text-line.html"}
+
+                        {/if}
+                        
                         {* db_name *}
                             {$ui = [
                                 'field'         => 'db_name',
@@ -147,7 +164,7 @@
                                 'max'           => 150,
                                 'width'         => 5,
                                 'helpText'      => 'Send notification to customer contact if at this % of target or higher for usage or disk space.',
-                                'errorText'     => 'Im a fool.'
+                                'errorText'     => 'The value must be between 0 and 150!'
                             ]}
                             {include file="ui/f6/number.html"}
 
diff --git a/views/header.html b/views/header.html
index 7413eee..9028734 100644
--- a/views/header.html
+++ b/views/header.html
@@ -1,2 +1 @@
 <div class="wrap glm-usage-admin-wrap">
-    <h1>{$glmPluginName}</h1>
diff --git a/views/ui/f6/number.html b/views/ui/f6/number.html
index 143e1c2..695d84c 100644
--- a/views/ui/f6/number.html
+++ b/views/ui/f6/number.html
@@ -11,6 +11,7 @@
         'suffix'        => string               Suffix text to add after input field,
         'min'           => integer              Minimum numeric value
         'max'           => integer              Maximum numeric value
+        'step'          => integer              Step size when using up/down buttons (spinner)
         'width'         => integer              Size of input field in characters,
         'message'       => string               Message string to display between label and input,
         'helpText'      => string               Help text for this input,
@@ -24,6 +25,31 @@
     {$ui.width = $ui.width * .55 + 2.5}
 {/if}
 
+{* If min or max values are supplied, add validator to check that *}
+{if isset($ui.min) || isset($ui.max)}
+    {$usingNumberValidator = true}
+    <script> 
+        {* 
+            Note that we have to read the attribute since the $ui parameter 
+            has likely been changed by the time this runs.
+        *}
+        jQuery(document).ready(function($) {
+            function glmUiF6NumberValidator($el, required, parent) {
+                var min = $el.attr('min');       
+                if (min !== 'undefined' && (Number($el.val()) < min)) {
+                    return false;
+                }
+                var max = $el.attr('max');
+                if (max !== 'undefined' && (Number($el.val()) > max)) {
+                    return false;
+                }
+                return true;
+            };
+            Foundation.Abide.defaults.validators['number-range'] = glmUiF6NumberValidator;
+        });
+    </script>
+{/if}
+
 <div class="cell small-12 glm-f6-ui-field">
     {if (!isset($ui.value) && !isset($ui.field)) || !isset($ui.label)}
         <span class="glm-required">Field Error: Required field information not supplied!</span>
@@ -32,7 +58,7 @@
             <div class="cell shrink">
                 <input
                     class="glm-f6-ui-field-input-number"
-                    id="{$ui.field}_FieldID"
+                    id="{$ui.field}"
                     type="number"
                     name="{$ui.field}"
                     value="{$ui.value}"
@@ -40,8 +66,10 @@
                     {if !empty($ui.errorText)}aria-errormessage="{$ui.field}_ErrorText"{/if}
                     {if !empty($ui.helpText)}aria-describedby="{$ui.field}_HelpText"{/if}
                     {if !empty($ui.placeholder)}placeholder="{$ui.placeholder}"{/if}
-                    {if !empty($ui.min)}min="{$ui.min}"{/if}
-                    {if !empty($ui.min)}max="{$ui.max}"{/if}
+                    {if $usingNumberValidator}data-validator="number-range"{/if}
+                    {if isset($ui.min)}min="{$ui.min}"{/if}
+                    {if isset($ui.max)}max="{$ui.max}"{/if}
+                    {if !empty($ui.step)}step="{$ui.step}"{/if}
                     style="width: {$ui.width}rem;"
                 >
             </div>
@@ -52,8 +80,8 @@
                 <label for="{$ui.field}" class="{if !empty($ui.required)} glm-required{/if} glm-f6-ui-field-label">{$ui.label}</label>
             </div>
             <div class="cell small-12 glm-f6-ui-field-messages">
+                {if !empty($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error glm-f6-ui-field-error-text" data-form-error-for="{$ui.field}">{$ui.errorText}</span>{/if}
                 {if !empty($ui.helpText)}<span class="help-text" id="{$ui.field}_HelpText">{$ui.helpText}</span>{/if}
-                {if !empty($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error">{$ui.errorText}</span>{/if}
             </div>
         </div>
     {/if}