Working version

src/App.vue

 <template>
   <div id="app">
     <Navbar></Navbar>
-    <p>
-    <router-link to="/">Home</router-link>
-<!--    <router-link to="/display">Display TAB</router-link>-->
-    </p>
+    <b-nav id="subnav">
+      <b-nav-item><router-link to="/">Processed</router-link></b-nav-item>
+      <b-nav-item><router-link to="/live">Live</router-link></b-nav-item>
+    </b-nav>
     <router-view></router-view>
   </div>
 </template>
@@ -29,4 +29,20 @@ export default {
   text-align: center;
   color: #2c3e50;
 }
+#subnav {
+  box-shadow: lightcoral 0px 1px 3px;
+  margin-bottom: 1rem;
+
+}
+#subnav a{
+  color: black;
+  font-size: 1.2rem;
+  justify-content: center;
+}
+
+#subnav a .router-link-exact-active{
+  color: darkred;
+  font-weight: bold;
+}
+
 </style>

src/components/Live.vue

+<template>
+
+    <b-container fluid>
+        <b-row class="justify-content-center">
+            <b-card class="ml-3 mb-2">
+                <b-card-sub-title><h5>Last dynamic spectrum</h5></b-card-sub-title>
+                <b-card-body>
+                    <a :href="last_dynspec">
+                        <b-img-lazy fluid width="500px" v-bind:src="full_dynspec"></b-img-lazy>
+                    </a>
+                </b-card-body>
+
+            </b-card>
+            <b-card class="ml-3 mb-2">
+                <b-card-sub-title><h5>Last 15 minutes dynamic spectrum</h5></b-card-sub-title>
+                <b-card-body>
+                    <a :href="last_hour_dynspec">
+                        <b-img-lazy fluid width="500px" v-bind:src="last_15_min"></b-img-lazy>
+                    </a>
+                </b-card-body>
+            </b-card>
+        </b-row>
+    </b-container>
+</template>
+
+<script>
+
+export default {
+    name: "Live",
+    components: {
+    },
+    data() {
+        return {
+            selectedDate: this.$route.params.date,
+            selectedBeam: null,
+            last_dynspec: "https://spaceweather.astron.nl/SolarKSP/data/livemonitor/IDOLS/last_dynspec.png",
+            last_hour_dynspec: "https://spaceweather.astron.nl/SolarKSP/data/livemonitor/IDOLS/last_dynspec1H.png"
+        }
+    },
+    computed: {
+      full_dynspec: function(){
+        Axios('')
+        return "https://spaceweather.astron.nl/SolarKSP/data/livemonitor/IDOLS/last_dynspec.png";
+      },
+      last_15_min:  function() {
+        return "https://spaceweather.astron.nl/SolarKSP/data/livemonitor/IDOLS/last_dynspec1H.png";
+      }
+    },
+    created() {
+        this.$watch(
+            () => this.$route.params,
+            (toParams, previousParams) => {
+                console.log("HEY")
+                console.log(toParams, previousParams, this.$route.params.date)
+            }
+        )
+    },
+    methods: {
+        handleSelectDate(date) {
+            this.selectedDate = date
+        },
+        handleSelectBeam(beam) {
+            this.selectedBeam = beam
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/components/Navbar.vue

 <template>
- <b-navbar type="dark" variant="info">
+ <b-navbar type="light">
     <div class="row">
       <img src="https://spaceweather.astron.nl/SolarKSP/data/IDOLSarchive/kspidols.png" width="60px" alt="" class="brand-logo">
-      <h1 class="brand-title float-left">LOFAR solar catalogue</h1>
+      <h1 class="brand-title float-left">LOFAR - Solar catalogue</h1>
     </div>
  </b-navbar>
 
@@ -10,17 +10,19 @@
 
 <script>
 export default {
-  name: "Navbar.vue"
+  name: "Navbar.vue",
 }
 </script>
 
 <style scoped>
 nav {
-  background-color: #2c3e50;
-  color: white;
+  background-color: #E1E1E1;
+  color: black;
+  text-shadow: orange 1px 3px;
+  box-shadow: orange 0px 3px 5px;
+  margin-bottom: 1rem;
 }
 .brand-title {
-
   margin-top: 1rem;
   margin-bottom: auto;
   margin-left: 3rem;

src/components/Home.vue → src/components/Processed.vue

@@ -12,7 +12,7 @@
 
             </b-card>
             <b-card class="ml-3 mb-2">
-                <b-card-sub-title><h5>Last hour dynamic spectrum</h5></b-card-sub-title>
+                <b-card-sub-title><h5>Last 15 minutes dynamic spectrum</h5></b-card-sub-title>
                 <b-card-body>
                     <a :href="last_hour_dynspec">
                         <b-img-lazy fluid width="500px" v-bind:src="last_hour_dynspec"></b-img-lazy>
@@ -42,7 +42,7 @@ import ProductsList from "./ProductsList";
 import BeamSelector from "./BeamSelector";
 
 export default {
-    name: "Home",
+    name: "Processed",
     components: {
         TimeSelector,
         BeamSelector,

src/components/ProductsList.vue

 <template>
     <div>
         <ArrayBeam v-bind:date_str="selectedDate"></ArrayBeam>
-  <b-card-group columns>
+        <div class="row justify-content-center row-cols-3" style="">
             <ProductsView  v-for="entry in entries" v-bind:key="entry.id" v-bind:time_chunk="entry.time_chunks"
+                          v-bind:sap="entry.sap"
                           v-bind:title="entry.title"></ProductsView>
-  </b-card-group>
+        </div>
     </div>
 </template>
 
@@ -32,9 +33,11 @@ export default {
     mounted() {
         if (this.selectedDate == null) {
             this.entries = [
-        {id: 'date_not_selected',
+                {
+                    id: 'date_not_selected',
                     title: 'select date',
-        time_chunks: []}
+                    time_chunks: []
+                }
             ]
         } else {
             this.fetchData(this.selectedDate, null);
@@ -65,11 +68,16 @@ export default {
                     let data = response.data;
                     this.entries = []
 
-            for (let name in data) {
+                    data = data.map(x => {
+                        return {...x, sap: x.source.match(/SAP([0-9]*)/)[1]}
+                    }).sort((a, b) => {return (a.sap > b.sap ? 1 : -1)})
 
+
+                    for (let name in data) {
                         this.entries.push({
                             id: name,
                             title: name,
+                            sap: Number(data[name].source.match(/SAP([0-9]*)/)[1]),
                             time_chunks: data[name]
                         })
                     }

src/components/ProductsView.vue

 <template>
-    <b-card>
+  <b-card class="col pl-2 pr-2 ">
 
     <b-card-body>
       <b-card-text>
         <b-container>
           <b-row class="card-title">
             <b-col><b>Time:</b> {{ time_chunk['time'] }}</b-col>
+            <b-col><b>Target:</b> {{ target }}</b-col>
+
             <b-col><b>Beam:</b> {{ time_chunk['beam'] }}</b-col>
             <div class="h3">
 
@@ -51,11 +53,23 @@ export default {
       toggle: false
     }
   },
-  props: ['time_chunk', 'title'],
+  props: ['time_chunk', 'title', 'sap'],
   computed: {
     imageSrc() {
       return this.toUrl(this.time_chunk['png'])
     },
+    target() {
+      if (this.time_chunk['target'] !== undefined) {
+        return this.time_chunk['target']
+      } else {
+        let hour =Number(this.time_chunk['time'].split(':')[0])
+        if(hour < 3 || hour > 18) {
+          return 'Calibrator'
+
+        }
+        return this.sap === 0 ? 'SUN' : 'Calibrator'
+      }
+    }
 
   },
   methods: {

src/main.js

@@ -11,14 +11,14 @@ Vue.use(BootstrapVue)
 Vue.use(BootstrapVueIcons)
 Vue.use(VueRouter)
 
-import DisplayTAB from "@/components/DisplayTAB";
+import Live from "@/components/Live";
+import Processed from "@/components/Processed";
 
-import Home from "@/components/Home";
 const routes = [
-    { path: '/', component: Home},
-    { path: '/:date', component: Home},
-    { path: '/display', component: DisplayTAB}
-
+    { path: '/', component: Processed},
+    { path: '/live/', component: Live},
+    { path: '/:date', component: Processed},
+    { path: '/live/:date', component: Live},
 ]
 Vue.config.productionTip = false
 const router = new VueRouter({