Update graph and table

app/controllers/application_controller.rb

@@ -3,6 +3,8 @@ class ApplicationController < ActionController::Base
     # For APIs, you may want to use :null_session instead.
     # protect_from_forgery with: :exception
     include ApplicationHelper
+    include HomeHelper
+    include VolumeHelper
 
     def require_login
         unless user_signed_in?
@@ -36,7 +38,12 @@ class ApplicationController < ActionController::Base
     def chdir
         @current_dir = params[:next_dir]
         puts "current_dir : " + @current_dir
-        render :json => {:dir => @current_dir}
+        render :json => {
+            :dir => @current_dir,
+            :file_manager_table => file_manager_table(@current_dir),
+            :disk_usage_table => disk_usage_table(@current_dir),
+            :du => get_du(@current_dir),
+        }
     end
 
     def rmdir

app/helpers/application_helper.rb

@@ -26,6 +26,54 @@ module ApplicationHelper
         return df
     end
 
+    def get_du(dir = @current_dir)
+        du = Array.new
+        du_each = Hash.new
+        command = String.new
+        avail = 0.0
+        if dir.eql? "/"
+            command = "sudo df /"
+            s = `#{command}`.split("\n")[1].split(" ")
+            avail = s[2].to_f + s[3].to_f
+            dir = ""
+        else
+            command << "sudo du -s #{dir}"
+            begin
+                avail = `#{command}`.split(" ")[0].to_f
+            rescue
+                # some directory is not connected
+                avail = `#{command}`.split(" ")[1].to_f
+            end
+        end
+
+        command = ""
+        command << "sudo du -s #{dir}/*"
+        puts command
+        output = `#{command}`.split("\n")
+        output.each do |t|
+            begin
+                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['usage'] = 0.0
+                du_each['file_name'] = t.split(" ")[1].split("/").last.split("'")[0]
+                du << du_each
+                du_each = Hash.new
+            end
+        end
+
+        if du.length == 0
+            du_each['usage'] = 1.0
+            du_each['file_name'] = "empty"
+            du << du_each
+        end
+
+        return du
+    end
+
     def volumes
         volumes = Array.new
         volume = Hash.new
@@ -83,51 +131,4 @@ module ApplicationHelper
         return files
     end
 
-    def file_manager_table(dir = "/mnt", id = "datatable", class_option = "table table-striped table-bordered jambo_table")
-        html = String.new
-        html << "<table id='#{id}' class='#{class_option}'>"
-        html << "<thead>"
-        html << "<tr class='headings'>"
-        html << "<th>Name</th>"
-        html << "<th>auth</th>"
-        html << "<th>Size</th>"
-        html << "<th>Date</th>"
-        html << "</tr>"
-        html << "</thead>"
-        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='pull-right' href='#popup_mkdir'><i class='fa fa-plus'></i><i class='fa fa-folder'></i></a>"
-        html << "</td>"
-        html << "<td></td>"
-        html << "<td></td>"
-        html << "<td></td>"
-        html << "</tr>"
-
-        files(dir).each do |file|
-            html << "<tr class='dir_delete'>"
-            if file["auth"][0]=='d'
-                html << "<td style='color:#0d8ade;'><i class='fa fa-folder-open-o'></i>"
-                html << "<a class='chdir' style='cursor: pointer'> #{file['name']}</a>"
-                html << "</td>"
-            else
-                conv_name = (dir + '/' + file['name']).gsub("/", "+")
-                html << "<td><i class='fa fa-file-o'></i>"
-                html << "<a href='/file_download?file_name=#{conv_name}'> #{file['name']}</a>"
-                html << "</td>"
-            end
-            html << "<td>#{file['auth']}</td>"
-            html << "<td>#{file['size']}</td>"
-            html << "<td>#{file["date"]}"
-            html << "<a class='pull-right rmdir' href='#'><i class='fa fa-trash'></i></a>"
-            html << "</td>"
-            html << "</tr>"
-        end
-
-        html << "</tbody>"
-        html << "</table>"
-        return raw html
-    end
 end

