Update volume/index: add overlay and file manager

app/controllers/volume_controller.rb

@@ -5,7 +5,7 @@ class VolumeController < ApplicationController
     @volumes = Array.new
     volume = Hash.new
     
-    file_directory(@config["project_path"])
+    file_directory("/mnt")
     
     if get_info.blank?
       flash[:danger] = "Check Server"

app/views/home/index.html.erb

@@ -149,46 +149,11 @@
   </div>
 </div>
 <!-- /page content -->
- <!-- data table handler  -->
-  <script>
-    var handleDataTableButtons = function() {
-          "use strict";
-          0 !== $("#datatable-buttons").length && $("#datatable-buttons").DataTable({
-            dom: "Bfrtip",
-            buttons: [{
-              extend: "copy",
-              className: "btn-sm"
-            }, {
-              extend: "csv",
-              className: "btn-sm"
-            }, {
-              extend: "excel",
-              className: "btn-sm"
-            }, {
-              extend: "pdf",
-              className: "btn-sm"
-            }, {
-              extend: "print",
-              className: "btn-sm"
-            }],
-            responsive: !0
-          })
-        },
-        TableManageButtons = function() {
-          "use strict";
-          return {
-            init: function() {
-              handleDataTableButtons()
-            }
-          }
-        }();
-  </script>
   
   <script type="text/javascript">
     $(document).ready(function() {
       $('#datatable').dataTable();
     });
-    TableManageButtons.init();
   </script>
   
   <!-- file manager functions -->
@@ -259,7 +224,6 @@
           $("#table_div").append(new_table);
 
           $('#datatable').dataTable();
-          TableManageButtons.init();
         }
       })
     }

app/views/layouts/application.html.erb

@@ -15,8 +15,6 @@
   
   <div class="container body">
     
-    
-    
     <% flash.each do |key, value| %>
       <div align="center" id="flash" class="alert alert-<%= key %>"><%= value %>
         <a href="#" data-dismiss="alert" class="close">×</a>

app/views/volume/index.html.erb

@@ -1,4 +1,38 @@
-  <div class="popup-close" id="popup_mount">
+  <div id="popup" class="overlay">
+	  <div class="popup">
+	    
+	    <h2> Choose mount point </h2>
+		  <a class="close" href="#">&times;</a>
+		  
+		  <table id="datatable" class="table table-striped jambo_table">
+        <thead>
+        <tr class="headings">
+          <th>Name</th>
+          <th>auth</th>
+          <th></th>
+        </tr>
+        </thead>
+        <tbody id="tbody_volume1">
+        <tr>
+          <td><i class="fa fa-reply"></i> <a onclick="change_upper('<%=@current_dir%>')"> ..</a></td>
+          <td></td>
+          <td></td>
+        </tr>
+        <%@files.each do |t|%>
+          <% if t["auth"][0]=='d'%>
+            <tr>
+              <td style="color:#0d8ade;"><i class="fa fa-folder-open-o"></i> 
+                <a style="cursor: pointer" onclick="change_directory('<%=@current_dir + "/" + t["name"]%>')"> <%=t["name"]%></a>
+              </td>
+              <td><%=t["auth"]%></td>
+              <td><button id="mount_select_btn" class="btn btn-primary pull-right">select</botton></td>
+            </tr>
+          <%end%>
+        <%end%>
+        </tbody>
+      </table>
+      
+    </div>
   </div>
   
   <!-- page content -->
@@ -75,12 +109,9 @@
                     <p style="color:#d9534f;">Stop</p>
                   </a>
 
-                  <button class="btn btn-app" id="Btn_Mount">
-                    <i class="fa fa-upload"></i> Mount
-                  </button>
                   
-                  <div id="test1">
+                  <a class="btn btn-app" href="#popup"><i class="fa fa-upload"></i> Mount</a>
-                  </div>
+                  
         
                   <!--
                   <form class="form-horizontal form-label-right" action="/volume/mount" method="post">
@@ -124,15 +155,83 @@
     }
   </script>
   
+  
+  <!-- data table handler  -->
   <script type="text/javascript">
