mirror of
https://github.com/ansible/awx.git
synced 2024-11-01 08:21:15 +03:00
update to scheduler form styling
This commit is contained in:
John Mitchell
parent
068b32b1b4
commit
ada183f979
@ -206,6 +206,7 @@ input[type='radio']:checked:before {
|
||||
font-weight: normal;
|
||||
font-size: small;
|
||||
padding-right:5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.Form-buttons{
|
||||
|
||||
134
awx/ui/client/src/scheduler/repeatFrequencyOptions.block.less
Normal file
134
awx/ui/client/src/scheduler/repeatFrequencyOptions.block.less
Normal file
@ -0,0 +1,134 @@
|
||||
/** @define RepeatFrequencyOptions */
|
||||
|
||||
.RepeatFrequencyOptions {
|
||||
width: ~"calc(100% + 21px)";
|
||||
padding: 20px;
|
||||
border-left: 5px solid #e8e8e8;
|
||||
margin-left: -20px;
|
||||
padding-left: 17px;
|
||||
padding-right: 0px;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.RepeatFrequencyOptions-formGroup {
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
@media (min-width: 901px) {
|
||||
.RepeatFrequencyOptions-formGroup {
|
||||
flex: 0 0 auto;
|
||||
margin-bottom: 25px;
|
||||
width: ~"calc(33% - 32px)";
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
.RepeatFrequencyOptions-formGroup:nth-child(3n+3) {
|
||||
flex: 0 0 auto;
|
||||
margin-bottom: 25px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 651px) and (max-width: 900px) {
|
||||
.RepeatFrequencyOptions-formGroup {
|
||||
flex: 0 0 auto;
|
||||
margin-bottom: 25px;
|
||||
width: ~"calc(50% - 25px)";
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
.RepeatFrequencyOptions-formGroup:nth-child(2n+2) {
|
||||
flex: 0 0 auto;
|
||||
margin-bottom: 25px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
.RepeatFrequencyOptions-formGroup {
|
||||
flex: 0 0 auto;
|
||||
margin-bottom: 25px;
|
||||
width: 100%;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.RepeatFrequencyOptions-label {
|
||||
width: 100%;
|
||||
margin-top: -2px;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
color: #848992;
|
||||
font-size: 13px;
|
||||
margin-left: -20px;
|
||||
border-left: 5px solid #e8e8e8;
|
||||
padding-left: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.RepeatFrequencyOptions-weekButtonContainer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.RepeatFrequencyOptions-weekButtonGroup {
|
||||
height: 27px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.RepeatFrequencyOptions-weekButton {
|
||||
height: 27px;
|
||||
padding-top: 2px;
|
||||
padding-right: 4px;
|
||||
padding-left: 4px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.RepeatFrequencyOptions-everyGroup {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.RepeatFrequencyOptions-inlineLabel {
|
||||
font-weight: normal;
|
||||
color: #848992;
|
||||
text-transform: uppercase;
|
||||
flex: initial;
|
||||
width: 54px;
|
||||
margin-left: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.RepeatFrequencyOptions-occurencesGroup {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.RepeatFrequencyOptions-radioLabel {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.RepeatFrequencyOptions-everyLabel {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.RepeatFrequencyOptions-spacedSelect {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.RepeatFrequencyOptions-subFormBorderFixer {
|
||||
height: 25px;
|
||||
width: 5px;
|
||||
background: #ffffff;
|
||||
margin-left: -20px;
|
||||
margin-top: -25px;
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
.RepeatFrequencyOptions-monthlyOccurence,
|
||||
.RepeatFrequencyOptions-yearlyOccurence {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
@ -19,6 +19,8 @@ export default ['$compile', '$state', '$stateParams', 'EditSchedule', 'Wait', '$
|
||||
Wait('stop');
|
||||
});
|
||||
|
||||
$scope.isEdit = true;
|
||||
|
||||
$scope.hideForm = true;
|
||||
|
||||
$scope.formCancel = function() {
|
||||
|
||||
44
awx/ui/client/src/scheduler/schedulerForm.block.less
Normal file
44
awx/ui/client/src/scheduler/schedulerForm.block.less
Normal file
@ -0,0 +1,44 @@
|
||||
/** @define SchedulerForm */
|
||||
|
||||
.SchedulerForm-formGroup {
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
@media (min-width: 901px) {
|
||||
.SchedulerForm-formGroup {
|
||||
flex: 0 0 auto;
|
||||
margin-bottom: 25px;
|
||||
width: ~"calc(33% - 32px)";
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
.SchedulerForm-formGroup:nth-child(3n+3) {
|
||||
flex: 0 0 auto;
|
||||
margin-bottom: 25px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 651px) and (max-width: 900px) {
|
||||
.SchedulerForm-formGroup {
|
||||
flex: 0 0 auto;
|
||||
margin-bottom: 25px;
|
||||
width: ~"calc(50% - 25px)";
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
.SchedulerForm-formGroup:nth-child(2n+2) {
|
||||
flex: 0 0 auto;
|
||||
margin-bottom: 25px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
.SchedulerForm-formGroup {
|
||||
flex: 0 0 auto;
|
||||
margin-bottom: 25px;
|
||||
width: 100%;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
<div id="htmlTemplate" class=" SchedulerFormPanel Panel" ng-hide="hideForm">
|
||||
<div class="Form-header">
|
||||
<div class="Form-title">{{ schedulerName || "Add Schedule"}}</div>
|
||||
<div class="Form-title" ng-show="!isEdit">{{ schedulerName || "Add Schedule"}}</div>
|
||||
<div class="Form-title" ng-show="isEdit">{{ schedulerName || "Edit Schedule"}}</div>
|
||||
<div class="Form-exitHolder">
|
||||
<button class="Form-exit" ng-click="formCancel()">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
@ -8,22 +9,490 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="SchedulerFormTarget">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
|
||||
<form class="form" role="form" name="scheduler_form" novalidate>
|
||||
<form class="form Form"
|
||||
role="form"
|
||||
name="scheduler_form"
|
||||
novalidate>
|
||||
|
||||
<div class="form-group">
|
||||
<label><span class="red-text">*</span> Name</label>
|
||||
<input type="text" class="form-control input-sm" name="schedulerName" id="schedulerName" ng-model="schedulerName" required placeholder="Schedule name">
|
||||
<div class="error" ng-show="scheduler_form.schedulerName.$dirty && scheduler_form.schedulerName.$error.required">A schedule name is required.</div>
|
||||
<div class="form-group SchedulerForm-formGroup">
|
||||
<label class="Form-inputLabel">
|
||||
<span class="red-text">*</span>
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control input-sm"
|
||||
name="schedulerName"
|
||||
id="schedulerName"
|
||||
ng-model="schedulerName" required
|
||||
placeholder="Schedule name">
|
||||
<div class="error"
|
||||
ng-show="scheduler_form.schedulerName.$dirty && scheduler_form.schedulerName.$error.required">
|
||||
A schedule name is required.
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group SchedulerForm-formGroup">
|
||||
<label class="Form-inputLabel">
|
||||
<span class="red-text">*</span>
|
||||
Start Date
|
||||
<span class="fmt-help">
|
||||
(mm/dd/yyyy)
|
||||
</span>
|
||||
</label>
|
||||
<div class="input-group">
|
||||
<input type="text"
|
||||
class="form-control input-sm"
|
||||
name="schedulerStartDt"
|
||||
id="schedulerStartDt"
|
||||
ng-model="schedulerStartDt"
|
||||
sch-date-picker
|
||||
placeholder="mm/dd/yyyy"
|
||||
required
|
||||
ng-change="scheduleTimeChange()" >
|
||||
<span class="input-group-btn">
|
||||
<button
|
||||
class="btn btn-default btn-sm"
|
||||
type="button"
|
||||
ng-click="showCalendar('schedulerStartDt')">
|
||||
<i class="fa fa-calendar"></i>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group SchedulerForm-formGroup">
|
||||
<label class="Form-inputLabel">
|
||||
<span class="red-text">*</span>
|
||||
Start Time
|
||||
<span class="fmt-help"
|
||||
ng-show="schedulerShowTimeZone">
|
||||
(HH24:MM:SS)
|
||||
</span>
|
||||
<span class="fmt-help"
|
||||
ng-show="!schedulerShowTimeZone">
|
||||
(HH24:MM:SS UTC)
|
||||
</span>
|
||||
</label>
|
||||
<div class="input-group SchedulerTime">
|
||||
<input name="schedulerStartHour"
|
||||
id="schedulerStartHour"
|
||||
sch-spinner="scheduler_form"
|
||||
class="scheduler-time-spinner
|
||||
ScheduleTime-input SpinnerInput"
|
||||
ng-model="schedulerStartHour"
|
||||
placeholder="HH24"
|
||||
aw-min="0" min="0" aw-max="23"
|
||||
max="23" data-zero-pad="2" required
|
||||
ng-change="scheduleTimeChange()" >
|
||||
<span
|
||||
class="SchedulerTime-separator">
|
||||
:
|
||||
</span>
|
||||
<input name="schedulerStartMinute"
|
||||
id="schedulerStartMinute"
|
||||
sch-spinner="scheduler_form"
|
||||
class="scheduler-time-spinner
|
||||
SchedulerTime-input SpinnerInput"
|
||||
ng-model="schedulerStartMinute"
|
||||
placeholder="MM"
|
||||
min="0" max="59" data-zero-pad="2"
|
||||
required
|
||||
ng-change="scheduleTimeChange()" >
|
||||
<span
|
||||
class="SchedulerTime-separator">
|
||||
:
|
||||
</span>
|
||||
<input name="schedulerStartSecond"
|
||||
id="schedulerStartSecond"
|
||||
sch-spinner="scheduler_form"
|
||||
class="scheduler-time-spinner
|
||||
SchedulerTime-input SpinnerInput"
|
||||
ng-model="schedulerStartSecond"
|
||||
placeholder="SS"
|
||||
min="0" max="59" data-zero-pad="2"
|
||||
required
|
||||
ng-change="scheduleTimeChange()" >
|
||||
<!-- <div class="form-group
|
||||
SchedulerTime-utc"
|
||||
ng-show="schedulerShowUTCStartTime">
|
||||
<label
|
||||
class="SchedulerTime-utcLabel">
|
||||
UTC Start Time
|
||||
</label>
|
||||
<div id="schedulerUTCTime"
|
||||
class="SchedulerTime-utcTime">
|
||||
{{ schedulerUTCTime.split("UTC")[0] }}
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="error"
|
||||
ng-show="scheduler_form_schedulerStartDt_error"
|
||||
ng-bind="scheduler_form_schedulerStartDt_error">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group SchedulerForm-formGroup"
|
||||
ng-show="schedulerShowTimeZone">
|
||||
<label class="Form-inputLabel">
|
||||
Local Time Zone
|
||||
</label>
|
||||
<select
|
||||
name="schedulerTimeZone"
|
||||
id="schedulerTimeZone"
|
||||
ng-model="schedulerTimeZone"
|
||||
ng-options="z.name for z in timeZones"
|
||||
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">
|
||||
Repeat frequency
|
||||
</label>
|
||||
<select name="schedulerFrequency"
|
||||
id="schedulerFrequency"
|
||||
ng-model="schedulerFrequency"
|
||||
ng-options="f.name for f in frequencyOptions"
|
||||
required class="form-control input-sm"
|
||||
ng-change="scheduleRepeatChange()">
|
||||
</select>
|
||||
<div class="error"
|
||||
ng-show="sheduler_frequency_error">
|
||||
</div>
|
||||
</div>
|
||||
<div class="RepeatFrequencyOptions-label"
|
||||
ng-show="schedulerFrequency.value && schedulerFrequency.value !== 'none'">
|
||||
Frequency Details</div>
|
||||
<div class="RepeatFrequencyOptions Form"
|
||||
ng-show="schedulerFrequency.value && schedulerFrequency.value !== 'none'">
|
||||
<div class="form-group
|
||||
RepeatFrequencyOptions-everyGroup
|
||||
RepeatFrequencyOptions-formGroup"
|
||||
ng-if="schedulerShowInterval">
|
||||
<label class="Form-inputLabel
|
||||
RepeatFrequencyOptions-everyLabel">
|
||||
Every
|
||||
</label>
|
||||
<input name="schedulerInterval"
|
||||
id="schedulerInterval"
|
||||
sch-spinner="scheduler_form"
|
||||
class="scheduler-spinner
|
||||
SpinnerInput"
|
||||
ng-model="$parent.schedulerInterval"
|
||||
min="1"
|
||||
max="999"
|
||||
ng-change="resetError('scheduler_interval_error')"
|
||||
>
|
||||
<label class="inline-label
|
||||
RepeatFrequencyOptions-inlineLabel"
|
||||
ng-bind="schedulerIntervalLabel">
|
||||
</label>
|
||||
<div
|
||||
class="error"
|
||||
ng-show="scheduler_interval_error">
|
||||
Please provide a value between 1 and 999.
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group RepeatFrequencyOptions-formGroup"
|
||||
ng-if="schedulerFrequency && schedulerFrequency.value == 'monthly'">
|
||||
<div class="radio
|
||||
RepeatFrequencyOptions-radioLabel">
|
||||
<label class="Form-inputLabel">
|
||||
<input type="radio" value="day"
|
||||
ng-model="$parent.monthlyRepeatOption"
|
||||
ng-change="monthlyRepeatChange()"
|
||||
name="monthlyRepeatOption"
|
||||
id="monthlyRepeatOption">
|
||||
on day
|
||||
</label>
|
||||
</div>
|
||||
<input
|
||||
name="monthDay"
|
||||
id="monthDay"
|
||||
sch-spinner="scheduler_form"
|
||||
class="scheduler-spinner SpinnerInput"
|
||||
ng-model="$parent.monthDay"
|
||||
min="1" max="31"
|
||||
ng-change="resetError('scheduler_monthDay_error')" >
|
||||
<div class="error"
|
||||
ng-show="scheduler_monthDay_error">
|
||||
The day must be between 1 and 31.
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group
|
||||
RepeatFrequencyOptions-formGroup"
|
||||
ng-if="schedulerFrequency && schedulerFrequency.value == 'monthly'">
|
||||
<div class="radio
|
||||
RepeatFrequencyOptions-radioLabel">
|
||||
<label class="Form-inputLabel">
|
||||
<input type="radio"
|
||||
value="other"
|
||||
ng-model="$parent.monthlyRepeatOption"
|
||||
ng-change="monthlyRepeatChange()"
|
||||
name="monthlyRepeatOption"
|
||||
id="monthlyRepeatOption">
|
||||
on the
|
||||
</label>
|
||||
</div>
|
||||
<select name="monthlyOccurrence"
|
||||
id="monthlyOccurrence"
|
||||
ng-model="$parent.monthlyOccurrence"
|
||||
ng-options="o.name for o in occurrences"
|
||||
ng-disabled="monthlyRepeatOption != 'other'"
|
||||
class="form-control input-sm
|
||||
RepeatFrequencyOptions-spacedSelect
|
||||
RepeatFrequencyOptions-monthlyOccurence"
|
||||
>
|
||||
</select>
|
||||
<select name="monthlyWeekDay"
|
||||
id="monthlyWeekDay"
|
||||
ng-model="$parent.monthlyWeekDay"
|
||||
ng-options="w.name for w in weekdays"
|
||||
ng-disabled="monthlyRepeatOption != 'other'"
|
||||
class="form-control input-sm" >
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group
|
||||
RepeatFrequencyOptions-formGroup"
|
||||
ng-if="schedulerFrequency && schedulerFrequency.value == 'yearly'">
|
||||
<div class="radio
|
||||
RepeatFrequencyOptions-radioLabel">
|
||||
<label class="Form-inputLabel">
|
||||
<input type="radio"
|
||||
value="month"
|
||||
ng-model="$parent.yearlyRepeatOption"
|
||||
ng-change="yearlyRepeatChange()"
|
||||
name="yearlyRepeatOption"
|
||||
id="yearlyRepeatOption">
|
||||
on
|
||||
</label>
|
||||
</div>
|
||||
<select name="yearlyMonth"
|
||||
id="yearlyMonth"
|
||||
ng-model="$parent.yearlyMonth"
|
||||
ng-options="m.name for m in months"
|
||||
ng-disabled="yearlyRepeatOption != 'month'"
|
||||
class="form-control input-sm
|
||||
RepeatFrequencyOptions-spacedSelect"
|
||||
>
|
||||
</select>
|
||||
<input name="yearlyMonthDay"
|
||||
id="yearlyMonthDay"
|
||||
sch-spinner="scheduler_form"
|
||||
class="scheduler-spinner
|
||||
SpinnerInput"
|
||||
ng-model="$parent.yearlyMonthDay"
|
||||
min="1" max="31"
|
||||
ng-change="resetError('scheduler_yearlyMonthDay_error')"
|
||||
>
|
||||
<div class="error"
|
||||
ng-show="scheduler_yearlyMonthDay_error">
|
||||
The day must be between 1 and 31.
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group
|
||||
RepeatFrequencyOptions-formGroup"
|
||||
ng-if="schedulerFrequency && schedulerFrequency.value == 'yearly'">
|
||||
<div class="radio
|
||||
RepeatFrequencyOptions-radioLabel">
|
||||
<label class="Form-inputLabel">
|
||||
<input type="radio"
|
||||
value="other"
|
||||
ng-model="$parent.yearlyRepeatOption"
|
||||
ng-change="yearlyRepeatChange()"
|
||||
name="yearlyRepeatOption"
|
||||
id="yearlyRepeatOption">
|
||||
on the
|
||||
</label>
|
||||
</div>
|
||||
<select name="yearlyOccurrence"
|
||||
id="yearlyOccurrence"
|
||||
ng-model="$parent.yearlyOccurrence"
|
||||
ng-options="o.name for o in occurrences"
|
||||
ng-disabled="yearlyRepeatOption != 'other'"
|
||||
class="form-control input-sm
|
||||
RepeatFrequencyOptions-spacedSelect
|
||||
RepeatFrequencyOptions-yearlyOccurence"
|
||||
>
|
||||
</select>
|
||||
<select name="yearlyWeekDay"
|
||||
id="yearlyWeekDay"
|
||||
ng-model="$parent.yearlyWeekDay"
|
||||
ng-options="w.name for w in weekdays"
|
||||
ng-disabled="yearlyRepeatOption != 'other'"
|
||||
class="form-control input-sm
|
||||
RepeatFrequencyOptions-spacedSelect"
|
||||
>
|
||||
</select>
|
||||
<select name="yearlyOtherMonth"
|
||||
id="yearlyOtherMonth"
|
||||
ng-model="$parent.yearlyOtherMonth"
|
||||
ng-options="m.name for m in months"
|
||||
ng-disabled="yearlyRepeatOption != 'other'"
|
||||
class="form-control input-sm">
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group
|
||||
RepeatFrequencyOptions-week
|
||||
RepeatFrequencyOptions-formGroup"
|
||||
ng-if="schedulerFrequency && schedulerFrequency.value == 'weekly'">
|
||||
<label class="Form-inputLabel">
|
||||
<span class="red-text">*</span>
|
||||
On Days
|
||||
</label>
|
||||
<div class="input-group
|
||||
RepeatFrequencyOptions-weekButtonContainer">
|
||||
<div class="btn-group
|
||||
RepeatFrequencyOptions-weekButtonGroup"
|
||||
data-toggle="buttons-checkbox"
|
||||
id="weekdaySelect">
|
||||
<button type="button"
|
||||
ng-class="weekDaySUClass"
|
||||
class="btn btn-default
|
||||
RepeatFrequencyOptions-weekButton"
|
||||
data-value="SU"
|
||||
ng-click="setWeekday($event,'su')">
|
||||
Sun
|
||||
</button>
|
||||
<button type="button"
|
||||
ng-class="weekDayMOClass"
|
||||
class="btn btn-default
|
||||
RepeatFrequencyOptions-weekButton"
|
||||
data-value="MO"
|
||||
ng-click="setWeekday($event,'mo')">
|
||||
Mon
|
||||
</button>
|
||||
<button type="button"
|
||||
ng-class="weekDayTUClass"
|
||||
class="btn btn-default
|
||||
RepeatFrequencyOptions-weekButton"
|
||||
data-value="TU"
|
||||
ng-click="setWeekday($event,'tu')">
|
||||
Tue
|
||||
</button>
|
||||
<button type="button"
|
||||
ng-class="weekDayWEClass"
|
||||
class="btn btn-default
|
||||
RepeatFrequencyOptions-weekButton"
|
||||
data-value="WE"
|
||||
ng-click="setWeekday($event,'we')">
|
||||
Wed
|
||||
</button>
|
||||
<button type="button"
|
||||
ng-class="weekDayTHClass"
|
||||
class="btn btn-default
|
||||
RepeatFrequencyOptions-weekButton"
|
||||
data-value="TH"
|
||||
ng-click="setWeekday($event,'th')">
|
||||
Thu
|
||||
</button>
|
||||
<button type="button"
|
||||
ng-class="weekDayFRClass"
|
||||
class="btn btn-default
|
||||
RepeatFrequencyOptions-weekButton"
|
||||
data-value="FR"
|
||||
ng-click="setWeekday($event,'fr')">
|
||||
Fri
|
||||
</button>
|
||||
<button type="button"
|
||||
ng-class="weekDaySAClass"
|
||||
class="btn btn-default
|
||||
RepeatFrequencyOptions-weekButton"
|
||||
data-value="SA"
|
||||
ng-click="setWeekday($event,'sa')">
|
||||
Sat
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="error"
|
||||
ng-show="scheduler_weekDays_error">
|
||||
Please select one or more days.
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group
|
||||
RepeatFrequencyOptions-formGroup"
|
||||
ng-if="schedulerShowInterval">
|
||||
<label class="Form-inputLabel">
|
||||
End
|
||||
</label>
|
||||
<div>
|
||||
<select id="schedulerEnd"
|
||||
name="schedulerEnd"
|
||||
ng-model="$parent.schedulerEnd"
|
||||
ng-options="e.name for e in endOptions"
|
||||
required
|
||||
class="form-control input-sm"
|
||||
ng-change="schedulerEndChange()">
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group
|
||||
RepeatFrequencyOptions-everyGroup
|
||||
RepeatFrequencyOptions-formGroup"
|
||||
ng-if="schedulerEnd && schedulerEnd.value == 'after'">
|
||||
<label class="Form-inputLabel">
|
||||
Occurrence(s)
|
||||
</label>
|
||||
<input
|
||||
ng-name="schedulerOccurrenceCount"
|
||||
ng-id="schedulerOccurrenceCount"
|
||||
sch-spinner="scheduler_form"
|
||||
class="scheduler-spinner
|
||||
SpinnerInput"
|
||||
ng-model="schedulerOccurrenceCount"
|
||||
min="1" max="999"
|
||||
on-change="resetError('scheduler_occurrenceCount_error')"
|
||||
>
|
||||
<div class="error"
|
||||
ng-show="scheduler_occurrenceCount_error">
|
||||
Please provide a value between 1 and 999.
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group RepeatFrequencyOptions-formGroup"
|
||||
ng-show="schedulerEnd && schedulerEnd.value == 'on'">
|
||||
<label class="Form-inputLabel">
|
||||
<span class="red-text">*</span>
|
||||
End Date
|
||||
<span class="fmt-help">
|
||||
(mm/dd/yyyy)
|
||||
</span>
|
||||
</label>
|
||||
<div class="input-group">
|
||||
<input type="text"
|
||||
name="schedulerEndDt"
|
||||
id="schedulerEndDt"
|
||||
class="form-control input-sm"
|
||||
ng-model="schedulerEndDt"
|
||||
sch-date-picker
|
||||
data-min-today="true"
|
||||
placeholder="mm/dd/yyyy"
|
||||
ng-change="resetError('scheduler_endDt_error')">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default btn-sm"
|
||||
type="button"
|
||||
ng-click="showCalendar('schedulerEndDt')"
|
||||
>
|
||||
<i class="fa fa-calendar"></i>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="error"
|
||||
ng-show="scheduler_endDt_error">
|
||||
Please provide a valid date.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="RepeatFrequencyOptions-subFormBorderFixer"
|
||||
ng-show="schedulerFrequency.value && schedulerFrequency.value !== 'none'">
|
||||
</div>
|
||||
<!-- <div class="factDetailsNote" ng-if="isFactCleanup"><span class="factDetailsHeader">Note:</span> For facts collected older than the time period specified, save one fact scan (snapshot) per time window (frequency). For example, facts older than 30 days are purged, while one weekly fact scan is kept.
|
||||
Caution: Setting both numerical variables to "0" will delete all facts.</div> -->
|
||||
|
||||
<div class="factDetailsNote" ng-if="isFactCleanup"><span class="factDetailsHeader">Note:</span> For facts collected older than the time period specified, save one fact scan (snapshot) per time window (frequency). For example, facts older than 30 days are purged, while one weekly fact scan is kept.
|
||||
Caution: Setting both numerical variables to "0" will delete all facts.</div>
|
||||
|
||||
<div class="form-group" ng-if="cleanupJob && !isFactCleanup">
|
||||
<label><span class="red-text">*</span> Days of data to keep</label>
|
||||
<!-- <div class="form-group" ng-if="cleanupJob && !isFactCleanup">
|
||||
<label class="Form-inputLabel"><span class="red-text">*</span> Days of data to keep</label>
|
||||
<input type="number" class="form-control input-sm" name="schedulerPurgeDays" id="schedulerPurgeDays" min="1" ng-model="schedulerPurgeDays" required placeholder="Days of data to keep">
|
||||
<div class="error" ng-show="scheduler_form.schedulerPurgeDays.$dirty && scheduler_form.schedulerPurgeDays.$error.required">A value is required.</div>
|
||||
<div class="error" ng-show="scheduler_form.schedulerPurgeDays.$error.number">This is not a valid number.</div>
|
||||
@ -31,7 +500,7 @@
|
||||
|
||||
<div class="form-group cleanupStretcher factDaysToKeepCompacter" ng-if="isFactCleanup">
|
||||
<div class="col-md-12">
|
||||
<label><span class="red-text">*</span> Select a time period after which to remove old facts</label>
|
||||
<label class="Form-inputLabel"><span class="red-text">*</span> Select a time period after which to remove old facts</label>
|
||||
</div>
|
||||
<div class="col-md-6 inputSpacer inputCompactMobile">
|
||||
<input type="number" id="keep_amount" name="keep_amount" ng-model="keep_amount" ng-required="true" class="form-control input-sm" aw-min=0 aw-max=9999 integer></input>
|
||||
@ -43,11 +512,11 @@
|
||||
<div class="col-md-6 inputSpacer">
|
||||
<select id="keep_unit" name="keep_unit" ng-model="keep_unit" ng-options="type.label for type in keep_unit_choices track by type.value" ng-required="true" class="form-control input-sm"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="form-group cleanupStretcher" ng-if="isFactCleanup">
|
||||
<!-- <div class="form-group cleanupStretcher" ng-if="isFactCleanup">
|
||||
<div class="col-md-12">
|
||||
<label><span class="red-text">*</span> Select a frequency for snapshot retention</label>
|
||||
<label class="Form-inputLabel"><span class="red-text">*</span> Select a frequency for snapshot retention</label>
|
||||
</div>
|
||||
<div class="col-md-6 inputSpacer inputCompactMobile">
|
||||
<input type="number" class="form-control input-sm" id="granularity_keep_amount" name="granularity_keep_amount" ng-model="granularity_keep_amount" ng-required="true" aw-min=0 aw-max=9999 >
|
||||
@ -59,205 +528,7 @@
|
||||
<div class="col-md-6 inputSpacer">
|
||||
<select id="granularity_keep_unit" name="granularity_keep_unit" ng-model="granularity_keep_unit" ng-options="type.label for type in granularity_keep_unit_choices track by type.value" ng-required="true" class="form-control input-sm"></select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<div class="form-group">
|
||||
<label><span class="red-text">*</span> Start Date <span class="fmt-help"> mm/dd/yyyy</span></label>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control input-sm" name="schedulerStartDt" id="schedulerStartDt" ng-model="schedulerStartDt"
|
||||
sch-date-picker placeholder="mm/dd/yyyy" required ng-change="scheduleTimeChange()" >
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default btn-sm" type="button" ng-click="showCalendar('schedulerStartDt')">
|
||||
<i class="fa fa-calendar"></i></button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
<div class="form-group">
|
||||
<label><span class="red-text">*</span> Start Time <span class="fmt-help">HH24:MM:SS</span><span class="fmt-help" ng-show="!schedulerShowTimeZone">UTC</span></label>
|
||||
<div class="input-group">
|
||||
<input name="schedulerStartHour" id="schedulerStartHour" sch-spinner="scheduler_form" class="scheduler-time-spinner"
|
||||
ng-model="schedulerStartHour" placeholder="HH24" aw-min="0" min="0" aw-max="23" max="23" data-zero-pad="2" required
|
||||
ng-change="scheduleTimeChange()" >
|
||||
<span>:</span><input name="schedulerStartMinute" id="schedulerStartMinute" sch-spinner="scheduler_form" class="scheduler-time-spinner" ng-model="schedulerStartMinute" placeholder="MM" min="0" max="59" data-zero-pad="2" required ng-change="scheduleTimeChange()" >
|
||||
<span>:</span><input name="schedulerStartSecond" id="schedulerStartSecond" sch-spinner="scheduler_form" class="scheduler-time-spinner" ng-model="schedulerStartSecond" placeholder="SS" min="0" max="59" data-zero-pad="2" required ng-change="scheduleTimeChange()" >
|
||||
</div>
|
||||
<div class="error" ng-show="scheduler_startTime_error">The time must be in HH24:MM:SS format.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row error-pull-up">
|
||||
<div class="col-md-12">
|
||||
<div class="error" ng-show="scheduler_form_schedulerStartDt_error" ng-bind="scheduler_form_schedulerStartDt_error"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4" ng-show="schedulerShowTimeZone">
|
||||
<div class="form-group">
|
||||
<label>Local Time Zone</label>
|
||||
<select name="schedulerTimeZone" id="schedulerTimeZone" ng-model="schedulerTimeZone" ng-options="z.name for z in timeZones"
|
||||
required class="form-control input-sm" ng-change="scheduleTimeChange()" ></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" ng-show="schedulerShowUTCStartTime">
|
||||
<div class="form-group">
|
||||
<label>UTC Start Time</label>
|
||||
<input type="text" name="schedulerUTCTime" ng-model="schedulerUTCTime" id="schedulerUTCTime" class="form-control input-sm" readonly>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="form-group">
|
||||
<label>Repeat frequency</label>
|
||||
<select name="schedulerFrequency" id="schedulerFrequency" ng-model="schedulerFrequency"
|
||||
ng-options="f.name for f in frequencyOptions" required class="form-control input-sm"
|
||||
ng-change="scheduleRepeatChange()"></select>
|
||||
</div>
|
||||
<div class="error" ng-show="sheduler_frequency_error"></div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="form-group no-label" ng-show="schedulerShowInterval">
|
||||
<label>Every</label>
|
||||
<input name="schedulerInterval" id="schedulerInterval" sch-spinner="scheduler_form" class="scheduler-spinner"
|
||||
ng-model="schedulerInterval" min="1" max="999" ng-change="resetError('scheduler_interval_error')">
|
||||
<label class="inline-label" ng-bind="schedulerIntervalLabel"></label>
|
||||
<div class="error" ng-show="scheduler_interval_error">Please provide a value between 1 and 999.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" ng-show="schedulerFrequency && schedulerFrequency.value == 'monthly'">
|
||||
<div class="col-md-12">
|
||||
<div class="form-group option-pad-left">
|
||||
<div class="radio col-md-2">
|
||||
<label><input type="radio" value="day" ng-model="monthlyRepeatOption" ng-change="monthlyRepeatChange()" name="monthlyRepeatOption"
|
||||
id="monthlyRepeatOption"> on day</label>
|
||||
</div>
|
||||
<div class="col-md-3" style="padding-top:5px">
|
||||
<input name="monthDay" id="monthDay" sch-spinner="scheduler_form" class="scheduler-spinner"
|
||||
ng-model="monthDay" min="1" max="31" ng-change="resetError('scheduler_monthDay_error')" >
|
||||
<div class="error" ng-show="scheduler_monthDay_error">The day must be between 1 and 31.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row option-pad-bottom" ng-show="schedulerFrequency && schedulerFrequency.value == 'monthly'">
|
||||
<div class="col-md-12">
|
||||
<div class="form-group option-pad-left">
|
||||
<div class="radio col-md-2">
|
||||
<label><input type="radio" value="other" ng-model="monthlyRepeatOption" ng-change="monthlyRepeatChange()" name="monthlyRepeatOption" id="monthlyRepeatOption"> on the</label>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<select name="monthlyOccurrence" id="monthlyOccurrence" ng-model="monthlyOccurrence" ng-options="o.name for o in occurrences"
|
||||
ng-disabled="monthlyRepeatOption != 'other'" class="form-control input-sm" ></select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<select name="monthlyWeekDay" id="monthlyWeekDay" ng-model="monthlyWeekDay" ng-options="w.name for w in weekdays"
|
||||
ng-disabled="monthlyRepeatOption != 'other'" class="form-control input-sm" ></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" ng-show="schedulerFrequency && schedulerFrequency.value == 'yearly'">
|
||||
<div class="col-md-12">
|
||||
<div class="form-group option-pad-left">
|
||||
<div class="radio col-md-2">
|
||||
<label><input type="radio" value="month" ng-model="yearlyRepeatOption" ng-change="yearlyRepeatChange()" name="yearlyRepeatOption" id="yearlyRepeatOption"> on</label>
|
||||
</div>
|
||||
<div class="col-md-3 padding-top-slim">
|
||||
<select name="yearlyMonth" id="yearlyMonth" ng-model="yearlyMonth" ng-options="m.name for m in months"
|
||||
ng-disabled="yearlyRepeatOption != 'month'" class="form-control input-sm" ></select>
|
||||
</div>
|
||||
<div class="col-md-3 padding-top-slim">
|
||||
<input name="yearlyMonthDay" id="yearlyMonthDay" sch-spinner="scheduler_form" class="scheduler-spinner"
|
||||
ng-model="yearlyMonthDay" min="1" max="31" ng-change="resetError('scheduler_yearlyMonthDay_error')" >
|
||||
<div class="error" ng-show="scheduler_yearlyMonthDay_error">The day must be between 1 and 31.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row option-pad-bottom" ng-show="schedulerFrequency && schedulerFrequency.value == 'yearly'">
|
||||
<div class="col-md-12">
|
||||
<div class="form-group option-pad-left">
|
||||
<div class="radio col-md-2">
|
||||
<label><input type="radio" value="other" ng-model="yearlyRepeatOption" ng-change="yearlyRepeatChange()" name="yearlyRepeatOption"
|
||||
id="yearlyRepeatOption"> on the</label>
|
||||
</div>
|
||||
<div class="col-md-2 padding-top-slim">
|
||||
<select name="yearlyOccurrence" id="yearlyOccurrence" ng-model="yearlyOccurrence" ng-options="o.name for o in occurrences"
|
||||
ng-disabled="yearlyRepeatOption != 'other'" class="form-control input-sm" ></select>
|
||||
</div>
|
||||
<div class="col-md-2 padding-top-slim">
|
||||
<select name="yearlyWeekDay" id="yearlyWeekDay" ng-model="yearlyWeekDay" ng-options="w.name for w in weekdays"
|
||||
ng-disabled="yearlyRepeatOption != 'other'" class="form-control input-sm" ></select>
|
||||
</div>
|
||||
<div class="col-md-2 padding-top-slim">
|
||||
<select name="yearlyOtherMonth" id="yearlyOtherMonth" ng-model="yearlyOtherMonth" ng-options="m.name for m in months"
|
||||
ng-disabled="yearlyRepeatOption != 'other'" class="form-control input-sm" ></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group option-pad-left option-pad-bottom" ng-show="schedulerFrequency && schedulerFrequency.value == 'weekly'">
|
||||
<label><span class="red-text">*</span> On Days</label>
|
||||
<div class="input-group">
|
||||
<div class="btn-group" data-toggle="buttons-checkbox" id="weekdaySelect">
|
||||
<button type="button" ng-class="weekDaySUClass" class="btn btn-default" data-value="SU" ng-click="setWeekday($event,'su')">Sun</button>
|
||||
<button type="button" ng-class="weekDayMOClass" class="btn btn-default" data-value="MO" ng-click="setWeekday($event,'mo')">Mon</button>
|
||||
<button type="button" ng-class="weekDayTUClass" class="btn btn-default" data-value="TU" ng-click="setWeekday($event,'tu')">Tue</button>
|
||||
<button type="button" ng-class="weekDayWEClass" class="btn btn-default" data-value="WE" ng-click="setWeekday($event,'we')">Wed</button>
|
||||
<button type="button" ng-class="weekDayTHClass" class="btn btn-default" data-value="TH" ng-click="setWeekday($event,'th')">Thu</button>
|
||||
<button type="button" ng-class="weekDayFRClass" class="btn btn-default" data-value="FR" ng-click="setWeekday($event,'fr')">Fri</button>
|
||||
<button type="button" ng-class="weekDaySAClass" class="btn btn-default" data-value="SA" ng-click="setWeekday($event,'sa')">Sat</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="error" ng-show="scheduler_weekDays_error">Please select one or more days.</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="form-group" ng-show="schedulerShowInterval">
|
||||
<label>End</label>
|
||||
<div>
|
||||
<select id="schedulerEnd" name="schedulerEnd" ng-model="schedulerEnd" ng-options="e.name for e in endOptions" required class="form-control input-sm" ng-change="schedulerEndChange()"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" ng-show="schedulerEnd && schedulerEnd.value == 'after'">
|
||||
<div class="form-group no-label">
|
||||
<div class="input-group">
|
||||
<input ng-name="schedulerOccurrenceCount" ng-id="schedulerOccurrenceCount" sch-spinner="scheduler_form" class="scheduler-spinner"
|
||||
ng-model="schedulerOccurrenceCount" min="1" max="999" on-change="resetError('scheduler_occurrenceCount_error')" >
|
||||
<label class="inline-label">Occurrence(s)</label>
|
||||
</div>
|
||||
<div class="error" ng-show="scheduler_occurrenceCount_error">Please provide a value between 1 and 999.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" ng-show="schedulerEnd && schedulerEnd.value == 'on'">
|
||||
<div class="form-group no-label">
|
||||
<div class="input-group">
|
||||
<input type="text" name="schedulerEndDt" id="schedulerEndDt" class="form-control input-sm" ng-model="schedulerEndDt" sch-date-picker
|
||||
data-min-today="true" placeholder="mm/dd/yyyy" ng-change="resetError('scheduler_endDt_error')">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default btn-sm" type="button" ng-click="showCalendar('schedulerEndDt')">
|
||||
<i class="fa fa-calendar"></i></button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="error" ng-show="scheduler_endDt_error">Please provide a valid date.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</form>
|
||||
<div id="scheduler-detail">
|
||||
<div class="alert alert-danger" ng-show="!schedulerIsValid">
|
||||
@ -265,11 +536,11 @@
|
||||
</div>
|
||||
<div ng-show="schedulerIsValid">
|
||||
<div class="form-group">
|
||||
<label>Description</label>
|
||||
<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>RRule</label>
|
||||
<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">
|
||||
@ -300,8 +571,5 @@
|
||||
id="project_cancel_btn"
|
||||
ng-click="formCancel()">Cancel</button>
|
||||
</div>
|
||||
|
||||
</div><!-- col-md-12 -->
|
||||
</div><!-- row -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
37
awx/ui/client/src/scheduler/schedulertime.block.less
Normal file
37
awx/ui/client/src/scheduler/schedulertime.block.less
Normal file
@ -0,0 +1,37 @@
|
||||
/** @define SchedulerTime */
|
||||
|
||||
.SchedulerTime {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
span.ui-spinner.ui-widget.ui-widget-content.ui-corner-all {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.SchedulerTime-separator {
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.SchedulerTime-utc {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 20px;
|
||||
margin-top: -2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.SchedulerTime-utcLabel {
|
||||
flex: 1;
|
||||
font-weight: normal;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.SchedulerTime-utcTime {
|
||||
flex: 1;
|
||||
}
|
||||
5
awx/ui/client/src/scheduler/spinnerInput.block.less
Normal file
5
awx/ui/client/src/scheduler/spinnerInput.block.less
Normal file
@ -0,0 +1,5 @@
|
||||
/** @define SpinnerInput */
|
||||
|
||||
.SpinnerInput {
|
||||
width: ~"calc(100% - 26px)";
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user