Partially implement dashboard view on /dashboard

app/app.py

@@ -137,7 +137,7 @@ def errorlog():
     return Response(data, mimetype="text/plain")
 
 
-@app.route("/status")
+@app.route("/api/status")
 @basic_auth.required
 def status():
     return jsonify(

app/frontend/app.js

@@ -114,6 +114,39 @@
     }
   });
 
+  Vue.component("tree-view", {
+    template: "#tree-view-template",
+    props: {
+      tree: [Object, String],
+    },
+    computed: {
+      formatted_tree: function() {
+        if (this.tree) {
+          return this.create_tree(this.tree[""])
+        }
+        else return false;
+      }
+    },
+    methods: {
+      create_tree: function (folder_array, indent_level = 0) {
+        let output_string = "";
+        for (let item of folder_array) {
+          if (typeof item == "string") {
+            output_string += `|${'\t'.repeat(indent_level)}--${item}\n`;
+          } else if (item instanceof Object) {
+            Object.keys(item).forEach((key) => {
+              output_string += `|${'\t'.repeat(indent_level)}--${key}\n`;
+              indent_level += 1;
+              output_string += this.create_tree(item[key], indent_level);
+            });
+            indent_level -= 2;
+          }
+        }
+        return output_string;
+      }
+    }
+  });
+
   Vue.component("search-screen", {
     template: "#search-screen-template",
     data: function() {
@@ -242,6 +275,52 @@
     }
   });
 
+  Vue.component("status-screen", {
+    mixins: [rbmixin],
+    template: "#status-screen-template",
+    data: function() {
+      return {
+        status: {
+        }
+      };
+    },
+    created: function() {
+      var self = this;
+      get("/api/status", function(data) {
+        self.status = data;
+      })
+    },
+    computed: {
+      output_dir_info: function () {
+        return this.status.output_dir && this.status.output_dir.length !== 0 ? this.status.output_dir : null;
+      },
+      filelist_dir_info: function () {
+        return this.status.filelist_dir && this.status.filelist_dir.length !== 0 ? this.status.filelist_dir : null;
+      },
+      downloads_dir_info: function () {
+        return this.status.downloads_dir && this.status.downloads_dir.length !== 0 ? this.status.downloads_dir : null;
+      },
+      subtitle_downloads_info: function () {
+        let subtitle_array = [];
+        if (this.status.subtitle_downloads) {
+          Object.keys(this.status.subtitle_downloads).forEach((key) => {
+            subtitle_array.push(`${key}: ${this.status.subtitle_downloads[key]}`);
+          });
+        }
+        return subtitle_array;
+      },
+      conversions_info: function () {
+        let conversion_array = [];
+        if (this.status.conversions) {
+          Object.keys(this.status.conversions).forEach((key) => {
+            conversion_array.push(key);
+          });
+        }
+        return conversion_array;
+      }
+    },
+  });
+
   var vm = new Vue({
     el: "#app",
     data: { screen: null, params: {} }
@@ -267,7 +346,8 @@
       "search/:searchterm": display_view("search-results-screen"),
       "magnet/:magnet_link/": display_view("filelist-screen"),
       "magnet/:magnet_link/:filename": display_view("download-screen"),
-      "*": display_view("search-screen")
+      "dashboard": display_view("status-screen"),
+      "*": display_view("search-screen"),
     })
     .resolve();
 })();

app/frontend/index.html

@@ -118,6 +118,47 @@
         <button class="btn btn-dark chromecast-button" @click="cast()"><div class="icon chromecast_icon"/></button>
     </script>
 
+    <script type="text/x-template" id="tree-view-template">
+      <pre v-if="formatted_tree" class="text-left">{{ formatted_tree }}</pre>
+      <p v-else class="text-right">Directory empty.</p>
+    </script>
+
+    <script type="text/x-template" id="status-screen-template">
+      <div class="container">
+        <h1>Status</h1>
+        <div class="row">
+          <div class="col-sm-2"></div>
+          <div class="col-sm-8">
+            <!-- <p>{{ status }}</p> -->
+            <p class="text-white text-left">Torrent Downloads</p>
+            <p class="text-right">{{ status.torrent_downloads }}</p>
+            <p class="text-white text-left">Conversions in Progress</p>
+            <ul v-if="conversions_info.length != 0">
+              <li v-for="conversion in conversions_info">{{ conversion }}</li>
+            </ul>
+            <p v-else class="text-right">No files being converted.</p>
+            <p class="text-white text-left">Subtitle Downloads</p>
+            <ul v-if="subtitle_downloads_info.length != 0">
+              <li v-for="item in subtitle_downloads_info">{{ item }}</li>
+            </ul>
+            <p v-else class="text-right">No subtitles downloaded or downloading.</p>
+            <p class="text-white text-left">Session Torrents</p>
+            <ul v-if="status.session_torrents.length != 0">
+              <li v-for="torrent in status.session_torrents">{{ torrent }}</li>
+            </ul>
+            <p v-else class="text-right">No torrents this session.</p>
+            <p class="text-white text-left">Output Directory</p>
+            <tree-view :tree="output_dir_info"></tree-view>
+            <p class="text-white text-left">File List</p>
+            <tree-view :tree="filelist_dir_info"></tree-view>
+            <p class="text-white text-left">Download List</p>
+            <tree-view :tree="downloads_dir_info"></tree-view>
+          </div>
+          <div class="col-sm-2"></div>
+        </div>
+      </div>
+    </script>
+
     <script src="/app.js"></script>
   </body>
 </html>