harry
/
space
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

a lot of changes and backend done...

This commit is contained in:
Harry Bomrah 2015-09-24 23:43:47 +08:00
parent 9e84182a8b
commit 0d8f444009
21 changed files with 935 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/no-layout.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

14
app/assets/stylesheets/space.scss
View File

@ -70,7 +70,7 @@ ul.apartments-area {
padding-bottom: 0; padding-bottom: 0;
transition-property: left, right, top; transition-property: left, right, top;
width: 150px; width: 150px;
height: 150px; height: 170px;
text-align: center; text-align: center;
.apartment-img { .apartment-img {
@ -79,10 +79,6 @@ ul.apartments-area {
height: 125px; height: 125px;
overflow: hidden; overflow: hidden;
&:hover {
height: 145px;
margin-bottom: 5px;
}
} }
a{ a{
@ -132,6 +128,10 @@ ul#layout-canvas {
width: 2px; width: 2px;
height: 2px; height: 2px;
background-color: rgba(0, 0, 0, .4); background-color: rgba(0, 0, 0, .4);
.selection-box-label{
color: #fff;
}
} }
.make-box-permanent{ .make-box-permanent{
@ -152,6 +152,10 @@ ul#layout-canvas {
} }
} }
.floor-unit-title{
text-align: center;
}

114
app/controllers/admin/spaces_controller.rb
View File

@ -41,8 +41,8 @@ class Admin::SpacesController < OrbitAdminController
end end
def delete_floor def delete_floor
floor = Floor.find_by(:uid => params[:floor_id].split("-").last) floor = Floor.find_by(:uid => params[:floor_id].split("-").last) rescue nil
floor.destroy floor.destroy if !floor.nil?
render :json => {"success" => true}.to_json render :json => {"success" => true}.to_json
end end
@ -60,12 +60,122 @@ class Admin::SpacesController < OrbitAdminController
end end
end end
def edit_floor_unit
@floor_unit = FloorUnit.find_by(:uid => params[:unit_id].split("-").last) rescue nil
@floor = @floor_unit.floor
end
def update_floor_unit
floor_unit = FloorUnit.find(params[:unit_id]) rescue nil
if !floor_unit.nil?
floor_unit.update_attributes(floor_unit_params)
floor_unit.save
end
redirect_to "/admin/spaces/#{floor_unit.floor.building.to_param}/#{floor_unit.floor.to_param}/units"
end
def save_floor_layout
floor = Floor.find(params[:floor_id]) rescue nil
if !floor.nil?
floor.layout = params[:layout_html]
floor.save
end
render :json => {"success" => true}.to_json
end
def delete_floor_unit
floor_unit = FloorUnit.find_by(:uid => params[:unit_id].split("-").last) rescue nil
floor = floor_unit.floor
if !floor_unit.nil?
floor_unit.destroy
end
redirect_to "/admin/spaces/#{floor.building.to_param}/#{floor.to_param}/units"
end
def units def units
@floor = Floor.find_by(:uid => params[:floor_id].split("-").last) @floor = Floor.find_by(:uid => params[:floor_id].split("-").last)
end end
def sub_units
@floor_unit = FloorUnit.find_by(:uid => params[:unit_id].split("-").last)
end
def add_sub_unit
@floor_unit = FloorUnit.find_by(:uid => params[:unit_id].split("-").last) rescue nil
@sub_unit = FloorSubUnit.new
end
def edit_sub_unit
@sub_unit = FloorSubUnit.find_by(:uid => params[:sub_unit_id].split("-").last) rescue nil
end
def update_sub_unit
sub_unit = FloorSubUnit.find(params[:floor_sub_unit_id]) rescue nil
if !sub_unit.nil?
p = sub_unit_params
p[:floor_sub_unit_images].concat(sub_unit.floor_sub_unit_images) if p[:floor_sub_unit_images].present?
sub_unit.update_attributes(p)
sub_unit.save
end
if params[:images_to_destroy].present?
params[:images_to_destroy].each do |id|
image = FloorSubUnitImage.find(id) rescue nil
image.destroy if !image.nil?
end
end
redirect_to "/admin/spaces/#{sub_unit.floor_unit.floor.to_param}/#{sub_unit.floor_unit.to_param}/sub_units"
end
def upload_sub_unit_image
image = FloorSubUnitImage.new(image_params)
image.save
render :json => {"success" => true,"id" => image.id.to_s}.to_json
end
def create_sub_unit
sub_unit = FloorSubUnit.new(sub_unit_params)
sub_unit.save
respond_to do |format|
format.html {redirect_to "/admin/spaces/#{sub_unit.floor_unit.floor.to_param}/#{sub_unit.floor_unit.to_param}/sub_units"}
format.js {render :json => {"success" => true, "unit" => {"id" => sub_unit.id.to_s, "title" => sub_unit.title}}.to_json}
end
end
def unit_layout
@floor_unit = FloorUnit.find_by(:uid => params[:unit_id].split("-").last) rescue nil
end
def save_unit_layout
floor_unit = FloorUnit.find(params[:unit_id]) rescue nil
if !floor_unit.nil?
floor_unit.layout = params[:layout_html]
floor_unit.save
end
render :json => {"success" => true}.to_json
end
private private
def sub_unit_params
p = params.require(:floor_sub_unit).permit!
if p[:floor_sub_unit_images].present?
images = []
p[:floor_sub_unit_images].each do |id|
image = FloorSubUnitImage.find(id) rescue nil
images << image if !image.nil?
end
p[:floor_sub_unit_images] = images
end
p
end
def image_params
params.require(:floor_sub_unit_image).permit!
end
def floor_params def floor_params
params.require(:floor).permit! params.require(:floor).permit!
end end

