a lot of changes and backend done...

app/assets/stylesheets/space.scss

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

app/controllers/admin/spaces_controller.rb

@@ -41,8 +41,8 @@ class Admin::SpacesController < OrbitAdminController
 	end
 
 	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
 	end
 
@@ -60,12 +60,122 @@ class Admin::SpacesController < OrbitAdminController
 		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
 		@floor = Floor.find_by(:uid => params[:floor_id].split("-").last)
 	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
 
+	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
 		params.require(:floor).permit!
 	end

app/models/floor_sub_unit.rb

@@ -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

app/models/floor_sub_unit_image.rb

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

app/models/floor_unit.rb

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

app/views/admin/spaces/_floor.html.erb

@@ -1,7 +1,7 @@
 <tr>
 	<td><a href="/admin/spaces/<%= floor.building.to_param %>/<%= floor.to_param %>/units"><%= floor.title %></a></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>
 		<% 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>

app/views/admin/spaces/_floor_unit.html.erb

@@ -1,8 +1,12 @@
 <li class="apartment">
-	<a href="#">
+	<a href="/admin/spaces/<%= floor_unit.floor.to_param %>/<%= floor_unit.to_param %>/sub_units">
 		<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>
 		<p><%= floor_unit.title %></p>
 	</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>

app/views/admin/spaces/_floor_unit_form.html.erb

@@ -25,10 +25,10 @@
       <div class="control-group">
         <label class="control-label muted"><%= t("space.detailed_layout") %></label>
         <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">
-              <% if @floor_unit.layout.file %>
+              <% if @floor_unit.layout_image.file %>
-                <%= image_tag @floor_unit.layout %>
+                <%= image_tag @floor_unit.layout_image %>
               <% else %>
                 <img src="http://www.placehold.it/150x100/EFEFEF/AAAAAA" />
               <% end %>
@@ -37,12 +37,12 @@
             <span class="btn btn-file">
               <span class="fileupload-new"><%= t(:select_image) %></span>
               <span class="fileupload-exists"><%= t(:change) %></span>
-              <%= f.file_field :layout %>
+              <%= f.file_field :layout_image %>
             </span>
             <a href="#" class="btn fileupload-exists" data-dismiss="fileupload"><%= t(:cancel) %></a>
             <div class="controls" data-toggle="buttons-checkbox">
               <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>
             </div>
           </div>
@@ -56,7 +56,11 @@
 
 <!-- Form Actions -->
 <div class="form-actions">
-  <%= f.hidden_field :floor_id, value: @floor.id %>
+  <% if params[:action] == "add_floor_unit" %>
+    <%= 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' %>
   <%= link_to t('cancel'), "/admin/spaces/#{@floor.building.to_param}/#{@floor.to_param}/units", :class=>"btn" %>  
 </div>

app/views/admin/spaces/_sub_unit.html.erb

@@ -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>

app/views/admin/spaces/_sub_unit_form.html.erb

@@ -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>

app/views/admin/spaces/add_sub_unit.html.erb

@@ -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>

app/views/admin/spaces/edit_floor_unit.html.erb

@@ -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 %>

app/views/admin/spaces/edit_sub_unit.html.erb

@@ -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>

app/views/admin/spaces/floor_layout.html.erb

@@ -5,26 +5,42 @@
 <% content_for :page_specific_javascript do %>
 	<%= javascript_include_tag "attrchange" %>
 <% end %>
-
+<div class="floor-unit-title">
-<div id="full-layout-canvas">
+	<h3><%= @floor.title %></h3>
-	<img id="layout-image" src="<%= @floor.layout_image.url %>" />
+</div>
-	<div class="image-cover"></div>
+<% if @floor.layout == nil %>
+	<div id="full-layout-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"),
 		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,
-		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);
 	layoutImage.height(windowHeight);
-	layoutImage.on("load",function(){
+
+    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,
@@ -87,30 +103,37 @@
 
 	var selectAreaOkBtnHandler = function(event){
 		$(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.attr("data-unit-id","temp_unit_id_" + dragAreaCount);
 		dragBoxes.push(currentDragBox);
 		dragAreaCount++;
+		changesMade++;
 		currentDragBox = null;
 		event.stopPropagation();
 	}
 
-	var makeNewForm = function(box){
+	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;'>";
+			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];
 				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 = "new";
+			type = (edit ? "existing" : "new");
 		checkbox.find("input[type=checkbox]").on("click",function(){
 			if($(this).is(":checked")){
 				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(){
 			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;
 				formWrapper.remove();
 			}else if(type == "new"){
@@ -142,8 +179,21 @@
 						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'>" + 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;
@@ -157,7 +207,96 @@
 		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>
+<% if !@floor.layout.nil? %>
+	<script type="text/javascript">
+		cleanUpArea();
+	</script>
+<% end %>
 
 
 

app/views/admin/spaces/sub_units.html.erb

@@ -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>

app/views/admin/spaces/unit_layout.html.erb

@@ -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 %>
+
+
+
+
+
+

app/views/admin/spaces/units.html.erb

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

config/locales/en.yml

@@ -9,4 +9,7 @@ en:
     simple_layout: Simple Layout
     detailed_layout: Detailed Layout
     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

config/locales/zh_tw.yml

@@ -9,4 +9,7 @@ zh_tw:
     simple_layout: Simple Layout
     detailed_layout: Detailed Layout
     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

config/routes.rb

@@ -6,10 +6,30 @@ Rails.application.routes.draw do
    namespace :admin do
       post "space/add_floor", to: 'spaces#add_floor'
       post "space/update_floor", to: 'spaces#update_floor'
-   		post "space/create_floor_unit", to: 'spaces#create_floor_unit'
+      post "space/save_floor_layout", to: 'spaces#save_floor_layout'
+
+      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/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/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'
     	resources :spaces do 
     		get "floors"