Massive frontend overhaul

src/components/status/CPUStatus.vue

@@ -1,21 +1,38 @@
 <template>
-  <div class="col">
-    <h4>CPU <span :class="'badge badge-' + percentageClass">{{ formattedPercentage }}%</span></h4>
-    <div class="progress">
-      <div :class="'progress-bar bg-' + percentageClass" role="progressbar" :style="{ width : status.UserPct + '%' }" :aria-valuenow="status.UserPct" aria-valuemin="0" aria-valuemax="100"></div>
+  <b-nav-item-dropdown no-caret right>
+    <template slot="button-content">
+      <font-awesome-icon icon="tachometer-alt" /> CPU
+      <b-progress :value="status.UserPct" height=".5rem" :variant="percentageClass"></b-progress>
+    </template>
+    <b-dropdown-header class="text-center">CPU</b-dropdown-header>
+    <div class="text-center">
+      <small>{{ cpuName }}</small>
+      <br />
+      <span :class="'badge badge-' + percentageClass">{{ formattedPercentage }}%</span>
     </div>
-  </div>
+    <div class="text-center">
+      <template v-for="(temp, id) in temperatures">
+        <span :class="'badge badge-' + badgeClass(temp.temperature)" :title="temp.name">{{ temp.temperature }}C</span>&nbsp;
+      </template>
+    </div>
+  </b-nav-item-dropdown>
 </template>
 
 <script>
   export default {
     name: 'cpu_status',
-    props: [ 'status' ],
+    props: [ 'status', 'cpuName', 'temperatures' ],
     computed: {
       formattedPercentage: function() {
+        if (!this.status) {
+          return '0.00';
+        }
         return parseFloat(this.status.UserPct).toFixed(2);
       },
       percentageClass: function() {
+        if (!this.status) {
+          return 'info';
+        }
         if (this.status.UserPct >= 90) {
           return 'danger';
         } else if (this.status.UserPct >= 80) {
@@ -23,6 +40,24 @@
         }
         return 'success'
       },
+    },
+    methods: {
+      badgeClass: function(temp) {
+        if (temp >= 90) {
+          return 'danger';
+        } else if (temp >= 70) {
+          return 'warning';
+        } else if (temp >= 60) {
+          return 'high';
+        } else if (temp >= 50) {
+          return 'success';
+        } else if (temp >= 40) {
+          return 'acceptable';
+        } else if (temp >= 30) {
+          return 'cool';
+        }
+        return 'cold';
+      },
     }
   }
 </script>