- Add file browsing to the hard disk plugin

- Add beginning of the copy/delete/rename/move implementations
lamarios · May 6, 2017 · 38eadd3 · 38eadd3
1 parent 7cb3b9e
commit 38eadd3
Show file tree

Hide file tree

Showing 9 changed files with 324 additions and 97 deletions.
diff --git a/plugins/harddisk/src/main/java/assets/js/harddisk.js b/plugins/harddisk/src/main/java/assets/js/harddisk.js
@@ -7,9 +7,27 @@ function harddisk(moduleId) {
     this.onConnect = function () {
 
     };
+    this.path = ['.'];
 
     this.documentReady = function (size) {
+        if (size === 'full-screen') {
 
+            var self = this;
+            sendMessage(this.moduleId, 'browse', this.path.join('/'));
+
+            $('.files').on('click', 'tr.folder td:first-of-type', function () {
+                var file = $(this).attr('data-name');
+                if (file === '..' && self.path.length > 1) {
+                    self.path.pop();
+                } else {
+                    self.path.push(file);
+                }
+
+                $('.files tbody').html('<tr><td>Loading...</td></tr>');
+
+                sendMessage(self.moduleId, 'browse', self.path.join('/'));
+            });
+        }
     };
 
     this.onMessage_2x1 = function (command, message, extra) {
@@ -21,6 +39,24 @@ function harddisk(moduleId) {
         this.processData(message);
     };
 
+    this.onMessage_fullScreen = function (command, message, extra) {
+        if (command === 'refresh') {
+
+            var totalSpace = message.total;
+            var usedSpace = message.used;
+            var percentage = Math.ceil((usedSpace / totalSpace) * 100);
+
+            $('.mount').html(message.path);
+            $('.progress-bar').css('width', percentage + '%');
+            $('.progress-bar').html(message.pretty);
+
+        } else if (command === 'browse') {
+            $('.current-path').html(this.path.join('/'));
+            $('.files tbody').html(this.files2html(message));
+        }
+
+    }
+
     this.processData = function (diskSpace) {
 
         var root = rootElement(this.moduleId);
@@ -39,7 +75,7 @@ function harddisk(moduleId) {
     };
 
     this.generateSVG = function (percentage, usePercentage) {
-console.log('percentage', usePercentage);
+        console.log('percentage', usePercentage);
         var html = [];
         var opacity = (0.5 + 0.5 * usePercentage);
 
@@ -49,16 +85,16 @@ console.log('percentage', usePercentage);
         html.push('<polygon points="110,210 210,160 210,60 110,110" />');
         html.push('<polygon points="10,60 110,110 210,60 110,10" />');
 
-        html.push('<g opacity="',opacity,'">');
+        html.push('<g opacity="', opacity, '">');
         html.push('<!-- keep:bottom left, bottom right| change: top right, top left-->');
         //html.push('<polygon points="10,160 110,210 110,200 10,160">');
         html.push('<polygon points="10,160 110,210 110,', 110 + (100 - percentage), ' 10,',
-                  60 + 100 - percentage, '">');
+            60 + 100 - percentage, '">');
         //html.push('<animate attributeName="points" dur="1000ms" to="10,160 110,210
         // 110,',110+(100-percentage),' 10,',60+100-percentage,'" fill="freeze" />');
         html.push('</polygon>');
         html.push('<polygon points="110,210 210,160 210,', 60 + 100 - percentage, ' 110,',
-                  110 + 100 - percentage, '" >');
+            110 + 100 - percentage, '" >');
         //html.push('<polygon points="110,210 210,160 210,160 110,210" >');
         //html.push('<animate attributeName="points" dur="1000ms" to="110,210 210,160
         // 210,',60+100-percentage,' 110,',110+100-percentage,'" fill="freeze"/>');
@@ -75,4 +111,40 @@ console.log('percentage', usePercentage);
         return html.join('');
     }
 
+
+    this.files2html = function (files) {
+        var html = [];
+
+        if (this.path.length > 1) {
+            html.push('<tr class="folder"><td colspan="2"  data-name="..">..</td></tr>');
+        }
+
+        $.each(files, function (index, value) {
+            html.push('<tr ', value.folder ? 'class="folder"' : '', '>');
+
+
+            var icon = '<i class="fa fa-file-o" aria-hidden="true"></i>';
+
+            if (value.folder === true) {
+                icon = '<i class="fa fa-folder-o" aria-hidden="true"></i>';
+            }
+
+            html.push('<td data-name="', value.name, '">', icon, '&nbsp;', value.name, '</td>');
+
+            html.push('<td><div class="dropdown">');
+            html.push('<button class="btn btn-primary btn-sm" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">');
+            html.push('<i class="fa fa-ellipsis-v" aria-hidden="true"></i>');
+            html.push('</button>');
+            html.push('<ul class="dropdown-menu" aria-labelledby="dLabel">');
+            html.push('<li><a data-name="',value.name,'" class="add-clipboard">Add to clipboard</a></li>');
+            html.push('<li><a data-name="',value.name,'" class="rename">Rename</a></li>');
+            html.push('<li><a data-name="',value.name,'" class="delete">Delete</a></li>');
+            html.push('</ul>');
+            html.push('</div></td>')
+            html.push('</tr>');
+        });
+
+        return html.join('');
+    }
+
 }
