From 9b9088bd5ec4dd1cbcdc5f74ea192a08d64c031e Mon Sep 17 00:00:00 2001
From: Jonathan Wong <Jonny.Wong.16@gmail.com>
Date: Mon, 24 Aug 2015 19:34:15 -0700
Subject: [PATCH] Fixed alert messages on settings validation

---
 data/interfaces/default/css/plexpy.css | 28 ++++++++++++++++++
 data/interfaces/default/settings.html  | 40 ++++++++++++++++----------
 2 files changed, 53 insertions(+), 15 deletions(-)

diff --git a/data/interfaces/default/css/plexpy.css b/data/interfaces/default/css/plexpy.css
index 3b5ca948..57153fd2 100644
--- a/data/interfaces/default/css/plexpy.css
+++ b/data/interfaces/default/css/plexpy.css
@@ -1954,6 +1954,34 @@ a .home-platforms-instance-list-oval:hover,
     -o-transition: none !important;
     transition: none !important;
 }
+.settings-alert {
+    float: left;
+    padding: 0;
+    margin: 5px 0;
+    border: 0;
+    position: relative;
+}
+.settings-alert ul {
+    padding: 0;
+}
+.settings-alert ul li {
+    list-style: none;
+    padding: 5px 12px 5px 35px;
+    margin: 0;
+    border: 1px solid #ebccd1;
+    border-radius: 4px;
+}
+.settings-alert ul li:before {
+    content: "\f071";
+    font-family: FontAwesome;
+    font-style: normal;
+    font-weight: normal;
+    text-decoration: inherit;
+    font-size: 18px;
+    position: absolute;
+    top: 5px;
+    left: 12px;
+}
 #users-to-delete > li {
     color: #e9a049;
 }
diff --git a/data/interfaces/default/settings.html b/data/interfaces/default/settings.html
index e3e210c5..b06e5c8c 100644
--- a/data/interfaces/default/settings.html
+++ b/data/interfaces/default/settings.html
@@ -91,8 +91,9 @@ available_notification_agents = notifiers.available_notification_agents()
                             <label for="home_stats_length">Time Frame</label>
                             <div class="row">
                                 <div class="col-md-2">
-                                    <input type="text" class="form-control" data-parsley-type="integer" id="home_stats_length" name="home_stats_length" value="${config['home_stats_length']}" size="3" data-parsley-min="0" data-parsley-trigger="change" required>
+                                    <input type="text" class="form-control" data-parsley-type="integer" id="home_stats_length" name="home_stats_length" value="${config['home_stats_length']}" size="3" data-parsley-min="0" data-parsley-trigger="change" data-parsley-errors-container="#home_stats_length_error" required>
                                 </div>
+                                <div id="home_stats_length_error" class="alert alert-danger settings-alert" role="alert"></div>
                             </div>
                             <p class="help-block">Specify the number of days for the statistics on the home page. Default is 30 days.</p>
                         </div>
@@ -100,8 +101,9 @@ available_notification_agents = notifiers.available_notification_agents()
                             <label for="home_stats_count">Top Lists</label>
                             <div class="row">
                                 <div class="col-md-2">
-                                    <input type="text" class="form-control" data-parsley-type="integer" id="home_stats_count" name="home_stats_count" value="${config['home_stats_count']}" size="3" data-parsley-min="0" data-parsley-max="10" data-parsley-trigger="change" required>
+                                    <input type="text" class="form-control" data-parsley-type="integer" id="home_stats_count" name="home_stats_count" value="${config['home_stats_count']}" size="3" data-parsley-range="[0,10]" data-parsley-trigger="change" data-parsley-errors-container="#home_stats_count_error" required>
                                 </div>
+                                <div id="home_stats_count_error" class="alert alert-danger settings-alert" role="alert"></div>
                             </div>
                             <p class="help-block">Specify the number of items to show in the top lists for the statistics on the home page. Max is 10 items, default is 5 items, 0 to disable.</p>
                         </div>
@@ -131,8 +133,9 @@ available_notification_agents = notifiers.available_notification_agents()
                             <label for="http_port">HTTP Port</label>
                             <div class="row">
                                 <div class="col-md-2">
-                                    <input type="text" class="form-control" data-parsley-type="integer" id="http_port" name="http_port" value="${config['http_port']}" data-parsley-trigger="change" required>
+                                    <input type="text" class="form-control" data-parsley-type="integer" id="http_port" name="http_port" value="${config['http_port']}" data-parsley-trigger="change" data-parsley-errors-container="#http_port_error" required>
                                 </div>
+                                <div id="http_port_error" class="alert alert-danger settings-alert" role="alert"></div>
                             </div>
                             <p class="help-block">Port to bind web server to. Note that ports below 1024 may require root.</p>
                         </div>
