Added icons defining the type of the file

Co-authored-by: LarsVomMars <lars@kroenner.eu>

4 files changed, 31 insertions, 11 deletions

diff --git a/src/main/kotlin/FileController.kt b/src/main/kotlin/FileController.kt
index cb2b0f7..e8526cf 100644
--- a/src/main/kotlin/FileController.kt
+++ b/src/main/kotlin/FileController.kt
@@ -33,6 +33,7 @@ class FileController {
                                 humanReadableBytes(fileSize),
                                 SimpleDateFormat("MM/dd/yyyy HH:mm:ss").format(file.lastModified()).toString(),
                                 if (file.isDirectory) "true" else isHumanReadable(file).toString(),
+                                file.isDirectory.toString(),
                                 fileSize.toString(), // unformatted file size
                                 file.lastModified().toString() // unformatted last modified date
                             )
diff --git a/src/main/resources/css/files.css b/src/main/resources/css/files.css
index c7302bf..bcc97b9 100644
--- a/src/main/resources/css/files.css
+++ b/src/main/resources/css/files.css
@@ -37,25 +37,29 @@ tr td, tr th {
 }
 
 colgroup col:nth-child(1) {
-    width: 40%;
+    width: 5%;
 }
 
 colgroup col:nth-child(2) {
-    width: 15%;
+    width: 35%;
 }
 
 colgroup col:nth-child(3) {
-    width: 25%;
+    width: 15%;
 }
 
 colgroup col:nth-child(4) {
-    width: 10%;
+    width: 25%;
 }
 
 colgroup col:nth-child(5) {
     width: 10%;
 }
 
+colgroup col:nth-child(6) {
+    width: 10%;
+}
+
 .drop {
     padding: 8px;
     min-height: calc(100vh - 16px);
diff --git a/src/main/resources/js/files.js b/src/main/resources/js/files.js
index 024f74f..523df0d 100644
--- a/src/main/resources/js/files.js
+++ b/src/main/resources/js/files.js
@@ -30,11 +30,13 @@ drop.addEventListener('drop', e => {
 
         const row = document.getElementById("table").insertRow(-1);
         row.setAttribute("data-href", file.name);
-        row.insertCell(0).innerHTML = file.name;
-        row.insertCell(1).innerHTML = bytesToSize(file.size);
-        row.insertCell(2).innerHTML = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
-        row.insertCell(3).innerHTML = "<td><button class='share'><i class='icon ion-md-share'></i></button></td>";
-        row.insertCell(4).innerHTML = "<td><button class='delete'><i class='icon ion-md-trash'></i></button></td>";
+        // TODO: Differentiate between file and directory upload in frontend
+        row.insertCell(0).innerHTML = "<td><i class='icon ion-md-document'></i></td>";
+        row.insertCell(1).innerHTML = file.name;
+        row.insertCell(2).innerHTML = bytesToSize(file.size);
+        row.insertCell(3).innerHTML = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+        row.insertCell(4).innerHTML = "<td><button class='share'><i class='icon ion-md-share'></i></button></td>";
+        row.insertCell(5).innerHTML = "<td><button class='delete'><i class='icon ion-md-trash'></i></button></td>";
 
         setListeners();
 
diff --git a/src/main/resources/views/files.rocker.html b/src/main/resources/views/files.rocker.html
index 0e42891..a31f6bb 100644
--- a/src/main/resources/views/files.rocker.html
+++ b/src/main/resources/views/files.rocker.html
@@ -28,10 +28,12 @@
             <col/>
             <col/>
             <col/>
+            <col/>
         </colgroup>
 
         <thead>
         <tr>
+            <th data-asc="true"></th>
             <th data-asc="true">Name</th>
             <th data-asc="true">Size</th>
             <th data-asc="true">Last modified</th>
@@ -39,6 +41,7 @@
             <th data-asc="true">Delete</th>
         </tr>
         <tr data-href="../">
+            <td></td>
             <td>../</td>
             <td></td>
             <td></td>
@@ -54,9 +57,19 @@
             } else {
         <tr data-path="@fileArray[0]">
             }
+
+            <!-- TODO: Add more icons (more specific file types) -->
+            @if (fileArray[4] == "true") {
+            <td><i class="icon ion-md-folder"></i></td>
+            } else if (fileArray[3] == "false") {
+            <td><i class="icon ion-md-code"></i></td>
+            } else {
+            <td><i class="icon ion-md-document"></i></td>
+            }
+
             <td>@fileArray[0]</td>
-            <td data-size="@fileArray[4]">@fileArray[1]</td>
-            <td data-date="@fileArray[5]">@fileArray[2]</td>
+            <td data-size="@fileArray[5]">@fileArray[1]</td>
+            <td data-date="@fileArray[6]">@fileArray[2]</td>
             <td>
                 <button class="share"><i class="icon ion-md-share"></i></button>
             </td>