Edit Frequencies

src/renderer/components/AirportEdit.vue

@@ -1,6 +1,6 @@
 <template>
+  <div>
     <div width="100%" v-if="airport">
-      <div>
         <el-row>
           <el-col :span="7">ICAO :</el-col>
           <el-col :span="15">{{ icao }}</el-col>
@@ -25,12 +25,59 @@
           <el-col :span="7">Parking Positions :</el-col>
           <el-col :span="15">{{ parking }}</el-col>
         </el-row>
-      </div>
     </div>
+    <el-divider></el-divider>    
+    <div v-if="airport">
+        <el-row>
+          <el-col :span="7">AWOS :</el-col>
+          <el-col :span="15"><el-input placeholder="Please input AWOS frequency" v-model="AWOS" v-bind:class="{ invalid: !awosOk}">></el-input></el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="7">Ground :</el-col>
+          <el-col :span="15"><el-input placeholder="Please input GROUND frequency" v-model="GROUND" v-bind:class="{ invalid: !groundOk}"></el-input></el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="7">Tower :</el-col>
+          <el-col :span="15"><el-input placeholder="Please input TOWER frequency" v-model="TOWER" v-bind:class="{ invalid: !towerOk}"></el-input></el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="7">Approach :</el-col>
+          <el-col :span="15"><el-input placeholder="Please input APPROACH frequency" v-model="APPROACH" v-bind:class="{ invalid: !approachOk}"></el-input></el-col>
+        </el-row>
+    </div>
+  </div>
 </template>
 
 <script lang="js">
   export default {
+    data () {
+      return { awosOk: true, groundOk: true, towerOk: true, approachOk: true }
+    },
+    methods: {
+      isValid (frequency) {
+        let ok = frequency >= 118 && frequency <= 137
+        if (!ok) {
+          return false
+        }
+        let fractions = (frequency - Math.trunc(frequency)) * 1000
+        let subFraction = Math.round(fractions % 25)
+        switch (subFraction) {
+          case 0:
+            break
+          case 5:
+            break
+          case 10:
+            break
+          case 15:
+            break
+          case 25:
+            break
+          default:
+            return false
+        }
+        return true
+      }
+    },
     computed: {
       icao: function () {
         return this.$store.state.Editable.data.airport.icao
@@ -52,6 +99,58 @@
       },
       airport: function () {
         return this.$store.state.Editable.type === 'airport'
+      },
+      AWOS: {
+        // getter
+        get: function () {
+          let newValue = (this.$store.state.Frequencies.AWOS / 100).toFixed(3)
+          this.awosOk = this.isValid(newValue)
+          return newValue
+        },
+        // setter
+        set: function (newValue) {
+          this.awosOk = this.isValid(newValue)
+          this.$store.dispatch('setAwos', newValue * 100)
+        }
+      },
+      GROUND: {
+        // getter
+        get: function () {
+          let newValue = (this.$store.state.Frequencies.GROUND / 100).toFixed(3)
+          this.groundOk = this.isValid(newValue)
+          return newValue
+        },
+        // setter
+        set: function (newValue) {
+          this.groundOk = this.isValid(newValue)
+          this.$store.dispatch('setGround', newValue * 100)
+        }
+      },
+      TOWER: {
+        // getter
+        get: function () {
+          let newValue = (this.$store.state.Frequencies.TOWER / 100).toFixed(3)
+          this.towerOk = this.isValid(newValue)
+          return newValue
+        },
+        // setter
+        set: function (newValue) {
+          this.towerOk = this.isValid(newValue)
+          this.$store.dispatch('setTower', newValue * 100)
+        }
+      },
+      APPROACH: {
+        // getter
+        get: function () {
+          let newValue = (this.$store.state.Frequencies.APPROACH / 100).toFixed(3)
+          this.approachOk = this.isValid(newValue)
+          return newValue
+        },
+        // setter
+        set: function (newValue) {
+          this.approachOk = this.isValid(newValue)
+          this.$store.dispatch('setApproach', newValue * 100)
+        }
       }
     }
   }
@@ -61,4 +160,8 @@
    .el-row {
      padding: 0em
    }
+   .invalid {
+     padding: 1px;
+     background-color: red;
+   }
 </style>

src/renderer/components/FlightgearMap.vue

@@ -11,9 +11,7 @@
     <!--The backgroundmap-->
     <l-tile-layer :url="url" :attribution="attribution" :options="{maxZoom: 22, maxNativeZoom: 17}"></l-tile-layer>
     <l-control position="topright" >
-      <el-card :body-style="{ padding: '0px' }">
-          <p>&nbsp;{{ icao }}&nbsp;</p>
-      </el-card>
+      <el-button @click="editAirport()">{{ icao }}</el-button>
     </l-control>
     <!--<l-marker :lat-lng="marker"></l-marker>-->
     <LeafletSidebar></LeafletSidebar>
@@ -88,6 +86,14 @@
       }
     },
     methods: {
+      editAirport () {
+        if (this.editingAirport) {
+          let airportsToLoad = this.$store.state.Airports.airports
+            .filter(feature => feature.properties.icao === this.icao)
+          let properties = Object.assign({}, airportsToLoad[0].properties)
+          this.$store.commit('SET_EDIT_AIRPORT', properties)
+        }
+      },
       setIcao (icao) {
         this.icao = icao
       },