@@ -232,8 +235,9 @@ available_notification_agents = notifiers.available_notification_agents()
                             <label for="pms_port">Plex Port</label>
                             <div class="row">
                                 <div class="col-md-2">
-                                    <input data-parsley-type="integer" class="pms-settings form-control" type="text" id="pms_port" name="pms_port" value="${config['pms_port']}" size="30" data-parsley-trigger="change" required>
+                                    <input data-parsley-type="integer" class="pms-settings form-control" type="text" id="pms_port" name="pms_port" value="${config['pms_port']}" size="30" data-parsley-trigger="change" data-parsley-errors-container="#pms_port_error" required>
                                 </div>
+                                <div id="pms_port_error" class="alert alert-danger settings-alert" role="alert"></div>
                             </div>
                             <p class="help-block">Port that Plex Media Server is listening on.</p>
                         </div>
@@ -295,8 +299,9 @@ available_notification_agents = notifiers.available_notification_agents()
                             <label for="refresh_users_interval">User list Refresh Interval</label>
                             <div class="row">
                                 <div class="col-md-2">
-                                    <input type="text" class="form-control" data-parsley-type="integer" id="refresh_users_interval" name="refresh_users_interval" value="${config['refresh_users_interval']}" size="5" data-parsley-range="[1,24]" data-parsley-trigger="change" required>
+                                    <input type="text" class="form-control" data-parsley-type="integer" id="refresh_users_interval" name="refresh_users_interval" value="${config['refresh_users_interval']}" size="5" data-parsley-range="[1,24]" data-parsley-trigger="change" data-parsley-errors-container="#refresh_users_interval_error" required>
                                 </div>
+                                <div id="refresh_users_interval_error" class="alert alert-danger settings-alert" role="alert"></div>
                             </div>
                             <p class="help-block">The interval (in hours) PlexPy will request an updated friends list from Plex.tv. 1 minimum, 24 maximum.</p>
                         </div>
@@ -337,10 +342,11 @@ available_notification_agents = notifiers.available_notification_agents()
                             <label for="monitoring_interval">Monitoring Interval</label>
                             <div class="row">
                                 <div class="col-md-2">
-                                    <input type="text" class="form-control" data-parsley-type="integer" id="monitoring_interval" name="monitoring_interval" value="${config['monitoring_interval']}" size="5" data-parsley-min="30" data-parsley-trigger="change" required>
+                                    <input type="text" class="form-control" data-parsley-type="integer" id="monitoring_interval" name="monitoring_interval" value="${config['monitoring_interval']}" size="5" data-parsley-min="30" data-parsley-trigger="change" data-parsley-errors-container="#monitoring_interval_error" required>
                                 </div>
+                                <div id="monitoring_interval_error" class="alert alert-danger settings-alert" role="alert"></div>
                             </div>
-                            <p class="help-block">The interval (in seconds) PlexPy will ping your Plex Server. Min 30 seconds, Recommended 60 seconds.</p>
+                            <p class="help-block">The interval (in seconds) PlexPy will ping your Plex Server. Min 30 seconds, recommended 60 seconds.</p>
                         </div>
 
                         <div class="padded-header">
@@ -353,11 +359,12 @@ available_notification_agents = notifiers.available_notification_agents()
                             <p class="help-block">Keep records of all video items played from your Plex Media Server.</p>
                         </div>
                         <div class="form-group">
-                            <label for="monitoring_interval">Ignore Interval</label>
+                            <label for="logging_ignore_interval">Ignore Interval</label>
                             <div class="row">
                                 <div class="col-md-2">
-                                    <input type="text" class="form-control" data-parsley-type="integer" id="logging_ignore_interval" name="logging_ignore_interval" value="${config['logging_ignore_interval']}" size="5" data-parsley-min="0" data-parsley-trigger="change" required>
+                                    <input type="text" class="form-control" data-parsley-type="integer" id="logging_ignore_interval" name="logging_ignore_interval" value="${config['logging_ignore_interval']}" size="5" data-parsley-min="0" data-parsley-trigger="change" data-parsley-errors-container="#logging_ignore_interval_error" required>
                                 </div>
+                                <div id="logging_ignore_interval_error" class="alert alert-danger settings-alert" role="alert"></div>
                             </div>
                             <p class="help-block">The interval (in seconds) PlexPy will wait for a video item to be active before logging it. 0 to disable.</p>
                         </div>
@@ -389,8 +396,9 @@ available_notification_agents = notifiers.available_notification_agents()
                             <label for="buffer_threshold">Buffer Threshold</label>
                             <div class="row">
                                 <div class="col-md-2">