11
app/models/floor_sub_unit.rb Normal file
View File

@ -0,0 +1,11 @@
class FloorSubUnit
include Mongoid::Document
include Mongoid::Timestamps
include Slug
field :title, as: :slug_title, localize: true
has_many :floor_sub_unit_images, :autosave => true, :dependent => :destroy
belongs_to :floor_unit
end

9
app/models/floor_sub_unit_image.rb Normal file
View File

@ -0,0 +1,9 @@
class FloorSubUnitImage
include Mongoid::Document
include Mongoid::Timestamps
mount_uploader :image, ImageUploader
belongs_to :floor_sub_unit
end

8
app/models/floor_unit.rb
View File

@ -1,11 +1,15 @@
class FloorUnit class FloorUnit
include Mongoid::Document include Mongoid::Document
include Mongoid::Timestamps include Mongoid::Timestamps
include Slug
field :title, as: :slug_title
field :layout
field :title
belongs_to :floor belongs_to :floor
has_many :floor_sub_units
mount_uploader :layout, ImageUploader mount_uploader :layout_image, ImageUploader
end end

2
app/views/admin/spaces/_floor.html.erb
View File

@ -1,7 +1,7 @@
<tr> <tr>
<td><a href="/admin/spaces/<%= floor.building.to_param %>/<%= floor.to_param %>/units"><%= floor.title %></a></td> <td><a href="/admin/spaces/<%= floor.building.to_param %>/<%= floor.to_param %>/units"><%= floor.title %></a></td>
<td> <td>
<% if !floor.floor_units.blank? %> <% if !floor.layout_image.url.nil? %>
<a href="/admin/spaces/floor/<%= floor.to_param %>/layout" class="btn btn-info">Floor Layout</a> <a href="/admin/spaces/floor/<%= floor.to_param %>/layout" class="btn btn-info">Floor Layout</a>
<% end %> <% end %>
<a href="#" data-values='{"id" : "<%= floor.id.to_s %>", "title" : "<%= floor.title %>", "layout" : "<%= floor.layout_image.url == "" ? "" : floor.layout_image.url %>"}' class="btn btn-warning edit-floor-btns">Edit Floor</a> <a href="#" data-values='{"id" : "<%= floor.id.to_s %>", "title" : "<%= floor.title %>", "layout" : "<%= floor.layout_image.url == "" ? "" : floor.layout_image.url %>"}' class="btn btn-warning edit-floor-btns">Edit Floor</a>

