307 lines
10 KiB
Plaintext
307 lines
10 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 "space" %>
|
||
|
|
<% end %>
|
||
|
|
<% content_for :page_specific_javascript do %>
|
||
|
|
<%= javascript_include_tag "attrchange" %>
|
||
|
|
<% end %>
|
||
|
|
<div class="floor-unit-title">
|
||
|
|
<h3><%= @floor_unit.title %></h3>
|
||
|
|
</div>
|
||
|
|
<% if @floor_unit.layout == nil %>
|
||
|
|
<div id="full-layout-canvas">
|
||
|
|
<img id="layout-image" src="<%= @floor_unit.layout_image.url %>" />
|
||
|
|
<div class="image-cover"></div>
|
||
|
|
</div>
|
||
|
|
<% else %>
|
||
|
|
<%= @floor_unit.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"),
|
||
|
|
dragAreaCount = 0,
|
||
|
|
windowHeight = ($(window).height() - (36 + 46 + 75 + 60)) + "px",
|
||
|
|
subUnits = <%= @floor_unit.floor_sub_units.asc(:title).collect{|unit| {"id" => unit.id.to_s, "title" => unit.title}}.to_json.html_safe %>,
|
||
|
|
formDisplay = false,
|
||
|
|
changesMade = 0,
|
||
|
|
floor = <%= {"id" => @floor_unit.id.to_s, "title" => @floor_unit.title, "html" => @floor_unit.layout}.to_json.html_safe %>,
|
||
|
|
tmpImg = new Image();
|
||
|
|
|
||
|
|
canvas.height(windowHeight);
|
||
|
|
layoutImage.height(windowHeight);
|
||
|
|
|
||
|
|
tmpImg.src = layoutImage.attr('src') ;
|
||
|
|
tmpImg.onload = function() {
|
||
|
|
cover.width(layoutImage.width());
|
||
|
|
// 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){
|
||
|
|
if($(".selection-box.hover").length == 0 && !formDisplay){
|
||
|
|
if(currentDragBox != null){
|
||
|
|
currentDragBox.remove();
|
||
|
|
currentDragBox = null;
|
||
|
|
$(".make-box-permanent").remove();
|
||
|
|
}
|
||
|
|
var dragBox = $("<div class='selection-box'></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){
|
||
|
|
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 btn-primary btn-small'><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();
|
||
|
|
var deleteBtn = $("<button class='btn btn-small btn-danger selection-box-delete-btn' for='temp_unit_id_" + dragAreaCount + "'><i class='fa fa-times'></i></button>"),
|
||
|
|
btnHolder = $("<div class='selection-box-btn-holder'></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' />"),
|
||
|
|
form = $("<form class='selection-box-form form-horizontal' />"),
|
||
|
|
field = "<div class='control-group'> <label calss='control-label muted' for='floor_unit_title'>Unit name : </label><img src='/assets/preloader.gif' style='width:50px; height:50px; display:none;' /><div class='form-unit-title'><input id='floor_unit_title' type='text' name='floor_unit[title]' placeholder='New unit title' /><select style='display:none;'>";
|
||
|
|
|
||
|
|
for(index = 0; index < subUnits.length; index++){
|
||
|
|
var unit = subUnits[index];
|
||
|
|
field += "<option value='" + unit.id + "'>" + unit.title + "</option>";
|
||
|
|
}
|
||
|
|
|
||
|
|
field += "</select></div></div>";
|
||
|
|
var checkbox = $("<div class='control-group'><div><input type='checkbox' id='toggle-select-text' /> Select existing units</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'><div class='form-action-btn-holder'><button class='btn btn-small btn-primary'>Save</button></div>");
|
||
|
|
submitBtn.find("button").on("click",function(){
|
||
|
|
if(type == "existing"){
|
||
|
|
var id = form.find("select").val(),
|
||
|
|
unit = subUnits.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'>" + 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").append("<button class='selection-box-edit-btn btn btn-small' for='" + id + "'>E</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_sub_unit",
|
||
|
|
data : {"floor_sub_unit[title_translations]" : {"en" : input.val(), "zh_tw" : input.val()}, "floor_sub_unit[floor_unit_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);
|
||
|
|
subUnits.push(data.unit);
|
||
|
|
formDisplay = false;
|
||
|
|
formWrapper.remove();
|
||
|
|
if(box.find(".selection-box-label").length == 0){
|
||
|
|
box.append("<div class='selection-box-label'>" + 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").append("<button class='selection-box-edit-btn btn btn-small' for='" + data.unit.id + "'>E</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 btn-small'>Cancel</button>");
|
||
|
|
|
||
|
|
cancelBtn.one("click",function(){
|
||
|
|
el.prop("disabled",false);
|
||
|
|
box.find(".selection-form-wrapper").remove();
|
||
|
|
formDisplay = false;
|
||
|
|
changesMade--;
|
||
|
|
})
|
||
|
|
|
||
|
|
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_unit_layout",
|
||
|
|
data : {"layout_html" : htmlToSave, "unit_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 = subUnits.find(function(x){return x.id == id});
|
||
|
|
|
||
|
|
if(unit == undefined){
|
||
|
|
el.remove();
|
||
|
|
shoudSave = true;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
if(shoudSave){
|
||
|
|
console.info("Cleaning up...");
|
||
|
|
var htmlToSave = canvas.toHtml();
|
||
|
|
$.ajax({
|
||
|
|
url : "/admin/space/save_unit_layout",
|
||
|
|
data : {"layout_html" : htmlToSave, "unit_id" : floor.id},
|
||
|
|
dataType : "json",
|
||
|
|
type : "post"
|
||
|
|
}).done(function(){
|
||
|
|
changesMade = 0;
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<% if !@floor_unit.layout.nil? %>
|
||
|
|
<script type="text/javascript">
|
||
|
|
cleanUpArea();
|
||
|
|
</script>
|
||
|
|
<% end %>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|