(WIP) Implement QRZ.COM lookups

package-lock.json

@@ -10211,6 +10211,11 @@
       "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
       "dev": true
     },
+    "qs": {
+      "version": "6.9.4",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.4.tgz",
+      "integrity": "sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ=="
+    },
     "query-string": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",

package.json

@@ -35,6 +35,7 @@
     "moment": "^2.24.0",
     "node-vincenty": "0.0.6",
     "photoswipe": "^4.1.3",
+    "qs": "^6.9.4",
     "togpx": "^0.5.4",
     "vue": "^2.6.10",
     "vue-clipboard2": "^0.3.1",

src/components/QRZInfo.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    {{ qrzInfo.fname }} {{ qrzInfo.name }}, {{ qrzInfo.addr1 }}, {{ qrzInfo.addr2 }}, {{ qrzInfo.state }} ({{ qrzInfo.grid }})
+  </div>
+</template>
+
+<script>
+import QRZInterface from '../qrz'
+
+export default {
+  name: 'QRZInfo',
+  params: {
+    callsign: String
+  },
+  watch: {
+    callsign: {
+      handler () {
+        QRZInterface.lookupCallsign(this.callsign)
+      },
+      immediate: true
+    }
+  },
+  data: () => {
+    return {
+      qrzInfo: {}
+    }
+  }
+}
+</script>

src/qrz.js

@@ -0,0 +1,24 @@
+import axios from 'axios'
+import qs from 'qs'
+
+let sessionKey
+
+export default class QRZInterface {
+  static login (force = false) {
+    if (sessionKey && !force) {
+      return
+    }
+
+    let qrzLogin = JSON.parse(localStorage.getItem('qrzLogin'))
+
+    return axios.post('https://xmldata.qrz.com/xml/current/',
+      qs.stringify({ username: qrzLogin.qrzUsername, password: qrzLogin.qrzPassword }))
+      .then(response => {
+        let loginRes = new DOMParser().parseFromString(response.data, 'text/xml')
+        console.dir(loginRes.getElementsByTagName('Session'))
+      })
+  }
+  static lookupCallsign (callsign) {
+    QRZInterface.login()
+  }
+}

src/views/Activator.vue

@@ -1,7 +1,10 @@
 <template>
   <PageLayout>
     <template v-slot:title><CountryFlag v-if="country" :country="country" class="flag" />{{ callsign }}</template>
-    <template v-slot:title-right><a :href="'https://www.qrz.com/db/' + callsign" target="_blank"><img class="qrzlogo" src="../assets/qrzcom.png" />QRZ.com</a></template>
+    <template v-slot:title-right>
+      <QRZInfo :callsign="callsign" />
+      <a :href="'https://www.qrz.com/db/' + callsign" target="_blank"><img class="qrzlogo" src="../assets/qrzcom.png" />QRZ.com</a>
+    </template>
     <template v-slot:subtitle>
       <div v-if="activator" class="subtitle is-size-7-mobile">
         <div class="activator-info">
@@ -123,6 +126,7 @@ import MiniMap from '../components/MiniMap.vue'
 import ActivationCharts from '../components/ActivationCharts.vue'
 import LoadingSpinner from '../components/LoadingSpinner.vue'
 import CountryFlag from '../components/CountryFlag.vue'
+import QRZInfo from '../components/QRZInfo.vue'
 
 export default {
   name: 'Activator',
@@ -131,7 +135,7 @@ export default {
   },
   delayScroll: true,
   components: {
-    PageLayout, ActivationsList, SpotsList, RBNSpotsList, AlertsList, LiveFeedIndicator, FilterInput, MiniMap, ActivationCharts, LoadingSpinner, CountryFlag
+    PageLayout, ActivationsList, SpotsList, RBNSpotsList, AlertsList, LiveFeedIndicator, FilterInput, MiniMap, ActivationCharts, LoadingSpinner, CountryFlag, QRZInfo
   },
   mixins: [utils, api],
   computed: {

src/views/Settings.vue

@@ -22,6 +22,12 @@
           <b-field label="Alert default comments">
             <b-input v-model="alertDefaultComments" type="text" maxlength="60" />
           </b-field>
+          <b-field label="QRZ.com login">
+            <b-input v-model="qrzUsername" class="userpass" type="text" placeholder="Username" />
+          </b-field>
+          <b-field message="If you supply your QRZ.com login, callsign information (name, QTH etc.) will be shown on detail pages. The login information will only be stored locally in your browser.">
+            <b-input v-model="qrzPassword" class="userpass" type="password" placeholder="Password" />
+          </b-field>
         </div>
       </section>
     </template>
@@ -39,6 +45,23 @@ export default {
   mounted () {
     document.title = 'Settings - SOTLAS'
   },
+  methods: {
+    getPreference (prefName, attribute) {
+      let prefs = this.getPrefs(prefName)
+      if (prefs) {
+        return prefs[attribute]
+      }
+      return ''
+    },
+    setPreference (prefName, attribute, value) {
+      let prefs = this.getPrefs(prefName)
+      if (!prefs) {
+        prefs = {}
+      }
+      prefs[attribute] = value
+      this.setPrefs(prefName, prefs)
+    }
+  },
   computed: {
     mapServerSelect: {
       get () {
@@ -59,38 +82,42 @@ export default {
     },
     spotDefaultComments: {
       get () {
-        let prefs = this.getPrefs('spotPrefs')
-        if (prefs) {
-          return prefs.defaultComments
-        }
-        return ''
+        return this.getPreference('spotPrefs', 'defaultComments')
       },
-      set (newSpotDefaultComments) {
-        let prefs = this.getPrefs('spotPrefs')
-        if (!prefs) {
-          prefs = {}
-        }
-        prefs.defaultComments = newSpotDefaultComments
-        this.setPrefs('spotPrefs', prefs)
+      set (newValue) {
+        return this.setPreference('spotPrefs', 'defaultComments', newValue)
       }
     },
     alertDefaultComments: {
       get () {
-        let prefs = this.getPrefs('editAlertPrefs')
-        if (prefs) {
-          return prefs.defaultComments
-        }
-        return ''
+        return this.getPreference('editAlertPrefs', 'defaultComments')
       },
-      set (newSpotDefaultComments) {
-        let prefs = this.getPrefs('editAlertPrefs')
-        if (!prefs) {
-          prefs = {}
-        }
-        prefs.defaultComments = newSpotDefaultComments
-        this.setPrefs('editAlertPrefs', prefs)
+      set (newValue) {
+        return this.setPreference('editAlertPrefs', 'defaultComments', newValue)
+      }
+    },
+    qrzUsername: {
+      get () {
+        return this.getPreference('qrzLogin', 'qrzUsername')
+      },
+      set (newValue) {
+        return this.setPreference('qrzLogin', 'qrzUsername', newValue)
+      }
+    },
+    qrzPassword: {
+      get () {
+        return this.getPreference('qrzLogin', 'qrzPassword')
+      },
+      set (newValue) {
+        return this.setPreference('qrzLogin', 'qrzPassword', newValue)
       }
     }
   }
 }
 </script>
+
+<style scoped>
+.userpass {
+  max-width: 20em;
+}
+</style>