-                                    <input type="text" class="form-control" data-parsley-type="integer" id="buffer_threshold" name="buffer_threshold" value="${config['buffer_threshold']}" data-parsley-range="[0,50]" data-parsley-trigger="change" required>
+                                    <input type="text" class="form-control" data-parsley-type="integer" id="buffer_threshold" name="buffer_threshold" value="${config['buffer_threshold']}" data-parsley-range="[0,50]" data-parsley-trigger="change" data-parsley-errors-container="#buffer_threshold_error" required>
                                 </div>
+                                <div id="buffer_threshold_error" class="alert alert-danger settings-alert" role="alert"></div>
                             </div>
                             <p class="help-block">How many buffer events should we wait before triggering the first warning. Buffer events increment on each monitor ping if play state is buffering. 0 to disable buffer warnings.</p>
                         </div>
@@ -398,8 +406,9 @@ available_notification_agents = notifiers.available_notification_agents()
                             <label for="buffer_wait">Buffer Wait</label>
                             <div class="row">
                                 <div class="col-md-2">
-                                    <input type="text" class="form-control" data-parsley-type="integer" id="buffer_wait" name="buffer_wait" value="${config['buffer_wait']}" data-parsley-min="0" data-parsley-trigger="change" required>
+                                    <input type="text" class="form-control" data-parsley-type="integer" id="buffer_wait" name="buffer_wait" value="${config['buffer_wait']}" data-parsley-min="0" data-parsley-trigger="change" data-parsley-errors-container="#buffer_wait_error" required>
                                 </div>
+                                <div id="buffer_wait_error" class="alert alert-danger settings-alert" role="alert"></div>
                             </div>
                             <p class="help-block">The value (in seconds) PlexPy should wait before triggering the next buffer warning. 0 to always trigger.</p>
                         </div>
@@ -430,8 +439,9 @@ available_notification_agents = notifiers.available_notification_agents()
                             <label for="notify_watched_percent">Watched Percent</label>
                             <div class="row">
                                 <div class="col-md-2">
-                                    <input type="text" class="form-control" data-parsley-type="integer" id="notify_watched_percent" name="notify_watched_percent" value="${config['notify_watched_percent']}" size="5" data-parsley-range="[50,95]" data-parsley-trigger="change" required>
+                                    <input type="text" class="form-control" data-parsley-type="integer" id="notify_watched_percent" name="notify_watched_percent" value="${config['notify_watched_percent']}" size="5" data-parsley-range="[50,95]" data-parsley-trigger="change" data-parsley-errors-container="#notify_watched_percent_error" required>
                                 </div>
+                                <div id="notify_watched_percent_error" class="alert alert-danger settings-alert" role="alert"></div>
                             </div>
                             <p class="help-block">Set the progress percentage of when a watched notification should be triggered. Minimum 50, Maximum 95.</p>
                         </div>
@@ -561,7 +571,7 @@ available_notification_agents = notifiers.available_notification_agents()
                             <h3>Notification Agents</h3>
                         </div>
                         <p class="help-block">
-                            Toggle the desired notification options by clicking the bolt icon and configure it by selecting the settings icon to the right.
+                            Toggle the desired notification options by clicking the bell icon and configure it by clicking the settings icon to the right.
                         </p>
                         <br/>
                         <ul class="stacked-configs list-unstyled">
@@ -569,9 +579,9 @@ available_notification_agents = notifiers.available_notification_agents()
                             <li>
                                 <span>
                                     % if agent['on_play'] or agent['on_stop'] or agent['on_pause'] or agent['on_resume'] or agent['on_buffer'] or agent['on_watched']:
-                                    <a href="javascript:void(0)" data-target="#notification-triggers-modal" data-id="${agent['id']}" class="toggle-notification-triggers-modal toggle-left active" data-toggle="modal"><i class="fa fa-lg fa-flash"></i></a>
+                                    <a href="javascript:void(0)" data-target="#notification-triggers-modal" data-id="${agent['id']}" class="toggle-notification-triggers-modal toggle-left active" data-toggle="modal"><i class="fa fa-lg fa-bell"></i></a>
                                     % else:
-                                    <a href="javascript:void(0)" data-target="#notification-triggers-modal" data-id="${agent['id']}" class="toggle-notification-triggers-modal toggle-left" data-toggle="modal"><i class="fa fa-lg fa-flash"></i></a>
+                                    <a href="javascript:void(0)" data-target="#notification-triggers-modal" data-id="${agent['id']}" class="toggle-notification-triggers-modal toggle-left" data-toggle="modal"><i class="fa fa-lg fa-bell"></i></a>
                                     % endif
                                     ${agent['name']}
                                     % if agent['has_config']: