Operator Rounds mockup

by homer2

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div>
name: <input type="text" data-bind="value: " />
<div>


<div id="rounds" data-bind="text: ko.toJSON($root)"></div>
<p></p>
<div id="points" data-bind="text: ko.toJSON($root)"></div>
<p></p>
<div id="responses" data-bind="text: ko.toJSON($root)"></div>

JavaScript

var round = {roundId:1, name:"My Round"};
var roundPoints = [
		{roundPointId:1, name:"First Point", typeid:1, parentRoundPointId: 0, value: false, isVisible: true},
		{roundPointId:2, name:"Second Point", typeid:1, parentRoundPointId: 0, value: false, isVisible: true},
		{roundPointId:3, name:"Third Point", typeid:2, parentRoundPointId: 2, value: 8, isVisible: true},
		{roundPointId:4, name:"Forth Point", typeid:2, parentRoundPointId: 2, value: 47, isVisible: true},
		{roundPointId:5, name:"Fifth Point", typeid:3, parentRoundPointId: 0, value: 1, isVisible: true}
		];
var responseItems = [
		{responseItemId:1, name:"bad", roundPointId: 0, value: 0, ordering: 1},
		{responseItemId:2, name:"ok", roundPointId: 0, value: 5, ordering: 2},
		{responseItemId:3, name:"good", roundPointId: 2, value: 10, ordering: 3}
		];

ko.applyBindings(round, document.getElementById("rounds"));
ko.applyBindings(roundPoints, document.getElementById("points"));
ko.applyBindings(responseItems, document.getElementById("responses"));