diff --git a/src/App.vue b/src/App.vue
index e1b5e851647df74c32bed807a0db1a7aad686578..d67d9655a78c11bdb12645881cda23d299f1d98d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,10 @@
<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>
diff --git a/src/components/Live.vue b/src/components/Live.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5c54d8ed13c9587efcd3d4292383bb9fa08f4531
--- /dev/null
+++ b/src/components/Live.vue
@@ -0,0 +1,71 @@
+<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
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 98ce3baa349c5705eb03f5790781c31389754921..068b17e05bc7c6a1d99e31bcb75202fab7672d06 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,8 +1,8 @@
<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;
diff --git a/src/components/Home.vue b/src/components/Processed.vue
similarity index 95%
rename from src/components/Home.vue
rename to src/components/Processed.vue
index 1f1186509f0d18b100af8c40daf65d94c9664b43..a63b27e8ed58e2aa36347381ca445da19d603c51 100644
--- a/src/components/Home.vue
+++ b/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,
diff --git a/src/components/ProductsList.vue b/src/components/ProductsList.vue
index 7a7d5aff9731a2638463bcdd0ce74856240d8fb6..731bf98b3c07d5f9010a50dfb7062697f36abc3c 100644
--- a/src/components/ProductsList.vue
+++ b/src/components/ProductsList.vue
@@ -1,11 +1,12 @@
<template>
- <div>
- <ArrayBeam v-bind:date_str="selectedDate"></ArrayBeam>
- <b-card-group columns>
- <ProductsView v-for="entry in entries" v-bind:key="entry.id" v-bind:time_chunk="entry.time_chunks"
- v-bind:title="entry.title"></ProductsView>
- </b-card-group>
- </div>
+ <div>
+ <ArrayBeam v-bind:date_str="selectedDate"></ArrayBeam>
+ <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>
+ </div>
+ </div>
</template>
@@ -15,76 +16,83 @@ import axios from 'axios';
import ArrayBeam from "@/components/ArrayBeam";
export default {
- name: "ProductsList",
- components: {
- ArrayBeam,
- ProductsView,
- },
- props: {
- 'selectedDate': String,
- 'selectedBeam': String,
- },
- data() {
- return {
- entries: []
- }
- },
- mounted() {
- if (this.selectedDate == null) {
- this.entries = [
- {id: 'date_not_selected',
- title: 'select date',
- time_chunks: []}
- ]
- } else {
- this.fetchData(this.selectedDate, null);
- }
- },
- methods: {
- fetchData: function (date, beam) {
- if(date == null){
- console.log('Date is null wtf!')
- }
- let url = 'https://spaceweather.astron.nl/api/tasks/'
- let query = ''
- if ( date != null ){
- query += 'date=' + date
- }
- if ( beam != null) {
- if( query !== '') {
- query += '&'
+ name: "ProductsList",
+ components: {
+ ArrayBeam,
+ ProductsView,
+ },
+ props: {
+ 'selectedDate': String,
+ 'selectedBeam': String,
+ },
+ data() {
+ return {
+ entries: []
}
- query += 'beam=' + beam
- }
- if(query !== ''){
- url += '?' + query
- }
- axios
- .get( url)
- .then(response => {
- let data = response.data;
- this.entries = []
+ },
+ mounted() {
+ if (this.selectedDate == null) {
+ this.entries = [
+ {
+ id: 'date_not_selected',
+ title: 'select date',
+ time_chunks: []
+ }
+ ]
+ } else {
+ this.fetchData(this.selectedDate, null);
+ }
+ },
+ methods: {
+ fetchData: function (date, beam) {
+ if (date == null) {
+ console.log('Date is null wtf!')
+ }
+ let url = 'https://spaceweather.astron.nl/api/tasks/'
+ let query = ''
+ if (date != null) {
+ query += 'date=' + date
+ }
+ if (beam != null) {
+ if (query !== '') {
+ query += '&'
+ }
+ query += 'beam=' + beam
+ }
+ if (query !== '') {
+ url += '?' + query
+ }
+ axios
+ .get(url)
+ .then(response => {
+ 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)})
- this.entries.push({
- id: name,
- title: name,
- time_chunks: data[name]
- })
- }
- })
- }
- },
- watch : {
- selectedDate: function (val) {
- this.fetchData(val, this.selectedBeam);
+ 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]
+ })
+ }
+ })
+
+ }
},
- selectedBeam: function (val) {
- this.fetchData(this.selectedDate, val)
+ watch: {
+ selectedDate: function (val) {
+ this.fetchData(val, this.selectedBeam);
+ },
+ selectedBeam: function (val) {
+ this.fetchData(this.selectedDate, val)
+ }
}
- }
}
</script>
diff --git a/src/components/ProductsView.vue b/src/components/ProductsView.vue
index 2074e890b38a7d5ce37fa9830563f085a6d63bc2..df709039fb032ab197210d53cbaf6d7758321700 100644
--- a/src/components/ProductsView.vue
+++ b/src/components/ProductsView.vue
@@ -1,45 +1,47 @@
<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>Beam:</b> {{ time_chunk['beam'] }}</b-col>
- <div class="h3">
+ <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-icon-arrow-bar-up v-if="toggle" @mousedown="toggleContentVisibility"></b-icon-arrow-bar-up>
- <b-icon-arrow-bar-down v-if="!toggle" @mousedown="toggleContentVisibility"></b-icon-arrow-bar-down>
- </div>
- </b-row>
- <b-row>
- <b-col>
- <b-img-lazy fluid v-bind:src="imageSrc"></b-img-lazy>
- </b-col>
- </b-row>
- <b-row v-if="toggle">
- <b-container class="mt-2">
- <b-row v-for="[attr, value] of Object.entries(this.time_chunk)" v-bind:key="attr">
- <b-col>
- <b>{{ attr }}</b>
- </b-col>
- <b-col v-if="!['png', 'fits'].includes(attr)">
- {{ value }}
+ <b-col><b>Beam:</b> {{ time_chunk['beam'] }}</b-col>
+ <div class="h3">
- </b-col>
- <b-col v-if="['png', 'fits'].includes(attr)">
- <a v-bind:href="toUrl(value)">link</a>
- </b-col>
- </b-row>
- </b-container>
- </b-row>
+ <b-icon-arrow-bar-up v-if="toggle" @mousedown="toggleContentVisibility"></b-icon-arrow-bar-up>
+ <b-icon-arrow-bar-down v-if="!toggle" @mousedown="toggleContentVisibility"></b-icon-arrow-bar-down>
+ </div>
+ </b-row>
+ <b-row>
+ <b-col>
+ <b-img-lazy fluid v-bind:src="imageSrc"></b-img-lazy>
+ </b-col>
+ </b-row>
+ <b-row v-if="toggle">
+ <b-container class="mt-2">
+ <b-row v-for="[attr, value] of Object.entries(this.time_chunk)" v-bind:key="attr">
+ <b-col>
+ <b>{{ attr }}</b>
+ </b-col>
+ <b-col v-if="!['png', 'fits'].includes(attr)">
+ {{ value }}
- </b-container>
+ </b-col>
+ <b-col v-if="['png', 'fits'].includes(attr)">
+ <a v-bind:href="toUrl(value)">link</a>
+ </b-col>
+ </b-row>
+ </b-container>
+ </b-row>
- </b-card-text>
- </b-card-body>
- </b-card>
+ </b-container>
+
+ </b-card-text>
+ </b-card-body>
+ </b-card>
</template>
<script>
@@ -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: {
diff --git a/src/main.js b/src/main.js
index 7ba96d2539fabc1756ff4aec16a11570bce49edc..1f678686e899143539979be64b8b28c9519742be 100644
--- a/src/main.js
+++ b/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({