feat(timeseries): Introduce label (first 8 letters of time series name)

src/components/CommonUtil.vue

@@ -90,7 +90,12 @@
 				console.info(message);
 			}
 		},
-
+    timeSeriesLabel(observationTimeSeries) {
+      let timeSeriesName = observationTimeSeries.name;
+      timeSeriesName = timeSeriesName.replace(/\s/g, '');
+      timeSeriesName = timeSeriesName.slice(0, 8);
+      return timeSeriesName.toUpperCase();
+    },
 		setHeaderTitle: function (headerTitle) {
 			document.getElementById("appHeader").innerHTML = headerTitle;
 		},

src/components/ObservationList.vue

@@ -46,7 +46,7 @@
             <div class="col-4 d-flex align-items-center justify-content-end">
               <router-link v-if="obs.observationTimeSeries"
                            :to="{name:'ObservationTimeSeriesList', params: {paramExpandedId:obs.observationTimeSeries.observationTimeSeriesId}}">
-                <span class="badge badge-pill badge-info">Tidsserie</span>
+                <span class="badge badge-pill badge-info">{{label(obs.observationTimeSeries)}}</span>
               </router-link>
 							<router-link
 								:to="{name: 'Observation', params: {observationId:obs.observationId,createClone:true}}"
@@ -101,23 +101,20 @@
 									observation.toUpload = true;
 								}
 							}
-
 						}
-
 					});
 					this.observations = lstObservations;
 				}
-
 			},
-
-
+      label(observationTimeSeries) {
+        return CommonUtil.timeSeriesLabel(observationTimeSeries);
+      }
 		},
 		computed: {
 			sortedObservations: function () {
 				this.observations.sort((a, b) => {
 					return new Date(b.timeOfObservation) - new Date(a.timeOfObservation);
 				});
-
 				return this.observations;
 			}
 		},

src/components/ObservationTimeSeries.vue

@@ -72,9 +72,17 @@
       <label for="year">Velg år</label>
     </div>
 
-    <div class="form-floating mb-3">
-      <input id="name" type="text" class="form-control" v-model="dataToSubmit.name"/>
-      <label for="name">{{ this.$i18n.t("observationTimeSeries.detail.name.placeholder") }}</label>
+    <div class="row">
+      <div class="col-sm-6">
+        <div class="form-floating mb-3">
+          <input id="name" type="text" class="form-control" v-model="dataToSubmit.name"/>
+          <label for="name">{{ this.$i18n.t("observationTimeSeries.detail.name.placeholder") }}</label>
+        </div>
+      </div>
+      <div class="col-sm-6 ps-3 mb-3">
+        <div v-if="dataToSubmit.name">Merkelapp:</div>
+        {{ label(dataToSubmit) }}
+      </div>
     </div>
 
     <div class="form-floating mb-3">
@@ -267,6 +275,9 @@ export default {
       }
       return observationsForTimeSeries;
     },
+    label(observationTimeSeries) {
+      return CommonUtil.timeSeriesLabel(observationTimeSeries);
+    },
     setVisibilityAndMasking(paramPrivate, paramPolygonService) {
       this.dataToSubmit.locationIsPrivate = paramPrivate;
       this.dataToSubmit.polygonService = paramPolygonService;

src/components/ObservationTimeSeriesList.vue

@@ -49,7 +49,7 @@
             </div>
             <div v-else class="row">
               <div class="col-7 d-flex align-items-center">
-                <b>{{ ots.name }}</b>
+                <span style="font-size: 0.9rem; font-weight: bolder">{{label(ots)}}</span>&nbsp;<span class="d-none d-sm-block"> - {{ ots.name }}</span>
               </div>
               <div class="col-5 d-flex align-items-center justify-content-end">
                   <span class="badge badge-pill badge-info">{{ getObservationCount(ots.observationTimeSeriesId) }}</span>
@@ -113,6 +113,9 @@ export default {
   },
   components: {CommonUtil, Sync},
   methods: {
+    label(observationTimeSeries) {
+      return CommonUtil.timeSeriesLabel(observationTimeSeries);
+    },
     sortedYears() {
       return Object.keys(this.otsYearMap).map(Number).sort((a, b) => a - b);
     },