Station bug fix 2

webapp/src/components/CodeListSelector.vue

@@ -7,7 +7,7 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
-    <div v-if="!_error">
+    <div v-if="!error_">
     <v-autocomplete
       v-if="options !== null"
       :items="options"
@@ -29,7 +29,7 @@
 </template>
 
 <script>
-  import { defineComponent, ref, onBeforeMount, watch} from 'vue';
+  import { defineComponent, ref, onBeforeMount, watch, onMounted} from 'vue';
   import { VCard, VCardItem, VAutocomplete} from 'vuetify/lib/components/index.mjs';
 
 
@@ -50,7 +50,7 @@
       const options = ref(null);
       const selected = ref(null);
       const showDialog = ref(false);
-      const _error = ref(false);
+      const error_ = ref(false);
 
       const fetchOptions = async() => {
         try {
@@ -64,17 +64,23 @@
         } catch (error) {
           console.error('Error fetching ' + props.label + ' options:', error);
           showDialog.value = true;
-          _error.value = true;
+          error_.value = true;
         }
       };
 
       onBeforeMount( async () => {
         fetchOptions();
+        selected.value = props.modelValue;
       });
+
+      watch( () => props.modelValue, (newValue) => {
+        selected.value = newValue;
+      });
+
       watch( () => selected.value, (newValue) => {
         emit("update.modelValue", newValue);
       });
-      return {selected, options, props, showDialog, _error};
+      return {selected, options, props, showDialog, error_};
     }
   });
 </script>

webapp/src/components/CsvToBUFRForm.vue

@@ -109,8 +109,9 @@
                         <v-card>
                             <v-card-title>Authorize and publish</v-card-title>
                             <v-card-item>
-                              <v-text-field type="password" clearable v-model="token"></v-text-field>
+                              <v-text-field type="password" clearable v-model="token" hint='Enter wis2box auth token for "processes/wis2box"' label='wis2box auth token for "processes/wis2box"' persistent-hint ></v-text-field>
                             </v-card-item>
+                            <v-switch class="hidden-xs" v-model="notificationsOnPending" label="Publish on WIS2" color="primary" hide-details></v-switch>
                             <v-card-item v-if="token">Click next to submit the data</v-card-item>
                         </v-card>
                     </v-stepper-window-item>
@@ -223,7 +224,7 @@
 
 <script>
     import { defineComponent, ref,onBeforeMount, onMounted, watch, computed} from 'vue';
-    import { VFileInput, VCardActions, VBtn, VCard, VCardText, VCardItem, VChip, VTooltip } from 'vuetify/lib/components/index.mjs';
+    import { VFileInput, VCardActions, VBtn, VCard, VCardText, VCardItem, VChip, VTooltip, VSwitch } from 'vuetify/lib/components/index.mjs';
     import { VList, VListItem, VListSubheader, VSheet, VContainer, VCardTitle, VIcon, VDialog} from 'vuetify/lib/components/index.mjs';
     import { VCardSubtitle} from 'vuetify/lib/components/index.mjs';
     import { VDataTable} from 'vuetify/lib/labs/VDataTable/index.mjs';
@@ -239,7 +240,7 @@
             VChip, VTooltip, VListItem, VList, VListSubheader, VSheet, VContainer,
             VCardTitle, VIcon, VStepper, VStepperHeader, VStepperItem, VStepperWindow, VStepperWindowItem,
             VStepperActions, VDialog, VCardSubtitle, InspectBufrButton, DownloadButton,
-            TopicHierarchySelector
+            TopicHierarchySelector, VSwitch
         },
         setup() {
             // reactive variables
@@ -264,6 +265,7 @@
                 password: false
             }
             const result = ref(null);
+            const notificationsOnPending = ref(false);
             // computed properties
             const resultTitle = computed( () => {
                 if( result.value && result.value.result){
@@ -401,7 +403,7 @@
                   inputs: {
                       data: rawCSV.value,
                       channel: topicSelected.value.id,
-                      notify: true,
+                      notify: notificationsOnPending.value,
                       template: "aws-template"
                   }
               };
@@ -513,7 +515,7 @@
             });
 
             return {theData, headers, incomingFile, loadCSV, step, prev, next, getFileName, scrollToRef,
-                    validationWarnings, validationErrors, status, token,
+                    validationWarnings, validationErrors, status, token, notificationsOnPending,
                     topicSelected, submit, msg, showDialog, result, resultTitle, numberNotifications};
         },
     })

webapp/src/components/ImportOSCAR.vue

@@ -114,8 +114,11 @@
         <v-card-item><CodeListSelector codeList="WMORegion" label="WMO Region" defaultHint= "Select WMO region" v-model="station.properties.wmo_region"/></v-card-item>
         <v-card-item><CodeListSelector codeList="territory" label="Territory or WMO member operating the station" defaultHint= "Select territory" v-model="station.properties.territory_name"/></v-card-item>
         <v-card-item><CodeListSelector codeList="operatingStatus" label="Operating status" defaultHint= "Select operating status" v-model="station.properties.status"/></v-card-item>
