Refactored header title update to CommonUtil

src/components/CommonUtil.vue

@@ -74,5 +74,8 @@ export default {
 
     CONST_FIELD_MANDATORY               :   '<font color=red>*</font>',
 
+	setHeaderTitle						: function(headerTitle) {
+		document.getElementById("appHeader").innerHTML = headerTitle;
+	}
 }
 </script>
\ No newline at end of file

src/components/CropCategory.vue

@@ -22,8 +22,7 @@
 -->
 <template>
   <div id="divCropCategory">
-    <h1>Crop Category List</h1>
-    <div v-show="isCropIdsNotAvailable"  class="alert alert-warning" role="alert">
+    <div v-show="isCropIdsNotAvailable"  class="alert alert-info" role="alert">
       {{ $t("crop.category.empty.alert") }}
     </div>
     <ul class="list-group" style="text-align: left">

src/components/Observation.vue

@@ -804,7 +804,7 @@ export default {
 
 
   mounted(){
-	document.getElementById("appHeader").innerHTML=this.$i18n.t("observation.msg");
+	CommonUtil.setHeaderTitle(this.$i18n.t("observation.msg"));
     var btnBack      =   document.getElementById("btnBack");
     var navDiv      =   document.getElementById("vipsobsappmenu");
     btnBack.style.top=(navDiv.offsetHeight) + "px";

src/components/ObservationList.vue

@@ -117,23 +117,24 @@ export default {
       return DateTime.fromISO(timeStr).toLocaleString(DateTime.DATETIME_MED);
     }
   },
-  mounted()  {
-			document.getElementById("appHeader").innerHTML=this.$i18n.t("observationlist.heading");
-              let valueObj = {"name":CommonUtil.CONST_STORAGE_OBSERVATION_LIST,"complete":false};
-              //this.$refs.Sync.syncObservationSendPrepare(valueObj);
-              this.CONST_URL_DOMAIN = CommonUtil.CONST_URL_DOMAIN;
-              let strUUID     = localStorage.getItem(CommonUtil.CONST_STORAGE_UUID);
-              if(strUUID)
-              {
-                this.getObservationsFromStore(); 
-              }
-			// Making it globally available, so that e.g. the Sync component can update the list
-			// calling e.g. this.$root.sharedState.observationListComponent.getObservationsFromStore();
-			this.$root.sharedState.observationListComponent = this;
-			
-			"Mine observasjoner";
-			//this.$root.sharedState.appHeader = this.title;
-  }
+	mounted()  {
+		CommonUtil.setHeaderTitle(this.$i18n.t("observationlist.heading"));
+		//document.getElementById("appHeader").innerHTML=;
+		let valueObj = {"name":CommonUtil.CONST_STORAGE_OBSERVATION_LIST,"complete":false};
+		//this.$refs.Sync.syncObservationSendPrepare(valueObj);
+		this.CONST_URL_DOMAIN = CommonUtil.CONST_URL_DOMAIN;
+		let strUUID     = localStorage.getItem(CommonUtil.CONST_STORAGE_UUID);
+		if(strUUID)
+		{
+			this.getObservationsFromStore(); 
+		}
+		// Making it globally available, so that e.g. the Sync component can update the list
+		// calling e.g. this.$root.sharedState.observationListComponent.getObservationsFromStore();
+		this.$root.sharedState.observationListComponent = this;
+		
+		"Mine observasjoner";
+		//this.$root.sharedState.appHeader = this.title;
+	}
 }
 </script>
 

src/components/PlacesList.vue

@@ -139,7 +139,7 @@ export default {
 
     },
     mounted() {
-		document.getElementById("appHeader").innerHTML=this.$i18n.t("placeslist.heading");
+		CommonUtil.setHeaderTitle(this.$i18n.t("placeslist.heading"));
             this.CONST_URL_DOMAIN = CommonUtil.CONST_URL_DOMAIN;
             /** TODO fetch server should be used in sync process and not here */
             //this.fetchFromServer();

src/components/Settings.vue

@@ -53,7 +53,7 @@ export default {
     },
   },
 	mounted() {
-		document.getElementById("appHeader").innerHTML=this.$i18n.t("settings.heading");
+		CommonUtil.setHeaderTitle(this.$i18n.t("settings.heading"));
 	}
 }
 </script>
\ No newline at end of file

src/main.js

@@ -6,6 +6,7 @@ import router from './router'
 import i18n from './i18n'
 import LoginSystem from '@/components/LoginSystem'
 import Welcome from '@/components/Welcome'
+import CommonUtil from '@/components/CommonUtil'
 
 
 
@@ -39,7 +40,7 @@ const init = () => {
       i18n,
 	  
       created() {
-		document.getElementById("appHeader").innerHTML=this.$i18n.t("index.header");
+		CommonUtil.setHeaderTitle(this.$i18n.t("index.header"));
 		console.info("Vue is ready");
 		console.info("User's preferred language is " + navigator.language);
 		// Are we logged in already?