Add beginning of the file manager

Author: DaneEveritt

resources/assets/scripts/components/server/Server.vue

@@ -41,13 +41,15 @@
                     </div>
                 </div>
                 <div class="h-full w-full">
+                    <!--
                     <div class="mb-6 bg-white border rounded" v-if="$router.currentRoute.name !== 'server'">
                         <div class="flex">
                             <progress-bar title="Memory" percent="33" class="flex-1 p-4 pb-6"></progress-bar>
                             <progress-bar title="CPU" percent="80" class="flex-1 p-4 pb-6"></progress-bar>
                             <progress-bar title="Disk" percent="97" class="flex-1 p-4 pb-6"></progress-bar>
                         </div>
                     </div>
+                    -->
                     <div class="bg-white p-6 rounded border border-grey-light">
                         <router-view></router-view>
                     </div>

resources/assets/scripts/components/server/subpages/FileManager.vue

@@ -1,13 +1,123 @@
 <template>
-
+    <div>
+        <div v-if="loading">
+            <div class="spinner spinner-xl blue"></div>
+        </div>
+        <div class="filemanager" v-else>
+            <div class="header">
+                <div class="flex-none w-8"></div>
+                <div class="flex-1">Name</div>
+                <div class="flex-1 text-right">Size</div>
+                <div class="flex-1 text-right">Modified</div>
+                <div class="flex-none w-1/6">Actions</div>
+            </div>
+            <div class="row" v-for="folder in folders">
+                <div class="flex-none icon"><folder-icon/></div>
+                <div class="flex-1">{{folder.name}}</div>
+                <div class="flex-1 text-right text-grey-dark"></div>
+                <div class="flex-1 text-right text-grey-dark">{{formatDate(folder.modified)}}</div>
+                <div class="flex-none w-1/6"></div>
+            </div>
+            <div class="row" v-for="file in files">
+                <div class="flex-none icon">
+                    <file-text-icon v-if="!file.symlink"/>
+                    <link2-icon v-else/>
+                </div>
+                <div class="flex-1">{{file.name}}</div>
+                <div class="flex-1 text-right text-grey-dark">{{readableSize(file.size)}}</div>
+                <div class="flex-1 text-right text-grey-dark">{{formatDate(file.modified)}}</div>
+                <div class="flex-none w-1/6"></div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
+    import filter from 'lodash/filter';
+    import format from 'date-fns/format';
+    import { mapState } from 'vuex';
+    import { FileTextIcon, FolderIcon, Link2Icon } from 'vue-feather-icons';
+
     export default {
-        name: 'file-manager-page'
-    };
-</script>
+        name: 'file-manager-page',
+        components: { FileTextIcon, FolderIcon, Link2Icon },
+
+        computed: {
+            ...mapState('server', ['server', 'credentials']),
+        },
+
+        data: function () {
+            return {
+                directory: '/',
+                loading: true,
+
+                files: [],
+                folders: [],
+            };
+        },
+
+        mounted: function () {
+            this.listDirectory();
+        },
 
-<style scoped>
+        methods: {
+            /**
+             * List the contents of a directory.
+             */
+            listDirectory: function () {
+                window.axios.get(`${this.credentials.node}/v1/server/directory/${this.directory}`, {
+                    headers: {
+                        'X-Access-Server': this.server.uuid,
+                        'X-Access-Token': this.credentials.key,
+                    }
+                })
+                    .then((response) => {
+                        this.files = filter(response.data, function (o) {
+                            return o.file;
+                        });
 
-</style>
+                        this.folders = filter(response.data, function (o) {
+                            return o.directory;
+                        });
+                    })
+                    .catch(console.error)
+                    .finally(() => {
+                        this.loading = false;
+                    });
+            },
+
+            /**
+             * Return the human readable filesize for a given number of bytes. This
+             * uses 1024 as the base, so the response is denoted accordingly.
+             *
+             * @param {Number} bytes
+             * @return {String}
+             */
+            readableSize: function (bytes) {
+                if (Math.abs(bytes) < 1024) {
+                    return `${bytes} Bytes`;
+                }
+
+                let u = -1;
+                const units = ['KiB', 'MiB', 'GiB', 'TiB'];
+
+                do {
+                    bytes /= 1024;
+                    u++;
+                } while (Math.abs(bytes) >= 1024 && u < units.length - 1);
+
+                return `${bytes.toFixed(1)} ${units[u]}`
+            },
+
+            /**
+             * Format the given date as a human readable string.
+             *
+             * @param {String} date
+             * @return {String}
+             */
+            formatDate: function (date) {
+                return format(date, 'MMM D, YYYY [at] HH:MM');
+            },
+        }
+    };
+</script>

resources/assets/styles/components/filemanager.css

@@ -0,0 +1,28 @@
+.filemanager {
+  & > .header {
+    @apply .flex .text-sm .pb-4 .font-bold .border-b .border-grey-light .mb-3;
+
+    & > div {
+      @apply .pr-4;
+    }
+  }
+
+  & > .row {
+    @apply .flex .text-sm .py-3 .text-sm .rounded .cursor-pointer .border .border-transparent;
+
+    & > div {
+      @apply .pr-4;
+    }
+
+    &:hover {
+      @apply .bg-grey-lightest .border-blue-light .text-blue-dark;
+    }
+
+    & > .icon {
+      @apply .w-8 .text-center;
+      & > svg {
+        @apply .h-4;
+      }
+    }
+  }
+}

resources/assets/styles/main.css

@@ -16,6 +16,7 @@
 @import "components/navigation.css";
 @import "components/notifications.css";
 @import "components/spinners.css";
+@import "components/filemanager.css";
 
 /**
  * Tailwind Utilities