+         <v-card-item>
+          <TopicHierarchySelector v-model="station.properties.topics" multiple :rules="[rules.topic]"/>
+        </v-card-item>
         <v-card-item>
-          <v-text-field :rules="[rules.token]" type="password" clearable v-model="token" label="Station metadata token" hint="Enter authorization token for publishing station metadata" persistent-token></v-text-field>
+          <v-text-field :rules="[rules.token]" type="password" clearable v-model="token" label='wis2box auth token for "collections/stations"' hint='Enter wis2box auth token for "collections/stations"' persistent-token></v-text-field>
         </v-card-item>
         <v-card-actions>
           <v-btn @click="confirm()" :disabled="!formValid" elevation=2>Save</v-btn>
@@ -126,9 +129,10 @@
   </v-sheet>
 </template>
 <script>
-  import {defineComponent, ref, onBeforeMount} from "vue";
+  import {defineComponent, ref, onBeforeMount, watch} from "vue";
   import {VSheet, VCard, VCardTitle, VCardItem, VForm, VTextField, VBtn, VCardActions, VProgressLinear} from 'vuetify/lib/components/index.mjs';
   import {useRoute, useRouter} from 'vue-router';
+  import TopicHierarchySelector from '@/components/TopicHierarchySelector.vue';
   import LocatorMap from '@/components/LocatorMap.vue';
   import CodeListSelector from '@/components/CodeListSelector.vue';
   import APIStatus from '@/components/APIStatus.vue';
@@ -137,7 +141,7 @@
     name: "ImportOSCAR",
     components: {
       VSheet, VCard, VCardTitle, VCardItem, VForm, VTextField, VBtn, VCardActions, LocatorMap,
-      CodeListSelector, VProgressLinear, APIStatus
+      CodeListSelector, VProgressLinear, APIStatus, TopicHierarchySelector
     },
     setup(){
       const wsi = ref("");
@@ -182,7 +186,9 @@
         validElevation: value => value && ! isNaN(value) ? true : 'Invalid elevation',
         validBarometerHeight: value => value && ! isNaN(value) ? true : 'Invalid barometer height',
         validName: value => value && value.length > 3 ? true : 'Name must be more than 3 characters',
-        token: value => value && value.length > 0 ? true: 'Please enter the authorization token'
+        token: value => value && value.length > 0 ? true: 'Please enter the authorization token',
+        topic: value => value.length > 0 ? true : 'Select at least one topic'
+
       });
       const data = ref(null);
       const router = useRouter();
@@ -256,7 +262,7 @@
               headers: {
                   'encode': 'json',
                   'Content-Type': 'application/geo+json',
-                  'authorization': 'Bearer '+ token.value
+                  'Authorization': 'Bearer '+ token.value
               },
               body: JSON.stringify(record)
             });
@@ -272,12 +278,13 @@
             showLoading.value = false;
             setTimeout( () => {router.push("/station/"+wsi.value+"?action=view")}, 3000);
           }
-        }catch{
+        }catch(error){
           errorMessage.value = "HTTP error posting to API, please see console.";
           showDialog.value = true;
           showLoading.value = false;
-          console.log(station.value)
-          throw new Error("HTTP error posting to API, please see console");
+          console.log(record);
+          console.log(error);
+          console.log(apiURL);
         }
       };
 
@@ -360,6 +367,11 @@
           }
         };
       };
+
+      watch( () => station.value.properties.wmo_region, (newValue) => {
+        console.log(newValue);
+      });
+
       return {wsi, errorMessage, showDialog, rules, router, station, formValid, confirm, showLoading,
           redirectMessage, redirectWarning, showRedirect, submit, token};
     }

webapp/src/components/LocatorMap.vue

@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import { defineComponent, ref, computed, onMounted, watch } from 'vue';
+import { defineComponent, ref, computed, onMounted, watch, onBeforeMount } from 'vue';
 import { VCard, VCardTitle, VCardText } from 'vuetify/lib/components/index.mjs';
 import "leaflet/dist/leaflet.css";
 import L from 'leaflet'
-import "leaflet/dist/images/marker-shadow.png";
+
 // geojson validator
 import * as gjv from 'geojson-validation';
 
