gluster-web-interface/app/views/home/index.html.erb
2016-09-23 18:28:53 +09:00

340 lines
12 KiB
Plaintext

<!-- create overlay page -->
<div id="popup_mkdir" class="overlay">
<div class="popup">
<h2> Make Directory </h2>
<a class="close" href="#">&times;</a>
<form id="form_make_directory" data-parsley-validate class="form-horizontal form-label-left" action="/home/mkdir" method="post">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="current-dir">Current Directory <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="current-dir" required="required" class="form-control col-md-7 col-xs-12" name="current_dir" value="<%=@current_dir%>" readonly/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="directory-name">Directory Name<span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="directory-name" required="required" class="form-control col-md-7 col-xs-12" name="directory_name" placeholder="Directory name"/>
</div>
</div>
<div class="ln_solid"></div>
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>
<!-- page content -->
<div class="right_col" role="main">
<div class="page-title">
</div>
<div class="clearfix"></div>
<div class="row">
<!-- top tiles -->
<div class="row tile_count">
<div class="animated flipInY col-md-2 col-sm-4 col-xs-4 tile_stats_count">
<div class="left"></div>
<div class="right">
<span class="count_top"><i class="fa fa-user"></i> Total Users</span>
<div class="count">2500</div>
<span class="count_bottom"><i class="green">4% </i> From last Week</span>
</div>
</div>
<div class="animated flipInY col-md-2 col-sm-4 col-xs-4 tile_stats_count">
<div class="left"></div>
<div class="right">
<span class="count_top"><i class="fa fa-clock-o"></i> Average Time</span>
<div class="count">123.50</div>
<span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>3% </i> From last Week</span>
</div>
</div>
<div class="animated flipInY col-md-2 col-sm-4 col-xs-4 tile_stats_count">
<div class="left"></div>
<div class="right">
<span class="count_top"><i class="fa fa-user"></i> Total Males</span>
<div class="count green">2,500</div>
<span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span>
</div>
</div>
<div class="animated flipInY col-md-2 col-sm-4 col-xs-4 tile_stats_count">
<div class="left"></div>
<div class="right">
<span class="count_top"><i class="fa fa-user"></i> Total Females</span>
<div class="count">4,567</div>
<span class="count_bottom"><i class="red"><i class="fa fa-sort-desc"></i>12% </i> From last Week</span>
</div>
</div>
<div class="animated flipInY col-md-2 col-sm-4 col-xs-4 tile_stats_count">
<div class="left"></div>
<div class="right">
<span class="count_top"><i class="fa fa-user"></i> Total Collections</span>
<div class="count">2,315</div>
<span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span>
</div>
</div>
<div class="animated flipInY col-md-2 col-sm-4 col-xs-4 tile_stats_count">
<div class="left"></div>
<div class="right">
<span class="count_top"><i class="fa fa-user"></i> Total Connections</span>
<div class="count">7,325</div>
<span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span>
</div>
</div>
</div>
<!-- /top tiles -->
<!-- file manager -->
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>File Manager</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a>
</li>
<li><a href="#">Settings 2</a>
</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div class="col-md-12 col-sm-12 col-xs-12" id="table_div">
<table id="datatable" class="table table-striped table-bordered jambo_table">
<thead>
<tr class="headings">
<th>Name</th>
<th>auth</th>
<th>Size</th>
<th>Date</th>
</tr>
</thead>
<tbody id="datatable_body">
<tr>
<td>
<a style='cursor: pointer' onclick="change_upper('<%=@current_dir%>')"><i class="fa fa-reply"></i></a>
<%= @current_dir %>
<a class='pull-right' href="#popup_mkdir"><i class="fa fa-plus"></i><i class="fa fa-folder"></i></a>
</td>
<td></td>
<td></td>
<td></td>
</tr>
<% @files.each do |t| %>
<tr class="dir_delete">
<% if t["auth"][0]=='d'%>
<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>
<% else %>
<td><i class="fa fa-file-o"></i>
<a href="/file_download?file_name=<%=(@current_dir+'/'+t['name']).gsub("/", "+")%>"><%=t['name']%></a>
</td>
<% end %>
<td><%=t["auth"]%></td>
<td><%=t["size"]%></td>
<td><%=t["date"]%></td>
</tr>
<% end %>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- /file manager -->
<!-- disk usage -->
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="x_panel tile fixed_height_320">
<div class="x_title">
<h2>App Versions</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a>
</li>
<li><a href="#">Settings 2</a>
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<h4>App Usage across versions</h4>
<div class="widget_summary">
<div class="w_left w_25">
<span>0.1.5.2</span>
</div>
<div class="w_center w_55">
<div class="progress">
<div class="progress-bar bg-green" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 66%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
</div>
<div class="w_right w_20">
<span>123k</span>
</div>
<div class="clearfix"></div>
</div>
<div class="widget_summary">
<div class="w_left w_25">
<span>0.1.5.3</span>
</div>
<div class="w_center w_55">
<div class="progress">
<div class="progress-bar bg-green" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 45%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
</div>
<div class="w_right w_20">
<span>53k</span>
</div>
<div class="clearfix"></div>
</div>
<div class="widget_summary">
<div class="w_left w_25">
<span>0.1.5.4</span>
</div>
<div class="w_center w_55">
<div class="progress">
<div class="progress-bar bg-green" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
</div>
<div class="w_right w_20">
<span>23k</span>
</div>
<div class="clearfix"></div>
</div>
<div class="widget_summary">
<div class="w_left w_25">
<span>0.1.5.5</span>
</div>
<div class="w_center w_55">
<div class="progress">
<div class="progress-bar bg-green" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 5%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
</div>
<div class="w_right w_20">
<span>3k</span>
</div>
<div class="clearfix"></div>
</div>
<div class="widget_summary">
<div class="w_left w_25">
<span>0.1.5.6</span>
</div>
<div class="w_center w_55">
<div class="progress">
<div class="progress-bar bg-green" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 2%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
</div>
<div class="w_right w_20">
<span>1k</span>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<!-- /disk usage -->
</div>
</div>
<!-- /page content -->
<!-- File manager functions -->
<script>
function change_upper(directory){
if(directory == "/") return;
var lastindex = directory.lastIndexOf("/");
if(lastindex == 0) lastindex++;
change_directory(directory.substring(0, lastindex));
}
function change_directory(directory){
$.ajax({
method: "POST",
url: "/application/changeDir",
data: { path: directory },
success : function(result){
$("#current-dir").val(directory);
$("#table_div").empty();
var new_table = "";
new_table += "<table id='datatable' class='table table-striped table-bordered jambo_table'>";
new_table += "<thead>";
new_table += "<tr class='headings'>";
new_table += "<th>Name</th>";
new_table += "<th>Auth</th>";
new_table += "<th>Size</th>";
new_table += "<th>Date</th>";
new_table += "</tr>";
new_table += "</thead>";
new_table += "<tbody id='datatable_body'>";
var new_tr = "";
new_tr += "<tr role='row' class='odd'>";
new_tr += "<td><a style='cursor: pointer' onclick='change_upper(" + '"' + directory + '"' +")'><i class='fa fa-reply'></i></a>";
new_tr += "&nbsp" + directory
new_tr += "<a class='pull-right' href='#popup_mkdir'><i class='fa fa-plus'></i><i class='fa fa-folder'></i></a></td>";
new_tr += "<td></td> <td></td> <td></td>"
new_tr += "</tr>";
for( var i = 0; i < result.file.length; i++){
var row_class = i % 2 == 0 ? 'odd' : 'even';
var cur = result.current != "/" ? result.current : '';
new_tr += "<tr role='row' class='dir_delete' class='" + row_class + "'>";
if(result.file[i].auth[0] == "d"){
new_tr += "<td style='color:#0d8ade;' class='sorting_1'><i class='fa fa-folder-open-o'></i> ";
new_tr += "<a style='cursor: pointer' onclick='change_directory(" +'"' + cur + "/" + result.file[i].name +'"'+ ")'>" + result.file[i].name + "</a></td>";
}else{
new_tr += "<td>";
new_tr += "<i class='fa fa-file-o'></i>"
new_tr += "<a href='/file_download?file_name="+ (cur + "/" + result.file[i].name).replace(/\//, "+") + "'> " + result.file[i].name + "</a>"
new_tr += "</td>";
}
new_tr += "<td>"+result.file[i].auth+"</td>";
new_tr += "<td>"+result.file[i].size+"</td>";
new_tr += "<td>"+result.file[i].date+"</td>";
new_tr += "</tr>";
}
new_table += new_tr;
new_table += "</tbody></table>"
$("#table_div").append(new_table);
$('#datatable').dataTable( {"bSort": false});
}
})
}
</script>
<!-- On document ready -->
<script>
$(document).ready(function() {
$('#datatable').dataTable( {"bSort": false});
});
</script>