Scheduler with parsley

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>
<script src="//cdnjs.cloudflare.com/ajax/libs/parsley.js/1.1.16/parsley.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>
                <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:pluralizedScheduleType"></span></div>
                </div>
               
                <div class="control-group" data-bind="visible:scheduleType() == 'week'">
                    <label class="control-label" for="inputEmail">Repeat on:</label>
           ...

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);
    $('form').parsley();
    $("#submit_btn").click(function () {
        console.log("click");
        //$("form").parsley('validate');
    });
    console.log(ko.toJS(vm));
    $("#datepicker").datepicker({
        minDate: 0
    });
    $("#datepicker").datepicker("setDate", new Date());
    vm.startDate($("#datepicker").val());
});

function viewModel() {
    var self = this;
    self.scheduleType = ko.observable('week');
    self.scheduleType.subscribe(function() {
        if(self.scheduleType() != 'week'){
             self.weekDayIndexes([]);
        }
    });
    self.startDate = ko.observable();
    self.frequency = ko.observable();
    self.pluralizedScheduleType = ko.computed(function(){
        return pluralizeString(self.frequency(), self.scheduleType());
    });
    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 = pluralizeArray(weekDays);
        if (weekDays.length > 1) {
            weekDays = " on " + weekDays;
        }
        if (self.scheduleType() == 'day'){
            weekDays...