8
app/views/admin/spaces/_floor_unit.html.erb
View File

@ -1,8 +1,12 @@
<li class="apartment"> <li class="apartment">
<a href="#"> <a href="/admin/spaces/<%= floor_unit.floor.to_param %>/<%= floor_unit.to_param %>/sub_units">
<div class="apartment-img"> <div class="apartment-img">
<img src="<%= floor_unit.layout.thumb.url.nil? ? "" : floor_unit.layout.thumb.url %>" > <img src="<%= floor_unit.layout_image.thumb.url.nil? ? "/assets/no-layout.jpg" : floor_unit.layout_image.thumb.url %>" >
</div> </div>
<p><%= floor_unit.title %></p> <p><%= floor_unit.title %></p>
</a> </a>
<a href="/admin/spaces/unit/<%= floor_unit.to_param %>/edit">Edit</a> | <a href="/admin/spaces/unit/<%= floor_unit.to_param %>/delete" data-method="delete" data-confirm="Are you sure?">Delete</a>
<% if !floor_unit.layout_image.thumb.url.nil? %>
| <a href="/admin/spaces/unit/<%= floor_unit.to_param %>/layout">Layout</a>
<% end %>
</li> </li>

14
app/views/admin/spaces/_floor_unit_form.html.erb
View File

@ -25,10 +25,10 @@
<div class="control-group"> <div class="control-group">
<label class="control-label muted"><%= t("space.detailed_layout") %></label> <label class="control-label muted"><%= t("space.detailed_layout") %></label>
<div class="controls"> <div class="controls">
<div class="fileupload fileupload-new clearfix <%= 'fileupload-edit' if @floor_unit.layout.file %>" data-provides="fileupload"> <div class="fileupload fileupload-new clearfix <%= 'fileupload-edit' if @floor_unit.layout_image.file %>" data-provides="fileupload">
<div class="fileupload-new thumbnail pull-left"> <div class="fileupload-new thumbnail pull-left">
<% if @floor_unit.layout.file %> <% if @floor_unit.layout_image.file %>
<%= image_tag @floor_unit.layout %> <%= image_tag @floor_unit.layout_image %>
<% else %> <% else %>
<img src="http://www.placehold.it/150x100/EFEFEF/AAAAAA" /> <img src="http://www.placehold.it/150x100/EFEFEF/AAAAAA" />
<% end %> <% end %>
@ -37,12 +37,12 @@
<span class="btn btn-file"> <span class="btn btn-file">
<span class="fileupload-new"><%= t(:select_image) %></span> <span class="fileupload-new"><%= t(:select_image) %></span>
<span class="fileupload-exists"><%= t(:change) %></span> <span class="fileupload-exists"><%= t(:change) %></span>
<%= f.file_field :layout %> <%= f.file_field :layout_image %>
</span> </span>
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload"><%= t(:cancel) %></a> <a href="#" class="btn fileupload-exists" data-dismiss="fileupload"><%= t(:cancel) %></a>
<div class="controls" data-toggle="buttons-checkbox"> <div class="controls" data-toggle="buttons-checkbox">
<label class="checkbox inline btn btn-danger fileupload-remove"> <label class="checkbox inline btn btn-danger fileupload-remove">
<%= f.check_box :remove_layout %><%= t(:remove) %> <%= f.check_box :remove_layout_image %><%= t(:remove) %>
</label> </label>
</div> </div>
</div> </div>
@ -56,7 +56,11 @@
<!-- Form Actions --> <!-- Form Actions -->
<div class="form-actions"> <div class="form-actions">
<% if params[:action] == "add_floor_unit" %>
<%= f.hidden_field :floor_id, value: @floor.id %> <%= f.hidden_field :floor_id, value: @floor.id %>
<% elsif params[:action] == "edit_floor_unit" %>
<%= hidden_field_tag :unit_id, @floor_unit.id.to_s %>
<% end %>
<%= f.submit t('submit'), class: 'btn btn-primary' %> <%= f.submit t('submit'), class: 'btn btn-primary' %>
<%= link_to t('cancel'), "/admin/spaces/#{@floor.building.to_param}/#{@floor.to_param}/units", :class=>"btn" %> <%= link_to t('cancel'), "/admin/spaces/#{@floor.building.to_param}/#{@floor.to_param}/units", :class=>"btn" %>
</div> </div>

