From a42280dd8459ac5f601ec32eb4d52eb78041202c Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sun, 15 Jul 2018 19:47:31 -0700
Subject: [PATCH] Begin working on sidebar styling for server view

---
 .../scripts/components/server/Server.vue      | 76 ++++++++++---------
 .../components/server/ServerConsole.vue       |  2 +-
 .../server/components/ProgressBar.vue         | 42 ++++++++++
 3 files changed, 84 insertions(+), 36 deletions(-)
 create mode 100644 resources/assets/scripts/components/server/components/ProgressBar.vue

diff --git a/resources/assets/scripts/components/server/Server.vue b/resources/assets/scripts/components/server/Server.vue
index f15dcff0b..0322d2696 100644
--- a/resources/assets/scripts/components/server/Server.vue
+++ b/resources/assets/scripts/components/server/Server.vue
@@ -1,41 +1,45 @@
 <template>
     <div>
         <navigation></navigation>
-        <div class="p-2 flex flex-no-shrink rounded">
+        <div class="m-6 flex flex-no-shrink rounded">
             <div class="sidebar border-grey-lighter flex-no-shrink w-1/3 max-w-xs">
+                <div class="mr-6">
+                    <div class="p-6 text-center bg-white border rounded">
+                        <h3 class="mb-2 text-blue font-medium">Pterodactylcraft</h3>
+                        <span class="text-grey-dark text-sm">Minecraft / Vanilla</span>
+                    </div>
+                    <div class="mt-6 p-4 text-center bg-white border rounded">
+                        <button class="btn btn-red uppercase text-xs px-4 py-2">Stop</button>
+                        <button class="btn btn-secondary uppercase text-xs px-4 py-2">Restart</button>
+                        <button class="btn btn-secondary uppercase text-xs px-4 py-2">Kill</button>
+                    </div>
+                    <div class="mt-6 p-4 bg-white border rounded">
+                        <progress-bar title="Memory" percent="33"></progress-bar>
+                        <progress-bar title="CPU" percent="80" class="mt-4"></progress-bar>
+                        <progress-bar title="Disk" percent="97" class="mt-4"></progress-bar>
+                    </div>
+                </div>
                 <div class="pt-6 px-6 pb-4 text-center">
-                    <h3 class="mb-2 text-blue">Pterodactylcraft</h3>
-                    <span class="text-grey-dark">Minecraft / Vanilla</span>
-                    <div class="text-lg my-4"><span class="text-green">●</span> Running</div>
-                    <div>
-                        <button class="btn btn-red">Stop</button>
-                        <button class="btn btn-blue">Restart</button>
-                        <button class="btn btn-red">Kill</button>
-                    </div>
-                    <div class="mt-8 mb-6 text-grey-dark border-t border-grey-light usage">
-                        <span class="bg-grey-lighter">CPU - 2 Cores</span>
-                        <div class="rounded border-grey-light border mt-3 h-4">
-                            <div class="rounded bg-blue h-4 w-1/6"></div>
-                        </div>
-                        <div class="mt-8 mb-6 text-grey-dark border-t border-grey-light usage">
-                            <span class="bg-grey-lighter">CPU - 2 Cores</span>
-                            <div class="rounded border-grey-light border mt-3 h-4">
-                                <div class="rounded bg-blue h-4 w-1/6"></div>
-                            </div>
-                        </div>
-                        <div class="my-6 text-grey-dark border-t border-grey-light usage">
-                            <span class="bg-grey-lighter">RAM - 4 GB</span>
-                            <div class="rounded border-grey-light border mt-3 h-4">
-                                <div class="rounded bg-blue h-4 w-2/3"></div>
-                            </div>
-                        </div>
-                        <div class="my-6 text-grey-dark border-t border-grey-light usage">
-                            <span class="bg-grey-lighter">Disk - 20 GB</span>
-                            <div class="rounded border-grey-light border mt-3 h-4">
-                                <div class="rounded bg-blue h-4 w-1/3"></div>
-                            </div>
-                        </div>
-                    </div>
+                    <!--<div class="mt-8 mb-6 text-grey-dark border-t border-grey-light usage">-->
+                        <!--<div class="mt-8 mb-6 text-grey-dark border-t border-grey-light usage">-->
+                            <!--<span class="bg-grey-lighter">CPU - 2 Cores</span>-->
+                            <!--<div class="rounded border-grey-light border mt-3 h-4">-->
+                                <!--<div class="rounded bg-blue h-4 w-1/6"></div>-->
+                            <!--</div>-->
+                        <!--</div>-->
+                        <!--<div class="my-6 text-grey-dark border-t border-grey-light usage">-->
+                            <!--<span class="bg-grey-lighter">RAM - 4 GB</span>-->
+                            <!--<div class="rounded border-grey-light border mt-3 h-4">-->
+                                <!--<div class="rounded bg-blue h-4 w-2/3"></div>-->
+                            <!--</div>-->
+                        <!--</div>-->
+                        <!--<div class="my-6 text-grey-dark border-t border-grey-light usage">-->
+                            <!--<span class="bg-grey-lighter">Disk - 20 GB</span>-->
+                            <!--<div class="rounded border-grey-light border mt-3 h-4">-->
+                                <!--<div class="rounded bg-blue h-4 w-1/3"></div>-->
+                            <!--</div>-->
+                        <!--</div>-->
+                    <!--</div>-->
                 </div>
                 <div class="sidenav">
                     <router-link :to="{ name: 'server', params: { serverID: this.$route.params.serverID } }">
