Link various other callbooks (issue #7)

src/components/CallDatabaseButton.vue

@@ -0,0 +1,31 @@
+<template>
+  <b-dropdown :triggers="['hover']" aria-role="list">
+    <template #trigger>
+      <b-button icon-left="book-user" icon-right="angle-down"><span class="is-hidden-mobile">Callbooks</span></b-button>
+    </template>
+
+    <b-dropdown-item has-link aria-role="listitem"><a :href="'https://www.qrz.com/db/' + callsign" target="_blank"><img class="calldblogo" src="../assets/qrzcom.png" />QRZ.com</a></b-dropdown-item>
+    <b-dropdown-item has-link aria-role="listitem"><a :href="'https://www.qrzcq.com/call/' + callsign" target="_blank"><img class="calldblogo" src="../assets/qrzcq.png" />QRZCQ</a></b-dropdown-item>
+    <b-dropdown-item has-link aria-role="listitem"><a :href="'https://www.hamqth.com/' + callsign" target="_blank"><img class="calldblogo" src="../assets/hamqth.png" />HamQTH</a></b-dropdown-item>
+    <b-dropdown-item has-link aria-role="listitem"><a :href="'https://www.hamcall.net/call/' + callsign" target="_blank"><img class="calldblogo" src="../assets/hamcall.png" />HamCall</a></b-dropdown-item>
+  </b-dropdown>
+</template>
+
+<script>
+export default {
+  props: {
+    callsign: String
+  }
+}
+</script>
+
+<style scoped>
+.calldblogo {
+  width: 1.5em;
+  vertical-align: middle;
+  margin-right: 0.4em;
+}
+.dropdown {
+  margin-left: 1em;
+}
+</style>

src/main.js

@@ -12,7 +12,8 @@ import { faCheck, faCheckCircle, faInfoCircle, faExclamationTriangle, faExclamat
   faAngleRight, faAngleLeft, faAngleDown, faEye, faEyeSlash, faCaretUp, faUpload, faLink, faHistory, faThList, faImages,
   faQuoteRight, faSearch, faMountains, faUser, faClock, faChevronCircleUp, faChevronCircleDown, faChartBar, faFileDownload,
   faExchange, faGlobe, faCalendarDay, faTrashAlt, faEdit, faClone, faCheckCircle as farCheckCircle, faArrowsH, faArrowsAlt,
-  faSnowflake, faWindowMinimize, faWindowMaximize, faWindowClose, faExpandArrows, faLocation, faCalendarCheck, faComment, faSpinner } from '@fortawesome/pro-regular-svg-icons'
+  faSnowflake, faWindowMinimize, faWindowMaximize, faWindowClose, faExpandArrows, faLocation, faCalendarCheck, faComment, faSpinner,
+  faBookUser } from '@fortawesome/pro-regular-svg-icons'
 import { faMap, faCheckCircle as fasCheckCircle, faChevronCircleDown as fasChevronCircleDown, faChevronCircleUp as fasChevronCircleUp,
   faParking, faSquare, faBus, faHiking, faCircle, faCamera, faVolume, faVolumeMute, faCog, faCaretDown as fasCaretDown, faLocationArrow as fasLocationArrow } from '@fortawesome/pro-solid-svg-icons'
 import { faWikipediaW, faGoogle, faGithub } from '@fortawesome/free-brands-svg-icons'
@@ -26,7 +27,8 @@ library.add(faCheck, faCheckCircle, faInfoCircle, faExclamationTriangle, faExcla
   faAngleRight, faAngleLeft, faAngleDown, faEye, faEyeSlash, faCaretUp, faUpload, faLink, faHistory, faThList, faImages,
   faQuoteRight, faSearch, faMountains, faUser, faClock, faChevronCircleUp, faChevronCircleDown, faMap, faChartBar, faFileDownload,
   faExchange, faGlobe, faCalendarDay, faTrashAlt, faEdit, faClone, farCheckCircle, faArrowsH, faArrowsAlt,
-  faSnowflake, faWindowMinimize, faWindowMaximize, faWindowClose, faExpandArrows, faLocation, faCalendarCheck, faComment, faSpinner)
+  faSnowflake, faWindowMinimize, faWindowMaximize, faWindowClose, faExpandArrows, faLocation, faCalendarCheck, faComment, faSpinner,
+  faBookUser)
 library.add(faMap, fasCheckCircle, fasChevronCircleDown, fasChevronCircleUp, faParking, faSquare, faBus, faHiking, faCircle, faCamera, faVolume, faVolumeMute, faCog, fasCaretDown, fasLocationArrow)
 library.add(faWikipediaW, faGoogle, faGithub)
 Vue.component('font-awesome-icon', FontAwesomeIcon)

src/views/Activator.vue

@@ -1,7 +1,7 @@
 <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><CallDatabaseButton :callsign="callsign" /></template>
     <template v-slot:subtitle>
       <div v-if="activator" class="subtitle is-size-7-mobile">
         <div class="activator-info">
@@ -123,6 +123,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 CallDatabaseButton from '../components/CallDatabaseButton.vue'
 
 export default {
   name: 'Activator',
@@ -131,7 +132,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, CallDatabaseButton
   },
   mixins: [utils, api],
   computed: {
@@ -409,11 +410,6 @@ export default {
 </script>
 
 <style scoped>
-.qrzlogo {
-  width: 1.5em;
-  vertical-align: middle;
-  margin-right: 0.4em;
-}
 .b-table >>> .level {
   padding-bottom: 0;
 }