Diskspace

data/raw/test/diskspace.raw

@@ -1 +1 @@
-/dev/disk1    1000G    100G   900G    10% 0000001 9999999999999999999    0%   /
+/dev/disk1    1000000    100000   900000    10% 0000001 9999999999999999999    0%   /

index.js

@@ -29,3 +29,10 @@ app.route(apiPrefix + '/builddate').get((req, res) => {
   });
 });
 
+app.route(apiPrefix + '/diskspace').get((req, res) => {
+  fs.readFile(path.join(__dirname, 'data/json', 'diskspace.json'), 'utf8', (err, json) => {
+    if (err) { throw new Error(err); }
+    res.json(JSON.parse(json));
+  });
+});
+

mkRaw.sh

@@ -5,4 +5,4 @@ touch data/raw/real/date.raw
 date > data/raw/real/date.raw
 
 touch data/raw/real/diskspace.raw
-df -H | grep /dev/disk1s1 > data/raw/real/diskspace.raw
+df | grep /dev/disk1s1 > data/raw/real/diskspace.raw

public/index.html

@@ -16,7 +16,16 @@
       <div class="autogrid">
         <section class="col">
           <div class="feed-card">
-            <img src="assets/emby.png" alt="" class="fadein" />
+            <div>
+              <meter min="0" v-bind:max="diskSize" v-bind:value="diskUsed"></meter>
+            </div>
+            <div class="load" v-if="fetchingDiskSpace"></div>
+            <h3 v-else>Used: {{diskCapacity}}
+          </div>
+        </section>
+
+        <section class="col">
+          <div class="feed-card">
             <h3><a href="/emby">Emby</a></h3>
           </div>
         </section>

src/assets/app.js

@@ -1,11 +1,17 @@
 new Vue({
   el: '#app',
   data: {
-    lastBuildDate: '',
     fetchingLastBuildDate: true,
+    lastBuildDate: '',
+
+    fetchingDiskSpace: '',
+    diskSize: '',
+    diskUsed: '',
+    diskCapacity: '',
   },
   created() {
     this.fetchLastBuildDate();
+    this.fetchDiskSpace();
   },
   methods: {
     async fetchLastBuildDate() {
@@ -16,5 +22,15 @@ new Vue({
         this.fetchingLastBuildDate = false;
       } catch (err) { throw new Error(err); }
     },
+    async fetchDiskSpace() {
+      this.fetchingDiskSpace = true;
+      try {
+        let { data } = await axios.get('/api/diskspace');
+        this.diskSize = data.size;
+        this.diskUsed = data.used;
+        this.diskCapacity = data.capacity;
+        this.fetchingDiskSpace = false;
+      } catch (err) { throw new Error(err); }
+    },
   },
 });

src/assets/styles.css

@@ -1,3 +1,7 @@
+meter {
+  width: 100%;
+}
+
 .fadein {
   animation: fadein 1s;
 }

src/index.html

@@ -16,7 +16,16 @@
       <div class="autogrid">
         <section class="col">
           <div class="feed-card">
-            <img src="assets/emby.png" alt="" class="fadein" />
+            <div>
+              <meter min="0" v-bind:max="diskSize" v-bind:value="diskUsed"></meter>
+            </div>
+            <div class="load" v-if="fetchingDiskSpace"></div>
+            <h3 v-else>Used: {{diskCapacity}}
+          </div>
+        </section>
+
+        <section class="col">
+          <div class="feed-card">
             <h3><a href="/emby">Emby</a></h3>
           </div>
         </section>