WtpFair Hall

by alanbeech

HTML

<script src="http://knockoutjs.com/js/knockout-2.0.0.js"></script>
<table id="Hall" border=1>
    <tr data-bind="foreach: tiles" >
        <td>
            <table id="Tile"  data-bind="foreach: rows" border=1>
                <tr data-bind="foreach: stands"><td data-bind="text: name"></td></tr>
            </table>
        </td>
    </tr>
</table>

<div id="ResultsBox">
  <div>
      <select data-bind="value: selectedCategory, options: categories, optionsText: 'text', optionsValue: 'value', optionsCaption: 'category...'"></select>
      <select data-bind="value: selectedSubCategory, options: subs, optionsText: 'text', optionsValue: 'value', optionsCaption: 'sub category...'"></select>
      <select data-bind="value: selectedStand, options: stands, optionsText: 'text', optionsValue: 'value', optionsCaption: 'stand...'"></select>
    <button data-bind="click: clearSelection" caption="dfdsdfds">show all</button>        
  </div>  
  <div id="ResultsBoxList" data-bind="foreach: filteredItems">
    <div class="resultsItem" data-bind="text: text, event:{ click: $parent.test }">aaaa</div>
  </div>
  <div id="ResultsText" data-bind="text: filteredItemsCount">0 items</div>      
</div>

CSS

body{
    font-family: Arial;
    font-size:11px;
}

#Hall{
  width:100%;
}

#Tile{
    width:100%;
}

td
{
  padding:5px;
}

#ResultsBox{
  height: 150px; 
  padding: 4px;
  background-color: #222222;
}

#ResultsBoxList{
  
  overflow: auto;
  height:100px;
}
.resultsItem
{
  background-color: white;  
  height: 18px;
  border: solid 1px #cccccc;
  border-top-width:0px;
  padding: 7px;
    font-weight: bold;
}

.resultsItem:hover
{
    background: navy;
    color: white;
}

#ResultsText
{
  color: white;
  padding:6px;    
}

JavaScript

var wtpFair = {};

var stands = [
    { text: "stand 1", categories: "-1-3-5-7-,", subCategories: "-1-", value: "1"},
    { text: "stand 2", categories: "-2-4-6-8-,", subCategories: "-2-", value: "2"},
    { text: "stand 3", categories: "-1-3-5-7-,", subCategories: "-3-", value: "3"},
    { text: "stand 4", categories: "-2-4-6-8-,", subCategories: "-4-", value: "4"},
    { text: "stand 5", categories: "-1-3-5-7-,", subCategories: "-5-", value: "5"}
];

var categories = [
    { text: "Accessories / Trimmings", value: "1" },
    { text: "Chemical solutions", value: "2" },
    { text: "Garment maker", value: "3" },
    { text: "Knitted", value: "4" },
    { text: "Laminated", value: "5" },
    { text: "Tapes", value: "6" },
    { text: "Insulation", value: "7" },
    { text: "Woven", value: "8" },
    { text: "Yarns / Fibres", value: "9" }
];

var subs = [
    { text: "Antibacterial", value: "1" },
    { text: "Anti mosquito", value: "2" },    
    { text: "Anti static", value: "3" },
    { text: "Bi stretch", value: "4" },
    { text: "Coated", value: "5" },
    { text: "Downproof", value: "6" },
    { text: "Flame retardant", value: "7" },
    { text: "Fleece", value: "8" },
    { text: "High abrasion", value: "9" },
    { text: "Mechanical stretch", value: "10" },
    { text: "Mono stretch", value: "11" },
    { text: "Multilayer", value: "12" },
    { text: "Odour management", value: "13" },
    { text: "Polygiene", value: "14" },
    { text: "Prints / fancy", value: "15" },
    { text: "Quick dry", value: "16" },
    { text: "Reflective / high visibility", value: "17" },
    { text: "Shock Absorbtion", value: "18" },
    { text: "Sustainable", value: "19" },
    { text: "Thermoregulation", value: "20" },
    { text: "UV resistant", value: "21" },
    { text: "Waterproof / breathable", value: "22" },
    { text: "Water repellent", value: "23" },
    { text: "Windproof / breathable", value: "24" }
];
wtpFair.viewModel = {

    stands: ko.observableArray(stands),
...