7
app/views/admin/spaces/_sub_unit.html.erb Normal file
View File

@ -0,0 +1,7 @@
<li class="apartment">
<div class="apartment-img">
<img src="<%= sub_unit.floor_sub_unit_images.blank? ? "/assets/no-layout.jpg" : sub_unit.floor_sub_unit_images.first.image.thumb.url %>" >
</div>
<p><%= sub_unit.title %></p>
<a href="/admin/spaces/sub_unit/<%= sub_unit.to_param %>/edit">Edit</a> | <a href="/admin/spaces/sub_unit/<%= sub_unit.to_param %>/delete" data-method="delete" data-confirm="Are you sure?">Delete</a>
</li>

83
app/views/admin/spaces/_sub_unit_form.html.erb Normal file
View File

@ -0,0 +1,83 @@
<% content_for :page_specific_css do %>
<%= stylesheet_link_tag "lib/main-forms" %>
<%= stylesheet_link_tag "lib/main-list" %>
<%= stylesheet_link_tag "lib/dropzone" %>
<%= stylesheet_link_tag "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" %>
<%= stylesheet_link_tag "//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" %>
<% end %>
<% content_for :page_specific_javascript do %>
<%= javascript_include_tag "lib/dropzone" %>
<%= javascript_include_tag "validator" %>
<% end %>
<div class="upload-status-notice hide">
<i class="fa fa-refresh fa-spin"></i>
<span class="upload-text">Uploading...</span>
</div>
<!-- Input Area -->
<div class="input-area">
<!-- Module -->
<div class="tab-content">
<!-- Basic Module -->
<div class="tab-pane fade in active" id="basic">
<% @site_in_use_locales.each do |locale| %>
<%= f.fields_for :title_translations do |f| %>
<div class="control-group">
<%= f.label :title.to_s + " (" + locale.to_s + ")", :class => "control-label muted" %>
<div class="controls">
<%= f.text_field locale, placeholder: t("space.sub_unit_name"), data: {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"}, :value => @sub_unit.title_translations[locale.to_s] %>
</div>
</div>
<% end %>
<% end %>
<div class="control-group">
<label class="control-label muted"><%= t(:images) %></label>
<div class="controls">
<% if params[:action] == "edit_sub_unit" %>
<div class="group-admin-edit-image-wrap clearfix">
<% @sub_unit.floor_sub_unit_images.each do |image| %>
<div class="group-admin-edit-image-item card clearfix">
<div class="group-admin-edit-image-item-inner">
<div class="group-admin-edit-image-container">
<img src="<%= image.image.thumb.url %>">
</div>
<div class="group-admin-edit-checkbox-wrap">
<input class="group-admin-edit-image-checkbox" type="checkbox" name="images_to_destroy[]" value="<%= image.id.to_s %>" />
<label class="group-admin-edit-image-label">Delete Image</label>
</div>
</div>
</div>
<% end %>
</div>
<% end %>
<div class="dropzone dropzone-pool" id="sub-unit-images">
<div class="dropzone-previews" id="sub-unit-images-container"></div>
</div>
<button class="remove_image_btn btn btn-warning">
<i class="fa fa-ban"></i>
<span>Remove all images</span>
</button>
</div>
<div id="image_ids">
</div>
</div>
</div>
</div>
</div>
<!-- Form Actions -->
<div class="form-actions">
<% if params[:action] == "add_sub_unit" %>
<%= f.hidden_field :floor_unit, :value => @floor_unit.id %>
<% elsif params[:action] == "edit_sub_unit" %>
<%= hidden_field_tag :floor_sub_unit_id, @sub_unit.id.to_s %>
<% end %>
<%= f.submit t('submit'), class: 'btn btn-primary', :id => "floor-sub-unit-form-btn" %>
</div>

85
app/views/admin/spaces/add_sub_unit.html.erb Normal file
View File

@ -0,0 +1,85 @@
<%= form_for @sub_unit, url: "/admin/space/create_sub_unit", html: {class: "form-horizontal main-forms"} do |f| %>
<fieldset>
<%= render :partial => "sub_unit_form", locals: {f: f} %>
</fieldset>
<% end %>
<script type="text/javascript">
Dropzone.autoDiscover = false;
var image_id_panel = $("#image_ids"),
total_images = 0,
validator = new FormValidator($("form#new_floor_sub_unit"));
var subUnitImageDropzone = new Dropzone("div#sub-unit-images", {
url : "/admin/space/upload_sub_unit_image",
previewsContainer : "#sub-unit-images-container",
paramName : "floor_sub_unit_image[image]",
clickable : true,
autoProcessQueue : false,
maxFilesize : 2,
addRemoveLinks : true,
uploadMultiple : false,
accept: function(file, done) {
var regex = new RegExp(/(\.|\/)(gif|jpe?g|png)$/i)
if(regex.test(file.name)){
total_images++;
done();
}else{
this.removeFile(file);
}
}
})
$(".remove_image_btn").on("click",function(){
subUnitImageDropzone.removeAllFiles();
return false;
})
subUnitImageDropzone.on("success",function(file,data){
image_id_panel.append("<input type='hidden' name='floor_sub_unit[floor_sub_unit_images][]' value='" + data.id + "' />");
total_images--;
if(total_images == 0){
submitForm();
}
})
subUnitImageDropzone.on("sending",function(file,xhr,obj){
obj.append("authenticity_token",$("form#new_floor_sub_unit input[name=authenticity_token]").val());
})
var doImagesUpload = function(){
subUnitImageDropzone.processQueue();
subUnitImageDropzone.on("complete", function(file) {
var filesCount = subUnitImageDropzone.getQueuedFiles().length;
if(filesCount > 0){
doImagesUpload();
}
});
}
$("#floor-sub-unit-form-btn").on("click",function(){
if(validator.isFormValidated()){
if(subUnitImageDropzone.getQueuedFiles().length > 0){
doImagesUpload();
}else{
submitForm();
}
}else{
return false;
}
// uploading all the files
$(".upload-status-notice")
.removeClass("hide")
.addClass("animated slideInRight");
return false;
})
var submitForm = function(){
if(subUnitImageDropzone.getQueuedFiles().length > 0){
return false;
}else{
$(".upload-status-notice span.upload-text").text("Submitting");
$("form#new_floor_sub_unit").submit();
return false;
}
}
</script>

5
app/views/admin/spaces/edit_floor_unit.html.erb Normal file
View File

@ -0,0 +1,5 @@
<%= form_for @floor_unit, url: "/admin/space/update_floor_unit", html: {class: "form-horizontal main-forms"} do |f| %>
<fieldset>
<%= render :partial => "floor_unit_form", locals: {f: f} %>
</fieldset>
<% end %>

85
app/views/admin/spaces/edit_sub_unit.html.erb Normal file
View File

@ -0,0 +1,85 @@
<%= form_for @sub_unit, url: "/admin/space/update_sub_unit", html: {class: "form-horizontal main-forms edit_sub_unit_form"} do |f| %>
<fieldset>
<%= render :partial => "sub_unit_form", locals: {f: f} %>
</fieldset>
<% end %>
<script type="text/javascript">
Dropzone.autoDiscover = false;
var image_id_panel = $("#image_ids"),
total_images = 0,
validator = new FormValidator($("form.edit_sub_unit_form"));
var subUnitImageDropzone = new Dropzone("div#sub-unit-images", {
url : "/admin/space/upload_sub_unit_image",
previewsContainer : "#sub-unit-images-container",
paramName : "floor_sub_unit_image[image]",
clickable : true,
autoProcessQueue : false,
maxFilesize : 2,
addRemoveLinks : true,
uploadMultiple : false,
accept: function(file, done) {
var regex = new RegExp(/(\.|\/)(gif|jpe?g|png)$/i)
if(regex.test(file.name)){
total_images++;
done();
}else{
this.removeFile(file);
}
}
})
$(".remove_image_btn").on("click",function(){
subUnitImageDropzone.removeAllFiles();
return false;
})
subUnitImageDropzone.on("success",function(file,data){
image_id_panel.append("<input type='hidden' name='floor_sub_unit[floor_sub_unit_images][]' value='" + data.id + "' />");
total_images--;
if(total_images == 0){
submitForm();
}
})
subUnitImageDropzone.on("sending",function(file,xhr,obj){
obj.append("authenticity_token",$("form.edit_sub_unit_form input[name=authenticity_token]").val());
})
var doImagesUpload = function(){
subUnitImageDropzone.processQueue();
subUnitImageDropzone.on("complete", function(file) {
var filesCount = subUnitImageDropzone.getQueuedFiles().length;
if(filesCount > 0){
doImagesUpload();
}
});
}
$("#floor-sub-unit-form-btn").on("click",function(){
if(validator.isFormValidated()){
if(subUnitImageDropzone.getQueuedFiles().length > 0){
doImagesUpload();
}else{
submitForm();
}
}else{
return false;
}
// uploading all the files
$(".upload-status-notice")
.removeClass("hide")
.addClass("animated slideInRight");
return false;
})
var submitForm = function(){
if(subUnitImageDropzone.getQueuedFiles().length > 0){
return false;
}else{
$(".upload-status-notice span.upload-text").text("Submitting");
$("form.edit_sub_unit_form").submit();
return false;
}
}
</script>

167
app/views/admin/spaces/floor_layout.html.erb
View File

@ -5,26 +5,42 @@
<% content_for :page_specific_javascript do %> <% content_for :page_specific_javascript do %>
<%= javascript_include_tag "attrchange" %> <%= javascript_include_tag "attrchange" %>
<% end %> <% end %>
<div class="floor-unit-title">
<h3><%= @floor.title %></h3>
</div>
<% if @floor.layout == nil %>
<div id="full-layout-canvas"> <div id="full-layout-canvas">
<img id="layout-image" src="<%= @floor.layout_image.url %>" /> <img id="layout-image" src="<%= @floor.layout_image.url %>" />
<div class="image-cover"></div> <div class="image-cover"></div>
</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"> <script type="text/javascript">
var canvas = $("#full-layout-canvas"), var canvas = $("#full-layout-canvas"),
layoutImage = $("#layout-image"), layoutImage = $("#layout-image"),
cover = canvas.find(".image-cover"), cover = canvas.find(".image-cover"),
dragAreaCount = 0, dragAreaCount = 0,
windowHeight = ($(window).height() - (36 + 46 + 75)) + "px", windowHeight = ($(window).height() - (36 + 46 + 75 + 60)) + "px",
floorUnits = <%= @floor.floor_units.collect{|unit| {"id" => unit.id.to_s, "title" => unit.title}}.to_json.html_safe %>, floorUnits = <%= @floor.floor_units.asc(:title).collect{|unit| {"id" => unit.id.to_s, "title" => unit.title}}.to_json.html_safe %>,
formDisplay = false, formDisplay = false,
floor = <%= {"id" => @floor.id.to_s, "title" => @floor.title}.to_json.html_safe %>; changesMade = 0,
floor = <%= {"id" => @floor.id.to_s, "title" => @floor.title, "html" => @floor.layout}.to_json.html_safe %>,
tmpImg = new Image();
canvas.height(windowHeight); canvas.height(windowHeight);
layoutImage.height(windowHeight); layoutImage.height(windowHeight);
layoutImage.on("load",function(){
tmpImg.src = layoutImage.attr('src') ;
tmpImg.onload = function() {
cover.width(layoutImage.width()); cover.width(layoutImage.width());
// cover.css("left",((layoutImage.position().left * 100) / canvas.width()) + "%"); // cover.css("left",((layoutImage.position().left * 100) / canvas.width()) + "%");
}) }
var dragBoxes = [], var dragBoxes = [],
offsetX = 0, offsetX = 0,
@ -87,30 +103,37 @@
var selectAreaOkBtnHandler = function(event){ var selectAreaOkBtnHandler = function(event){
$(this).remove(); $(this).remove();
var deleteBtn = $("<button class='btn btn-small btn-danger selection-box-delete-btn'><i class='fa fa-times'></i> Delete</button>"); 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>"),
deleteBtn.on("click",function(ev){}); btnHolder = $("<div class='selection-box-btn-holder'></div>");
currentDragBox.append(deleteBtn) 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.append(makeNewForm(currentDragBox));
currentDragBox.attr("data-unit-id","temp_unit_id_" + dragAreaCount);
dragBoxes.push(currentDragBox); dragBoxes.push(currentDragBox);
dragAreaCount++; dragAreaCount++;
changesMade++;
currentDragBox = null; currentDragBox = null;
event.stopPropagation(); event.stopPropagation();
} }
var makeNewForm = function(box){ var makeNewForm = function(box,edit){
formDisplay = true; formDisplay = true;
var formWrapper = $("<div class='selection-form-wrapper' />"), var formWrapper = $("<div class='selection-form-wrapper' />"),
form = $("<form class='selection-box-form form-horizontal' />"), 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;'>"; 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 in floorUnits){ for(index = 0; index < floorUnits.length; index++){
var unit = floorUnits[index]; var unit = floorUnits[index];
field += "<option value='" + unit.id + "'>" + unit.title + "</option>"; field += "<option value='" + unit.id + "'>" + unit.title + "</option>";
} }
field += "</select></div></div>"; field += "</select></div></div>";
var checkbox = $("<div class='control-group'><div><input type='checkbox' id='toggle-select-text' /> Select existing units</div></div>"), var checkbox = $("<div class='control-group'><div><input type='checkbox' id='toggle-select-text' /> Select existing units</div></div>"),
type = "new"; type = (edit ? "existing" : "new");
checkbox.find("input[type=checkbox]").on("click",function(){ checkbox.find("input[type=checkbox]").on("click",function(){
if($(this).is(":checked")){ if($(this).is(":checked")){
form.find("select").show(); form.find("select").show();
@ -123,10 +146,24 @@
} }
}) })
var submitBtn = $("<div class='control-group'><div><button class='btn btn-small btn-primary'>Save</button></div>"); 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(){ submitBtn.find("button").on("click",function(){
if(type == "existing"){ if(type == "existing"){
box.attr("data-unit-id",form.find("select").val()); 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'>" + 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; formDisplay = false;
formWrapper.remove(); formWrapper.remove();
}else if(type == "new"){ }else if(type == "new"){
@ -142,8 +179,21 @@
dataType : "json" dataType : "json"
}).done(function(data){ }).done(function(data){
box.attr("data-unit-id",data.unit.id); 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; formDisplay = false;
formWrapper.remove(); 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; return false;
@ -157,7 +207,96 @@
return formWrapper; 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_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> </script>
<% if !@floor.layout.nil? %>
<script type="text/javascript">
cleanUpArea();
</script>
<% end %>

12
app/views/admin/spaces/sub_units.html.erb Normal file
View File

@ -0,0 +1,12 @@
<% content_for :page_specific_css do %>
<%= stylesheet_link_tag "space" %>
<% end %>
<ul class="apartments-area">
<%= render :partial => "sub_unit", :collection => @floor_unit.floor_sub_units %>
</ul>
<div class="bottomnav clearfix">
<div class="action pull-right">
<a href="/admin/spaces/unit/<%= @floor_unit.to_param %>/add_sub_unit" class="btn btn-primary"><%= t("space.add_sub_units") %></a>
</div>
</div>

306
app/views/admin/spaces/unit_layout.html.erb Normal file
View File

@ -0,0 +1,306 @@
<% 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 %>

2
app/views/admin/spaces/units.html.erb
View File

@ -2,7 +2,7 @@
<%= stylesheet_link_tag "space" %> <%= stylesheet_link_tag "space" %>
<% end %> <% end %>
<ul class="apartments-area"> <ul class="apartments-area">
<%= render :partial => "floor_unit", :collection => @floor.floor_units %> <%= render :partial => "floor_unit", :collection => @floor.floor_units.asc(:title) %>
</ul> </ul>
<div class="bottomnav clearfix"> <div class="bottomnav clearfix">
<div class="action pull-right"> <div class="action pull-right">

3
config/locales/en.yml
View File

@ -10,3 +10,6 @@ en:
detailed_layout: Detailed Layout detailed_layout: Detailed Layout
floor_unit_name: Unit Name floor_unit_name: Unit Name
save_layout: Save Layout save_layout: Save Layout
save_floor_layout: Save Layout
add_sub_units: Add SubUnit
sub_unit_name: SubUnit Name

3
config/locales/zh_tw.yml
View File

@ -10,3 +10,6 @@ zh_tw:
detailed_layout: Detailed Layout detailed_layout: Detailed Layout
floor_unit_name: Unit Name floor_unit_name: Unit Name
save_layout: Save Layout save_layout: Save Layout
save_floor_layout: Save Layout
add_sub_units: Add SubUnit
sub_unit_name: SubUnit Name

20
config/routes.rb
View File

@ -6,10 +6,30 @@ Rails.application.routes.draw do
namespace :admin do namespace :admin do
post "space/add_floor", to: 'spaces#add_floor' post "space/add_floor", to: 'spaces#add_floor'
post "space/update_floor", to: 'spaces#update_floor' post "space/update_floor", to: 'spaces#update_floor'
post "space/save_floor_layout", to: 'spaces#save_floor_layout'
post "space/create_floor_unit", to: 'spaces#create_floor_unit' post "space/create_floor_unit", to: 'spaces#create_floor_unit'
patch "space/update_floor_unit", to: 'spaces#update_floor_unit'
patch "space/update_sub_unit", to: 'spaces#update_sub_unit'
post "space/save_unit_layout", to: 'spaces#save_unit_layout'
post "space/upload_sub_unit_image", to: 'spaces#upload_sub_unit_image'
post "space/create_sub_unit", to: 'spaces#create_sub_unit'
get "spaces/:building_id/:floor_id/units", to: 'spaces#units' get "spaces/:building_id/:floor_id/units", to: 'spaces#units'
get "spaces/floor/:floor_id/add_floor_unit", to: 'spaces#add_floor_unit' get "spaces/floor/:floor_id/add_floor_unit", to: 'spaces#add_floor_unit'
get "spaces/floor/:floor_id/layout", to: 'spaces#floor_layout' get "spaces/floor/:floor_id/layout", to: 'spaces#floor_layout'
get "spaces/unit/:unit_id/layout", to: 'spaces#unit_layout'
get "spaces/unit/:unit_id/edit", to: 'spaces#edit_floor_unit'
get "spaces/:floor_id/:unit_id/sub_units", to: 'spaces#sub_units'
get "spaces/unit/:unit_id/add_sub_unit", to: 'spaces#add_sub_unit'
get "spaces/sub_unit/:sub_unit_id/edit", to: 'spaces#edit_sub_unit'
delete "spaces/unit/:unit_id/delete", to: 'spaces#delete_floor_unit'
delete "spaces/floor/:floor_id/delete", to: 'spaces#delete_floor' delete "spaces/floor/:floor_id/delete", to: 'spaces#delete_floor'
resources :spaces do resources :spaces do
get "floors" get "floors"