From fbea26361dc123565b6e0f8d1c4c3c8cabe6ca8f Mon Sep 17 00:00:00 2001
From: kyg516 <kyg_516@naver.com>
Date: Thu, 29 Sep 2016 01:39:22 +0900
Subject: [PATCH] Update dashboard

---
 app/helpers/application_helper.rb |   7 +-
 app/helpers/home_helper.rb        |  14 ++-
 app/views/home/index.html.erb     | 187 +++++++++++++-----------------
 config/routes.rb                  |   4 +-
 4 files changed, 97 insertions(+), 115 deletions(-)

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index f8461dc..a79846c 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -52,12 +52,14 @@ module ApplicationHelper
         output = `#{command}`.split("\n")
         output.each do |t|
             begin
+                du_each['size'] = t.split(" ")[0].to_i
                 du_each['usage'] = t.split(" ")[0].to_f / avail
                 du_each['file_name'] = t.split(" ")[1].split("/").last
                 du << du_each
                 du_each = Hash.new
             rescue
                 # directory is not connected
+                du_each['size'] = 0
                 du_each['usage'] = 0.0
                 du_each['file_name'] = t.split(" ")[1].split("/").last.split("'")[0]
                 du << du_each
@@ -66,11 +68,14 @@ module ApplicationHelper
         end
 
         if du.length == 0
+            du_each['size'] = 0
             du_each['usage'] = 1.0
             du_each['file_name'] = "empty"
             du << du_each
         end
-
+        
+        du.sort_by! { |k| k['usage'] }
+        du.reverse!
         return du
     end
 
diff --git a/app/helpers/home_helper.rb b/app/helpers/home_helper.rb
index c4e72e9..858b494 100644
--- a/app/helpers/home_helper.rb
+++ b/app/helpers/home_helper.rb
@@ -14,8 +14,8 @@ module HomeHelper
         html << "<tbody id='#{id}_body'>"
         html << "<tr>"
         html << "<td>"
-        html << "<a class='chupper' style='cursor: pointer'><i class='fa fa-reply'></i></a>"
-        html << "<span style='line-height:0'> #{dir}</span>"
+        html << "<a class='chupper' style='cursor: pointer'><i class='fa fa-reply'></i></a> "
+        html << "<span style='line-height:0'>#{dir}</span>"
         html << "<a class='pull-right' href='#popup_mkdir'><i class='fa fa-plus'></i><i class='fa fa-folder'></i></a>"
         html << "</td>"
         html << "<td></td>"
@@ -63,7 +63,14 @@ module HomeHelper
         html << "<tr>"
         html << "<td><canvas id='#{id}_canvas' height='140' width='140' style='margin: 15px 10px 10px 0'></canvas></td>"
         html << "<td>"
-        html << "<table class='tile_info'>"
+        html << "<table id='disk_usage_tile_table' class='tile_info'>"
+        html << "<thead>"
+        html << "<tr class='headings'>"
+        html << "<th></th>"
+        html << "<th></th>"
+        html << "</tr>"
+        html << "</thead>"
+        html << "<tbody>"
 
         get_du(dir).each_with_index do |file, index|
             color = ['blue', 'green', 'red', 'purple', 'grey'][index % 5]
@@ -80,6 +87,7 @@ module HomeHelper
             html << "</td></tr>"
         end
 
+        html << "</tbody>"
         html << "</table>"
         html << "</td></tr>"
         html << "</table>"
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
index 5ed14db..3028d33 100644
--- a/app/views/home/index.html.erb
+++ b/app/views/home/index.html.erb
@@ -106,7 +106,7 @@
 		<!-- file manager -->
 		<div class="col-md-8 col-sm-8 col-xs-12">
 			<div class="panel panel-body">
-				<div class="x_title" id="file_manager_filter_div">
+				<div class="x_title" id="file_manager_title_div">
 					<h2 style="width:130px">File Manager</h2>
 				</div>
 				<div class="row">
@@ -121,8 +121,8 @@
 		<!-- disk usage -->
 		<div class="col-md-4 col-sm-4 col-xs-12">
 			<div class="panel panel-body">
-				<div class="x_title">
-					<h4>Disk usage</h4>
+				<div class="x_title" id="disk_usage_title_div">
+					<h2 style="width:130px">Disk usage</h2>
 				</div>
 				<div class="row" id="disk_usage_div">
 					<%= raw disk_usage_table %>
