Skip to content

Commit

Permalink
Added configurable home page
Browse files Browse the repository at this point in the history
  • Loading branch information
@RoryPTB
RoryPTB committed Aug 29, 2023
1 parent 3ad3047 commit aeaf5e2
Show file tree
Hide file tree
Showing 5 changed files with 80 additions and 48 deletions.
4 changes: 4 additions & 0 deletions webapp/config/HomeContent.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<!DOCTYPE html>
<html lang="en">

</html>
36 changes: 36 additions & 0 deletions webapp/src/components/HomePage.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<template>
<v-card>
<v-card-title class="big-title">
Welcome to WIS2 in a box!
</v-card-title>
<v-card-item>
At this page you can submit FM 12 SYNOP bulletin and monitor notifications from topics found in your wis2box.
</v-card-item>
<v-card-item v-html="homeContent"></v-card-item>
</v-card>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const homeContent = ref('If you encounter any issues, please contact: <a href = "mailto: abc@example.com">abc@example.com</a>')
if (import.meta.env.VITE_HOME_CONTENT_PATH != undefined) {
onMounted(async () => {
const response = await fetch(import.meta.env.VITE_HOME_CONTENT_PATH);
if (response.ok) {
homeContent.value = await response.text();
}
});
}
</script>

<style scoped>
.big-title {
font-size: 1.4rem;
font-weight: 700;
}
</style>
60 changes: 25 additions & 35 deletions webapp/src/components/MonitoringPage.vue
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
<template>
<v-card-title class="big-title">Monitoring Dashboard</v-card-title>

<!-- Drop down selection for the dataset the user wants to monitor -->
<v-select label="Choose a dataset to monitor" v-model="selectedTitle" :items="titles" v-if="titles.length"></v-select>
<v-card-item>
<!-- Drop down selection for the topic the user wants to monitor -->
<v-select label="Choose a topic to monitor" v-model="selectedTopic" :items="topics" v-if="topics.length"></v-select>

<!-- Search bar to search for a WSI and only monitor that station -->
<v-text-field label="Search a station to monitor (optional)" clearable />
</v-card-item>

<!-- Search bar to search for a WSI and only monitor that station -->
<v-text-field label="Search a station to monitor (optional)" clearable/>

<!-- Dashboard visualising the notifications of the dataset selected -->
<NotificationDashboard :topicHierarchy="datasets[selectedTitle]" v-if="selectedTitle"/>

<!-- Dashboard visualising the notifications of the topic selected -->
<NotificationDashboard :topicHierarchy="selectedTopic" v-if="selectedTopic" />
</template>