app/helpers/home_helper.rb

@@ -1,46 +1,54 @@
 module HomeHelper
 
-    def get_du(dir)
+    def file_manager_table(dir = @current_dir, id = "file_manager_table", class_option = "table table-striped table-bordered jambo_table")
-        du = Array.new
+        html = String.new
-        du_each = Hash.new
+        html << "<table id='#{id}' class='#{class_option}'>"
-        command = String.new
+        html << "<thead>"
-        avail = 0.0
+        html << "<tr class='headings'>"
-        if dir.eql? "/"
+        html << "<th>Name</th>"
-            command = "sudo df /"
+        html << "<th>auth</th>"
-            s = `#{command}`.split("\n")[1].split(" ")
+        html << "<th>Size</th>"
-            avail = s[2].to_f + s[3].to_f
+        html << "<th>Date</th>"
+        html << "</tr>"
+        html << "</thead>"
+        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='pull-right' href='#popup_mkdir'><i class='fa fa-plus'></i><i class='fa fa-folder'></i></a>"
+        html << "</td>"
+        html << "<td></td>"
+        html << "<td></td>"
+        html << "<td></td>"
+        html << "</tr>"
+
+        files(dir).each do |file|
+            html << "<tr class='dir_delete'>"
+            if file["auth"][0]=='d'
+                html << "<td style='color:#0d8ade;'><i class='fa fa-folder-open-o'></i>"
+                html << "<a class='chdir' style='cursor: pointer'> #{file['name']}</a>"
+                html << "</td>"
             else
-            command << "sudo du -s #{dir}"
+                conv_name = (dir + '/' + file['name']).gsub("/", "+")
-            begin
+                html << "<td><i class='fa fa-file-o'></i>"
-                avail = `#{command}`.split(" ")[0].to_f
+                html << "<a href='/file_download?file_name=#{conv_name}'> #{file['name']}</a>"
-            rescue
+                html << "</td>"
-                # some directory is not connected
-                avail = `#{command}`.split(" ")[1].to_f
             end
+            html << "<td>#{file['auth']}</td>"
+            html << "<td>#{file['size']}</td>"
+            html << "<td>#{file["date"]}"
+            html << "<a class='pull-right rmdir' href='#'><i class='fa fa-trash'></i></a>"
+            html << "</td>"
+            html << "</tr>"
         end
 
-        command = ""
+        html << "</tbody>"
-        command << "sudo du -s #{dir}/*"
+        html << "</table>"
-        puts command
+        return html
-        output = `#{command}`.split("\n")
-        output.each do |t|
-            begin
-                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['usage'] = 0.0
-                du_each['file_name'] = t.split(" ")[1].split("/").last.split("'")[0]
-                du << du_each
-                du_each = Hash.new
-            end
-        end
-        return du
     end
 
-    def disk_usage_table(dir = "/mnt")
+    def disk_usage_table(dir = @current_dir)
         html = String.new
         html << "<table class='' style='width:100%'>"
         html << "<tr>"
@@ -53,18 +61,18 @@ module HomeHelper
         html << "<p class=''>Usage</p></div>"
         html << "</th></tr>"
         html << "<tr>"
-        html << "<td><canvas id='canvas1' height='140' width='140' style='margin: 15px 10px 10px 0'></canvas></td>"
+        html << "<td><canvas id='disk_usage_canvas' height='140' width='140' style='margin: 15px 10px 10px 0'></canvas></td>"
         html << "<td>"
         html << "<table class='tile_info'>"
 
-        get_du(dir).each_with_index do |t, index|
+        get_du(dir).each_with_index do |file, index|
             color = ['blue', 'green', 'red', 'purple', 'grey'][index % 5]
             html << "<tr><td>"
             html << "<p><i class='fa fa-square #{color}'></i>"
