Scheduler

by bradleytrager

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js "></script>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span6">
            <div> <strong>When</strong> (Schedule Distribution)</div>
            <form class="form-horizontal">
                <div class="control-group">
                    <label class="control-label">Repeats:</label>
                    <div class="controls">
                        <select data-bind="value:scheduleType">
                            <option value="day">Daily</option>
                            <option value="week">Weekly</option>
                            <option value="month">Monthly</option>
                            <option value="year">Yearly</option>
                        </select>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">Starts on:</label>
                    <div class="controls">
                        <input id="datepicker" type="text" data-bind="value:startDate" />
                    </div>
                </div>
                <!-- ko if: scheduleType() == 'day' || scheduleType() == 'week'  -->
                <div class="control-group">
                    <label class="control-label" for="inputEmail">Repeat every:</label>
                    <div class="controls">
                        <select data-bind="options:frequencyChoices, value:frequency"></select> <span data-bind="text:scheduleType"></span>s</div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputEmail">Repeat on:</label>
                    <div class="controls">
                        <div...

CSS

form{border:1px solid black}
p{text-align:center; font-weight:bold}

JavaScript

var DAYS_OF_WEEK = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
$(function () {

    vm = new viewModel();
    ko.applyBindings(vm);
    console.log(ko.toJS(vm));
    $("#datepicker").datepicker({
        minDate: 0
    });
    $("#datepicker").datepicker("setDate", new Date());
     $("#repeatDatepicker-month").datepicker({
        dateFormat: "dd"
     });
    $("#repeatDatepicker-year").datepicker({
        dateFormat: 'dd MM'
    });
     
    
    vm.startDate($("#datepicker").val());
});

function viewModel() {
    var self = this;
    self.scheduleType = ko.observable();
    self.scheduleType.subscribe(function(){
       
       
    });
    self.startDate = ko.observable();
    self.frequency = ko.observable();
    self.weekDayIndexes = ko.observableArray([]);
    self.weekDayNames = ko.computed(function () {
        var array = [];
        //Sort Days to display in order
        ko.utils.arrayForEach(self.weekDayIndexes().sort(), function (index) {
            array.push(DAYS_OF_WEEK[index]);
        });
        return array;
    });
    self.resultString = ko.computed(function () {
        var scheduleType = self.scheduleType();
        var startDate = self.startDate();
        var frequency = self.frequency();
        var weekDays = self.weekDayNames();
        //only display frequency if it is greater than 1
        frequency = frequency > 1 ? frequency : "";
        //Pluralize schedual type if greater than 1
        scheduleType = self.frequency() > 1 ? scheduleType + "s" : scheduleType;
        //Make comma separated list of weekdays
        weekDays = pluralize(weekDays);

        return "Distributions will be sent every " + frequency + " " + scheduleType + " on " + weekDays + " starting " + startDate;
    });

    self.frequencyChoices = ko.computed(function () {
        //Genereate options for "Repeat every:"
        var array = [],
            maxFrequency;
        switch (self.scheduleType()) {
           ...