From c945e4993de27c40b0e81131b4a368a87d613940 Mon Sep 17 00:00:00 2001
From: david-i-berry <dberry@wmo.int>
Date: Thu, 14 Sep 2023 17:49:39 +0200
Subject: [PATCH] ingest from OSCAR

---
 webapp/public/code_lists/territory.json       |   3 +-
 .../src/components/FacilityTypeSelector.vue   |   2 +-
 webapp/src/components/ImportOSCAR.vue         | 143 ++++++++
 .../components/OperatingStatusSelector.vue    |   2 +-
 webapp/src/components/StationEditor.vue       | 325 ++++++++++++------
 webapp/src/components/StationTable.vue        |  27 +-
 webapp/src/components/TerritorySelector.vue   |   2 +-
 webapp/src/components/WMORegionSelector.vue   |   2 +-
 webapp/src/layouts/default/AppBar.vue         |   5 +-
 webapp/src/router/index.js                    |   6 +
 webapp/src/views/ImportOSCAR.vue              |   7 +
 11 files changed, 398 insertions(+), 126 deletions(-)
 create mode 100644 webapp/src/components/ImportOSCAR.vue
 create mode 100644 webapp/src/views/ImportOSCAR.vue

diff --git a/webapp/public/code_lists/territory.json b/webapp/public/code_lists/territory.json
index 89f0bef..de9f472 100644
--- a/webapp/public/code_lists/territory.json
+++ b/webapp/public/code_lists/territory.json
@@ -3,5 +3,6 @@
   {"name": "Congo", "id": "Congo", "description": "Congo"},
   {"name": "Italy", "id": "Italy", "description": "Italy"},
   {"name": "Malawi", "id": "Malawi", "description": "Malawi"},
-  {"name": "Romania", "id": "Romania", "description": "Romania"}
+  {"name": "Romania", "id": "Romania", "description": "Romania"},
+  {"name": "Germany", "id": "Germany", "description": "Germany"}
 ]
