JSFiddle - React, Tailwind, and code Playground

by mckennatim

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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
	<table>
		<caption>ko - observable arrays and computed values in a table with editable cells addRow and deleteRow</caption>
		<thead>
			<tr>
				<th>YEAR</th>
				<!-- ko foreach:headings-->
				<th><span data-bind="text:$data"></span></th>
				<!-- /ko -->
				<th>Total</th>
				<th></th>
			</tr>
		</thead>
		<tbody data-bind="foreach: Years">
			<tr>
				<td>
					<input size="3" type="text" data-bind="value:Year"> 
				</td>
				<!-- ko foreach:Values-->
				<td> 
					<input size="3" type="text" data-bind="value: m, valueUpdate:'afterkeydown'" >
				</td>
				<!-- /ko -->
				<td>
                	<span data-bind="text:Total"></span> 
            	</td>
            	<td> 
            		<button type="button" value="remove" data-bind="click: $parent.delete">X</button>
 				</td>
			</tr>
		</tbody>
	</table>
<button type="button" value="click" data-bind="click: addYear">addYear </button>
<button type="button" value="click" data-bind="click: send2server">send2server </button>
<!-- <div style="color:green" data-bind="text: astr"></div> -->

<h4>Returned Edited Data</h4>
<div data-bind="text: returnedEditedData"></div>

<h4>Server Data</h4>
<div data-bind="foreach: serverData">
    <div data-bind="text: ko.toJSON($data)"></div>
</div>

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: .5},
    {Year: 2012, Month: 3, Value: .75},
    {Year: 2012, Month: 4, 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}
];

// TODO: Create a viewmodel for the UI
/* 
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 (Year and Values) should be able to be edited. Don't worry about validation.
Fill headings that didn't come...