Fixed Sidebar

src/renderer/components/AirportEdit.vue

@@ -1,12 +1,13 @@
 <template>
-  <div id="panel" width="100%">
-    <div id="panel" width="100%" v-if="airport">
-      <h1 class="leaflet-sidebar-header">
-        Airports
-        <div class="leaflet-sidebar-close">
+  <div width="100%">
+    <h1 class="leaflet-sidebar-header" v-if="airport">
+        Airport 
+      <div class="leaflet-sidebar-close">
           <i class="fa fa-caret-left"></i>
-        </div>
-      </h1>
+      </div>
+    </h1>
+
+    <div width="100%" v-if="airport">
       <div>
         <el-row>
           <el-col :span="7">ICAO :</el-col>

src/renderer/components/ArcEdit.vue

@@ -1,12 +1,12 @@
 <template>
-  <div id="panel" width="100%">
-    <div id="panel" width="100%" v-if="parking">
-      <h1 class="leaflet-sidebar-header">
-        Arc Properties 
-        <div class="leaflet-sidebar-close">
-          <i class="fa fa-caret-left"></i>
-        </div>
-      </h1>
+  <div>
+    <h1 class="leaflet-sidebar-header" v-if="arc">
+      Arc Properties
+      <div class="leaflet-sidebar-close">
+        <i class="fa fa-caret-left"></i>
+      </div>
+    </h1>
+    <div width="100%" v-if="arc">
       <div>
         <!--
           airlineCodes: 0
@@ -20,8 +20,12 @@
           type: "gate"
         -->
         <el-row>
-          <el-col :span="7"><span class="demo-input-label">Name :</span></el-col>          
-          <el-col :span="15"><el-input placeholder="Please input" v-model="name"></el-input></el-col>
+          <el-col :span="7">
+            <span class="demo-input-label">Name :</span>
+          </el-col>
+          <el-col :span="15">
+            <el-input placeholder="Please input" v-model="name"></el-input>
+          </el-col>
         </el-row>
       </div>
     </div>
@@ -31,7 +35,7 @@
 <script lang="js">
   export default {
     computed: {
-      parking: function () {
+      arc: function () {
         return this.$store.state.Editable.type === 'arc'
       },
       name: {

src/renderer/components/FlightgearMap.vue

@@ -54,7 +54,7 @@
           let airportsToLoad = this.$store.state.Airports.airports
             .filter(feature => this.visible(feature))
             .map(feature => feature.properties.icao)
-          if (airportsToLoad[0] !== this.editingAirport) {
+          if (airportsToLoad.length > 0 && airportsToLoad[0] !== this.editingAirport) {
             this.$refs.editLayer.load(airportsToLoad[0])
             this.$refs.pavementLayer.load(airportsToLoad[0])
             this.editingAirport = airportsToLoad[0]

src/renderer/components/GroundnetEdit.vue

@@ -1,6 +1,5 @@
 <template>
-  <div id="panel" width="100%">
-    <div id="panel" width="100%" v-if="parking">
+    <div v-if="parking">
       <h1 class="leaflet-sidebar-header">
         Parking 
         <div class="leaflet-sidebar-close">
@@ -25,7 +24,6 @@
         </el-row>
       </div>
     </div>
-  </div>
 </template>
 
 <script lang="js">