Show solar data in navigation bar (if screen is big enough)

src/components/NavBar.vue

@@ -7,6 +7,9 @@
       </b-navbar-item>
     </template>
     <template #end>
+      <b-navbar-item v-if="$mq.widescreen" tag="div">
+        <SolarData />
+      </b-navbar-item>
       <b-navbar-item tag="div">
         <SearchField :query="query" @search="closeBurger" />
       </b-navbar-item>
@@ -30,6 +33,7 @@
 import moment from 'moment'
 import SearchField from '../components/SearchField.vue'
 import LoginButton from '../components/LoginButton.vue'
+import SolarData from '../components/SolarData.vue'
 import utils from '../mixins/utils.js'
 import EventBus from '../event-bus'
 
@@ -37,7 +41,7 @@ export default {
   name: 'NavBar',
   mixins: [ utils ],
   components: {
-    SearchField, LoginButton
+    SearchField, LoginButton, SolarData
   },
   props: {
     query: {

src/components/SolarData.vue

@@ -0,0 +1,88 @@
+<template>
+  <div :class="['solar-container', kAttribute]" v-if="latest !== null">
+    <div><label>SFI</label>{{ latest.sfi }}</div>
+    <div><label>SN</label>{{ latest.r }}</div>
+    <div><label>A</label>{{ latest.a }}</div>
+    <div><label>K</label>{{ latest.k }}</div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'SolarData',
+  mounted () {
+    this.loadSolarData()
+  },
+  computed: {
+    kAttribute () {
+      if (this.latest === null) {
+        return ''
+      }
+
+      if (this.latest.k <= 2) {
+        return 'k-quiet'
+      } else if (this.latest.k === 3) {
+        return 'k-unsettled'
+      } else if (this.latest.k === 4) {
+        return 'k-active'
+      } else if (this.latest.k <= 7) {
+        return 'k-storm'
+      } else {
+        return 'k-severestorm'
+      }
+    }
+  },
+  methods: {
+    loadSolarData () {
+      axios.get('https://api.sotl.as/solardata/latest')
+        .then(response => {
+          this.latest = response.data
+        })
+    }
+  },
+  data () {
+    return {
+      latest: null
+    }
+  }
+}
+</script>
+
+<style scoped>
+.solar-container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  grid-column-gap: 0.3rem;
+  font-size: 0.8rem;
+  line-height: 1.05rem;
+  background-color: #eee;
+  border-radius: 10px;
+  padding: 0.15rem 0.4rem;
+  font-weight: bold;
+  text-align: right;
+}
+.solar-container label {
+  font-size: 0.7rem;
+  margin-right: 0.2rem;
+  font-weight: normal;
+  opacity: 0.6;
+}
+.solar-container.k-quiet {
+  color: #106f06;
+}
+.solar-container.k-unsettled {
+  color: #817f03;
+}
+.solar-container.k-active {
+  color: #8c5903;
+}
+.solar-container.k-storm {
+  color: #8d0002;
+}
+.solar-container.k-severestorm {
+  color: #7e0053;
+}
+</style>

src/main.js

@@ -108,6 +108,7 @@ function startVue () {
     mq: {
       mobile: '(max-width: 768px)',
       desktop: '(min-width: 1024px)',
+      widescreen: '(min-width: 1216px)',
       fullhd: '(min-width: 1408px)'
     }
   }).$mount('#app')