<!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>&nbsp;&nbsp;Download
      </a>
      <a href="https://github.com/sarfarazansari/angular-cron-generator" class="btn btn-default btn-lg">
        <i class="glyphicon glyphicon-random"></i>&nbsp;&nbsp;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>&lt;cron-generator ng-model="cronExpression" config="cronOptions"&gt;&lt;/cron-generator&gt;</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