\ No newline at end of file
diff --git a/webapp/src/components/FacilityTypeSelector.vue b/webapp/src/components/FacilityTypeSelector.vue
index 30efd47..0ab36b6 100644
--- a/webapp/src/components/FacilityTypeSelector.vue
+++ b/webapp/src/components/FacilityTypeSelector.vue
@@ -55,7 +55,7 @@
       onBeforeMount( async () => {
         await fetchOptions() ;
         // update if we have an initial value
-        if( props.modelValue.length ){
+        if( props.modelValue && props.modelValue.length ){
           selected.value = options.value.find(option => option.id === props.modelValue) ;
         }
       });
diff --git a/webapp/src/components/ImportOSCAR.vue b/webapp/src/components/ImportOSCAR.vue
new file mode 100644
index 0000000..e3aae5e
--- /dev/null
+++ b/webapp/src/components/ImportOSCAR.vue
@@ -0,0 +1,143 @@
+<template>
+  <v-sheet align="center">
+    <v-dialog v-model="showDialog" width="auto">
+      <v-card>
+        <v-card-text>{{errorMessage}}</v-card-text>
+        <v-card-actions>
+          <v-btn color="primary" block @click="showDialog = false">Close</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    <v-dialog v-model="showRedirect" width="auto">
+      <v-card align="center">
+        <v-card-text>{{redirectMessage}}</v-card-text>
+        <v-card-text>{{redirectWarning}}</v-card-text>
+        <v-card-actions>
+          <v-btn color="primary" @click='router.push("/station")'>Cancel</v-btn>
+          <v-btn color="warning" @click='router.push("/station/")'>Create new station</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    <v-card>
+      <v-card-title>Import station from OSCAR/Surface</v-card-title>
+      <v-card-item>
+        <v-form>
+          <v-text-field :rules="[rules.validWSI]" v-model="wsi" label="WIGOS Station Identifier" hint="Enter WIGOS Station Identifier" persistent-hint/>
+          <v-text-field v-model="token" type="password" clearable label="Auth token"/>
+          <v-card-actions>
+            <v-btn @click="submit">Submit</v-btn>
+          </v-card-actions>
+        </v-form>
+      </v-card-item>
+    </v-card>
+  </v-sheet>
+</template>
+<script>
+  import {defineComponent, ref} from "vue";
+  import {VSheet, VCard, VCardTitle, VCardItem, VForm, VTextField, VBtn, VCardActions} from 'vuetify/lib/components/index.mjs';
+  import {useRoute, useRouter} from 'vue-router';
+
+  export default defineComponent({
+    name: "ImportOSCAR",
+    components: {
+      VSheet, VCard, VCardTitle, VCardItem, VForm, VTextField, VBtn, VCardActions
+    },
+    setup(){
+      const wsi = ref(null);
+      const station = ref(null);
+      const errorMessage = ref(null);
+      const showDialog = ref(false);
+      const redirectMessage = ref(null);
+      const redirectWarning = ref(null);
+      const showRedirect = ref(false)
+      const token = ref(null);
+      const rules = ref({
+        validWSI: value => /^0-[0-9]{1,5}-[0-9]{0,5}-[0-9a-zA-Z]{1,16}$/.test(value) || 'Invalid WSI'
+      });
+      const data = ref(null);
+      const router = useRouter();
+
+      const submit = async () => {
+        var apiURL = `${import.meta.env.VITE_API_URL}/processes/wis2box-oscar2feature/execution`;
+        var payload = {
+              "inputs": {
+                "wigos_station_identifier": wsi.value
+              }
+            };
+        // get data
+        try {
+          const response = await fetch(
+            apiURL, {
+              method: 'POST',
+              headers: {
+                  'encode': 'json',
+                  'Content-Type': 'application/json',
+                  'authorization': 'Bearer '+ token.value
+              },
+              body: JSON.stringify(payload)
+            }
+          );
+          if( ! response.ok ){
+            errorMessage.value = "Error fetching form OSCAR/Surface: " + response.status;
+            showDialog.value = true;
+          }else{
+            data.value = await response.json();
+          };
+        } catch( error ) {
+          errorMessage.value = "Error fetching from OSCAR/Surface: " + error;
+          console.log("Error fetching from OSCAR/Surface: " + error);
+          showDialog.value = true;
+        };
+
+
+
+        if( data.value ){
+          if( data.value.feature ){
+            station.value = JSON.parse(JSON.stringify(data.value.feature))
+            console.log(station.value);
+            var apiURL = `${import.meta.env.VITE_API_URL}/collections/stations/items`;
+            var leaf = "";
+            apiURL = apiURL + leaf;
+            try{
+              const response2 = await fetch(apiURL, {
+                  method: 'POST',
+                  headers: {
+                      'encode': 'json',
+                      'Content-Type': 'application/geo+json',
+                      'authorization': 'Bearer '+ token.value
+                  },
+                  body: JSON.stringify(station.value)
+                });
+              if (!response2.ok) {
+                console.log(record);
+                console.error('HTTP error', response2.status);
+                errorMessage.value = "Error submitting record: "+response2.status;
+                showDialog.value = true;
+              } else {
+                errorMessage.value = "Station successfully submitted, redirecting to station editor.";
+                showDialog.value = true;
+                setTimeout( () => {router.push("/station/"+wsi.value+"?action=edit")}, 3000);
+              }
+            }catch{
+              throw new Error(`HTTP error posting to API: ${response2.status}`);
+              errorMessage.value = JSON.stringify(response2);
+              showDialog.value = true;
+            }
+          }else if(data.value.error){
+            redirectMessage.value = "Station not found in OSCAR, unable to import," +
+                                    "please register station in OSCAR/Surface and try again." ;
+            redirectWarning.value = "For development and testing purposes stations can be created directly." +
+                                    "To add a new station to the WIS2box please click the 'create new station' button";
+            showRedirect.value = true;
+          }else{
+            errorMessage.value = "Unexpected response, see logs for further details.";
+            console.error("Error fetching station details:", data.value);
+            showDialog.value = true;
+          }
+        };
+      };
+      return {wsi, errorMessage, showDialog, rules, router,
+          redirectMessage, redirectWarning, showRedirect, submit, token};
+    }
+  });
+</script>
diff --git a/webapp/src/components/OperatingStatusSelector.vue b/webapp/src/components/OperatingStatusSelector.vue
index 666a945..1b25b37 100644
--- a/webapp/src/components/OperatingStatusSelector.vue
+++ b/webapp/src/components/OperatingStatusSelector.vue
@@ -56,7 +56,7 @@
       onBeforeMount( async () => {
         await fetchOptions() ;
         // update if we have an initial value
-        if( props.modelValue.length ){
+        if( props.modelValue && props.modelValue.length ){
           selected.value = options.value.find(option => option.id === props.modelValue) ;
         }
       });
diff --git a/webapp/src/components/StationEditor.vue b/webapp/src/components/StationEditor.vue
index 5979d73..e9d8dec 100644
--- a/webapp/src/components/StationEditor.vue
+++ b/webapp/src/components/StationEditor.vue
@@ -11,109 +11,118 @@
     <v-card-title v-if="!readonly">{{ route.params.id ? 'Edit' : 'Create new' }} station</v-card-title>
     <v-card-title v-else>View station</v-card-title>
     <v-card v-if="station" max-width="1200px">
-      <v-card-item>
-        <v-text-field
-          label="Station name"
-          v-model="station.properties.name"
-          :rules="[rules.validName]"
-          :readonly="readonly"
-          hint="Enter name of station" persistent-hint>
-        </v-text-field>
-      </v-card-item>
-      <v-card-item>
-        <v-text-field
-          label="WIGOS station identifier"
-          v-model="station.properties.wigos_station_identifier"
-          :rules="[rules.validWSI]"
-          :readonly="readonly"
-          hint="Enter the WIGOS station identifier" persistent-hint>
-        </v-text-field>
-      </v-card-item>
-      <v-card-item>
-        <v-text-field
-          label="Traditional station identifier"
-          v-model="station.properties.traditional_station_identifier"
-          :readonly="readonly"
-          hint="Enter the traditional (5 or 7 digit) station identifier" persistent-hint>
-        </v-text-field>
-      </v-card-item>
-      <v-card-item>
-        <v-container>
-          <v-row>
-            <v-col cols="6">
-              <v-row>
-              <v-text-field
-                label="Longitude (decimal degrees E), -180 to 180"
-                v-model="station.geometry.longitude"
-                :rules="[rules.validLongitude]"
-                :readonly="readonly"
-                type="number"
-                hint="Enter the station longitude (degrees E)" persistent-hint/>
+      <v-form v-model="formValid" align="left">
+        <v-card-item>
+          <v-text-field
+            label="Station name"
+            v-model="station.properties.name"
+            :rules="[rules.validName]"
+            :readonly="readonly"
+            hint="Enter name of station" persistent-hint>
+          </v-text-field>
+        </v-card-item>
+        <v-card-item>
+          <v-text-field
+            label="WIGOS station identifier"
+            v-model="station.properties.wigos_station_identifier"
+            :rules="[rules.validWSI]"
+            :readonly="readonly"
+            hint="Enter the WIGOS station identifier" persistent-hint>
+          </v-text-field>
+        </v-card-item>
+        <!--<v-card-item v-if="(!readonly) && (!route.params.id)">
+          <v-btn elevation=2 @click="importOSCAR">Import from OSCAR/Surface</v-btn>
+        </v-card-item>
+        -->
+        <v-card-item>
+          <v-text-field
+            label="Traditional station identifier"
+            v-model="station.properties.traditional_station_identifier"
+            :readonly="readonly"
+            hint="Enter the traditional (5 or 7 digit) station identifier" persistent-hint>
+          </v-text-field>
+        </v-card-item>
+        <v-card-item>
+          <v-container>
+            <v-row>
+              <v-col cols="4">
+                <v-row>
+                <v-text-field
+                  label="Longitude (decimal degrees E), -180 to 180"
+                  v-model="station.geometry.longitude"
+                  :rules="[rules.validLongitude]"
+                  :readonly="readonly"
+                  type="number"
+                  hint="Enter the station longitude (degrees E)" persistent-hint/>
+                </v-row>
+                <v-row>
+                  <v-text-field
+                  label="Latitude (decimal degrees N), -90 to 90"
+                  v-model="station.geometry.latitude"
+                  :rules="[rules.validLatitude]"
+                  :readonly="readonly"
+                  type="number"
+                  hint="Enter the station latitude (degrees N)" persistent-hint/>
               </v-row>
               <v-row>
                 <v-text-field
-                label="Latitude (decimal degrees N), -90 to 90"
-                v-model="station.geometry.latitude"
-                :rules="[rules.validLatitude]"
-                :readonly="readonly"
-                type="number"
-                hint="Enter the station latitude (degrees N)" persistent-hint/>
-            </v-row>
-            <v-row>
-              <v-text-field
-                label="Station elevation above sea level (metres)"
-                v-model="station.geometry.elevation"
-                :rules="[rules.validElevation]"
-                :readonly="readonly"
-                type="number"
-                hint="Station elevation above sea level (metres)" persistent-hint/>
-            </v-row>
-            <v-row v-if="!readonly">
-              <v-btn @click=getElevation()>Get elevation</v-btn>
+                  label="Station elevation above sea level (metres)"
+                  v-model="station.geometry.elevation"
+                  :rules="[rules.validElevation]"
+                  :readonly="readonly"
+                  type="number"
+                  hint="Station elevation above sea level (metres)" persistent-hint/>
+              </v-row>
+              <!--
+              <v-row v-if="!readonly">
+                <v-btn @click=getElevation()>Get elevation</v-btn>
+              </v-row>
+              -->
+              </v-col>
+              <v-col cols="8">
+                <LocatorMap
+                    :longitude="parseFloat(station.geometry.longitude)"
+                    :latitude="parseFloat(station.geometry.latitude)"/>
+              </v-col>
             </v-row>
-            </v-col>
-            <v-col cols="6">
-              <LocatorMap
-                  :longitude="parseFloat(station.geometry.longitude)"
-                  :latitude="parseFloat(station.geometry.latitude)"/>
-            </v-col>
-          </v-row>
-        </v-container>
-      </v-card-item>
-      <v-card-item>
-        <FacilityTypeSelector v-model="station.properties.facility_type" :readonly="readonly"/>
-      </v-card-item>
-      <v-card-item>
-        <v-text-field
-          label="Barometer height above sea level"
-          v-model="station.properties.barometer_height"
-          :rules="[rules.validBarometerHeight]"
-          :readonly="readonly"
-          hint="Enter barometer height (metres)" persistent-hint type="number">
-        </v-text-field>
-      </v-card-item>
-      <v-card-item><WMORegionSelector v-model="station.properties.wmo_region" :readonly="readonly"/></v-card-item>
-      <v-card-item><TerritorySelector v-model="station.properties.territory_name" :readonly="readonly"/></v-card-item>
-      <v-card-item><OperatingStatusSelector v-model="station.properties.status" :readonly="readonly"/></v-card-item>
-      <v-card-item>
-        <TopicHierarchySelector v-model="station.properties.topics" multiple :readonly="readonly"/>
-      </v-card-item>
-      <v-card-item>
-        <v-text-field type="password" clearable v-model="token" label="Auth token"></v-text-field>
-      </v-card-item>
-      <v-card-actions v-if="!readonly">
-        <v-btn @click="registerStation()" elevation=2>Register/Update</v-btn>
-        <v-btn @click="router.push('/station/'+route.params.id)" elevation=2>Cancel</v-btn>
-      </v-card-actions>
-      <v-card-actions v-else>
-        <v-btn @click="router.push('/station/'+route.params.id+'?action=edit')" elevation=2>Edit</v-btn>
-      </v-card-actions>
+          </v-container>
+        </v-card-item>
+        <v-card-item>
+          <FacilityTypeSelector v-model="station.properties.facility_type" :readonly="readonly"/>
+        </v-card-item>
+        <v-card-item>
+          <v-text-field
+            label="Barometer height above sea level"
+            v-model="station.properties.barometer_height"
+            :rules="[rules.validBarometerHeight]"
+            :readonly="readonly"
+            hint="Enter barometer height (metres)" persistent-hint type="number">
+          </v-text-field>
+        </v-card-item>
+        <v-card-item><WMORegionSelector v-model="station.properties.wmo_region" :readonly="readonly"/></v-card-item>
+        <v-card-item><TerritorySelector v-model="station.properties.territory_name" :readonly="readonly"/></v-card-item>
+        <v-card-item><OperatingStatusSelector v-model="station.properties.status" :readonly="readonly"/></v-card-item>
+        <v-card-item>
+          <TopicHierarchySelector v-model="station.properties.topics" multiple :readonly="readonly"/>
+        </v-card-item>
+        <v-card-item>
+          <v-text-field type="password" clearable v-model="token" label="Auth token"></v-text-field>
+        </v-card-item>
+        <v-card-actions v-if="!readonly">
+          <v-btn @click="registerStation()" elevation=2 :disabled="!formValid">Register/Update</v-btn>
+          <v-btn @click="cancelEdit()" elevation=2>Cancel</v-btn>
+        </v-card-actions>
+        <v-card-actions v-else>
+          <v-btn @click="router.push('/station/'+route.params.id+'?action=edit')" elevation=2>Edit</v-btn>
+        </v-card-actions>
+      </v-form>
     </v-card>
     </v-sheet>
   </template>
   <script>
     import {defineComponent, ref, watch, onBeforeMount, onMounted} from 'vue';
     import {VSheet, VCard, VCardItem, VTextField, VContainer, VRow, VCol, VBtn, VCardActions} from 'vuetify/lib/components/index.mjs';
+    import {VForm} from 'vuetify/lib/components/index.mjs';
     import TopicHierarchySelector from '@/components/TopicHierarchySelector.vue';
     import FacilityTypeSelector from '@/components/FacilityTypeSelector.vue';
     import WMORegionSelector from '@/components/WMORegionSelector.vue';
@@ -129,7 +138,7 @@
       components: {
         VContainer, VRow, VContainer, VCard, VCardItem, VTextField, OperatingStatusSelector,
         TopicHierarchySelector, FacilityTypeSelector, WMORegionSelector, TerritorySelector,
-        VBtn, VCardActions, LocatorMap
+        VBtn, VCardActions, LocatorMap, VForm
       },
       setup(){
         const route = useRoute();
@@ -141,9 +150,16 @@
         const operatingStatusOptions = ref(null);
         const territoryOptions = ref(null);
         const WMORegionOptions = ref(null);
+        const facilityTypeOptions = ref(null);
         const readonly = ref(false);
         const msg = ref('');
         const token = ref(null);
+        const formValid = ref(null);
+
+        const selectedFacilityType = ref(null);
+
+
+
         // define validation rules
         const rules = ref({
           validWSI: value => /^0-[0-9]{1,5}-[0-9]{0,5}-[0-9a-zA-Z]{1,16}$/.test(value) || 'Invalid WSI',
@@ -153,9 +169,23 @@
           validBarometerHeight: value => ! isNaN(value) ? true : 'Invalid barometer height',
           validName: value => value && value.length > 3 ? true : 'Name must be more than 3 characters'
         });
-        // setup initial (empty station)
+
+        const cancelEdit = async () => {
+          readonly.value = true;
+          if( route.params.id ){
+            loadStation(route.params.id);
+            router.push('/station/'+route.params.id);
+          }else{
+            router.push('/station');
+          };
+        };
 
         const registerStation = async () => {
+          if( ! formValid.value ){
+            errorMessage.value = "Please correct validation errors before submitting"
+            showDialog = true;
+            return;
+          }
           var record = {
             id: station.value.properties.wigos_station_identifier,  // WSI
             type: 'Feature',
@@ -169,14 +199,14 @@
               name: station.value.properties.name,
               wigos_station_identifier: station.value.properties.wigos_station_identifier,  // WSI
               traditional_station_identifier: station.value.properties.traditional_station_identifier,
-              facility_type: station.value.properties.facility_type.id,
-              territory_name: station.value.properties.territory_name.id,
+              facility_type: station.value.properties.facility_type.id ? station.value.properties.facility_type.id : null,
+              territory_name: station.value.properties.territory_name.id ? station.value.properties.territory_name.id : null,
               barometer_height: parseFloat(station.value.properties.barometer_height),
-              wmo_region: station.value.properties.wmo_region.id,
+              wmo_region: station.value.properties.wmo_region.id ? station.value.properties.wmo_region.id : null,
               url: "https://oscar.wmo.int/surface/#/search/station/stationReportDetails/" +
                       station.value.properties.wigos_station_identifier,
               topics: station.value.properties.topics.map( (topic) => (topic.id)),
-              status: station.value.properties.status.id,
+              status: station.value.properties.status.id ? station.value.properties.status.id : null,
               id: station.value.properties.wigos_station_identifier  // WSI
             }
           }
@@ -194,12 +224,13 @@
             });
           if (!response.ok) {
               console.log(record);
-             console.error('HTTP error', response.status);
+              console.error('HTTP error', response.status);
+              errorMessage.value = "Error submitting record: "+response.status;
+              showDialog.value = true;
           } else {
-            setTimeout(200); // short pause to give backend time to catch up.
-            router.push("/station/"+record.id);
-            errorMessage.value = "Station successfully submitted";
+            errorMessage.value = "Station successfully submitted, redirecting to station list.";
             showDialog.value = true;
+            setTimeout( () => {router.push("/station")}, 3000); // short pause to give backend time to catch up.
           }
         };
 
