feat: Expand time series to display observations

src/components/ObservationList.vue

@@ -40,9 +40,12 @@
 						<strike> {{ obs.timeOfObservation | dateFormat }} <b>{{obs.observationHeading}}</b> </strike>
 					</div>
 					<div v-else class="row">
-						<div class="col-10">
+						<div class="col-8">
 						{{ obs.timeOfObservation | dateFormat }} <b>{{obs.observationHeading}}</b>
 						</div>
+            <div class="col-2">
+              <span v-if="obs.observationTimeSeries" class="badge badge-info">Tidsserie {{ obs.observationTimeSeries.observationTimeSeriesId }}</span>
+            </div>
 						<div class="col-2">
 							<router-link
 								:to="{name: 'Observation', params: {observationId:obs.observationId,createClone:true}}"
@@ -168,4 +171,8 @@
 		border-radius: 0 !important;
 		border-width: 0px 0px 1px 0px !important;
 	}
+
+  .badge {
+    background-color: #3d8052 !important;
+  }
 </style>

src/components/ObservationTimeSeriesList.vue

@@ -31,36 +31,45 @@
     </div>
     <div v-else class="bg-light">
       <ul class="list-group bg-light" v-if="isInitialized">
-        <li v-for="observationTimeSeries in sortedObservationTimeSeries">
+        <li v-for="ots in sortedObservationTimeSeries">
           <router-link
-              :to="{name: 'ObservationTimeSeries', params: {observationTimeSeriesId: observationTimeSeries.observationTimeSeriesId}}"
+              :to="{name: 'ObservationTimeSeries', params: {observationTimeSeriesId: ots.observationTimeSeriesId}}"
               class="list-group-item list-group-item-action bg-light"
-              v-bind:class="{'text-danger':observationTimeSeries.isNew, 'text-primary':observationTimeSeries.toUpload, 'text-secondary':observationTimeSeries.isDeleted}"
-              v-if="!observationTimeSeries.isDeleted" v-bind:key="observationTimeSeries.observationTimeSeriesId">
-            <div v-if="observationTimeSeries.isDeleted">
-              <strike> {{ observationTimeSeries.timeOfLastObservation | dateFormat }} <b>{{
-                  observationTimeSeries.name
+              v-bind:class="{'text-danger':ots.isNew, 'text-primary':ots.toUpload, 'text-secondary':ots.isDeleted}"
+              v-if="!ots.isDeleted" v-bind:key="ots.observationTimeSeriesId">
+            <div v-if="ots.isDeleted">
+              <strike> {{ ots.timeOfLastObservation | dateFormat }} <b>{{
+                  ots.name
                 }}</b> </strike>
             </div>
             <div v-else class="row">
-              <div class="col-7">
-                {{ observationTimeSeries.timeOfLastObservation | dateFormat }} <b>{{ observationTimeSeries.name }}</b>
+              <div class="col-6">
+                <b>{{ ots.name }}</b>
               </div>
-              <div class="col-3">
-                {{ getObservationText(observationTimeSeries.observationTimeSeriesId) }}
+              <div class="col-4">
+                <a href="#" @click.prevent="toggleExpandedRow(ots.observationTimeSeriesId)">
+                  <span class="badge badge-pill badge-info">{{ getObservationCount(ots.observationTimeSeriesId) }} observasjoner</span>
+                </a>
               </div>
               <div class="col-2">
-                <router-link :to="{name: 'Observation', params: {paramObservationTimeSeries: observationTimeSeries}}">
-                  <button type="button" class="btn btn-primary">+</button>
-                </router-link>
                 <router-link
-                    :to="{name: 'ObservationTimeSeries', params: {observationTimeSeriesId: observationTimeSeries.observationTimeSeriesId, createClone:true}}"
+                    :to="{name: 'ObservationTimeSeries', params: {observationTimeSeriesId: ots.observationTimeSeriesId, createClone:true}}"
                     class="addobs-btn">
-                  <font-awesome-icon style="font-size: x-large; color: #3d8052;" icon="fa-solid fa-clone"/>
+                  <font-awesome-icon class="icon" icon="fa-solid fa-clone"/>
                 </router-link>
               </div>
             </div>
           </router-link>
+          <ul class="list-group bg-light" v-if="isRowExpanded(ots.observationTimeSeriesId)">
+            <li class="observation-row" v-for="obs in observationMap[ots.observationTimeSeriesId]">
+              {{ obs.timeOfObservation | dateFormat }} {{ obs.observationHeading }}
+            </li>
+            <li class="observation-row">
+              <router-link :to="{name: 'Observation', params: {paramObservationTimeSeries: ots}}">
+                Registrer ny observasjon
+              </router-link>
+            </li>
+          </ul>
         </li>
       </ul>
     </div>
@@ -81,20 +90,27 @@ export default {
       isInitialized: false,
       otsList: undefined,
       observationMap: {},
+      expandedRows: {}
     };
   },
   components: {CommonUtil, Sync},
   methods: {
-
-    getObservationText(observationTimeSeriesId) {
-      let observationCount = 0;
-      if (this.observationMap[observationTimeSeriesId]) {
-        observationCount = this.observationMap[observationTimeSeriesId].length
+    toggleExpandedRow(id) {
+      // Toggle the expanded state of the row with the given id
+      console.info("Toggle observations for time series " + id);
+      this.$set(this.expandedRows, id, !this.isRowExpanded(id));
+    },
+    isRowExpanded(id) {
+      if (this.expandedRows.hasOwnProperty(id)) {
+        return this.expandedRows[id];
       }
-      if (observationCount === 1) {
-        return this.$i18n.t("observationTimeSeriesList.observation.single")
+      return false;
+    },
+    getObservationCount(observationTimeSeriesId) {
+      if (this.observationMap[observationTimeSeriesId]) {
+        return this.observationMap[observationTimeSeriesId].length
       }
-      return observationCount + this.$i18n.t("observationTimeSeriesList.observation.count")
+      return 0;
     },
 
     loadObservationTimeSeriesListFromLocalStore() {
@@ -177,7 +193,6 @@ export default {
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 h1,
 h2 {
@@ -190,13 +205,33 @@ ul {
 }
 
 li {
-  display: inline;
   margin: 0 0;
 }
 
+li.observation-row {
+  margin-left: 30px;
+  padding: 9px;
+}
+
 a {
   color: black;
   border-radius: 0 !important;
   border-width: 0px 0px 1px 0px !important;
 }
+
+.add-item {
+  background-color: #3d8052 !important;
+  border-radius: 25px;
+  border: 0px;
+  font-weight: bolder;
+}
+
+.icon {
+  font-size: x-large;
+  color: #3d8052;
+}
+
+.badge {
+  background-color: #3d8052 !important;
+}
 </style>