<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular.js"></script>
<script src="angular-cron-generator.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-strict-di ng-app="app" ng-controller="HomeController as vm">
<div class="jumbotron text-center">
<h1>{{::vm.pluginName}}</h1>
<p>A cron expression generator for AngularJS. In both format quartz and unix.</p>
<p>
<a href="https://github.com/sarfarazansari/angular-cron-generator" class="btn btn-primary btn-lg">
<i class="glyphicon glyphicon-download"></i> Download
</a>
<a href="https://github.com/sarfarazansari/angular-cron-generator" class="btn btn-default btn-lg">
<i class="glyphicon glyphicon-random"></i> Fork on GitHub
</a>
</p>
</div>
<section class="text-center">
<h3>Example using multipe allows and quartz format</h3>
<div class="row">
<div class="col-xs-6 col-xs-offset-3">
<cron-generator ng-model="vm.myOutput" config="vm.cronConfig"></cron-generator>
</div>
</div>
<p class="lead">{{vm.myOutput}}</p>
<h3>Example using single select and unix format</h3>
<div class="row">
<div class="col-xs-6 col-xs-offset-3">
<cron-generator ng-model="vm.cronString" config="vm.cronConfig1"></cron-generator>
</div>
</div>
<p class="lead">{{vm.cronString}}</p>
</section>
<section class="container">
<div class="panel">
<div class="panel-body">
<div class="row container">
<div class="col-xs-12">
<h3>Usage</h3>
</div>
</div>
<hr/>
<div class="row container">
<div class="col-xs-12">
<pre><cron-generator ng-model="cronExpression" config="cronOptions"></cron-generator></pre>
<pre>angular.module('ExampleApp', ['angular-cron-generator'])
.controller('ExampleCtrl', ['$scope', function ($scope) {
$scope.cronOptions = {
allowMultiple: true,
quartz: true
};
}]);</pre>
</div>
</div>
<div class="row container">
<div class="col-xs-12">
<h3>Options</h3>
</div>
</div>
<hr/>
<div class="row container">
<div class="col-xs-12">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Options</th>
<th>Description</th>
<th>Type</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>allowMultiple</td>
<td>Allows you to select multiple values</td>
<td>boolean</td>
<td>defaults to false</td>
</tr>
<tr>
<td>quartz</td>
<td>Allows you to get any of Unix and quartz format output</td>
<td>boolean</td>
<td>defaults to false</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<!-- end static content -->
</body>
</html>
// Code goes here
angular.module('app', ['angular-cron-generator'])
.controller('HomeController', HomeController);
HomeController.$inject = ['$timeout'];
function HomeController($timeout) {
this.pluginName = "Angular-Cron-Generator";
this.cronConfig = {
allowMultiple: true,
quartz: true
};
this.cronConfig1 = {};
}
/* Styles go here */
.cron-select-wrap{display:inline-block}.cron-select-wrap .cron-select{width:150px;height:34px;padding:6px 12px;margin:0;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.cron-select-wrap select{min-width:100px}.cron-select-wrap select[multiple]{height:140px}.form-group .din{display:inline-block}.select-options{display:inline-block}
## angular-cron-generator
A cron expression generator for AngularJS. In both format quartz and unix
!function(){"use strict";function e(e){"ngInject";function n(n,l,t,o){function s(){var e=n.myFrequency.base;n.myFrequency={},n.myFrequency.base=e}if(n.myFrequency={base:0},n.frequency=[{value:0,label:"Select"},{value:1,label:"Minute"},{value:2,label:"Hourly"},{value:3,label:"Daily"},{value:4,label:"Weekly"},{value:5,label:"Monthly"},{value:6,label:"Yearly"}],"object"===a(n.config)&&!n.config.length){if("object"===a(n.config.options)){var r=Object.keys(n.config.options);for(var i in r){var u=r[i].replace(/^allow/,""),c=r[i];if(!n.config.options[c])for(var m in n.frequency)n.frequency[m].label===u&&n.frequency.splice(m,1)}}angular.isDefined(n.config.allowMultiple)?n.allowMultiple=n.config.allowMultiple:n.allowMultiple=!1,angular.isDefined(n.config.quartz)&&n.config.quartz?n.cronStyle="quartz":n.cronStyle="default"}n.minutes=Array.apply(null,Array(60)).map(function(e,n){return n}),n.hours=Array.apply(null,Array(24)).map(function(e,n){return n}),n.daysOfMonth=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],n.days=[0,1,2,3,4,5,6],n.months=[1,2,3,4,5,6,7,8,9,10,11,12],"quartz"===n.cronStyle&&(n.days=[1,2,3,4,5,6,7]),n.$watch("myFrequency",function(l,t){if(angular.isUndefined(l)&&(n.myFrequency={base:0}),l&&t&&l.base){var a=e.convertObjectIntoCronString(l,n.cronStyle,n.allowMultiple);o.$setViewValue(a)}},!0),n.initKeys=function(){if(n.allowMultiple)return void s();var e=parseInt(n.myFrequency.base);e>=1&&(n.myFrequency.minutes=n.minutes[0]),e>=2&&(n.myFrequency.hours=n.hours[0]),e>=3&&(n.myFrequency.daysOfMonth=n.daysOfMonth[0]),e>=4&&(delete n.myFrequency.daysOfMonth,n.myFrequency.days=n.days[0]),e>=5&&(n.myFrequency.months=n.months[0],n.myFrequency.daysOfMonth=n.daysOfMonth[0])}}return{restrict:"EA",replace:!0,transclude:!0,require:"ngModel",scope:{ngModel:"=",config:"="},templateUrl:"cron.generator.html",link:n}}function n(){"ngInject";return function(e){switch(e){case 1:return"1st";case 2:return"2nd";case 3:return"3rd";case 21:return"21st";case 22:return"22nd";case 23:return"23rd";case 31:return"31st";case null:return null;default:return e+"th"}}}function l(){"ngInject";return function(e){var n={1:"January",2:"February",3:"March",4:"April",5:"May",6:"June",7:"July",8:"August",9:"September",10:"October",11:"November",12:"December"};return null!==e&&angular.isDefined(n[e])?n[e]:null}}function t(){"ngInject";return function(e,n){var l=void 0;return l="quartz"===n?{1:"Sunday",2:"Monday",3:"Tuesday",4:"Wednesday",5:"Thursday",6:"Friday",7:"Saturday"}:{0:"Sunday",1:"Monday",2:"Tuesday",3:"Wednesday",4:"Thursday",5:"Friday",6:"Saturday"},null!==e&&angular.isDefined(l[e])?l[e]:null}}e.$inject=["cronGeneratorService"];var a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},o=function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")},s=function(){function e(e,n){for(var l=0;l<n.length;l++){var t=n[l];t.enumerable=t.enumerable||!1,t.configurable=!0,"value"in t&&(t.writable=!0),Object.defineProperty(e,t.key,t)}}return function(n,l,t){return l&&e(n.prototype,l),t&&e(n,t),n}}(),r=["SUN","MON","TUE","WED","THU","FRI","SAT"],i=["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"],u=function(){function e(){"ngInject";o(this,e)}return s(e,[{key:"convertObjectIntoCronString",value:function(e,n,l){return"quartz"===n?this.getQuartzCronString(e,l):this.getUnixCronString(e)}},{key:"getQuartzCronString",value:function(e,n){var l=["*","*","*","*","*","?","*"],t=parseInt(e.base);if(t>=1&&(l[0]=void 0!==e.seconds?e.seconds:0,l[1]=void 0!==e.minutes?e.minutes:"*"),t>=2&&(l[2]=void 0!==e.hours?e.hours:"*"),t>=3&&(l[3]=void 0!==e.daysOfMonth?e.daysOfMonth:"*"),t>=4)if(e.days&&(l[3]="?"),void 0!==e.days)if(n){var a=[];angular.forEach(e.days,function(e){a.push(r[e-1])}),l[5]=a.join()}else l[5]=r[e.days-1];else l[5]="?";if(t>=5)if(void 0!==e.months)if(n){var o=[];angular.forEach(e.months,function(e){o.push(i[e])}),l[4]=o.join()}else l[4]=i[e.months];else l[4]="*";return l.join(" ")}},{key:"getUnixCronString",value:function(e){var n=["*","*","*","*","*"],l=parseInt(e.base);return l>=1&&(n[0]=void 0!==e.minutes?e.minutes:"*"),l>=2&&(n[1]=void 0!==e.hours?e.hours:"*"),l>=3&&(n[2]=void 0!==e.daysOfMonth?e.daysOfMonth:"*"),l>=4&&(n[4]=void 0!==e.days?e.days:"*"),l>=5&&(n[3]=void 0!==e.months?e.months:"*"),n.join(" ")}}]),e}();angular.module("angular-cron-generator",[]).service("cronGeneratorService",u).directive("cronGenerator",e).filter("cronNumeral",n).filter("cronMonthName",l).filter("cronDayName",t)}(),angular.module("angular-cron-generator").run(["$templateCache",function(e){e.put("cron.generator.html",'<div class="cron-wrap">\n\n <script type="text/ng-template" id="minutes-template.html">\n <select \n class="form-control"\n ng-model="myFrequency.minutes"\n ng-if="allowMultiple" multiple\n ng-options="value as value for value in minutes">\n </select>\n <!-- If Multiple is not Enabled -->\n <select \n class="form-control"\n ng-model="myFrequency.minutes"\n ng-if="!allowMultiple"\n ng-options="value as value for value in minutes">\n </select>\n </script>\n\n <script type="text/ng-template" id="hours-template.html">\n <select \n class="form-control"\n ng-model="myFrequency.hours"\n ng-if="allowMultiple" multiple\n ng-options="value as value for value in hours">\n </select>\n <!-- If Multiple is not Enabled -->\n <select \n class="form-control"\n ng-model="myFrequency.hours"\n ng-if="!allowMultiple"\n ng-options="value as value for value in hours">\n </select>\n </script>\n\n <script type="text/ng-template" id="dates-template.html">\n <!-- If Multiple is Enabled -->\n <select \n class="form-control"\n ng-model="myFrequency.daysOfMonth"\n ng-if="allowMultiple" multiple\n ng-options="value as (value | cronNumeral) for value in daysOfMonth">\n </select>\n <!-- If Multiple is not Enabled -->\n <select \n class="form-control"\n ng-model="myFrequency.daysOfMonth"\n ng-if="!allowMultiple"\n ng-options="value as (value | cronNumeral) for value in daysOfMonth">\n </select>\n </script>\n\n <script type="text/ng-template" id="days-template.html">\n <!-- If Multiple is Enabled -->\n <select \n class="form-control"\n ng-model="myFrequency.days"\n ng-if="allowMultiple" multiple\n ng-options="value as (value | cronDayName: cronStyle) for value in days">\n </select>\n <!-- If Multiple is not Enabled -->\n <select \n class="form-control"\n ng-model="myFrequency.days"\n ng-if="!allowMultiple"\n ng-options="value as (value | cronDayName: cronStyle) for value in days">\n </select>\n </script>\n\n <script type="text/ng-template" id="month-template.html">\n <select \n class="form-control"\n ng-model="myFrequency.months"\n ng-if="allowMultiple" multiple\n ng-options="value as (value | cronMonthName) for value in months">\n </select>\n <!-- If Multiple is not Enabled -->\n <select \n class="form-control"\n ng-model="myFrequency.months"\n ng-if="!allowMultiple"\n ng-options="value as (value | cronMonthName) for value in months">\n </select>\n </script>\n \n <div class="clearfix" style="margin-bottom: 20px;">\n <select ng-change="initKeys()" class="form-control" ng-model="myFrequency.base" ng-options="item.value as item.label for item in frequency"></select>\n </div>\n\n <div class="clearfix form-inline well well-small" ng-if="myFrequency.base !== 0">\n\n <!-- only for minutes -->\n <div class="form-group" ng-show="myFrequency.base === 1">\n <label>Every: </label>\n <div class="select-options" ng-include="\'minutes-template.html\'"></div>\n <label>minute(s)</label>\n </div>\n <!-- only for minutes end-->\n\n <!-- hourly -->\n <div class="form-group" ng-show="myFrequency.base === 2">\n <label>Every: </label>\n <div class="select-options" ng-include="\'hours-template.html\'"></div>\n <label>hour(s) on minute</label>\n <div class="select-options" ng-include="\'minutes-template.html\'"></div>\n </div>\n <!-- hourly end -->\n\n\n <!-- daily -->\n <div class="form-group" ng-show="myFrequency.base === 3">\n <label>Every: </label>\n <div class="select-options" ng-include="\'dates-template.html\'"></div>\n <label>day(s) at</label>\n <div class="select-options" ng-include="\'hours-template.html\'"></div>\n <label>hours(s) and</label>\n <div class="select-options" ng-include="\'minutes-template.html\'"></div>\n <label>minute(s).</label>\n </div>\n <!-- daily end -->\n\n\n <!-- weekly -->\n <div class="form-group" ng-show="myFrequency.base === 4">\n <label>Every: </label>\n <div class="select-options" ng-include="\'days-template.html\'"></div>\n <label>at</label>\n <div class="select-options" ng-include="\'hours-template.html\'"></div>\n <label>hours(s) and</label>\n <div class="select-options" ng-include="\'minutes-template.html\'"></div>\n <label>minute(s).</label>\n </div>\n <!-- weekly end -->\n\n <!-- monthly -->\n <div class="form-group" ng-show="myFrequency.base === 5">\n <label>On the: </label>\n <div class="select-options" ng-include="\'dates-template.html\'"></div>\n <label>of every</label>\n <div class="select-options" ng-include="\'month-template.html\'"></div>\n <label>month(s) at</label>\n <div class="select-options" ng-include="\'hours-template.html\'"></div>\n <label>hours(s) and</label>\n <div class="select-options" ng-include="\'minutes-template.html\'"></div>\n <label>minute(s).</label>\n </div>\n <!-- monthly end -->\n\n <!-- yearly -->\n <div class="form-group" ng-show="myFrequency.base === 6">\n <label>Every: </label>\n <div class="select-options" ng-include="\'month-template.html\'"></div>\n <label>On the: </label>\n <div class="select-options" ng-include="\'dates-template.html\'"></div>\n <label>at</label>\n <div class="select-options" ng-include="\'hours-template.html\'"></div>\n <label>hours(s) and</label>\n <div class="select-options" ng-include="\'minutes-template.html\'"></div>\n <label>minute(s).</label>\n </div>\n <!-- yearly end -->\n\n </div>\n</div>')}]);
//# sourceMappingURL=angular-cron-generator.min.js.map