completed ui for template store

Gemfile

@@ -35,7 +35,7 @@ eval(File.read(File.dirname(__FILE__) + '/built_in_extensions.rb'))
 eval(File.read(File.dirname(__FILE__) + '/downloaded_extensions.rb'))
 
 #form helpers
-gem 'dynamic_form', '1.0.0', :git => 'git@github.com:rails/dynamic_form.git'
+gem 'dynamic_form', :git => 'git@gitlab.tp.rulingcom.com:saurabh/dynamic-form.git'
 
 gem 'fb_graph'
 gem 'rack-gridfs'

app/controllers/admin/designs_controller.rb

@@ -31,6 +31,11 @@ class Admin::DesignsController < OrbitBackendController
     @design = Design.new
   end
 
+  def design_list
+    @designs = params[:sort] ? get_sorted_and_filtered("designs") : Design.all
+    render :layout => false
+  end
+
   def update
     @design = Design.find(params[:id])
     @design.update_attributes(params[:design])

app/controllers/admin/template_store_controller.rb

@@ -1,22 +1,96 @@
+require 'net/http'
+require 'uri'
+require 'fileutils'
+require 'zip/zip'
 class Admin::TemplateStoreController < OrbitBackendController
   
  
   @@store_domain = STORE_CONFIG[:store_settings]["url"] 
   def index
     @store = @@store_domain
+    @design_ids = Design.all.map{|d| d.template_store_id}
     @templates = JSON.parse(get_templates)
+    render :layout => false
   end
 
   def show
      @store = @@store_domain
+     @design_ids = Design.all.map{|d| d.template_store_id}
     @template = JSON.parse(get_template(params[:id])) rescue nil
   end
 
  def download_theme
-    render :json => {"success"=>true}.to_json
+  url = @@store_domain + params["url"]
+  url_base = url.split('/')[2]
+  url_path = '/'+url.split('/')[3..-1].join('/')
+  Net::HTTP.start(url_base) do |http|
+    open("public/#{params['slug']}.zip", "wb") do |file|
+      http.get(url_path) do |str|
+        file.write(str)
+      end
+    end
+  end
+    upload_package("#{params['slug']}.zip", params["id"])
+    File.delete("public/#{params['slug']}.zip")
+    render :json => {"success"=>true,"url"=>@@store_domain + params["url"]}.to_json
   end
   protected
 