@@ -77,13 +81,15 @@
 </template>
 
 <script>
-    import { TerminalIcon, FolderIcon, UsersIcon, CalendarIcon, DatabaseIcon, GlobeIcon, SettingsIcon } from 'vue-feather-icons'
+    import { TerminalIcon, OctagonIcon, FolderIcon, UsersIcon, CalendarIcon, DatabaseIcon, GlobeIcon, SettingsIcon } from 'vue-feather-icons'
     import ServerConsole from "./ServerConsole";
     import Navigation from '../core/Navigation';
+    import ProgressBar from './components/ProgressBar';
 
     export default {
         components: {
-            Navigation, ServerConsole, TerminalIcon, FolderIcon, UsersIcon,
+            ProgressBar,
+            OctagonIcon, Navigation, ServerConsole, TerminalIcon, FolderIcon, UsersIcon,
             CalendarIcon, DatabaseIcon, GlobeIcon, SettingsIcon
         }
     }
diff --git a/resources/assets/scripts/components/server/ServerConsole.vue b/resources/assets/scripts/components/server/ServerConsole.vue
index 80e9540bf..463cb549c 100644
--- a/resources/assets/scripts/components/server/ServerConsole.vue
+++ b/resources/assets/scripts/components/server/ServerConsole.vue
@@ -39,6 +39,6 @@
 
 <script>
     export default {
-        name: "ServerConsole"
+        name: "ServerConsole",
     }
 </script>
diff --git a/resources/assets/scripts/components/server/components/ProgressBar.vue b/resources/assets/scripts/components/server/components/ProgressBar.vue
new file mode 100644
index 000000000..e4a123c55
--- /dev/null
+++ b/resources/assets/scripts/components/server/components/ProgressBar.vue
@@ -0,0 +1,42 @@
+<template>
+    <div>
+        <div class="text-right mb-1" v-if="title.length > 0">
+            <span class="text-grey-dark text-xs uppercase">{{ title }}</span>
+        </div>
+        <div class="w-full border rounded h-4" :class="borderColor">
+            <div class="h-full w-1/3 text-center" :style="{ width: percent + '%' }" :class="backgroundColor">
+                <span class="mt-1 text-xs text-white leading-none">{{ percent }} %</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'progress-bar',
+        props: {
+            percent: {type: String, default: '0'},
+            title: {type: String}
+        },
+        computed: {
+            backgroundColor: function () {
+                if (this.percent < 70) {
+                    return "bg-green-dark";
+                } else if (this.percent >= 70 && this.percent < 90) {
+                    return "bg-yellow-dark";
+                } else {
+                    return "bg-red-dark";
+                }
+            },
+            borderColor: function () {
+                if (this.percent < 70) {
+                    return "border-green-dark";
+                } else if (this.percent >= 70 && this.percent < 90) {
+                    return "border-yellow-dark";
+                } else {
+                    return "border-red-dark";
+                }
+            }
+        }
+    };
+</script>