Update volume/index: add overlay and file manager
This commit is contained in:
Youngkyun Kim
parent
b3ea700922
commit
bfa4e5f9b7
@ -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"
|
||||
|
||||
@ -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();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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="#">×</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 -->
|
||||
@ -74,13 +108,10 @@
|
||||
<i class="fa fa-pause" style="color:#d9534f;"></i>
|
||||
<p style="color:#d9534f;">Stop</p>
|
||||
</a>
|
||||
|
||||
|
||||
<button class="btn btn-app" id="Btn_Mount">
|
||||
<i class="fa fa-upload"></i> Mount
|
||||
</button>
|
||||
<a class="btn btn-app" href="#popup"><i class="fa fa-upload"></i> Mount</a>
|
||||
|
||||
<div id="test1">
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<form class="form-horizontal form-label-right" action="/volume/mount" method="post">
|
||||
@ -123,16 +154,84 @@
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<!-- data table handler -->
|
||||
<script type="text/javascript">
|
||||
$('#Btn_Mount').on('click', function(event){
|
||||
|
||||
$('#popup_mount').attr("class", "popup");
|
||||
$('#popup_mount').on('click', function(event){
|
||||
$('#popup_mount').attr("class", "popup-close")
|
||||
$(document).ready(function() {
|
||||
$('#datatable').dataTable();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<!-- file manager functions -->
|
||||
<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>
|
||||
@ -5346,19 +5346,56 @@ ul.notifications {
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.popup {
|
||||
display:inline;
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
transition: opacity 500ms;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
z-index:20000;
|
||||
background:#000000;
|
||||
opacity:0.3;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.popup .popup-close {
|
||||
display:none;
|
||||
z-index:-1;
|
||||
.overlay:target {
|
||||
visibility: visible;
|
||||
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%;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user