diff --git a/plugins/harddisk/src/main/java/assets/less/harddisk.less b/plugins/harddisk/src/main/java/assets/less/harddisk.less
@@ -1,6 +1,6 @@
 @background: rgb(10, 127, 116);
 @speed: 3s;
-.harddisk {
+.harddisk.size-2x1, .harddisk.size-1x1 {
   background-color: @background;
   color: white;
   background-image: url("../files/images/disk.svg");
@@ -84,3 +84,11 @@
 
 }
 
+
+.harddisk.size-full-screen{
+
+  .files tr.folder{
+    cursor: pointer;
+  }
+}
+
diff --git a/plugins/harddisk/src/main/java/assets/templates/harddisk-full-screen.jade b/plugins/harddisk/src/main/java/assets/templates/harddisk-full-screen.jade
@@ -0,0 +1,14 @@
+h2 Info
+p
+    strong Mount:
+    span.mount
+.progress
+    .progress-bar(role="progressbar", style="width:0%")
+        span.sr-only.text
+
+h2 Browse
+p.current-path
+table.files.table.table-striped.table-hover
+    tbody
+
+.clipboard
diff --git a/plugins/harddisk/src/main/java/assets/templates/harddisk-settings.jade b/plugins/harddisk/src/main/java/assets/templates/harddisk-settings.jade
@@ -3,8 +3,8 @@
     each val, index in model
         .radio
             label
-                if(settings && settings.containsKey("uuid") && settings.get("uuid").equalsIgnoreCase(val.getUuid()))
-                    input(type="radio", name="uuid", value="#{index}", checked="true")
+                if(settings && settings.containsKey("mount") && settings.get("mount").equalsIgnoreCase(index))
+                    input(type="radio", name="mount", value="#{index}", checked="true")
                 else
-                    input(type="radio", name="uuid", value="#{index}")
-                | #{val.getMountPoint()}
+                    input(type="radio", name="mount", value="#{index}")
+                | #{index}
diff --git a/plugins/harddisk/src/main/java/com/ftpix/homedash/plugins/harddisk/DiskFile.java b/plugins/harddisk/src/main/java/com/ftpix/homedash/plugins/harddisk/DiskFile.java
@@ -0,0 +1,10 @@
+package com.ftpix.homedash.plugins.harddisk;
+
+/**
+ * Created by gz on 5/6/17.
+ */
+public class DiskFile {
+
+    public String name;
+    public boolean folder;
+}
diff --git a/plugins/harddisk/src/main/java/com/ftpix/homedash/plugins/harddisk/FileOperation.java b/plugins/harddisk/src/main/java/com/ftpix/homedash/plugins/harddisk/FileOperation.java
@@ -0,0 +1,8 @@
+package com.ftpix.homedash.plugins.harddisk;
+
+/**
+ * Created by gz on 5/6/17.
+ */
+public class FileOperation {
+    public String source, destination;
+}
diff --git a/plugins/harddisk/src/main/java/com/ftpix/homedash/plugins/harddisk/HardDiskInfo.java b/plugins/harddisk/src/main/java/com/ftpix/homedash/plugins/harddisk/HardDiskInfo.java