Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
​
<meta name="description" content="can-fixture demo">
<meta name="" content="" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <p><label>Start Index:</label> <input name='start' size='5'/>
     <label>End Index:</label> <input name='end' size='5'/>
  </p>
  <p>
    <label>Order By:</label> <select name="orderBy">
      <option value="">None</option>
      <option value="make">Make</option>
      <option value="model">Model</option>
      <option value="year">Year</option>
      
      <option value="type">Type</option>
    </select>
  </p>
  <p class="faux-header">Filter By</p>
  <p class="inline">
    <label>Make:</label> <select name="make">
      <option value="">All</option>
      <option value="Ford">Ford</option>
      <option value="Nissan">Nissan</option>
    <option value="tesla">Tesla</option>
    </select>
  </p>
  <p class="inline">
    <label>Year:</label> <select name="year">
      <option value="">All</option>
      <option value="2013">2013</option>
      <option value="2014">2014</option>
    </select>
  </p>
  <p class="inline">
    <label>Type:</label> <select name="type">
      <option value="">All</option>
      <option value="used">Used</option>
      <option value="new">New</option>
      <option value="certified">Certified</option>
    </select>
  </p>
​
  
<table>
  <thead>
    <tr>
      <th>Make</th><th>Model</th><th>Year</th><th>Type</th><th class="delete"></th>
    </tr>
  </thead>
  <tbody id='out'>
    
  </tbody>
</table>
​
  <button id='refresh'>Refresh List</button>
  
  <script src='https://rawgit.com/canjs/can-fixture/v0.3.0/dist/global/can-fixture.js'></script>
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
</body>
</html>
 
* {
  font-family: Lato, Arial, sans-serif;
  box-sizing: border-box;
}
input {
  margin-right: 10px;
}
p {
  margin-bottom: 0px;
}
.inline {
  display: inline-block;
  padding-right: 3px;
  margin-top: 0;
  width: 32%
}
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
th, td {
  border-bottom: 1px solid #aaa;
  text-align: left;
  padding: 5px 3px;
  
}
td.delete {
  width: 2%
}
.remove {
  color: red;
  cursor: pointer;
}
.remove:hover {
  text-decoration: underline;
}
.deleting {
  color: gray;
}
.deleting .remove {
  color: gray;
  cursor: auto;
}
.deleting .remove:hover {
  text-decoration: none;
}
#refresh {
  padding: 8px;
  margin-top: 25px;
  background-color: #1B5686;
  color: white;
  border: none;
  border-radius: 3px;
}
 
// FIXTURE CODE ----------
​
// describe service layer
var algebra = new set.Algebra(
  set.comparators.id("_id"),
  set.comparators.sort('orderBy'),
  set.comparators.enum("type", ["used","new","certified"]),
  set.comparators.rangeInclusive("start","end"),
  {
    // makes year work with numbers or strings
    year: function(a, b){
            return a == b;
    }
  }
);
​
// create a store for CRUD operations with initial data
var store = fixture.store([
  {_id: 1, make: "Ford", year: 2013, model: "Mustang", type: "used"},
  {_id: 2, make: "Ford", year: 2014, model: "Mustang", type: "new"},
  {_id: 3, make: "Ford", year: 2013, model: "Focus", type: "used"},
  {_id: 4, make: "Ford", year: 2014, model: "Focus", type: "certified"},
  {_id: 5, make: "Nissan", year: 2013, model: "Altima", type: "used"},
  {_id: 6, make: "Nissan", year: 2014, model: "Altima", type: "certified"},
  {_id: 7, make: "Nissan", year: 2013, model: "Leaf", type: "used"},
  {_id: 8, make: "Nissan", year: 2014, model: "Leaf", type: "used"}
], algebra);
​
// send AJAX requests to the store
fixture("/cars/{_id}", store);
// make requests take 1.5 seconds
fixture.delay = 1500;
​
​
// CLIENT CODE -----------
​
// given params to send to the server
// make a request and add the response to the page
function getAndShowTodos(params){
  var out = document.getElementById("out");
  out.innerHTML = "<tr><td colspan='5'>Loading "+JSON.stringify(params)+"</td></tr>";
  return $.getJSON("/cars", params).then(function(response){
    var lis = response.data.map(function(car){
      return "<tr id='car-"+car._id+"'><td>"+
        [car.make, car.model, car.year, car.type].join("</td><td>")+
        "</td><td class='remove'>x</td></tr>";
    });
    
    if(lis.length) {
      out.innerHTML = lis.join("");
    } else {
      out.innerHTML = "<tr><td>no cars</td></tr>";
    }
​
  });
}
​
// Read the values from the form and create the parameters
// used to make the request as `set`.
var updateTodos = function(){
  var set = {};
  $("select, input").each(function(el){
    if(this.value) {
      set[this.name] = this.value;
    }
  });
  
  // clean up the start, end, and year values
  // so they are numbers
  makeNumber(set,"start");
  makeNumber(set,"end");
  makeNumber(set,"year");
  if("start" in set && !("end" in set)) {
    set.end = 10;
  }
  if(("end" in set) && !("start" in set)) {
    set.start = 0;
  }
​
  getAndShowTodos(set);
};
​
// Call right away to initialize table
updateTodos();
​
// When any input changes, go get new data
$(document.body).on("change","select, input", updateTodos);
​
// When remove is clicked, delete on the server and
// remove from table
$(document.body).on("click",".remove", function(){
  var tr = $(this).text("deleting").parent().addClass("deleting");
  var id = tr.prop('id').split("-")[1];
  $.ajax({
    method: "delete",
    url: "/cars/"+id
  }).then(function(){
    tr.remove();
  });
});
​
$("#refresh").click(updateTodos);
​
// A helper to make certain properties numbers
function makeNumber(set, prop){
  var num = parseInt(set[prop]);
  if(!isNaN(num) && num >= 0) {
    set[prop] = num;
  } else {
    delete set[prop];
  }
}
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x