vehicle position selector

by gbos

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<template id="vehicle-pos">

  <svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
    <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->

    <g>
      <title>background</title>
      <rect x="-1" y="-1" width="402" height="302" id="canvas_background" fill="#fff" />
      <g id="canvasGrid" display="none">
        <rect id="svg_3" width="100%" height="100%" x="0" y="0" stroke-width="0" fill="url(#gridpattern)" />
      </g>
    </g>
    <g>
      <title>Layer 1</title>
      <rect fill="#fff" stroke="#000" stroke-width="7.5" x="50.5" y="68.5" width="299" height="157" id="svg_1" />
      
      
      <path data-bind="click: function () { select(0) }, attr:{fill:colors[0]}" fill="#aaa" stroke-width="0" d="m7.25749,133.887482l19.09094,0l15.909058,15l-15.909058,15.000015l-19.09094,0l0,-30.000015z" id="svg_2" stroke="#000" />
      <path data-bind="click: function () { select(1) }, attr:{fill:colors[1]}" fill="#0033ff" stroke-width="0" d="m13.25749,32.887482l19.09094,0l15.909058,15l-15.909058,15.000019l-19.09094,0l0,-30.000019z" id="svg_5" stroke="#000" transform="rotate(46 30.75748825073243,47.887489318847656) " />
      <path data-bind="click: function () { select(2) }, attr:{fill:colors[2]}" fill="#0033ff" stroke-width="0" d="m94.257492,26.88748l19.090935,0l15.909065,15.000002l-15.909065,15.000019l-19.090935,0l0,-30.000021z" id="svg_9" stroke="#000" transform="rotate(90 111.75749206542969,41.88748931884767) " />
      <path data-bind="click: function () { select(3) }, attr:{fill:colors[3]}" fill="#0033ff" stroke-width="0" d="m175.257492,26.88748l19.090927,0l15.909073,15.000002l-15.909073,15.000019l-19.090927,0l0,-30.000021z" id="svg_10" stroke="#000" transform="rotate(90 192.7574920654297,41.88748931884768) " />
      <path data-bind="click: function () { select(4) }, attr:{fill:colors[4]}" fill="#0033ff" stroke-width="0"...

JavaScript

ko.components.register('vehicle-pos', {

	template: {element: 'vehicle-pos'},
  viewModel: function (params) {
  	var self = this;
    
    self.selected = ko.isObservable(params.selected) ? params.selected : ko.observable(params.selected);
    
    self.select = function (i) {
    	console.log("select", i);
    	self.selected(i);
    };
    
    self.colors = [];
    for(var i = 0; i < 12; i++) {
    	(function (j) {
      	self.colors.push(ko.computed(function () { return j === self.selected() ? "#FF0000" : "#aaa" }));
      })(i);
    	
    }
  
  
  }
});

ko.applyBindings({i: ko.observable(0), j: ko.observable(1)});