326 lines
12 KiB
Plaintext
326 lines
12 KiB
Plaintext
<% content_for :page_specific_css do %>
|
|
<%= stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" %>
|
|
<%= stylesheet_link_tag "//cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css" %>
|
|
<%= stylesheet_link_tag "spaces" %>
|
|
<% end %>
|
|
<% content_for :page_specific_javascript do %>
|
|
<%= javascript_include_tag "attrchange" %>
|
|
<% end %>
|
|
<div class="floor-unit-title">
|
|
<h3><%= @floor.title %></h3>
|
|
</div>
|
|
<% if @floor.layout == nil %>
|
|
<div id="full-layout-canvas" class="space-canvas">
|
|
<img id="layout-image" src="<%= @floor.layout_image.url %>" />
|
|
<div class="image-cover"></div>
|
|
</div>
|
|
<% else %>
|
|
<%= @floor.layout.html_safe %>
|
|
<% end %>
|
|
<div class="bottomnav clearfix">
|
|
<div class="action pull-right">
|
|
<button id="save-floor-layout-btn" class="btn btn-primary"><%= t("space.save_floor_layout") %></button>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
var canvas = $("#full-layout-canvas"),
|
|
layoutImage = $("#layout-image"),
|
|
cover = canvas.find(".image-cover"),
|
|
positionClass = "float-box-left",
|
|
dragAreaCount = 0,
|
|
windowHeight = ($(window).height() - (36 + 46 + 75 + 60)),
|
|
coverImageHeight = (parseInt(windowHeight)),
|
|
floorUnits = <%= @floor.floor_units.asc(:title).collect{|unit| {"id" => unit.id.to_s, "title" => unit.title}}.to_json.html_safe %>,
|
|
formDisplay = false,
|
|
changesMade = 0,
|
|
floor = <%= {"id" => @floor.id.to_s, "title" => @floor.title, "html" => @floor.layout}.to_json.html_safe %>,
|
|
tmpImg = new Image();
|
|
|
|
canvas.height(windowHeight);
|
|
cover.height(coverImageHeight);
|
|
layoutImage.height(coverImageHeight - 40);
|
|
canvas.css('box-sizing', 'border-box');
|
|
|
|
tmpImg.src = layoutImage.attr('src') ;
|
|
tmpImg.onload = function() {
|
|
cover.width(layoutImage.width() + 40);
|
|
// cover.css("left",((layoutImage.position().left * 100) / canvas.width()) + "%");
|
|
}
|
|
|
|
var dragBoxes = [],
|
|
offsetX = 0,
|
|
offsetY = 0,
|
|
diffX = 0,
|
|
diffY = 0,
|
|
currentDragBox = null,
|
|
isDragging = false;
|
|
cover.on("mousedown",function(e){
|
|
// e.preventDefault();
|
|
if($(".selection-box.hover").length == 0 && !formDisplay){
|
|
if(currentDragBox != null){
|
|
currentDragBox.remove();
|
|
currentDragBox = null;
|
|
$(".make-box-permanent").remove();
|
|
}
|
|
var dragBox = $("<div class='selection-box overlay'></div>"),
|
|
xpercent = ((e.offsetX * 100) / cover.width()) + "%",
|
|
ypercent = ((e.offsetY * 100) / cover.height()) + "%";
|
|
dragBox.css({
|
|
"left" : xpercent,
|
|
"top" : ypercent
|
|
})
|
|
offsetX = e.offsetX;
|
|
offsetY = e.offsetY;
|
|
isDragging = true;
|
|
currentDragBox = dragBox;
|
|
cover.append(dragBox);
|
|
}
|
|
})
|
|
|
|
cover.on("mousemove",function(e){
|
|
e.preventDefault();
|
|
if(isDragging){
|
|
diffX = e.offsetX - offsetX;
|
|
diffY = e.offsetY - offsetY;
|
|
currentDragBox.css({
|
|
width : diffX + "px",
|
|
height : diffY + "px"
|
|
})
|
|
}
|
|
})
|
|
|
|
cover.on("mouseup",function(){
|
|
if(isDragging){
|
|
isDragging = false;
|
|
if(currentDragBox.width() > 20 && currentDragBox.height() > 20){
|
|
var offset = currentDragBox.offset(),
|
|
btn = $("<button class='make-box-permanent btn-flat btn-flat-has-icon btn-flat-primary btn-flat-small absolute-center'><i class='fa fa-check'></i>OK</button>");
|
|
btn.on("click",selectAreaOkBtnHandler);
|
|
currentDragBox.append(btn);
|
|
currentDragBox.hover(function(){
|
|
$(this).addClass("hover");
|
|
},function(){
|
|
$(this).removeClass("hover");
|
|
})
|
|
}else{
|
|
currentDragBox.remove();
|
|
}
|
|
}
|
|
})
|
|
|
|
var selectAreaOkBtnHandler = function(event){
|
|
$(this).remove();
|
|
if(parseInt(currentDragBox.css("left")) < 195){
|
|
positionClass = "float-box-right";
|
|
}
|
|
var deleteBtn = $("<button class='btn-flat btn-flat-small btn-flat-danger btn-flat-has-icon btn-flat-has-margin selection-box-delete-btn btn-flat-block' for='temp_unit_id_" + dragAreaCount + "'><i class='fa fa-trash-o'></i>Delete</button>"),
|
|
btnHolder = $("<div class='selection-box-btn-holder float-box " + positionClass + "'></div>");
|
|
btnHolder.append(deleteBtn);
|
|
currentDragBox.append(btnHolder);
|
|
currentDragBox.css({
|
|
"width" : (currentDragBox.width() * 100 / cover.width()) + "%",
|
|
"height" : (currentDragBox.height() * 100 / cover.height()) + "%"
|
|
})
|
|
currentDragBox.append(makeNewForm(currentDragBox));
|
|
currentDragBox.attr("data-unit-id","temp_unit_id_" + dragAreaCount);
|
|
dragBoxes.push(currentDragBox);
|
|
dragAreaCount++;
|
|
changesMade++;
|
|
currentDragBox = null;
|
|
event.stopPropagation();
|
|
}
|
|
|
|
var makeNewForm = function(box,edit){
|
|
formDisplay = true;
|
|
var formWrapper = $("<div class='selection-form-wrapper float-box " + positionClass + "' />"),
|
|
form = $("<form class='selection-box-form form-horizontal form-horizontal-flat' />"),
|
|
field = "<div class='control-group control-group-flat'> <label class='control-label muted control-label-flat floor-unit-title' for='floor_unit_title'><i class='fa fa-cube'></i>Unit name : </label><img src='/assets/preloader.gif' style='width:50px; height:50px; display:none;' /><div class='form-unit-title'><input class='input-flat' id='floor_unit_title' type='text' name='floor_unit[title]' placeholder='New unit title' /><select class='select-flat' style='display:none;'>";
|
|
|
|
for(index = 0; index < floorUnits.length; index++){
|
|
var unit = floorUnits[index];
|
|
field += "<option value='" + unit.id + "'>" + unit.title + "</option>";
|
|
}
|
|
|
|
field += "</select></div></div>";
|
|
var checkbox = $("<div class='control-group control-group-flat'><div class='toggle-select-wrap'><input class='checkbox-flat' type='checkbox' id='toggle-select-text' /><label class='control-label-flat' for='toggle-select-text'>Select existing units</label></div></div>"),
|
|
type = (edit ? "existing" : "new");
|
|
checkbox.find("input[type=checkbox]").on("click",function(){
|
|
if($(this).is(":checked")){
|
|
form.find("select").show();
|
|
form.find("input[type=text]").hide();
|
|
type = "existing";
|
|
}else{
|
|
form.find("select").hide();
|
|
form.find("input[type=text]").show();
|
|
type = "new";
|
|
}
|
|
})
|
|
|
|
var submitBtn = $("<div class='control-group control-group-flat control-group-flat-last'><div class='form-action-btn-holder no-wrap'><button class='btn-flat btn-flat-small btn-flat-primary btn-flat-has-icon btn-flat-has-margin'><i class='fa fa-floppy-o'></i>Save</button></div>");
|
|
if(type == "new"){
|
|
var deleteBtn = $("<button class='btn-flat btn-flat-small btn-flat-danger btn-flat-has-icon btn-flat-has-margin' ><i class='fa fa-trash-o'></i>Delete</button>");
|
|
deleteBtn.one("click",function(){
|
|
formDisplay = false;
|
|
changesMade--;
|
|
box.remove();
|
|
return false;
|
|
})
|
|
submitBtn.find(".form-action-btn-holder").append(deleteBtn);
|
|
}
|
|
submitBtn.find("button").on("click",function(){
|
|
if(type == "existing"){
|
|
var id = form.find("select").val(),
|
|
unit = floorUnits.filter(function(x){return x.id == id})
|
|
box.attr("data-unit-id",id);
|
|
box.find(".selection-box-delete-btn").attr("for",id);
|
|
if(box.find(".selection-box-label").length == 0){
|
|
box.append("<div class='selection-box-label absolute-bottom'>" + unit[0].title + "</div>");
|
|
}else{
|
|
box.find(".selection-box-label").text(unit[0].title);
|
|
}
|
|
if(box.find(".selection-box-btn-holder button.selection-box-edit-btn").length == 0){
|
|
box.find(".selection-box-btn-holder").prepend("<button class='selection-box-edit-btn btn-flat btn-flat-primary btn-flat-has-icon btn-flat-small btn-flat-block' for='" + id + "'><i class='fa fa-pencil'></i>Edit</button>");
|
|
}else{
|
|
box.find(".selection-box-btn-holder button.selection-box-edit-btn").prop("disabled",false).attr("for",id);
|
|
box.find(".selection-box-btn-holder button.selection-box-delete-btn").attr("for",id);
|
|
}
|
|
formDisplay = false;
|
|
formWrapper.remove();
|
|
}else if(type == "new"){
|
|
var input = form.find("input[type=text]");
|
|
if(input.val() != ""){
|
|
form.find("img").show();
|
|
input.hide();
|
|
form.find("select").hide();
|
|
$.ajax({
|
|
url : "/admin/space/create_floor_unit",
|
|
data : {"floor_unit[title]" : input.val(), "floor_unit[floor_id]" : floor.id},
|
|
type : "post",
|
|
dataType : "json"
|
|
}).done(function(data){
|
|
box.attr("data-unit-id",data.unit.id);
|
|
box.find(".selection-box-delete-btn").attr("for",data.unit.id);
|
|
floorUnits.push(data.unit);
|
|
formDisplay = false;
|
|
formWrapper.remove();
|
|
if(box.find(".selection-box-label").length == 0){
|
|
box.append("<div class='selection-box-label absolute-center'>" + data.unit.title + "</div>");
|
|
}else{
|
|
box.find(".selection-box-label").text(data.unit.title);
|
|
}
|
|
if(box.find(".selection-box-btn-holder button.selection-box-edit-btn").length == 0){
|
|
box.find(".selection-box-btn-holder").prepend("<button class='selection-box-edit-btn btn-flat btn-flat-primary btn-flat-has-icon btn-flat-small btn-flat-block' for='" + data.unit.id + "'><i class='fa fa-pencil'></i>Edit</button>")
|
|
}else{
|
|
box.find(".selection-box-btn-holder button.selection-box-edit-btn").prop("disabled",false).attr("for",data.unit.id);
|
|
box.find(".selection-box-btn-holder button.selection-box-delete-btn").attr("for",data.unit.id);
|
|
}
|
|
})
|
|
}
|
|
}
|
|
return false;
|
|
})
|
|
form.append(field);
|
|
form.append(checkbox);
|
|
form.append(submitBtn);
|
|
formWrapper.append(form);
|
|
return formWrapper;
|
|
}
|
|
|
|
$("body").on("click",".selection-box-delete-btn",function(){
|
|
var id = $(this).attr("for"),
|
|
box = $(this).parents(".selection-box[data-unit-id=" + id + "]");
|
|
if(box.find(".selection-form-wrapper").length > 0){
|
|
formDisplay = false;
|
|
}
|
|
changesMade++;
|
|
box.remove();
|
|
})
|
|
|
|
$("body").on("click",".selection-box-edit-btn",function(){
|
|
var el = $(this),
|
|
id = el.attr("for"),
|
|
box = el.parents(".selection-box[data-unit-id=" + id + "]"),
|
|
form = makeNewForm(box,true),
|
|
cancelBtn = $("<button class='cancel-button btn-flat btn-flat-warning btn-flat-has-icon btn-flat-small'><i class='fa fa-times'></i>Cancel</button>");
|
|
|
|
cancelBtn.one("click",function(){
|
|
el.prop("disabled",false);
|
|
box.find(".selection-form-wrapper").remove();
|
|
formDisplay = false;
|
|
changesMade--;
|
|
return false;
|
|
})
|
|
|
|
el.prop("disabled",true);
|
|
changesMade++;
|
|
form.find(".form-action-btn-holder").append(cancelBtn);
|
|
form.find("#toggle-select-text").prop("checked",true);
|
|
form.find(".form-unit-title input[type=text]").hide();
|
|
form.find(".form-unit-title select").val(id).show();
|
|
box.append(form);
|
|
})
|
|
|
|
$("#save-floor-layout-btn").on("click",function(){
|
|
if(formDisplay){
|
|
alert("Please save the selected area or delete it.");
|
|
}else{
|
|
$(".selection-box.hover").removeClass("hover");
|
|
var htmlToSave = canvas.toHtml(),
|
|
el = $(this);
|
|
el.prop("disabled",true);
|
|
$.ajax({
|
|
url : "/admin/space/save_floor_layout",
|
|
data : {"layout_html" : htmlToSave, "floor_id" : floor.id},
|
|
dataType : "json",
|
|
type : "post"
|
|
}).done(function(){
|
|
el.prop("disabled",false);
|
|
changesMade = 0;
|
|
})
|
|
}
|
|
return false;
|
|
})
|
|
|
|
window.onbeforeunload = function(e){
|
|
if(changesMade > 0){
|
|
return "Please make sure to save the layout before leaving this page.";
|
|
}
|
|
}
|
|
|
|
var cleanUpArea = function(){
|
|
var shoudSave = false;
|
|
$(".selection-box").each(function(){
|
|
var el = $(this),
|
|
id = el.data("unit-id"),
|
|
unit = floorUnits.find(function(x){return x.id == id});
|
|
|
|
if(unit == undefined){
|
|
el.remove();
|
|
shoudSave = true;
|
|
}
|
|
})
|
|
if(shoudSave){
|
|
var htmlToSave = canvas.toHtml();
|
|
$.ajax({
|
|
url : "/admin/space/save_floor_layout",
|
|
data : {"layout_html" : htmlToSave, "floor_id" : floor.id},
|
|
dataType : "json",
|
|
type : "post"
|
|
}).done(function(){
|
|
changesMade = 0;
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
<% if !@floor.layout.nil? %>
|
|
<script type="text/javascript">
|
|
cleanUpArea();
|
|
</script>
|
|
<% end %>
|
|
|
|
|
|
|
|
|
|
|
|
|