@@ -228,20 +259,26 @@
           }
         };
 
-        onBeforeMount( () => {
+        onBeforeMount( async () => {
           if(route.query.action==="edit"){
             readonly.value = false;
           }else{
             readonly.value = true;
           }
+          // fetch code lists
+          var data = null;
+          var response;
+          await fetch("/code_lists/territory.json").then( (response) => response.json()).then( (data) => territoryOptions.value = data);
+          await fetch("/code_lists/facilityType.json").then( (response) => response.json()).then( (data) => facilityTypeOptions.value = data);
+          await fetch("/code_lists/operatingStatus.json").then( (response) => response.json()).then( (data) => operatingStatusOptions.value = data);
+          await fetch("/code_lists/WMORegion.json").then( (response) => response.json()).then( (data) => WMORegionOptions.value = data);
         });
 
-
         onMounted( async () => {
           // load codes lists
           if (route.params.id){
             await loadStation( route.params.id );
-          }
+          };
           if( ! station.value ){
             readonly.value = false;
             station.value = {
@@ -322,9 +359,83 @@
           }
         })
 
+        const importOSCAR = async () => {
+          if( station.value.properties.wigos_station_identifier ){
+            const apiURL = `${import.meta.env.VITE_API_URL}/processes/wis2box-oscar2feature/execution`;
+            // fetch via process
+            const payload = {
+              "inputs": {
+                "wigos_station_identifier": station.value.properties.wigos_station_identifier
+              }
+            }
+            try {
+              const response = await fetch(
+                apiURL, {
+                  method: 'POST',
+                  headers: {
+                      'encode': 'json',
+                      'Content-Type': 'application/json',
+                      'authorization': 'Bearer '+ token.value
+                  },
+                  body: JSON.stringify(payload)
+                }
+              );
+              if( ! response.ok ){
+                console.log( response );
+                errorMessage.value = "Error fetching form OSCAR/Surface: " + response.status;
+                showDialog.value = true;
+              }else{
+                console.log( response );
+                const data = await response.json();
+                console.log(data)
+                // this is currently broken, the drop down selectors are not updated when data are loaded via this route
+                // we may want to import from oscar directly from the station table
+                if( data.feature ){
+                  station.value = {
+                    id: data.feature.id,  // WSI
+                    type: data.feature.type,
+                    geometry: {
+                      type: data.feature.geometry.type,
+                      coordinates: data.feature.geometry.coordinates,
+                      longitude: data.feature.geometry.coordinates[0],
+                      latitude: data.feature.geometry.coordinates[1],
+                      elevation: data.feature.geometry.coordinates[2]
+                    },
+                    properties: {
+                      name: data.feature.properties.name,
+                      wigos_station_identifier: data.feature.properties.wigos_station_identifier,  // WSI
+                      traditional_station_identifier: data.feature.properties.traditional_station_identifier,
+                      territory_name: territoryOptions.value.find( (item) => item.id === data.feature.properties.territory_name ),
+                      barometer_height: data.feature.properties.barometer_height,
+                      wmo_region: WMORegionOptions.value.find( (item) => item.id === data.feature.properties.wmo_region ),
+                      url: data.feature.properties.url,
+                      topics: JSON.parse(JSON.stringify(data.feature.properties.topics)),
+                      status: operatingStatusOptions.value.find( (item) => item.id === data.feature.properties.status ),
+                      id: data.feature.properties.id  // WSI
+                    }
+                  };
+                  // update code list elements separately
+                  selectedFacilityType.value = facilityTypeOptions.value.find( (item) => item.id === data.feature.properties.facility_type );
+                  console.log(station.value);
+                }else if (data.error){
+                  errorMessage.value = JSON.stringify(data.error);
+                  showDialog.value = true;
+                }else{
+                  errorMessage.value = "Unexpected response: " + JSON.stringify(data);
+                  showDialog.value = true;
+                }
+              }
+            } catch( error ) {
+              errorMessage.value = "Error fetching from OSCAR/Surface: " + error;
+              showDialog.value = true;
+            }
+
+          }
+        };
 
         return {station, topics, registerStation, getElevation, showDialog, msg, rules, route, router,
-          operatingStatusOptions, WMORegionOptions, territoryOptions, readonly, errorMessage, token
+          operatingStatusOptions, WMORegionOptions, territoryOptions, readonly, errorMessage, token, formValid,
+          cancelEdit, importOSCAR, selectedFacilityType
         };
       }
     });