-            html << t['file_name']
+            html << file['file_name']
             html << "</p></td>"
             html << "<td><p>"
-            html << format("%.2f", t['usage']*100) + "%"
+            html << format("%.2f", file['usage']*100) + "%"
             html << "</p></td>"
             html << "</tr>"
         end

app/views/home/index.html.erb

@@ -126,7 +126,7 @@
 				</div>
 				<div class="x_content">
 					<div class="col-md-12 col-sm-12 col-xs-12" id="file_manager_div">
-						<%= file_manager_table @current_dir %>
+						<%= raw file_manager_table %>
 					</div>
 				</div>
 			</div>
@@ -259,107 +259,30 @@
 		<!-- /node status -->
 	</div>
 
-</div>
 </div>
 <!-- /page content -->
 
-<!-- File manager functions -->
+<!-- on load -->
 <script>
-$(document).on("click", "#file_manager_div .chdir", function(){
+function draw_chart(du){
-	var file_name = $(this).text().trim();
-	var current_dir = $("#file_manager_div span").text();
-	var next_dir = current_dir + "/" + file_name;
-
-	$.ajax({
-		method: "POST",
-		url: "/application/chdir",
-		data: { next_dir : next_dir },
-		success  : function(result){
-			$("#current_dir").val(next_dir);
-			$("#file_manager_div").empty();
-			$("#file_manager_div").append("<%= file_manager_table(@current_dir) %>");
-			$('#datatable').dataTable( {"bSort": false});
-
-			// disk usage
-			$("disk_usage_div").empty();
-			$("disk_usage_div").append("<%= disk_usage_table %>");
-			draw_chart();
-		}
-	})
-})
-
-$(document).on("click", "#file_manager_div .chupper", function(){
-	var current_dir = $("#file_manager_div .chupper span").text();
-	if(current_dir == "/") return;
-	var lastindex = current_dir.lastIndexOf("/");
-	if(lastindex == 0) lastindex++;
-	var next_dir = current_dir.substring(0, lastindex);
-
-	$.ajax({
-		method: "POST",
-		url: "/application/chdir",
-		data: { next_dir : next_dir },
-		success  : function(result){
-			$("#current_dir").val(next_dir);
-			$("#file_manager_div").empty();
-			$("#file_manager_div").append("<%= file_manager_table(@current_dir) %>");
-			$('#datatable').dataTable( {"bSort": false});
-
-			// disk usage
-			$("disk_usage_div").empty();
-			$("disk_usage_div").append("<%= disk_usage_table %>");
-			draw_chart();
-		}
-	})
-})
-
-$(document).on("click", "#file_manager_div .rmdir", function(){
-	var file_name = $(this).text();
-	var current_dir = $("#file_manager_div .chupper span").text();
-	var target = current_dir + "/" + file_name;
-	if(confirm("Are you sure you want to delete '"+ file_name +"' ?")) {
-		$.ajax({
-			method: "POST",
-			url: "/application/delete",
-			data: { target : target },
-			success  : function(result){
-				$("#current_dir").val(current_dir);
-				$("#file_manager_div").empty();
-				$("#file_manager_div").append("<%= file_manager_table(@current_dir) %>");
-				$('#datatable').dataTable( {"bSort": false});
-
-				// disk usage
-				$("disk_usage_div").empty();
-				$("disk_usage_div").append("<%= disk_usage_table %>");
-				draw_chart();
-			}
-		})
-	}
-})
-</script>
-
-<!-- Doughnut Chart -->
-<script>
-function draw_chart() {
 	var options = {
 		legend: false,
 		responsive: false
 	};
-
 	var colors = ["#3498DB", "#26B99A", "#E74C3C", "#9B59B6", "#BDC3C7"];
 	var labels = [];
 	var data = [];
 	var backgroundColor = [];
 	var hoverBackgroundColor = [];
 
-	<% (get_du(@current_dir)).each_with_index do |t, index| %>
+	for(var i = 0; i < du.length; i++){
-	labels.push("<%= t['file_name'] %>");
+		labels.push(du[i]['file_name']);
-	data.push("<%= t['usage'] %>");
+		data.push(du[i]['usage']);
-	backgroundColor.push(colors[<%= index % 5 %>]);
+		backgroundColor.push(colors[i % 5]);
-	hoverBackgroundColor.push(colors[<%= index % 5 %>]);
+		hoverBackgroundColor.push(colors[i % 5]);
-	<% end %>
+	}
 
-	new Chart(document.getElementById("canvas1"), {
+	new Chart(document.getElementById("disk_usage_canvas"), {
 		type: 'doughnut',
 		tooltipFillColor: "rgba(51, 51, 51, 0.55)",
 		data: {
@@ -372,14 +295,117 @@ function draw_chart() {
 		},
 		options: options
 	});
-};
+}
-</script>
-<!-- /Doughnut Chart -->
 
-<!-- On document ready -->
+$(document).ready(function() {
-<script>
+	$('#file_manager_table').dataTable( {"bSort": false});
-$('document').ready(function() {
+
-	$('#datatable').dataTable( {"bSort": false});
+	var options = {
-	draw_chart();
+		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_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 -->
+
+<!-- File manager functions -->
+<script>
+// change directory
+$(document).on("click", "#file_manager_div .chdir", function(){
+	var file_name = $(this).text().trim();
+	var current_dir = $("#file_manager_div span").text().trim();
+	if(current_dir == "/") current_dir = "";
+	var next_dir = current_dir + "/" + file_name;
+
+	$.ajax({
+		method: "post",
+		url: "/application/chdir",
+		data: { next_dir : next_dir },
+		success  : function(result){
+			$("#current_dir").val(next_dir);
+			$("#file_manager_div").empty();
+			$("#file_manager_div").append(result.file_manager_table);
+			$("#disk_usage_div").empty();
+			$("#disk_usage_div").append(result.disk_usage_table);
+
+			$('#file_manager_table').dataTable( {"bSort": false});
+			draw_chart(result.du);
+		}
+	})
+})
+// change upper
+$(document).on("click", "#file_manager_div .chupper", function(){
+	var current_dir = $("#file_manager_div span").text().trim();
+	if(current_dir == "/") return;
+	var lastindex = current_dir.lastIndexOf("/");
+	console.log("curdir : " + current_dir);
+	console.log("last idx : " + lastindex);
+	if(lastindex == 0) lastindex++;
+	var next_dir = current_dir.substring(0, lastindex);
+
+	$.ajax({
+		method: "POST",
+		url: "/application/chdir",
+		data: { next_dir : next_dir },
+		success  : function(result){
+			$("#current_dir").val(next_dir);
+			$("#file_manager_div").empty();
+			$("#file_manager_div").append(result.file_manager_table);
+			$("#disk_usage_div").empty();
+			$("#disk_usage_div").append(result.disk_usage_table);
+
+			$('#file_manager_table').dataTable( {"bSort": false});
+			draw_chart(result.du);
+		}
+	})
+})
+
+$(document).on("click", "#file_manager_div .rmdir", function(){
+	var file_name = $(this).text().trim();
+	var current_dir = $("#file_manager_div span").text().trim();
+	var target = current_dir + "/" + file_name;
+	if(confirm("Are you sure you want to delete '"+ file_name +"' ?")) {
+		$.ajax({
+			method: "POST",
+			url: "/application/rmdir",
+			data: { target : target },
+			success  : function(result){
+				$("#current_dir").val(current_dir);
+				$("#file_manager_div").empty();
+				$("#file_manager_div").append(result.file_manager_table);
+				$("#disk_usage_div").empty();
+				$("#disk_usage_div").append(result.disk_usage_table);
+
+				$('#file_manager_table').dataTable( {"bSort": false});
+				draw_chart(result.du);
+			}
+		})
+	}
+})
 </script>