From cdf28ad82680511f558291e1036bc9fd05631c2d Mon Sep 17 00:00:00 2001 From: mancini <mancini@astron.nl> Date: Wed, 10 May 2023 12:15:57 +0200 Subject: [PATCH] Add url selectable date --- src/components/Home.vue | 95 +++++++++++++++++++++++++++-------------- src/main.js | 1 + yarn.lock | 6 +-- 3 files changed, 68 insertions(+), 34 deletions(-) diff --git a/src/components/Home.vue b/src/components/Home.vue index 6489ec9..1f11865 100644 --- a/src/components/Home.vue +++ b/src/components/Home.vue @@ -1,18 +1,39 @@ <template> - <b-container fluid> - <b-row> - <TimeSelector class="float-left" @select-date="handleSelectDate"></TimeSelector> - <BeamSelector class="float-right" @select-beam="handleSelectBeam"></BeamSelector> - </b-row> - <b-row class="mt-3 mb-3"> - - <b-col class="float-left" v-if="selectedDate != null">Selected date is {{selectedDate}}</b-col> - <b-col class="float-right" v-if="selectedBeam != null">Selected beam is {{selectedBeam}}</b-col> - </b-row> - <ProductsList v-bind:selectedDate="selectedDate" v-if='selectedDate != null' v-bind:selectedBeam="selectedBeam"></ProductsList> - <span v-if="selectedDate==null"><h2>Please select a date</h2></span> - </b-container> + <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="last_dynspec"></b-img-lazy> + </a> + </b-card-body> + + </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-body> + <a :href="last_hour_dynspec"> + <b-img-lazy fluid width="500px" v-bind:src="last_hour_dynspec"></b-img-lazy> + </a> + </b-card-body> + + </b-card> + </b-row> + <b-row> + <TimeSelector class="float-left" @select-date="handleSelectDate"></TimeSelector> + <BeamSelector class="float-right" @select-beam="handleSelectBeam"></BeamSelector> + </b-row> + <b-row class="mt-3 mb-3"> + + <b-col class="float-left" v-if="selectedDate != null">Selected date is {{ selectedDate }}</b-col> + <b-col class="float-right" v-if="selectedBeam != null">Selected beam is {{ selectedBeam }}</b-col> + </b-row> + <ProductsList v-bind:selectedDate="selectedDate" v-if='selectedDate != null' + v-bind:selectedBeam="selectedBeam"></ProductsList> + <span v-if="selectedDate==null"><h2>Please select a date</h2></span> + </b-container> </template> <script> @@ -21,27 +42,39 @@ import ProductsList from "./ProductsList"; import BeamSelector from "./BeamSelector"; export default { - name: "Home", - components: { - TimeSelector, - BeamSelector, - ProductsList - }, - data () { - return { - selectedDate : null, - selectedBeam : null + name: "Home", + components: { + TimeSelector, + BeamSelector, + ProductsList + }, + 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", - } - }, - methods: { - handleSelectDate (date) { - this.selectedDate = date + + } + }, + created() { + this.$watch( + () => this.$route.params, + (toParams, previousParams) => { + console.log("HEY") + console.log(toParams, previousParams, this.$route.params.date) + } + ) }, - handleSelectBeam (beam) { - this.selectedBeam = beam + methods: { + handleSelectDate(date) { + this.selectedDate = date + }, + handleSelectBeam(beam) { + this.selectedBeam = beam + } } - } } </script> diff --git a/src/main.js b/src/main.js index a71259f..7ba96d2 100644 --- a/src/main.js +++ b/src/main.js @@ -16,6 +16,7 @@ import DisplayTAB from "@/components/DisplayTAB"; import Home from "@/components/Home"; const routes = [ { path: '/', component: Home}, + { path: '/:date', component: Home}, { path: '/display', component: DisplayTAB} ] diff --git a/yarn.lock b/yarn.lock index 37a5f05..e363a44 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2344,9 +2344,9 @@ caniuse-api@^3.0.0: lodash.uniq "^4.5.0" caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001286: - version "1.0.30001300" - resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001300.tgz" - integrity sha512-cVjiJHWGcNlJi8TZVKNMnvMid3Z3TTdDHmLDzlOdIiZq138Exvo0G+G0wTdVYolxKb4AYwC+38pxodiInVtJSA== + version "1.0.30001480" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001480.tgz" + integrity sha512-q7cpoPPvZYgtyC4VaBSN0Bt+PJ4c4EYRf0DrduInOz2SkFpHD5p3LnvEpqBp7UnJn+8x1Ogl1s38saUxe+ihQQ== case-sensitive-paths-webpack-plugin@^2.3.0: version "2.4.0" -- GitLab