@@ -247,8 +247,64 @@
 </div>
 <!-- /page content -->
 
-<!-- on load -->
+<!-- On ready -->
 <script>
+$(document).ready(function() {
+	var du = [];
+	<% get_du.each_with_index do |du, index| %>
+	du.push({
+		'file_name':"<%= du['file_name'] %>",
+		'usage':"<%= du['usage'] %>"
+	});
+	<% end %>
+	draw_datatable();
+	draw_chart(du);
+})
+</script>
+<!-- /On ready -->
+
+<!-- Datatable functions -->
+<script>
+function draw_datatable(){
+	$('#file_manager_table').dataTable( {
+		"bSort": false,
+		initComplete: function(){
+			$('#file_manager_table_filter').detach().appendTo("#file_manager_title_div").css({
+				'width':'250px'
+			});
+			$('#file_manager_table_length').detach().appendTo("#file_manager_title_div").css({
+				'width':'150px',
+				'float':'right'
+			});
+			$('#file_manager_title_div').css({
+				'width':'100%',
+				'height':'48px',
+			});
+			$('#file_manager_title_div input').css({
+				'width':'70%',
+				'height':'70%',
+				'font-size':'14px',
+				'padding':'5px'
+			});
+		}
+	});
+
+	$('#disk_usage_tile_table').dataTable({
+		"bSort":false,
+		"bFilter":false,
+		"bInfo":false,
+		initComplete: function(){
+			$('#disk_usage_tile_table_length').detach().appendTo("#disk_usage_title_div").css({
+				'width':'150px',
+				'float':'right'
+			});
+			$('#disk_usage_title_div').css({
+				'width':'100%',
+				'height':'48px',
+			});
+		}
+	});
+}
 function draw_chart(du){
 	var options = {
 		legend: false,
@@ -263,8 +319,8 @@ function draw_chart(du){
 	for(var i = 0; i < du.length; i++){
 		labels.push(du[i]['file_name']);
 		data.push(du[i]['usage']);
-		backgroundColor.push(colors[i % 5]);
-		hoverBackgroundColor.push(colors[i % 5]);
+		backgroundColor.push(colors[i % colors.length]);
+		hoverBackgroundColor.push(colors[i % colors.length]);
 	}
 
 	new Chart(document.getElementById("disk_usage_table_canvas"), {
@@ -281,89 +337,8 @@ function draw_chart(du){
 		options: options
 	});
 }
-
-$(document).ready(function() {
-	var table = $('#file_manager_table').dataTable( {
-		"bSort": false,
-		initComplete: function(){
-			$('#file_manager_table_filter').detach().appendTo("#file_manager_filter_div").css({
-				'width':'250px'
-			});
-			$('#file_manager_table_length').detach().appendTo("#file_manager_filter_div").css({
-				'width':'150px',
-				'float':'right'
-			});
-			$('#file_manager_filter_div').css({
-				'width':'100%',
-				'height':'48px',
-			});
-			$('#file_manager_filter_div input').css({
-				'width':'70%',
-				'height':'70%',
-				'font-size':'14px',
-				'padding':'5px'
-			});
-		}
-	});
-	
-	var table = $('#tile_info').dataTable( {
-		"bSort": false//,
-		/*
-		initComplete: function(){
-			$('#file_manager_table_filter').detach().appendTo("#file_manager_filter_div").css({
-				'width':'250px'
-			});
-			$('#file_manager_table_length').detach().appendTo("#file_manager_filter_div").css({
-				'width':'150px',
-				'float':'right'
-			});
-			$('#tile_info_div').css({
-				'width':'100%',
-				'height':'48px',
-			});
-			$('#file_manager_filter_div input').css({
-				'width':'70%',
-				'height':'70%',
-				'font-size':'14px',
-				'padding':'5px'
-			});
-		}
-		*/
-	});
-
-	var options = {
-		legend: false,
-		responsive: false
-	};
-	var colors = ["#3498DB", "#26B99A", "#E74C3C", "#9B59B6", "#BDC3C7"];
-	var labels = [];
-	var data = [];
-	var backgroundColor = [];
-	var hoverBackgroundColor = [];
-
-	<% get_du.each_with_index do |du, index| %>
-	labels.push("<%= du['file_name'] %>");
-	data.push("<%= du['usage'] %>");
-	backgroundColor.push(colors[<%= index %> % 5]);
-	hoverBackgroundColor.push(colors[<%= index %> % 5]);
-	<% end %>
-
-	new Chart(document.getElementById("disk_usage_table_canvas"), {
-		type: 'doughnut',
-		tooltipFillColor: "rgba(51, 51, 51, 0.55)",
-		data: {
-			labels: labels,
-			datasets: [{
-				data: data,
-				backgroundColor: backgroundColor,
-				hoverBackgroundColor: hoverBackgroundColor
-			}]
-		},
-		options: options
-	});
-})
 </script>
-<!-- /on load -->
+<!-- /Datatable functions -->
 
 <!-- File manager functions -->
 <script>
@@ -380,14 +355,12 @@ $(document).on("click", "#file_manager_div .chdir", function(){
 		data: { next_dir : next_dir },
 		success  : function(result){
 			$("#current_dir").val(next_dir);
-			$("#file_manager_div").empty();
-			$("#disk_usage_div").empty();
-			$("#file_manager_div").append(result.file_manager_table);
-			$("#disk_usage_div").append(result.disk_usage_table);
+			$("#file_manager_title_div").empty().append("<h2 style='width:130px'>File manager</h2>");
+			$("#disk_usage_title_div").empty().append("<h2 style='width:130px'>Disk usage</h2>");
+			$("#file_manager_div").empty().append(result.file_manager_table);
+			$("#disk_usage_div").empty().append(result.disk_usage_table);
 
-			$('#file_manager_table').dataTable( {
-				"bSort": false
-			});
+			draw_datatable();
 			draw_chart(result.du);
 		}
 	})
@@ -408,14 +381,12 @@ $(document).on("click", "#file_manager_div .chupper", function(){
 		data: { next_dir : next_dir },
 		success  : function(result){
 			$("#current_dir").val(next_dir);
-			$("#file_manager_div").empty();
-			$("#disk_usage_div").empty();
-			$("#file_manager_div").append(result.file_manager_table);
-			$("#disk_usage_div").append(result.disk_usage_table);
+			$("#file_manager_title_div").empty().append("<h2 style='width:130px'>File manager</h2>");
+			$("#disk_usage_title_div").empty().append("<h2 style='width:130px'>Disk usage</h2>");
+			$("#file_manager_div").empty().append(result.file_manager_table);
+			$("#disk_usage_div").empty().append(result.disk_usage_table);
 
-			$('#file_manager_table').dataTable( {
-				"bSort": false
-			});
+			draw_datatable();
 			draw_chart(result.du);
 		}
 	})
@@ -432,14 +403,12 @@ $(document).on("click", "#file_manager_div .rmdir", function(){
 			data: { target : target },
 			success  : function(result){
 				$("#current_dir").val(current_dir);
-				$("#file_manager_div").empty();
-				$("#disk_usage_div").empty();
-				$("#file_manager_div").append(result.file_manager_table);
-				$("#disk_usage_div").append(result.disk_usage_table);
+				$("#file_manager_title_div").empty().append("<h2 style='width:130px'>File manager</h2>");
+				$("#disk_usage_title_div").empty().append("<h2 style='width:130px'>Disk usage</h2>");
+				$("#file_manager_div").empty().append(result.file_manager_table);
+				$("#disk_usage_div").empty().append(result.disk_usage_table);
 
-				$('#file_manager_table').dataTable( {
-					"bSort": false
-				});
+				draw_datatable();
 				draw_chart(result.du);
 			}
 		})
diff --git a/config/routes.rb b/config/routes.rb
index b5611a8..c0fe943 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -6,18 +6,18 @@ Rails.application.routes.draw do
   # You can have the root of your site routed with "root"
   root 'home#index'
 
-  post 'application/changeDir' => 'application#checkDir'
-
   get 'index' => 'plainpage#index'
 
   #Home
   get 'file_download' => 'home#file_download'
   get 'home/index' => 'home#index'
+  post 'home/chdir' => 'home#chdir'
   post 'home/mkdir' => 'home#make_directory'
   post 'home/delete' => 'home#delete_file'
 
   #Volume
   get 'volume/index' => 'volume#index'
+  post 'volume/chdir' => 'volume#chdir'
   post 'file_upload/:volume_name' => 'volume#file_upload'
   post 'volume/mount' => "volume#volume_mount"
   post 'volume/create' => "volume#volume_create"