+  def upload_package(package_name,template_store_id)
+
+    temp_file = Tempfile.new("temp_file")
+    original_file = File.open("#{Rails.root}/public/#{package_name}")
+    temp_file.write(original_file.read.force_encoding('UTF-8'))
+    temp_file.rewind
+    filename = File.basename(original_file,".zip")
+    unzip_design(temp_file, filename, template_store_id)
+    temp_file.close
+
+  end
+
+  def unzip_design(file, zip_name, template_store_id)
+    Zip::ZipFile.open(file) { |zip_file|
+      design = Design.new.from_json(zip_file.read("#{zip_name}/info.json"))
+      design.template_store_id = template_store_id
+      Dir.mktmpdir('f_path') { |dir|
+        themes_entries = []
+        javascripts_entries = []
+        images_entries = []
+
+        zip_file.entries.each do |entry|
+          case (path = entry.to_s)
+            when /\A(#{zip_name})\/(default\.css)\z/    #for default css
+              design.build_css_default(:file => get_temp_file(zip_file, dir, entry))
+            when /\A(#{zip_name})\/(reset\.css)\z/    #for reset css
+              design.build_css_reset(:file => get_temp_file(zip_file, dir, entry))
+            when /\A(#{zip_name})\/(layout\.html)\z/    #for layout html
+              design.build_layout(:file => get_temp_file(zip_file, dir, entry))
+            when /\A(#{zip_name})\/(themes)\/.*(\.css)\z/   #for themes css
+              themes_entries << entry
+            when /\A(#{zip_name})\/(javascripts)\/.*(\.js)\z/   #for js
+              javascripts_entries << entry
+            when /\A(#{zip_name})\/(images)\/.*((\.jpg)|(\.png)|(\.gif))\z/   #for img
+              images_entries << entry
+          end
+        end
+
+        ['themes', 'javascripts', 'images'].each do |type|
+          eval("#{type}_entries").each do |entry|
+            eval("design.#{type}").build(:file => get_temp_file(zip_file, dir, entry))
+          end
+        end
+      }
+      design.save
+    }
+  end
+
+  def get_temp_file(zip_file, dir, entry)
+    filename = File.basename(entry.to_s)
+    temp_file = File.new(dir + '/' + filename, 'w+') 
+    temp_file.write (zip_file.read entry ).force_encoding('UTF-8')
+    temp_file
+  end
+
   def get_template(id)
     uri = URI.parse("#{@@store_domain}/api/templates/#{id}")
     http = Net::HTTP.new(uri.host, uri.port)

app/models/design/design.rb

@@ -7,6 +7,7 @@ class Design
   field :intro, :type => String
   field :title, :type => String
   field :version, :type => String
+  field :template_store_id, :type => String
 
   mount_uploader :zip_file, AssetUploader
 

app/views/admin/designs/_design.html.erb

@@ -1,15 +1,20 @@
-<tr class="with_action">
+<tr>
-	<td class="span1"><%= check_box_tag 'to_delete[]', design.id, false, :class => "checkbox_in_list" %></td>
+   <td class="detail-row">
-	<td class="span2">
+    	<h5 class="mt_title">
-		<%= design.title %>
+    		<span><%= design.title %></span>
+    	</h5>
+    	
+    </td>
+	<td>
+    	<p class="mt_dev"><%= design.author %></p>
+    </td>
+    <td>
     	<div class="quick-edit">
-			<ul class="nav nav-pills hide">
+			<ul class="nav nav-pills">
 				<li><%= link_to t(:edit), edit_admin_design_path(design), :class => 'edit'  %></li>
 				<li class="dropdown"><%= link_to t(:delete_), admin_design_path(design), :confirm => t('sure?'), :method => :delete, :class => 'delete' %></li>
 			</ul>
 		</div>
 	</td>
-  <td class="span7"><%= design.intro %></td>
+	<td class="active"><%= radio_button_tag 'design_default', design.id, (@site.design && @site.design.id.to_s.eql?(design.id.to_s) ? true : false), :class => 'design_default toggle-check', :rel => admin_sites_path %></td> 
-  <td class="span2"><%= design.author %></td>
-  <td class="span1 active"><%= radio_button_tag 'design_default', design.id, (@site.design && @site.design.id.to_s.eql?(design.id.to_s) ? true : false), :class => 'design_default toggle-check', :rel => admin_sites_path %></td>
 </tr>

app/views/admin/designs/_designs.html.erb

@@ -1,25 +1,12 @@
 <thead>
 <tr class="sort-header">
-  <th></th>
+  <th class="first span2"><a href="#">Templates Title</a></th>
-  <th class="first span3"><a href="#">Templates Title</a></th>
+  <th class="active span3">Designer</th>
-  <th data-hide="phone" class="active span3">Active</th>
+  <th class="span3">Actions</th>
-  <th data-hide="phone" class="active span3">Date of purchase</th>
+  <th class="span1">Status</th>
-  <th data-hide="phone" class="active span3">Designer</th>
-  <th class="span1"></th>
 </tr>
 </thead>
 <tbody>
 <tbody id="tbody_designs" class="sort-holder">
 	<%= render :partial => 'design', :collection => @designs %>
 </tbody>
-
-<% content_for :page_specific_javascript do %>
-  <script>
-    $(document).ready(function(){
-      $(document).on('change', '.design_default', function(){
-        $(this).attr('value');
-        $.getScript($(this).attr('rel') + '/' + $(this).val() + '/change_design');
-      }); 
-    }); 
-  </script>
-<% end %>

app/views/admin/designs/design_list.html.erb

@@ -0,0 +1 @@
+<%= render :partial => 'design', :collection => @designs %>

app/views/admin/designs/index.html.erb

@@ -12,16 +12,225 @@
     <%= javascript_include_tag 'lib/footable-0.1' %>
     <%= javascript_include_tag 'lib/all-list' %>  
     <%= javascript_include_tag 'lib/retina' %>   
-    <%= javascript_include_tag 'lib/mudole_templates_status' %>  
+     <style type="text/css">
+      .container{
+        /*max-width: 600px;*/
+      }
 
+      .panel{
+        border-radius: 5px;
+        overflow: hidden;
+        border: 1px solid #DFDFDF;
+        background: #FFF;
+        box-shadow: 0px 0px 10px #CCC;
+      }
+
+      .break{
+        border-left: 1px solid #FCFCFC;
+        border-right: 1px solid #DDD;
+        padding: 10px 0;
+        margin: 0 15px;
+      }
+
+      .panel-heading{
+        font-size: 16px;
+        color: #666;
+        padding: 10px 20px;
+        height: 20px;
+
+        background-color: #fafafa;
+        background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
+        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
+        background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
+        background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
+        background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
+        background-repeat: repeat-x;
+        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
+        *zoom: 1;
+        border-bottom:  1px solid #DDD;
+      }
+
+      .table{
+        margin: 0;
+        -webkit-border-radius: 5px;
+        border-radius: 5px;
+      }
+
+  /*    .table td, .table th, .table .quick-edit{
+        vertical-align: middle;
+        text-align: center;
+      }
+*/
+      /*.table td img{
+        background: #666;
+        border: 3px solid #AAA;
+        padding: 2px;
+        border-radius: 5px;
+        box-shadow: 0px 0px 10px #000 inset;
+      }
+*/
+      .pannel-body{
+        min-height:  400px;
+        overflow: scroll;
+        overflow-x: hidden;
+        overflow-y: hidden;
+        padding: 15px;
+      }
+
+      .pannel-footer{
+        background: #f2f2f2; /* Old browsers */
+        background: -moz-linear-gradient(top,  #f2f2f2 0%, #ffffff 76%, #ededed 100%); /* FF3.6+ */
+        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(76%,#ffffff), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
+        background: -webkit-linear-gradient(top,  #f2f2f2 0%,#ffffff 76%,#ededed 100%); /* Chrome10+,Safari5.1+ */
+        background: -o-linear-gradient(top,  #f2f2f2 0%,#ffffff 76%,#ededed 100%); /* Opera 11.10+ */
+        background: -ms-linear-gradient(top,  #f2f2f2 0%,#ffffff 76%,#ededed 100%); /* IE10+ */
+        background: linear-gradient(to bottom,  #f2f2f2 0%,#ffffff 76%,#ededed 100%); /* W3C */
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
+        
+        border: 1px solid #EEE;
+        border-top: 1px solid #CCC;
+        padding: 10px;
+
+        height: 30px;
+      }
+
+      #apply_change_btn{
+        display: none;
+      }
+
+      #alert_wrap{
+        display: none;
+        position: absolute;
+        width: 93%;
+        top: 30%;
+        z-index: 1045;
+      }
+
+      .alert{
+        width: 400px;
+        text-align: center;
+        z-index: 1050;
+        margin: 0 auto;
+        padding: 10px 0;
+      }
+
+      .modal-backdrop{
+        display: none;
+      }
+
+      .icons-faq:before{ content: "\e086"; }
+      .icons-ask:before { content: "\e062"; }
+    </style>
 </head>
 
 
-<%= render 'filter' %>
+<%#= render 'filter' %>
-<table class="table main-list">
+<%#= flash[:notice] rescue nil%>
+<div id="alert_wrap">
+  <div class="alert alert-success">
+    <h4><span id="module_msg_title">Please wait...</span></h4><br/>
+    <span id="module_msg_content">Theme changes taking effect</span><br/>
+    <img src="http://ridepal.com/images/homeimg/preloader_transparent.gif" width="50">
+  </div>
+</div>
+
+ <div class="container row-fluid">
+
+  <div class="span4">
+    <div class="panel">
+      <div class="panel-heading"><i class="icons-download"></i><span class="break"></span><%= t(:installed_templates) %></div>
+      <div class="pannel-body">
+        <table class="table table-striped">
+          <tbody id="extensions_table">
               <%= render 'designs' %>
+          </tbody>
+      </table>
+      </div>  
+      <div class="pannel-footer">
+        <button id="apply_change_btn" onclick="apply_change();" class="btn btn-primary btn-small pull-right">Appy Change</button>
+      </div>
+    </div>
+   </div>
+
+   <div class="span8 pull-right">
+     <div class="panel">
+        <div class="panel-heading"><i class="icon-shopping-cart"></i><span class="break"></span><%= t(:template_store) %></div>
+        <div class="pannel-body">
+
+          <table id="mt-list" class="table main-list">
+            <tbody>
+                <tr id="loading">
+                    <td>
+	                   <img src="http://ridepal.com/images/homeimg/preloader_transparent.gif" width="50">
+                        <span>Loading template store...</span>
+                    <td>
+                </tr>
+            </tbody>
+         </table>
+
+        </div>  
+        <div class="pannel-footer">
+        </div>
+      </div>
+   </div>
+ </div>
+ <div class="modal-backdrop"></div>
 </table>
 
 <div class="form-actions form-fixed pagination-right">
     <%= link_to content_tag(:i, nil, :class => 'icon-plus icon-white') + t(:upload), upload_package_admin_designs_path, :class => 'btn btn-primary pull-right' %>
 </div>
+
+<script type="text/javascript">
+    $.ajax({
+        url : "<%= admin_template_store_path %>",
+        type : "get",
+        datatType : "html"
+    }).done(function(data){
+        $("#loading").addClass('hide');
+        $("#mt-list").html(data);
+        bindHandlers();
+    }).fail(function(){
+        $("#loading").addClass('hide');
+        $("#mt-list").html("<tr><td>Error loading template store</td></tr>");
+    })
+     $(document).on('change', '.design_default', function(){
+        $("#alert_wrap").show();
+        $(".modal-backdrop").show();
+        $(this).attr('value');
+        $.getScript($(this).attr('rel') + '/' + $(this).val() + '/change_design',function(){
+            $("#alert_wrap").hide();
+           $(".modal-backdrop").hide();
+        });
+    });
+
+    var bindHandlers = function(){
+        $("a.download-link").on(clickEvent,function(){
+          if($(this).attr("disabled") == "disabled")return false;
+          var el = $(this);
+          el.removeClass("btn-primary").addClass("btn-info").text("Installing").attr('disabled',"disabled");
+          $.ajax({
+            url : "<%= admin_template_store_download_theme_path %>",
+            data : el.data(),
+            dataType : "json",
+            type : "post"
+          }).done(function(data){
+             if(data.success){
+                el.removeClass('btn-info').addClass('btn-success').text("Installed");
+                $.ajax({
+                    url: '<%= admin_design_list_path %>',
+                    type: 'get',
+                    dataType: 'html'
+                })
+                .done(function(data) {
+                    $("#tbody_designs").html(data);
+                    $(".toggle-check").togglebox();
+                });
+              }
+          }).fail(function(){
+              el.removeClass('btn-info').addClass('btn-danger').text("Error, please try again.").removeAttr('disabled');
+          })
+        })
+    }
+</script>
+

app/views/admin/template_store/_template.html.erb

@@ -0,0 +1,24 @@
+    <tr>
+      <td>
+        <a href="<%= admin_template_store_template_path(template["_slugs"][0]) %>">
+          <img src="<%= @store + template['preview']['preview']['thumb']['url'] %>" class="item-thumb" />
+          </a>
+      </td>
+      <td>
+        <a href="<%= admin_template_store_template_path(template["_slugs"][0]) %>">
+          <span class="item-info">
+            <b class="item-name"><%= template['title'] %></b>
+          </span>
+        </a>
+      </td>
+      <td>
+         <span class="item-price">Free</span>
+      </td>
+      <td>
+          <% if @design_ids.include?(template["_id"]["$oid"]) %>
+              <%= link_to "Installed", "javascript:void(0);", "data-url" => template['template']['template']['url'], :class=> 'btn btn-success download-link', "disabled"=>"disabled", "data-name"=>template['title'], "data-slug"=>template["_slugs"][0], "data-id"=>template["_id"]["$oid"] %>
+            <% else %>
+              <%= link_to "Download", "javascript:void(0);", "data-url" => template['template']['template']['url'], :class=> 'btn btn-primary download-link', "data-name"=>template['title'], "data-slug"=>template["_slugs"][0], "data-id"=>template["_id"]["$oid"] %>
+            <% end %>
+      </td>
+    </tr>

app/views/admin/template_store/index.html.erb

@@ -1,91 +1,9 @@
-
+ <thead>
-
+  <th class="span3 active">Thumbnails</th>
-  <div class="wrapper">
+  <th class="span2">Title</th>
-    <div id="toolbar">
+  <th class="span3">Price</th>
-      <div class="filter fn">
+  <th class="span1">Status</th>
-        <span class="label">Price</span>
+</thead>
-        <div class="drop-menu ui">
+<tbody>
-          <a href="" class="controller">
+ <%= render :partial => 'template', :collection => @templates %>
-            <span class="option-default">All</span>
+</tbody>
-            <span class="arrow down"></span>
-          </a>
-          <ul class="option-list">
-            <li><a class="option-item" href="">All</a></li>
-            <li><a class="option-item" href="">15,000</a></li>
-            <li><a class="option-item" href="">20,000</a></li>
-            <li><a class="option-item" href="">25,000</a></li>
-          </ul>
-        </div>
-      </div>
-      
-      <div class="filter fn">
-        <span class="label">Category</span>
-        <div class="drop-menu ui">
-          <a href="" class="controller">
-            <span class="option-default">All</span>
-            <span class="arrow down"></span>
-          </a>
-          <ul class="option-list">
-            <li><a class="option-item" href="">All</a></li>
-            <li><a class="option-item" href="">National Taiwan University</a></li>
-            <li><a class="option-item" href="">Category 1</a></li>
-            <li><a class="option-item" href="">Category 2</a></li>
-            <li><a class="option-item" href="">Category 3</a></li>
-          </ul>
-        </div>
-      </div>
-      <div class="filter fn">
-        <span class="label">Sort by</span>
-        <div class="drop-menu ui">
-          <a href="" class="controller">
-            <span class="option-default">Date</span>
-            <span class="arrow down"></span>
-          </a>
-          <ul class="option-list">
-            <li><a class="option-item" href="">Date</a></li>
-            <li><a class="option-item" href="">Popular</a></li>
-            <li><a class="option-item" href="">Recent Upload</a></li>
-          </ul>
-        </div>
-      </div>
-    </div>
-    <div id="item-list">
-      <ul class="clearfix">
-        <% @templates.each do |template| %>
-          <li>
-            <a href="<%= admin_template_store_template_path(template["_slugs"][0]) %>">
-              <img src="<%= @store + template['preview']['preview']['thumb']['url'] %>" class="item-thumb" />
-               <span class="item-info">
-                <b class="item-name"><%= template['title'] %></b>
-                <span class="item-price">Free</span>
-              </span>
-            </a>
-            <%= link_to "Download", "javascript:void(0);", "data-url" => template['template']['template']['url'], :class=> 'btn btn-primary download-link' %>
-          </li>
-        <% end %>
-
-      </ul>
-    </div>
-  </div>
-
-<script type="text/javascript">
-  (function(){
-    $("a.download-link").on(clickEvent,function(){
-      var el = $(this),
-          downloadurl = $(this).data("url");
-
-      el.removeClass("btn-primary").addClass("btn-info").text("Installing").attr('disabled',"disabled");
-      $.ajax({
-        url : "<%= admin_template_store_download_theme_path %>",
-        data : {"url" : downloadurl},
-        dataType : "json",
-        type : "post",
-        success : function(data){
-          if(data.success){
-            el.removeClass('btn-info').addClass('btn-success').text("Installed");
-          }
-        }
-      })
-    })
-  })()
-</script>

app/views/admin/template_store/show.html.erb

@@ -8,7 +8,11 @@
         <div id="item-info">
           <%= image_tag "#{@store}#{@template['preview']['preview']['thumb']['url']}", :class => "item-thumb" %>
           <h2 class="item-name"><%= @template['title'] %></h2>
-           <%= link_to "Download", "javascript:void(0);", "data-url" => @template['template']['template']['url'], :class=> 'btn btn-primary download-link' %>
+           <% if @design_ids.include?(@template["_id"]["$oid"]) %>
+              <%= link_to "Installed", "javascript:void(0);", "data-url" => @template['template']['template']['url'], :class=> 'btn btn-success download-link', "disabled"=>"disabled", "data-name"=>@template['title'], "data-slug"=>@template["_slugs"][0], "data-id"=>@template["_id"]["$oid"] %>
+            <% else %>
+              <%= link_to "Download", "javascript:void(0);", "data-url" => @template['template']['template']['url'], :class=> 'btn btn-primary download-link', "data-name"=>@template['title'], "data-slug"=>@template["_slugs"][0], "data-id"=>@template["_id"]["$oid"] %>
+           <% end %>
           <ul class="item-extra-info">
             <li><span class="title">views</span><span class="count"><%= Random.new.rand(10..100) %></span></li>
             <!-- <li><span class="title">color</span><span class="color-tag green"></span></li> -->
@@ -64,21 +68,22 @@
 <script type="text/javascript">
   (function(){
     $("a.download-link").on(clickEvent,function(){
-      var el = $(this),
+      if($(this).attr("disabled") == "disabled")return false;
-          downloadurl = $(this).data("url");
+      var el = $(this);
-
       el.removeClass("btn-primary").addClass("btn-info").text("Installing").attr('disabled',"disabled");
       $.ajax({
         url : "<%= admin_template_store_download_theme_path %>",
-        data : {"url" : downloadurl},
+        data : el.data(),
         dataType : "json",
-        type : "post",
+        type : "post"
-        success : function(data){
+      }).done(function(data){
          if(data.success){
             el.removeClass('btn-info').addClass('btn-success').text("Installed");
           }
-        }
+      }).fail(function(){
+          el.removeClass('btn-info').addClass('btn-danger').text("Error, please try again.").removeAttr('disabled');
       })
     })
   })()
 </script>
+

config/routes.rb

@@ -89,7 +89,9 @@ Orbit::Application.routes.draw do
         post 'update_file' => 'designs#update_file'
         post 'upload_image' => 'designs#upload_image'
       end
+
     end
+        match 'design_list' => 'designs#design_list'
 
     resources :infos do
       get 'add_attribute_field'