floorplancreator

_.md

[ Launch: floorplancreator ] efd7ce4822533e297050 by jeffcatania

config.json

{"description":"floorplancreator","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"index.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/E44tg3S.png"}

index.html

<button>Save</button>
<button>Load</button>
<br />
<label>Employee ID</label><input id="employee" />
<svg />

inlet.js

// Basic Saving/Loading of employee -> seat mappings
var Ls = function() {
  var data = {}
  return {
    data: function() {
      return this.data;
    },
    load: function() {
      console.log("LOADED");
      this.data = JSON.parse(localStorage.getItem('personMappings'));
      return this.data;
    },
    save: function() {
      console.log("SAVED");
      localStorage.setItem('personMappings', JSON.stringify(this.data));
    }
  }
}

var d = Ls();

var data = [];

var svg = d3.select("svg")

var rect = svg.append("rect")
.attr({
  width: 518,
  height: 365,
  x: 59,
  y: 62,
  fill: "#3BA360"
});

rect.on("click", function(d) {
  data.push( {
    x: d3.mouse(rect[0][0])[0],
    y: d3.mouse(rect[0][0])[1],
    eid:  d3.select("#employee")[0][0].value
  });
  update();
})

function update() {
 var employeeMarks = svg.selectAll(".employeeLabels")
   .data(data)
  .enter().append("text")
   .attr({
     "class": "employeeLabels",
      width: 35,
      height: 59,
      x: function(d) { return d.x },
      y: function(d) { return d.y },
      fill: "#c899da"
	})
  .text(function(d) { 
    return "x";
  })
 
 
 employeeMarks.on("mouseover", function(d) { 
   var label = svg.selectAll(".label").data([d])
    .enter().append("text");
   label.attr( {
      "class": "label",
      width: 35,
      height: 59,
      x: function(d) { console.log(d); return d.x; },
      y: function(d) { return d.y; }
    })
    .text(function(d) { return d.eid });
   label.exit().remove();
 });
}

style.css

svg {
  width: 100%;
  height: 100%;
}