listing files and dirs

css/main.css

@@ -0,0 +1,61 @@
+
+body > .container:first-child {
+    margin: 3rem auto;
+}
+
+a {
+    text-decoration: none;
+}
+
+.file-list {
+    list-style: none;
+}
+
+.file-list li {
+    margin: 1rem 0;
+}
+
+.file-list .file-name {
+    line-height: 4rem;
+    display: inline-block;
+    position: relative;
+    padding-left: 4rem;
+    min-width: 70%;
+}
+
+.file-list .file-name::before {
+    background: no-repeat center center;
+    background-size: contain;
+    width: 3rem;
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.file-list .directory .file-name::before {
+    background-image: url(../image/directory.png);
+
+}
+
+.file-list .file .file-name::before {
+    background-image: url(../image/file.png);
+}
+
+.file-list .other .file-name::before {
+    background-image: url(../image/other.png);
+}
+
+.file-list .file-link {
+
+}
+
+.file-list .file-date {
+
+}
+
+.file-list .file-size {
+
+}

index.html

@@ -16,11 +16,11 @@
 
 <div class="container">
     <h1>Files</h1>
-    <ul id="file-list">
+    <ul id="file-list" class="file-list">
        <li>
-           <i class="file-type directory|file"></i>
-           <a class="file-name-link" href="#download|browse">file name</a>
-           <span class="file-date">10.02.2016 10:45</span>
+           <a href="#" class="file-name file-link"></a>
+           <span class="file-date"></span>
+           <span class="file-size"></span>
        </li>
     </ul>
 </div>

js/main.js

@@ -0,0 +1,107 @@
+/**
+ * Created by mohamnag on 11/02/16.
+ */
+
+
+
+$(document).ready(function () {
+
+    var filesBaseUrl = "http://192.168.1.64:30080/files";
+
+    var fileListElement = $("#file-list");
+    var fileItemElementTemplate = fileListElement.find("li").detach();
+
+    function renderFileElement(directory, fileName, fileType, fileSize, fileDate) {
+
+        var fileItemElement = fileItemElementTemplate.clone();
+
+        fileItemElement.addClass(fileType);
+        fileItemElement.find(".file-name").text(fileName);
+
+        if (fileDate) {
+            fileItemElement.find(".file-date").text(moment(fileDate).fromNow());
+        }
+
+        if (fileType === "directory") {
+            if (fileName === "..") {
+                // navigate to parent dir
+                fileItemElement.find(".file-link").click(function () {
+                    navigateTo(directory);
+                });
+
+            } else {
+                // navigate to sub dir
+                fileItemElement.find(".file-link").click(function () {
+                    navigateTo(directory + fileName + "/");
+                });
+            }
+
+        } else if (fileType === "other") {
+            // nginx returns symlinks as type other,
+            // lets try to follow the links
+            fileItemElement.find(".file-link").click(function () {
+                navigateTo(directory + fileName + "/");
+            });
+
+        } else {
+            // just file dl
+            fileItemElement.find(".file-link")
+                .attr("href", directory + fileName)
+                .attr("target", "_blank");
+        }
+
+        if (fileSize) {
+            fileItemElement.find(".file-size").text(fileSize);
+        }
+
+        return fileItemElement;
+    }
+
+    function getParentDir(path) {
+
+        if (path.length <= 1) {
+            return null;
+        }
+
+        var lastSlashPos = path.lastIndexOf("/", path.length - 2);
+        var parentDir = lastSlashPos >= 0 ? path.substr(0, lastSlashPos + 1) : null;
+
+        return parentDir;
+    }
+
+    function navigateTo(path) {
+        console.log("navigateTo", path);
+
+        $.ajax({
+            url: filesBaseUrl + path,
+            success: function (filesData) {
+
+                fileListElement.empty();
+
+                var parentDir = getParentDir(path);
+
+                if (parentDir) {
+                    fileListElement.append(renderFileElement(
+                        parentDir,
+                        "..",
+                        "directory"
+                    ));
+                }
+
+                filesData.forEach(function (fileData) {
+                    fileListElement.append(renderFileElement(
+                        path,
+                        fileData.name,
+                        fileData.type,
+                        fileData.size,
+                        fileData.mtime
+                    ));
+                });
+
+            }
+        });
+    }
+
+    navigateTo("/");
+
+});