stylign of scheduler form detail pane

awx/ui/client/lib/angular-scheduler/lib/angular-scheduler.js

@@ -406,6 +406,14 @@ angular.module('AngularScheduler', ['underscore'])
                     return validity;
                 };
 
+
+                var that = this;
+
+                that.scope.$on("loadSchedulerDetailPane", function() {
+                    console.log("loaded scheduler detail pane");
+                    that.isValid();
+                });
+                
                 // Returns an rrule object
                 this.getRRule = function() {
                     var options = this.getOptions();

awx/ui/client/src/scheduler/repeatFrequencyOptions.block.less

@@ -132,3 +132,8 @@
 .RepeatFrequencyOptions-yearlyOccurence {
     text-transform: capitalize;
 }
+
+.RepeatFrequencyOptions-error {
+    flex: initial;
+    width: 100%;
+}

awx/ui/client/src/scheduler/schedulerAdd.controller.js

@@ -1,21 +1,41 @@
-export default ['$compile', '$state', '$stateParams', 'AddSchedule', 'Wait', '$scope', function($compile, $state, $stateParams, AddSchedule, Wait, $scope) {
+export default ['$compile', '$state', '$stateParams', 'AddSchedule', 'Wait', '$scope', '$rootScope', function($compile, $state, $stateParams, AddSchedule, Wait, $scope, $rootScope) {
     $scope.$on("ScheduleFormCreated", function(e, scope) {
         $scope.hideForm = false;
         $scope = angular.extend($scope, scope);
-        $scope.$watchGroup(["schedulerStartDt",
+
+        $scope.$on("formUpdated", function() {
+            $rootScope.$broadcast("loadSchedulerDetailPane");
+        });
+
+        $scope.$watchGroup(["schedulerName",
+            "schedulerStartDt",
             "schedulerStartHour",
             "schedulerStartMinute",
             "schedulerStartSecond",
             "schedulerTimeZone",
             "schedulerFrequency",
-            "schedulerInterval"], function(val) {
+            "schedulerInterval",
-                if (!$scope.scheduler_form.$invalid) {
+            "monthlyRepeatOption",
-                    $scope.schedulerIsValid = true;
+            "monthDay",
-                } else {
+            "monthlyOccurrence",
-                    $scope.schedulerIsValid = false;
+            "monthlyWeekDay",
-                }
+            "yearlyRepeatOption",
-                return val;
+            "yearlyMonth",
-        });
+            "yearlyMonthDay",
+            "yearlyOccurrence",
+            "yearlyWeekDay",
+            "yearlyOtherMonth",
+            "schedulerEnd",
+            "schedulerOccurrenceCount",
+            "schedulerEndDt"
+        ], function() {
+            $scope.$emit("formUpdated");
+        }, true);
+
+        $scope.$watch("weekDays", function() {
+            $scope.$emit("formUpdated");
+        }, true);
+
         Wait('stop');
     });
 

awx/ui/client/src/scheduler/schedulerEdit.controller.js

@@ -1,21 +1,42 @@
-export default ['$compile', '$state', '$stateParams', 'EditSchedule', 'Wait', '$scope', function($compile, $state, $stateParams, EditSchedule, Wait, $scope) {
+export default ['$compile', '$state', '$stateParams', 'EditSchedule', 'Wait', '$scope', '$rootScope', function($compile, $state, $stateParams, EditSchedule, Wait, $scope, $rootScope) {
     $scope.$on("ScheduleFormCreated", function(e, scope) {
         $scope.hideForm = false;
         $scope = angular.extend($scope, scope);
-        $scope.$watchGroup(["schedulerStartDt",
+
+        $scope.$on("formUpdated", function() {
+            $rootScope.$broadcast("loadSchedulerDetailPane");
+        });
+
+        $scope.$watchGroup(["schedulerName",
+            "schedulerStartDt",
             "schedulerStartHour",
             "schedulerStartMinute",
             "schedulerStartSecond",
             "schedulerTimeZone",
             "schedulerFrequency",
-            "schedulerInterval"], function(val) {
+            "schedulerInterval",
-                if (!$scope.scheduler_form.$invalid) {
+            "monthlyRepeatOption",
-                    $scope.schedulerIsValid = true;
+            "monthDay",
-                } else {
+            "monthlyOccurrence",
-                    $scope.schedulerIsValid = false;
+            "monthlyWeekDay",
-                }
+            "yearlyRepeatOption",
-                return val;
+            "yearlyMonth",
-        });
+            "yearlyMonthDay",
+            "yearlyOccurrence",
+            "yearlyWeekDay",
+            "yearlyOtherMonth",
+            "schedulerEnd",
+            "schedulerOccurrenceCount",
+            "schedulerEndDt"
+        ], function() {
+            $scope.$emit("formUpdated");
+        }, true);
+
+        $scope.$watch("weekDays", function() {
+            $scope.$emit("formUpdated");
+        }, true);
+
+        $rootScope.$broadcast("loadSchedulerDetailPane");
         Wait('stop');
     });
 

awx/ui/client/src/scheduler/schedulerForm.partial.html

@@ -59,6 +59,10 @@
                                     </button>
                                 </span>
                         </div>
+                        <div class="error"
+                            ng-show="scheduler_form_schedulerStartDt_error"
+                            ng-bind="scheduler_form_schedulerStartDt_error">
+                        </div>
                     </div>
                     <div class="form-group SchedulerForm-formGroup">
                         <label class="Form-inputLabel">
@@ -126,8 +130,8 @@
                             </div> -->
                         </div>
                         <div class="error"
-                            ng-show="scheduler_form_schedulerStartDt_error"
+                            ng-show="scheduler_startTime_error">
-                            ng-bind="scheduler_form_schedulerStartDt_error">
+                            The time must be in HH24:MM:SS format.
                         </div>
                     </div>
                     <div class="form-group SchedulerForm-formGroup"
@@ -143,10 +147,6 @@
                             required class="form-control input-sm"
                             ng-change="scheduleTimeChange()" >
                         </select>
-                        <div class="error"
-                            ng-show="scheduler_startTime_error">
-                            The time must be in HH24:MM:SS format.
-                        </div>
                     </div>
                     <div class="form-group SchedulerForm-formGroup">
                         <label class="Form-inputLabel">
@@ -191,8 +191,9 @@
                                 ng-bind="schedulerIntervalLabel">
                             </label>
                             <div
-                                class="error"
+                                class="error
-                                ng-show="scheduler_interval_error">
+                                    RepeatFrequencyOptions-error"
+                                ng-show="$parent.scheduler_interval_error">
                                 Please provide a value between 1 and 999.
                             </div>
                         </div>
@@ -218,7 +219,7 @@
                                 min="1" max="31"
                                 ng-change="resetError('scheduler_monthDay_error')" >
                             <div class="error"
-                                ng-show="scheduler_monthDay_error">
+                                ng-show="$parent.scheduler_monthDay_error">
                                 The day must be between 1 and 31.
                             </div>
                         </div>
@@ -289,7 +290,7 @@
                                 ng-change="resetError('scheduler_yearlyMonthDay_error')"
                             >
                             <div class="error"
-                                ng-show="scheduler_yearlyMonthDay_error">
+                                ng-show="$parent.scheduler_yearlyMonthDay_error">
                                 The day must be between 1 and 31.
                             </div>
                         </div>
@@ -354,7 +355,7 @@
                                         class="btn btn-default
                                             RepeatFrequencyOptions-weekButton"
                                         data-value="SU"
-                                        ng-click="setWeekday($event,'su')">
+                                        ng-click="$parent.setWeekday($event,'su')">
                                         Sun
                                     </button>
                                     <button type="button"
@@ -362,7 +363,7 @@
                                         class="btn btn-default
                                             RepeatFrequencyOptions-weekButton"
                                         data-value="MO"
-                                        ng-click="setWeekday($event,'mo')">
+                                        ng-click="$parent.setWeekday($event,'mo')">
                                         Mon
                                     </button>
                                     <button type="button"
@@ -370,7 +371,7 @@
                                         class="btn btn-default
                                             RepeatFrequencyOptions-weekButton"
                                         data-value="TU"
-                                        ng-click="setWeekday($event,'tu')">
+                                        ng-click="$parent.setWeekday($event,'tu')">
                                         Tue
                                     </button>
                                     <button type="button"
@@ -378,7 +379,7 @@
                                         class="btn btn-default
                                             RepeatFrequencyOptions-weekButton"
                                         data-value="WE"
-                                        ng-click="setWeekday($event,'we')">
+                                        ng-click="$parent.setWeekday($event,'we')">
                                         Wed
                                     </button>
                                     <button type="button"
@@ -386,7 +387,7 @@
                                         class="btn btn-default
                                             RepeatFrequencyOptions-weekButton"
                                         data-value="TH"
-                                        ng-click="setWeekday($event,'th')">
+                                        ng-click="$parent.setWeekday($event,'th')">
                                         Thu
                                     </button>
                                     <button type="button"
@@ -394,7 +395,7 @@
                                         class="btn btn-default
                                             RepeatFrequencyOptions-weekButton"
                                         data-value="FR"
-                                        ng-click="setWeekday($event,'fr')">
+                                        ng-click="$parent.setWeekday($event,'fr')">
                                         Fri
                                     </button>
                                     <button type="button"
@@ -402,13 +403,13 @@
                                         class="btn btn-default
                                             RepeatFrequencyOptions-weekButton"
                                         data-value="SA"
-                                        ng-click="setWeekday($event,'sa')">
+                                        ng-click="$parent.setWeekday($event,'sa')">
                                         Sat
                                     </button>
                                 </div>
                             </div>
                             <div class="error"
-                                ng-show="scheduler_weekDays_error">
+                                ng-show="$parent.scheduler_weekDays_error">
                                 Please select one or more days.
                             </div>
                         </div>
@@ -442,12 +443,13 @@
                                     sch-spinner="scheduler_form"
                                     class="scheduler-spinner
                                         SpinnerInput"
-                                    ng-model="schedulerOccurrenceCount"
+                                    ng-model="$parent.schedulerOccurrenceCount"
                                     min="1" max="999"
                                     on-change="resetError('scheduler_occurrenceCount_error')"
                                 >
-                            <div class="error"
+                            <div class="error
-                                ng-show="scheduler_occurrenceCount_error">
+                                RepeatFrequencyOptions-error"
+                                ng-show="$parent.scheduler_occurrenceCount_error">
                                 Please provide a value between 1 and 999.
                             </div>
                         </div>
@@ -480,7 +482,7 @@
                                 </span>
                             </div>
                             <div class="error"
-                                ng-show="scheduler_endDt_error">
+                                ng-show="$parent.scheduler_endDt_error">
                                 Please provide a valid date.
                             </div>
                         </div>
@@ -530,34 +532,70 @@
                         </div>
                     </div> -->
                 </form>
-                <div id="scheduler-detail">
+                <div class="SchedulerFormDetail-container
-                    <div class="alert alert-danger" ng-show="!schedulerIsValid">
+                    SchedulerFormDetail-container--error"
-                        <p>The scheduler options are invalid or incomplete. Make the needed changes on the options tab, then come back here to see details.</p>
+                    ng-show="!schedulerIsValid">
+                    <p class="SchedulerFormDetail-errorText">
+                        The scheduler options are invalid or incomplete.
+                    </p>
+                </div>
+                <div class="SchedulerFormDetail-container"
+                    ng-show="schedulerIsValid">
+                    <label class="SchedulerFormDetail-label">
+                        Description
+                    </label>
+                    <div class="SchedulerFormDetail-nlp">
+                        {{ rrule_nlp_description }}
                     </div>
-                    <div ng-show="schedulerIsValid">
+                    <div class="SchedulerFormDetail-occurrenceHeader">
-                        <div class="form-group">
+                        <label class="SchedulerFormDetail-label
-                            <label class="Form-inputLabel">Description</label>
+                            SchedulerFormDetail-labelOccurrence">
-                            <textarea ng-model="rrule_nlp_description" name="rrule_nlp_description" id="rrule_nlp_description" readonly class="form-control" rows="2"></textarea>
+                            Occurrences
-                        </div>
+                            <span
-                        <div class="form-group" ng-show="showRRule">
+                                class="SchedulerFormDetail-labelDetail">
-                            <label class="Form-inputLabel">RRule</label>
+                                (Limited to first 10)
-                            <textarea ng-model="rrule" name="rrule" id="rrule" readonly class="form-control" rows="3"></textarea>
+                            </span>
-                        </div>
+                        </label>
-                        <div class="form-group">
+                        <div id="date-choice"
-                            <label id="occurrences-label">Occurrences <span class="sublabel">(limited to first 10)</label>
+                            class="SchedulerFormDetail-dateFormats">
-                            <div id="date-choice">
+                            <label
-                                <label class="label-inline">Date format</label>
+                                class="SchedulerFormDetail-dateFormatsLabel">
-                                <label class="radio-inline"><input type="radio" ng-model="dateChoice" id="date-choice-local" value="local" >Local time</label>
+                                Date format
-                                <label class="radio-inline"><input type="radio" ng-model="dateChoice" id="date-choice-utc" value="utc" >UTC</label>
+                            </label>
-                            </div>
+                            <label class="radio-inline
-                            <ul class="occurrence-list mono-space" ng-show="dateChoice == 'utc'">
+                                SchedulerFormDetail-radioLabel">
-                                <li ng-repeat="occurrence in occurrence_list">{{ occurrence.utc }}</li>
+                                <input type="radio"
-                            </ul>
+                                    class="SchedulerFormDetail-radioButton"
-                            <ul class="occurrence-list mono-space" ng-show="dateChoice == 'local'">
+                                    ng-model="dateChoice"
-                                <li ng-repeat="occurrence in occurrence_list">{{ occurrence.local }}</li>
+                                    id="date-choice-local"
-                            </ul>
+                                    value="local" >
+                                Local time
+                            </label>
+                            <label class="radio-inline
+                                SchedulerFormDetail-radioLabel">
+                                <input type="radio"
+                                    class="SchedulerFormDetail-radioButton"
+                                    ng-model="dateChoice"
+                                    id="date-choice-utc"
+                                    value="utc" >
+                                UTC
+                            </label>
                         </div>
                     </div>
+                    <ul class="occurrence-list mono-space
+                        SchedulerFormDetail-occurrenceList"
+                        ng-show="dateChoice == 'utc'">
+                        <li ng-repeat="occurrence in occurrence_list">
+                            {{ occurrence.utc }}
+                        </li>
+                    </ul>
+                    <ul class="occurrence-list mono-space
+                        SchedulerFormDetail-occurrenceList"
+                        ng-show="dateChoice == 'local'">
+                        <li ng-repeat="occurrence in occurrence_list">
+                            {{ occurrence.local }}
+                        </li>
+                    </ul>
                 </div>
 
                 <div class="buttons Form-buttons">
@@ -565,7 +603,7 @@
                         class="btn btn-sm Form-saveButton"
                         id="project_save_btn"
                         ng-click="saveSchedule()"
-                        ng-disabled="scheduler_form.$invalid"> Save</button>
+                        ng-disabled="!schedulerIsValid"> Save</button>
                     <button type="button"
                         class="btn btn-sm Form-cancelButton"
                         id="project_cancel_btn"

awx/ui/client/src/scheduler/schedulerFormDetail.block.less

@@ -0,0 +1,72 @@
+/** @define SchedulerFormDetail */
+
+.SchedulerFormDetail-container {
+    padding: 15px;
+    border: 1px solid #e8e8e8;
+    border-radius: 5px;
+    margin-bottom: 20px;
+}
+
+.SchedulerFormDetail-container--error {
+    border-color: #ff5850;
+}
+
+.SchedulerFormDetail-errorText {
+    text-align: center;
+    margin-bottom: 0px;
+    color: #ff5850;
+}
+
+.SchedulerFormDetail-label {
+    text-transform: uppercase;
+    color: #848992;
+    margin-bottom: 15px;
+}
+
+.SchedulerFormDetail-nlp {
+    margin-bottom: 10px;
+}
+
+.SchedulerFormDetail-occurrenceHeader {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.SchedulerFormDetail-labelOccurrence {
+    font-size: 13px;
+    font-weight: normal;
+    margin-bottom: 10px;
+    margin-right: 20px;
+}
+
+.SchedulerFormDetail-labelDetail {
+    font-size: 12px;
+    text-transform: none;
+}
+
+.SchedulerFormDetail-dateFormats {
+    text-transform: uppercase;
+    font-size: 13px;
+    color: #848992;
+}
+
+.SchedulerFormDetail-dateFormatsLabel {
+    font-weight: normal;
+    margin-right: 5px;
+}
+
+.SchedulerFormDetail-radioLabel {
+    margin-top: -3px !important;
+    color: #161B1F !important;
+}
+
+.SchedulerFormDetail-radioButton {
+    margin-top: 2px !important;
+    color: #848992 !important;
+}
+
+.SchedulerFormDetail-occurrenceList {
+    margin-top: 10px;
+    padding-left: 0px;
+    list-style-type: none;
+}

awx/ui/client/src/shared/generator-helpers.js

@@ -463,7 +463,6 @@ angular.module('GeneratorHelpers', [systemStatus.name])
                 html += (field['class']) ? " " + field['class'] : "";
                 html += " " + field.columnClass;
                 html += "\"><div class='ScheduleToggle' ng-class='{\"is-on\": " + list.iterator + ".enabled\}' aw-tool-tip='" + field.awToolTip + "' data-placement='" + field.dataPlacement + "' data-tip-watch='" + field.dataTipWatch + "'><div ng-show='" + list.iterator + ".enabled' class='ScheduleToggle-switch is-on' ng-click='" + field.ngClick + "'>ON</div><div ng-show='!" + list.iterator + ".enabled' class='ScheduleToggle-switch' ng-click='" + field.ngClick + "'>OFF</div></div></td>";
-                console.log(html);
             } else {
                 html += "<td class=\"List-tableCell " + fld + "-column";
                 html += (field['class']) ? " " + field['class'] : "";