@@ -51,6 +51,17 @@ export default defineComponent({
 
     mapContainer.value = props.id;
 
+
+    // 'hack' to fix leaflet marker issue
+    var mapMarker = new L.Icon({
+      iconUrl: import.meta.env.VITE_BASE_URL + '/assets/marker-icon.png',
+      shadowUrl:  import.meta.env.VITE_BASE_URL + '/assets/marker-shadow.png'
+    });
+
+    const addMarker = (feature, latlng) => {
+      return L.marker(latlng, {icon: mapMarker} )
+    };
+
     const geom = computed( () => ({
       type: "Feature",
       geometry: {
@@ -62,7 +73,7 @@ export default defineComponent({
 
     onMounted( () =>{
       map.value = L.map(props.id, {zoomAnimation:false, fadeAnimation:true, markerZoomAnimation:true}).setView( props.center, props.zoom );
-      //map.value.attributionControl.setPrefix('<a href="https://leafletjs.com/">Leaflet</a>');
+      map.value.attributionControl.setPrefix('');
       L.tileLayer(`${import.meta.env.VITE_BASEMAP_URL}`, {attribution: `${import.meta.env.VITE_BASEMAP_ATTRIBUTION}`}).addTo(map.value);
       // check whether we have a location to show
       if( geom.value.geometry ){
@@ -72,15 +83,16 @@ export default defineComponent({
     });
 
     const updateMarker = async () => {
+      console.log(   L.Icon.Default.prototype._getIconUrl() )
       if( markerLayer.value ){
         markerLayer.value.remove();
       }
       // now check whether the new marker is valid and plot
       if( ! (isNaN(geom.value.geometry.coordinates[0]) || isNaN(geom.value.geometry.coordinates[1]))  ){
         if( gjv.isFeature(geom.value) ){
-          markerLayer.value = L.geoJSON(geom.value).addTo(map.value);
+          markerLayer.value = L.geoJSON(geom.value, {pointToLayer: addMarker}).addTo(map.value);
           map.value.fitBounds(markerLayer.value.getBounds());
-          map.value.setZoom(12);
+          map.value.setZoom(10);
         }
       }
     };

webapp/src/components/StationEditor.vue

@@ -98,10 +98,10 @@
         <v-card-item><CodeListSelector :readonly="readonly" codeList="territory" label="Territory or WMO member operating the station" defaultHint= "Select territory" v-model="station.properties.territory_name"/></v-card-item>
         <v-card-item><CodeListSelector :readonly="readonly" codeList="operatingStatus" label="Operating status" defaultHint= "Select operating status" v-model="station.properties.status"/></v-card-item>
          <v-card-item>
-          <TopicHierarchySelector v-model="station.properties.topics" multiple :readonly="readonly"/>
+          <TopicHierarchySelector v-model="station.properties.topics" multiple :readonly="readonly" :rules="[rules.topic]"/>
         </v-card-item>
         <v-card-item>
-          <v-text-field :rules="[rules.token]" type="password" clearable v-model="token" label="Station metadata token" hint="Enter authorization token for publishing station metadata" persistent-token></v-text-field>
+          <v-text-field :rules="[rules.token]" type="password" clearable v-model="token" label='wis2box auth token for "collections/stations"' hint='Enter wis2box auth token for "collections/stations"' persistent-token></v-text-field>
         </v-card-item>
         <v-card-actions v-if="!readonly">
           <v-btn @click="registerStation()" elevation=2 :disabled="!formValid">Save</v-btn>
@@ -157,7 +157,8 @@
           validElevation: value => value && ! isNaN(value) ? true : 'Invalid elevation',
           validBarometerHeight: value => value && ! isNaN(value) ? true : 'Invalid barometer height',
           validName: value => value && value.length > 3 ? true : 'Name must be more than 3 characters',
-          token: value => value && value.length > 0 ? true: 'Please enter the authorization token'
+          token: value => value && value.length > 0 ? true : 'Please enter the authorization token',
+          topic: value => value.length > 0 ? true : 'Select at least one topic'
         });
         const cancelEdit = async () => {
           readonly.value = true;

webapp/src/components/TopicHierarchySelector.vue

@@ -8,9 +8,10 @@
         label="Topic hierarchy"
         v-model="selected"
         :readonly="readonly"
+        :rules="rules"
         :hint="selected ? selected.description : 'Select topic hierarchy'"
         persistent-hint
-        :multiple=true
+        :multiple="multiple"
         return-object
         />
     </div>
@@ -31,7 +32,11 @@
     },
     props: {
       modelValue: {},
-      readonly: false
+      readonly: false,
+      multiple: false,
+      rules: {
+        type: Array
+      }
     },
     emits: ["update:modelValue"],
     setup(props, {emit}){
@@ -78,14 +83,14 @@
 
       onBeforeMount( async () => {
         await fetchOptions();
-        if( props.modelValue.length ){
+        if(props.modelValue.length ){
           for(var topic in props.modelValue){
-            console.log(topic);
             selected.value.push(options.value.find(option => option.id === props.modelValue[topic]));
           }
         }
       });
 
+
       watch( selected, (newValue) => {
         if( selected.value ){
           emit("update:modelValue", newValue);