view available time

by bombo

HTML

<script src="https://raw.github.com/jquery/jquery-tmpl/master/jquery.tmpl.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.2.1.debug.js"></script>
<script type="text/html" id="entry">
    <tr class="datatable1">
        <td data-bind="text: name"></td>
        <td data-bind="text: timeUnit"></td>
        <td data-bind="text: total"></td>
        <td data-bind="text: used"></td>
        <td data-bind="text: balance"></td>
        <td data-bind="text: planned_approved"></td>
        <td></td>
        <td></td>
    </tr>
</script>

<table style="width: 100%" cellpadding="0" cellspacing="0">
    <thead>
         <tr class="tr_dataend">
            <td colspan="8"><span>Time Type</span>
                <select id="select" data-bind='options: typeOfException, value: selectedType'></select>
                
             </td>
             
        </tr>
        <tr class="datatable">
            <td>Type of Exception</td>
            <td>Time Unit</td>
            <td>Entitlement</td>
            <td>Used Hours</td>
            <td>Remaining Hours</td>
            <td>Planned and Approved</td>
            <td>Deduction Begindate</td>
            <td>Deduction Enddate</td>
            
        </tr>
    </thead>
    <tbody data-bind="template: { name: 'entry', foreach: entries }">
        <tr class="tr_dataend">
            <td colspan="8"></td>
        </tr>
    </tbody>
</table>

CSS

.tr_dataend {
    padding:5px;
    font-weight:bold;
    border-top: 1px solid silver;
    background-color: #f46d02;
   
}

.datatable {
    padding:5px;
    border-bottom:1px solid silver;
    border-top:1px solid silver;
    font-size:15px;
    
}



.datatable td 
{
    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
    border-left:1px solid silver;
    padding-left: 5px;
    font-weight: bold;
}

.datatable1 {
    padding:5px;
    border-bottom:1px solid silver;
    border-top:1px solid silver;
    font-size:15px;
    
}



.datatable1 td 
{
    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
    border-left:1px solid silver;
    padding-left: 5px;

}



.datatable input, select 
{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    
    
}


.datatable input[type=text], select 
{
    background-color:#f4f4f4;
    border-left: 1px solid #e2e3ea;
    border-top: 1px solid #abadb3;
    border-right: 1px solid #e2e3ea;
    border-bottom: 1px solid #e3e9ef;
}

JavaScript

var viewModel = {
    exceptionCodes: ko.observableArray([
        {
            name: 'Vacation Entitlement',
            entries: [
                {
                    name: 'Vacation Entitlement',
                    timeUnit: ko.observable('Hours'),
                    total: ko.observable('234'),
                    used: ko.observable('34'),
                    balance: ko.observable('200'),
                    planned_approved: ko.observable('56')
                }
            ]
        },
        {
            name: 'View all codes',
            entries: [
                {
                    name: 'View all codes',
                    timeUnit: ko.observable('Hours'),
                    total: ko.observable('890'),
                    used: ko.observable('800'),
                    balance: ko.observable('90'),
                    planned_approved: ko.observable('2')
                },
                {
                    name: 'View all codes',
                    timeUnit: ko.observable('Hours'),
                    total: ko.observable('480'),
                    used: ko.observable('300'),
                    balance: ko.observable('180'),
                    planned_approved: ko.observable('4')
                }

            ]
        }
    ]),

    entries: ko.observableArray(),

    typeOfException: ko.observableArray([
        'Vacation Entitlement',
        'View all codes'
    ]),
    selectedType: ko.observable()

};

viewModel.exceptionCodesObj = ko.dependentObservable(function() {
    var result = {},
        array = this.exceptionCodes();

    if (array.length) {
        for (var i = 0; i < array.length; i++) {
            result[array[i].name] = array[i];
        }
    }
    return result;

}, viewModel);

viewModel.selectedType.subscribe(function (newValue) {
    var entry = viewModel.exceptionCodesObj()[viewModel.selectedType()];
    if (entry) {
       ...