<script>
Expand All @@ -26,30 +28,20 @@ export default defineComponent({
data() {
return {
// Options for user to filter the dashboard (surface, upper air, etc)
datasets: {},
topics: [],
// Title selected by the user, used to get the topic hierarchy
// from the datasets dictionary
selectedTitle: null
}
},
computed: {
// Get titles (the keys) from datasets dictionary by using Object.keys,
// used for the selection at the top of the page
titles() {
return Object.keys(this.datasets);
// from the topics array
selectedTopic: null
}
},
methods: {
// Method to get topic hierarchies and corresponding titles from the
// discovery metadata, in order to allow the user to select the dataset
// discovery metadata, in order to allow the user to select the topic
// dsisplayed in the dashboard
async getDatasets() {
async getTopics() {
if (import.meta.env.VITE_TEST_MODE === "true" || import.meta.env.VITE_API_URL == undefined) {
console.log("Use test datasets");
this.datasets = {
"Synoptic weather observations from Romania": "rou/rnimh/data/core/weather/surface-based-observations/synop",
"Surface weather observations from Malawi": "mwi/mwi_met_centre/data/core/weather/surface-based-observations/synop"
};
console.log("Use test topics");
this.topics = ["rou/rnimh/data/core/weather/surface-based-observations/synop", "mwi/mwi_met_centre/data/core/weather/surface-based-observations/synop"];
}
else {
const apiUrl = `${import.meta.env.VITE_API_URL}/collections/discovery-metadata/items?f=json`;
Expand All @@ -63,15 +55,13 @@ export default defineComponent({
const data = await response.json();
// If the features object is in the data
if (data.features) {
// Populate the datasets dictionary with the titles as keys
// and corresponding topic hierarchies as items
this.datasets = data.features.reduce((acc, feature) => {
acc[feature.properties.title] = feature.properties["wmo:topicHierarchy"];
// acc: accumulator object, used to iteratively build
// this datasets dictionary
return acc;
}, {});
console.log("Datasets:", this.datasets);
// Use Array.map to create a new array of the topic hierarchies
this.topics = data.features.map(feature => {
if (feature.properties && feature.properties['wmo:topicHierarchy']) {
return feature.properties['wmo:topicHierarchy']
}
});
console.log("Topics:", this.topics);
}
else {
console.error("API response does not have features property");
Expand All @@ -85,8 +75,8 @@ export default defineComponent({
}
},
mounted() {
// Get topic hierarchies and titles for the user to select a dataset
this.getDatasets();
// Get topic hierarchies and titles for the user to select a topic
this.getTopics();
}
});
</script>
Expand Down
25 changes: 13 additions & 12 deletions webapp/src/components/SynopForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,26 +38,26 @@

<!-- Topic hierarchy selection -->
<v-card-item>
<v-select label="Topic" v-model="hierarchy" :items="hierarchyList" v-if="hierarchyList.length"
<v-select label="Topic" v-model="topic" :items="topicList" v-if="topicList.length"
hint="Topic hierarchy for ingestion of data" persistent-hint></v-select>
</v-card-item>

</v-form>
<v-card-item>
<!-- Show switch above the submit button on mobile -->
<v-switch class="hidden-sm-and-up"
:disabled="(datePossible === false) || !aaxxPresent || !equalsPresent || !hierarchy"
:disabled="(datePossible === false) || !aaxxPresent || !equalsPresent || !topic"
v-model="notificationsOnPending" label="Publish on WIS2" color="primary" hide-details></v-switch>
<div class="button-align">
<v-btn :disabled="(datePossible === false) || !aaxxPresent || !equalsPresent || !hierarchy"
<v-btn :disabled="(datePossible === false) || !aaxxPresent || !equalsPresent || !topic"
append-icon="mdi-cloud-upload" :loading="loading" @click="submit">Submit
<template v-slot:loader>
<v-progress-linear indeterminate></v-progress-linear>
</template>
</v-btn>
<!-- Show switch on the right of submit button on tablet and desktop -->
<v-switch class="hidden-xs"
:disabled="(datePossible === false) || !aaxxPresent || !equalsPresent || !hierarchy"
:disabled="(datePossible === false) || !aaxxPresent || !equalsPresent || !topic"
v-model="notificationsOnPending" label="Publish on WIS2" color="primary" hide-details></v-switch>
</div>
</v-card-item>
Expand Down Expand Up @@ -218,9 +218,9 @@ export default defineComponent({
bulletin: "", // FM 12 data
aaxxPresent: true, // Boolean to check if AAXX is in bulletin
equalsPresent: true, // Boolean to check if = delimiter is in bulletin
hierarchyList: ["test1", "test2", "test3"], // List of topic hierarchies
topicList: ["test1", "test2", "test3"], // List of topic hierarchies
// before they are obtained from discovery metadata
hierarchy: "", // Topic hierarchy selected by user
topic: "", // Topic hierarchy selected by user
notificationsOnPending: true, // Realtime variable for if user has
// selected notifications or not
notificationsOn: true, // Variable that updates to the pending variable
Expand Down Expand Up @@ -259,14 +259,14 @@ export default defineComponent({
this.equalsPresent = this.bulletin.includes('=');
},
// Allows us to get the current topic hierarchies available
async fetchHierarchy() {
async fetchTopics() {
const apiUrl = `${import.meta.env.VITE_API_URL}/collections/discovery-metadata/items?f=json`;
// check if TEST=True is set in .env file
console.log(import.meta.env);
// check if TEST_MODE is set in .env file or if VITE_API_URL is not set
if (import.meta.env.VITE_TEST_MODE === "true" || import.meta.env.VITE_API_URL == undefined) {
console.log("TEST_MODE is enabled");
this.hierachyList = ["test1", "test2", "test3"];
this.topicList = ["test1", "test2", "test3"];
}
else {
console.log("Fetching topic hierarchy from:", apiUrl);
Expand All @@ -277,14 +277,15 @@ export default defineComponent({
}
else {
const data = await response.json();
// If the features object is in the data
if (data.features) {
// Use Array.map to create a new array of the topic hierarchies
this.hierarchyList = data.features.map(feature => {
this.topicList = data.features.map(feature => {
if (feature.properties && feature.properties['wmo:topicHierarchy']) {
return feature.properties['wmo:topicHierarchy']
}
});
console.log(this.hierarchyList)
console.log(this.topicList)
}
else {
console.error("API response is not an object");
Expand Down Expand Up @@ -363,7 +364,7 @@ export default defineComponent({
year: this.date.year, // Year of data
month: this.date.month + 1, // Month of data, +1 as JS starts
// from 0 for months
channel: this.hierarchy, // Topic hierarchy
channel: this.topic, // Topic hierarchy
notify: this.notificationsOn // Boolean for WIS2 notifications
}
};
Expand Down Expand Up @@ -466,7 +467,7 @@ export default defineComponent({
DownloadButton
},
mounted() {
this.fetchHierarchy();
this.fetchTopics();
}
});
</script>
Expand Down
3 changes: 2 additions & 1 deletion webapp/src/views/Home.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<template>
<HomePage />
</template>

<script setup>
//
import HomePage from '@/components/HomePage.vue'
</script>

0 comments on commit aeaf5e2

Please sign in to comment.