NBI Code Test

by Ben K

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<h4>Server Data</h4>
<div data-bind="foreach: $data.serverData">
    <div data-bind="text: ko.toJSON($data)"></div>
</div>
<br>
<table id="yearsgrid" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>YEAR</th>
            <th>JAN</th>
            <th>FEB</th>
            <th>MAR</th>
            <th>APR</th>
            <th>MAY</th>
            <th>JUN</th>
            <th>JUL</th>
            <th>AUG</th>
            <th>SEP</th>
            <th>OCT</th>
            <th>NOV</th>
            <th>DEC</th>
            <th>Total</th>
            <th>&nbsp;</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: vm.rowData">
        <tr>
            <td>
                <input type="text" data-bind="value: Year" />
            </td>
            <!-- ko foreach: MonthsValues -->
            <td>
                <input type="text" data-bind="value: Value" />
            </td>
            <!-- /ko -->
            <td data-bind="text: Total" class="total"></td>
            <td>
                <button class="deleteRow btn btn-sm btn-danger">Delete</button>
            </td>
        </tr>
    </tbody>
</table>

<div id="actionBtns">
    <button id="addRow" class="btn btn-lg btn-default">Add Year</button>
    <button data-bind="click: saveData" class="btn btn-lg btn-primary">Save</button>
</div>

<div data-bind="visible: vm.shouldShowReturningData">
    <h4>Data to Send to Server</h4>
    <div data-bind="foreach: vm.dataToSave">
        <div data-bind="text: ko.toJSON($data)"></div>
    </div>
</div>

CSS

td input {
    width:50px;
    text-align:right;
}

td.total {text-align:right;}

#actionBtns {float:right; margin-right:10px;}

JavaScript

// MOTIVATION
/*
This assignment aims to simulate the use case where there is data in a database that we want to view, modify, and then update through a UI. I am not as interested in how it looks, more that it functions correctly (though if you do have time, feel free to apply some css). The variable serverData serves as the simulated data that is returned from a web service call. Each piece of data represents a particular Year/Month combination and gives the value associated with it.
*/

// Assume that the following data came back from a web service call...
var serverData = [{
    Year: 2012,
    Month: 1,
    Value: .5
}, {
    Year: 2012,
    Month: 2,
    Value: .75
}, {
    Year: 2012,
    Month: 5,
    Value: .5
}, {
    Year: 2012,
    Month: 6,
    Value: .5
}, {
    Year: 2012,
    Month: 7,
    Value: .75
}, {
    Year: 2012,
    Month: 8,
    Value: .75
}, {
    Year: 2012,
    Month: 9,
    Value: .5
}, {
    Year: 2012,
    Month: 10,
    Value: .5
}, {
    Year: 2012,
    Month: 11,
    Value: .75
}, {
    Year: 2012,
    Month: 12,
    Value: .75
},

{
    Year: 2013,
    Month: 1,
    Value: .5
}, {
    Year: 2013,
    Month: 2,
    Value: .5
}, {
    Year: 2013,
    Month: 3,
    Value: .75
}, {
    Year: 2013,
    Month: 4,
    Value: .75
}, {
    Year: 2013,
    Month: 5,
    Value: .5
}, {
    Year: 2013,
    Month: 6,
    Value: .5
}, {
    Year: 2013,
    Month: 7,
    Value: .75
}, {
    Year: 2013,
    Month: 8,
    Value: .75
}, {
    Year: 2013,
    Month: 9,
    Value: .5
}, {
    Year: 2013,
    Month: 10,
    Value: .5
}, {
    Year: 2013,
    Month: 11,
    Value: .75
}, {
    Year: 2013,
    Month: 12,
    Value: .75
},

{
    Year: 2014,
    Month: 1,
    Value: .85
}];

/* 
1. What the UI should show 
Create a display that shows a grid, where each row in the grid collects all of the data for a given year and displays the values for each month in that year. Each month should show the value returned from the server, and all values...