diff --git a/webapp/src/components/StationTable.vue b/webapp/src/components/StationTable.vue
index b53a033..62d6e0e 100644
--- a/webapp/src/components/StationTable.vue
+++ b/webapp/src/components/StationTable.vue
@@ -6,7 +6,7 @@
       <v-card-item>
         <v-btn prepend-icon="mdi-plus" color="success" @click="addRecord()">Add new station</v-btn>
       </v-card-item>
-      <VDataTable :headers="headers" :items="items" :search="search" dense small>
+      <VDataTable v-if="items" :headers="headers" :items="items" :search="search" dense small>
           <template v-slot:item.actions="{ item }">
             <v-icon size="small" @click="editRecord(item)">mdi-pen</v-icon>
             <v-icon size="small" @click="viewRecord(item)">mdi-eye</v-icon>
@@ -64,6 +64,8 @@ export default defineComponent({
     const token = ref(null);
 
     const loadStations = async () => {
+        items.value = null;
+        console.log(items.value);
         const apiURL = `${import.meta.env.VITE_API_URL}/collections/stations/items?f=json`;
         try {
           var response = await fetch(apiURL);
@@ -98,12 +100,14 @@ export default defineComponent({
                                 " See logs for more information.";
           console.error("Error fetching topic hierarchy:", error)
         }
-        headers.value = Object.keys(items.value[0]).map( key => ({
-          title: key,
-          value: key,
-          key: key,
-          sortable: true
-        }));
+        if( items.value ){
+          headers.value = Object.keys(items.value[0]).map( key => ({
+            title: key,
+            value: key,
+            key: key,
+            sortable: true
+          }));
+        };
     }
 
     onMounted( async() => {
@@ -114,6 +118,9 @@ export default defineComponent({
       selectedStation.value = null;
       stationToDelete.value = null;
       deleteDialog.value = false;
+      // reload the stations
+      loadStations();
+
     };
     const confirmDelete = async () => {
       if( selectedStation.value === stationToDelete.value ){
@@ -132,10 +139,8 @@ export default defineComponent({
           if (!response.ok) {
             console.error('HTTP error', response.status);
           }else {
+            setTimeout(2000); // short pause to give backend time to catch up.
             closeDeleteDialog();
-            // reload the station list
-            setTimeout(500); // short pause to give backend time to catch up.
-            loadStations();
           }
         }
         catch (error) {
@@ -159,7 +164,7 @@ export default defineComponent({
     }
 
     const addRecord = () => {
-      router.push("/station/")
+      router.push("/import-station")
     }
 
     return {headers, items, search, sortBy, confirmDelete, addRecord, deleteRecord, closeDeleteDialog,
diff --git a/webapp/src/components/TerritorySelector.vue b/webapp/src/components/TerritorySelector.vue
index 1ce75b1..7571b45 100644
--- a/webapp/src/components/TerritorySelector.vue
+++ b/webapp/src/components/TerritorySelector.vue
@@ -56,7 +56,7 @@
       onBeforeMount( async () => {
         await fetchOptions() ;
         // update if we have an initial value
-        if( props.modelValue.length ){
+        if( props.modelValue && props.modelValue.length ){
           selected.value = options.value.find(option => option.id === props.modelValue) ;
         }
       });
diff --git a/webapp/src/components/WMORegionSelector.vue b/webapp/src/components/WMORegionSelector.vue
index b932836..951edb0 100644
--- a/webapp/src/components/WMORegionSelector.vue
+++ b/webapp/src/components/WMORegionSelector.vue
@@ -56,7 +56,7 @@
       onBeforeMount( async () => {
         await fetchOptions() ;
         // update if we have an initial value
-        if( props.modelValue.length ){
+        if( props.modelValue && props.modelValue.length ){
           selected.value = options.value.find(option => option.id === props.modelValue) ;
         }
       });
diff --git a/webapp/src/layouts/default/AppBar.vue b/webapp/src/layouts/default/AppBar.vue
index d6d806e..fb77cd9 100644
--- a/webapp/src/layouts/default/AppBar.vue
+++ b/webapp/src/layouts/default/AppBar.vue
@@ -1,8 +1,7 @@
 <template>
   <v-app-bar image="@/assets/banner.png">
-    <img src="@/assets/logo-large.png" alt="Logo" class="wmo-logo" />
-    <v-app-bar-title class="wis2-title"> WIS2 in a box
-    </v-app-bar-title>
+    <img src="@/assets/logo-large.png" alt="Logo" class="wmo-logo"/>
+    <v-app-bar-title class="wis2-title">WIS2 in a box</v-app-bar-title>
     <v-btn class="bar-button" exact to="/">Home</v-btn>
     <v-btn class="bar-button" text to="/synop_form">Synop form</v-btn>
     <v-btn class="bar-button" text to="/csv2bufr_form">CSV to BUFR form</v-btn>
diff --git a/webapp/src/router/index.js b/webapp/src/router/index.js
index 95a2fc8..e7575e9 100644
--- a/webapp/src/router/index.js
+++ b/webapp/src/router/index.js
@@ -28,6 +28,12 @@ const routes = [
         component: () => import('@/views/MonitoringPage.vue'),
         meta: {title: 'wis2box - Monitoring'}
       },
+      {
+        path: '/import-station',
+        name: 'importOSCAR',
+        component: () => import('@/views/ImportOSCAR.vue'),
+        meta: {title: 'Import from OSCAR'}
+      },
       {
         path: '/station',
         name: 'stationTable',
diff --git a/webapp/src/views/ImportOSCAR.vue b/webapp/src/views/ImportOSCAR.vue
new file mode 100644
index 0000000..8f6c1ae
--- /dev/null
+++ b/webapp/src/views/ImportOSCAR.vue
@@ -0,0 +1,7 @@
+<template>
+  <ImportOSCAR/>
+</template>
+
+<script setup>
+  import ImportOSCAR from '@/components/ImportOSCAR.vue'
+</script>