-    $('#Btn_Mount').on('click', function(event){
+    $(document).ready(function() {
+      $('#datatable').dataTable();
+    });
+  </script>
   
-      $('#popup_mount').attr("class", "popup");
+  
-      $('#popup_mount').on('click', function(event){
+  <!-- file manager functions -->
-        $('#popup_mount').attr("class", "popup-close")
+  <script>
+    function change_upper(directory){
+      if(directory != "/"){
+        var path = directory.split("/");
+        var upper_path = "";
+        if(path.length == 2){
+          change_directory("/");
+        } else {
+          for(var i = 1; i < path.length - 1 ; i++){
+             if(path[i] != "")
+              upper_path += "/" + path[i];
+          }
+          change_directory(upper_path);
+        }
+      }
+    }
+    
+    function change_directory(directory){
+      $.ajax({
+      method: "POST",
+      url: "/application/changeDir",
+      data: { path: directory },
+      success  : function(result){
+          $("#tbody_volume1").empty();
+          
+          var new_tr = "<tr role='row' class='odd'> <td><i class='fa fa-reply'></i>";
+          new_tr += "<a onclick='change_upper(" + '"' + directory + '"' +")'> ..</a>";
+          new_tr += "</td><td> </td><td> </td><td> </td></tr>";
+          
+          for( var i = 0; i < result.file.length; i++){
+            if(i % 2 == 0)
+              new_tr += "<tr role='row' class='odd'>";
+            else
+              new_tr += "<tr role='row' class='even'>";
+              
+            if(result.file[i].auth[0] == "d"){
+              new_tr += "<td style='color:#0d8ade;' class='sorting_1'><i class='fa fa-folder-open-o'></i> "; 
+              if(result.current != "/")
+                new_tr += "<a  style='cursor: pointer'  onclick='change_directory(" +'"' + result.current + "/" + result.file[i].name +'"'+ ")'>" + result.file[i].name + "</a></td>";
+              else
+                new_tr += "<a  style='cursor: pointer'  onclick='change_directory(" +'"' + "/" + result.file[i].name +'"'+ ")'>" + result.file[i].name + "</a></td>";
+                new_tr += "<td>"+result.file[i].auth+"</td>";
+              
+              new_tr += "<td><button id='mount_select_btn' class='btn btn-primary pull-right'>select</botton></td>";
+              new_tr += "</tr>";
+            }
+          }
+          
+          $("#tbody_volume1").append(new_tr);
+
+          $('#datatable').dataTable();
+        }
       })
+    }
+  </script>
   
   
-      
+  <script>
+    $('#mount_select_btn').click(function(){
+      $.ajax({
+        type: 'post',
+        url: '/volume/mount',
+        data: mount_point,
+        success: function(data){
+            alert(data);
+        }
+      });
+      return false; //<- 이 문장으로 새로고침(reload)이 방지됨
     })
   </script>

vendor/assets/components/gentelella/production/css/custom.css

@@ -5346,19 +5346,56 @@ ul.notifications {
   height: 2px;
 }
 
-.popup {
+.overlay {
-  display:inline; 
+  position: fixed;
-  z-index:20000;
-  background:#000000;
-  opacity:0.3;
-  position: absolute; 
-  left: 0; 
   top: 0;
-  width: 100%; 
+  bottom: 0;
-  height: 100%;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.7);
+  transition: opacity 500ms;
+  visibility: hidden;
+  opacity: 0;
+  z-index:20000;
 }
 
-.popup .popup-close {
+.overlay:target {
-  display:none;
+  visibility: visible;
-  z-index:-1;
+  opacity: 1;
+}
+
+.popup {
+  margin: 70px auto;
+  padding: 20px;
+  background: #fff;
+  border-radius: 5px;
+  position: relative;
+  width:30%;
+  transition: all 5s ease-in-out;
+  overflow:auto;
+  z-index:20001;
+}
+.popup h2 {
+  margin-top: 0;
+  color: #333;
+  font-family: Tahoma, Arial, sans-serif;
+}
+.popup .close {
+  position: absolute;
+  top: 20px;
+  right: 30px;
+  transition: all 200ms;
+  font-size: 30px;
+  font-weight: bold;
+  text-decoration: none;
+  color: #333;
+  z-index:20001;
+}
+.popup .close:hover {
+  color: #06D85F;
+}
+@media screen and (max-width: 700px){
+  .popup{
+    width: 70%;
+  }
 }