Sidebar: show name of currently loaded file in sidebar

Author: Williangalvani

src/components/Globals.js

@@ -14,6 +14,7 @@ export var store = {
     show_radio: false,
     show_messages: false,
     flight_mode_changes: [],
+    file: null,
     events: [],
     cssColors: [],
     colors: [],

src/components/SideBarFileManager.vue

@@ -65,6 +65,7 @@ export default {
         onLoadSample (file) {
             let url
             if (file === 'sample') {
+                this.state.file = 'sample'
                 url = require('../assets/vtol.tlog')
                 this.state.log_type = 'tlog'
             } else {
@@ -120,6 +121,7 @@ export default {
             })
         },
         process: function (file) {
+            this.state.file = file.name
             this.state.processStatus = 'Pre-processing...'
             this.state.processPercentage = 100
             this.file = file

src/components/Sidebar.vue

@@ -10,6 +10,7 @@
         <!-- TABHOLDER -->
         <i class="fa fa-bars fa-2x toggle-btn" v-b-toggle.menucontent></i>
         <b-collapse class="menu-content collapse out" id="menucontent" visible>
+            <span v-if="state.file" class="filename">Current file: {{state.file}}</span>
             <div class="tabholder">
                 <!-- Home -->
                 <a :class="selected === 'home' ? 'selected' : ''" @click="selected='home'" v-if="!state.processDone">
@@ -334,7 +335,7 @@ a.centered-section {
         flex-flow: row wrap;
         justify-content: space-evenly;
         overflow: hidden;
-        padding: 12px 0px 12px 0px;
+        padding: 0px 0px 12px 0px;
         cursor: pointer;
         font-size: 16px;
     }
@@ -467,4 +468,11 @@ a.centered-section {
             max-width: 85% !important;
         }
     }
+
+    .filename {
+        display: block;
+        text-align: center;
+        opacity: 0.8;
+        margin: 6px;
+    }
 </style>