shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-11-01 08:21:15 +03:00
Code Releases Activity

stylign of scheduler form detail pane

Browse Source
This commit is contained in:
John Mitchell 2016-02-11 10:33:35 -05:00
parent b6ce3a1a82
commit 22b80e51d8
7 changed files with 232 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
awx/ui/client/lib/angular-scheduler/lib/angular-scheduler.js vendored
View File

@ -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();

5
awx/ui/client/src/scheduler/repeatFrequencyOptions.block.less
View File

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

40
awx/ui/client/src/scheduler/schedulerAdd.controller.js
View File

@ -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) {
if (!$scope.scheduler_form.$invalid) {
$scope.schedulerIsValid = true;
} else {
$scope.schedulerIsValid = false;
}
return val;
});
"schedulerInterval",
"monthlyRepeatOption",
"monthDay",
"monthlyOccurrence",
"monthlyWeekDay",
"yearlyRepeatOption",
"yearlyMonth",
"yearlyMonthDay",
"yearlyOccurrence",
"yearlyWeekDay",
"yearlyOtherMonth",
"schedulerEnd",
"schedulerOccurrenceCount",
"schedulerEndDt"
], function() {
$scope.$emit("formUpdated");
}, true);
$scope.$watch("weekDays", function() {
$scope.$emit("formUpdated");
}, true);
Wait('stop');
});

41
awx/ui/client/src/scheduler/schedulerEdit.controller.js
View File

@ -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) {
if (!$scope.scheduler_form.$invalid) {
$scope.schedulerIsValid = true;
} else {
$scope.schedulerIsValid = false;
}
return val;
});
"schedulerInterval",
"monthlyRepeatOption",
"monthDay",
"monthlyOccurrence",
"monthlyWeekDay",
"yearlyRepeatOption",
"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');
});

134
awx/ui/client/src/scheduler/schedulerForm.partial.html
View File

@ -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-bind="scheduler_form_schedulerStartDt_error">
ng-show="scheduler_startTime_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"
ng-show="scheduler_interval_error">
class="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"
ng-show="scheduler_occurrenceCount_error">
<div class="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="alert alert-danger" ng-show="!schedulerIsValid">
<p>The scheduler options are invalid or incomplete. Make the needed changes on the options tab, then come back here to see details.</p>
<div class="SchedulerFormDetail-container
SchedulerFormDetail-container--error"
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="form-group">
<label class="Form-inputLabel">Description</label>
<textarea ng-model="rrule_nlp_description" name="rrule_nlp_description" id="rrule_nlp_description" readonly class="form-control" rows="2"></textarea>
</div>
<div class="form-group" ng-show="showRRule">
<label class="Form-inputLabel">RRule</label>
<textarea ng-model="rrule" name="rrule" id="rrule" readonly class="form-control" rows="3"></textarea>
</div>
<div class="form-group">
<label id="occurrences-label">Occurrences <span class="sublabel">(limited to first 10)</label>
<div id="date-choice">
<label class="label-inline">Date format</label>
<label class="radio-inline"><input type="radio" ng-model="dateChoice" id="date-choice-local" value="local" >Local time</label>
<label class="radio-inline"><input type="radio" ng-model="dateChoice" id="date-choice-utc" value="utc" >UTC</label>
</div>
<ul class="occurrence-list mono-space" ng-show="dateChoice == 'utc'">
<li ng-repeat="occurrence in occurrence_list">{{ occurrence.utc }}</li>
</ul>
<ul class="occurrence-list mono-space" ng-show="dateChoice == 'local'">
<li ng-repeat="occurrence in occurrence_list">{{ occurrence.local }}</li>
</ul>
<div class="SchedulerFormDetail-occurrenceHeader">
<label class="SchedulerFormDetail-label
SchedulerFormDetail-labelOccurrence">
Occurrences
<span
class="SchedulerFormDetail-labelDetail">
(Limited to first 10)
</span>
</label>
<div id="date-choice"
class="SchedulerFormDetail-dateFormats">
<label
class="SchedulerFormDetail-dateFormatsLabel">
Date format
</label>
<label class="radio-inline
SchedulerFormDetail-radioLabel">
<input type="radio"
class="SchedulerFormDetail-radioButton"
ng-model="dateChoice"
id="date-choice-local"
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"

72
awx/ui/client/src/scheduler/schedulerFormDetail.block.less Normal file
View File

@ -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;
}

1
awx/ui/client/src/shared/generator-helpers.js
View File

@ -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'] : "";