Most epic filter function

ever

by Salmin Skenderovic

HTML

<div class="container">

    <!-- <div>filtered items: <span data-bind="text: ko.toJSON(filteredItems)"></span></div>
    <br>
    <div>educations: <span data-bind="text: ko.toJSON(educations)"></span></div>
    <br>
    <div>Active filters: <span data-bind="text: ko.toJSON(activeFilters)"></span></div>
    <br>
    <div>filters: <span data-bind="text: ko.toJSON(filters)"></span></div> -->

    <h4>Filter</h4>

    <div class="dropdown bg-white" data-bind="foreach: {data: filters, as: 'filterCategories'}">
      <span data-bind="foreach: {data: Object.keys(filterCategories), as: 'category'}">

        <button class="dropdown-button" data-bind="text: category, click: function(){ if ($root.activeCategory() == category) { $root.activeCategory('') } else { $root.activeCategory(category) } }"></button>

        <div class="outer bg-white" data-bind="visible: $root.activeCategory() == category">
          <div class="inner">
             <ul data-bind="foreach: filterCategories[category]">

                  <label data-bind=""><!-- enable: $root.inList($data, category) -->
                    <input type="checkbox" data-bind="checked: $root.activeFilters[category], value: $data, enable: !(!($root.inList($data, category)) && $root.showActiveOnly())">
                    <span data-bind="text: $data, css: { 'disabled' : (!($root.inList($data, category)) && $root.showActiveOnly()) }"></span>
                  </label>

            </ul>

            <button data-bind="text: !$root.showActiveOnly() ? 'visa endast tillgängliga' : 'visa alla', click: function(){$root.showActiveOnly(!$root.showActiveOnly())}"></button>

          </div>
        </div>
      </span>
    </div>

    <hr>

    <div class="current-filters bg-white" data-bind="foreach: {data: activeFilters, as: 'filterCats'}">
      <span data-bind="foreach: {data: Object.keys(filterCats), as: 'category'}">
        <strong><label data-bind="text: category"></label></strong>
        <span data-bind="foreach:...

CSS

body {
  background: #fff;
}

.grey {
  color: gray;
}

.disabled {
  text-decoration: line-through;
  color: #ccc;
}

.outer {
  position: static;
  z-index: 999;
  width: 100%;
  margin: 100px 0px 0px 5px;
  height: 100px;
}

.inner {
  float: left;
  width: 100%;
  font-size: 20px;
}

.dropdown {
  width: 100%;
  float: left;
}

button {
  height: 32px;
  font-size: 18px;
  margin: 5px;
}

.dropdown-button {
  height: 42px;
  width: 45%;
  margin: 5px;
  float: left;
  font-size: 24px;
}

.education {

}

li {
  margin-left: 20px;
}

.current-scripts {
  height: 200px;
}

.bg-white {
  background-color: #fff;
}

.bg-red {
  background-color: #f00;
}

.bg-ccc {
  background-color: #ccc;
}

.container {
  width: 800px;
  margin: 0 auto;
}

JavaScript

//Constructor
//Dont need for final solution
function Education(name, agegroup, city, disease, category) {
	this.name = name;
	this.Målgrupp = agegroup;
	this.Ort = city;
	this.Funktionsnedsättning = disease;
  this.Kategori = category;
}

//Namespace
var filter = {
  InArray: function(array, value) {
    for (var i = 0; i < array.length; i++) {
        if (array[i] === value) {
          return true;
        }
    }
    return false;
  },
  //inArray

	pushToArray: function(array, value, propertyname) {
    if (propertyname != 'name') {
      var inArray = this.InArray(array(), value);
      if (!inArray) {
        array.push(value);
      }
    }
  }//pushToArray()
} //filter{}


//ViewModel
function ViewModel() {
	var self = this;

  self.activeCategory = ko.observable();
  self.showActiveOnly = ko.observable(false);

  self.filters = ko.observable({});
  self.activeFilters = {};

	self.educations = ko.observableArray([
      new Education("Utbildning1", "18-25", "Helsingborg", "Blind", "Personlig vård"),

  ]);

  self.createFilters = function () {
      for (var i = 0; i < self.educations().length; i++) {
        //console.log(this.educations()[i]);
        var currentEducation = self.educations()[i];

        for(var propertyName in currentEducation) {

            if (propertyName != "name" && propertyName != 'active'){

              if (!self.filters()[propertyName]) {
                self.filters()[propertyName] = ko.observableArray([]);
                self.activeFilters[propertyName] = ko.observableArray([]);
              }

							filter.pushToArray(self.filters()[propertyName], currentEducation[propertyName]);

            }
        }
      }
    }

    self.createFilters();

    self.inList = function(prop, category) {

      var array = self.filteredItems();
      var exists = false;

      for (var i = 0; i < array.length; i++) {
      	if (prop == array[i][category]) {
        	return true;
        } else {

        }
      }
      return...