Implement sequence list view

2025-12-06 13:37:07 +00:00 · 2020-08-25 13:02:20 +02:00
parent f366e99c35
commit 98b35d4b89
1 changed files with 265 additions and 4 deletions
--- a/lib/www/client/source/src/views/SequenceList.vue
+++ b/lib/www/client/source/src/views/SequenceList.vue
@@ -1,13 +1,274 @@
 <template>
-  <div>
-  SequenceList
-  </div>
+  <v-container fluid>
+
+    <v-card>
+      <v-card-title>
+        <v-toolbar flat>
+          <v-toolbar-title>Sequences</v-toolbar-title>
+
+          <v-spacer></v-spacer>
+          <v-text-field
+            v-debounce:700ms="getSequences"
+            v-model="filter"
+            append-icon="mdi-magnify"
+            label="Filter"
+            single-line
+            clearable
+            @click:clear="getSequences"
+            hint="Filter by sequence, line, date or remarks"
+            ></v-text-field>
+        </v-toolbar>
+      </v-card-title>
+      <v-card-text>
+
+        <v-data-table
+        :headers="headers"
+        :items="items"
+        :server-items-length="num_rows"
+        :options.sync="options"
+        :loading="loading"
+        :fixed-header="true"
+        >
+
+          <template v-slot:item.status="{value}">
+            <span :class="{'success--text': value=='final', 'warning--text': value=='raw', 'danger--text': value=='ntbp'}">
+              {{ value == "final" ? "Processed" : value == "raw" ? "Acquired" : `Unknown (${status})` }}
+            </span>
+          </template>
+
+          <template v-slot:item.duration="{item: {duration: value}}">
+            {{
+              value
+                ?
+                  "" +
+                  (value.days
+                    ? value.days + "d "
+                    : "") +
+                  String(value.hours || 0).padStart(2, "0") +
+                  ":" + String(value.minutes || 0).padStart(2, "0") +
+                  ":" + String(value.seconds || 0).padStart(2, "0")
+                : "N/A"
+            }}
+          </template>
+
+          <template v-slot:item.duration_final="{item: {duration_final: value}}">
+            {{
+              value
+                ?
+                  "" +
+                  (value.days
+                    ? value.days + "d "
+                    : "") +
+                  String(value.hours || 0).padStart(2, "0") +
+                  ":" + String(value.minutes || 0).padStart(2, "0") +
+                  ":" + String(value.seconds || 0).padStart(2, "0")
+                : "N/A"
+            }}
+          </template>
+
+          <template v-slot:item.ts0="{value}">
+            <span v-if="value">
+              {{ value.replace(/(.{10})T(.{8}).{4}Z$/, "$1 $2") }}
+            </span>
+          </template>
+
+          <template v-slot:item.ts1="{value}">
+            <span v-if="value">
+              {{ value.replace(/(.{10})T(.{8}).{4}Z$/, "$1 $2") }}
+            </span>
+          </template>
+
+          <template v-slot:item.ts0_final="{value}">
+            <span v-if="value">
+              {{ value.replace(/(.{10})T(.{8}).{4}Z$/, "$1 $2") }}
+            </span>
+          </template>
+
+          <template v-slot:item.ts1_final="{value}">
+            <span v-if="value">
+              {{ value.replace(/(.{10})T(.{8}).{4}Z$/, "$1 $2") }}
+            </span>
+          </template>
+
+          <template v-slot:item.missing_shots="{value}">
+            <span :class="value && 'warning--text'">{{ value }}</span>
+          </template>
+
+          <template v-slot:item.length="props">
+            <span>{{ Math.round(props.value) }} m</span>
+          </template>
+
+          <template v-slot:item.azimuth="props">
+            <span>{{ props.value.toFixed(1) }} °</span>
+          </template>
+
+        </v-data-table>
+      </v-card-text>
+    </v-card>
+  </v-container>
 </template>

+<style>
+td span {
+  white-space: nowrap;
+}
+
+.status-raw {
+  color: orange;
+}
+
+.status-final {
+  color: green;
+}
+
+.status-ntbp {
+  color: red;
+}
+</style>
+
 <script>
+import { mapActions } from 'vuex';

 export default {
-  name: "SequenceList"
+  name: "SequenceList",
+
+  data () {
+    return {
+      headers: [
+        {
+          value: "sequence",
+          text: "Sequence"
+        },
+        {
+          value: "status",
+          text: "Status"
+        },
+        {
+          value: "line",
+          text: "Line"
+        },
+        {
+          value: "fsp_final",
+          text: "FPSP",
+          align: "end"
+        },
+        {
+          value: "lsp_final",
+          text: "LPSP",
+          align: "end"
+        },
+        {
+          value: "fsp",
+          text: "FSP",
+          align: "end"
+        },
+        {
+          value: "lsp",
+          text: "LSP",
+          align: "end"
+        },
+        {
+          value: "duration_final",
+          text: "Prime duration",
+          align: "end"
+        },
+        {
+          value: "duration",
+          text: "Total duration",
+          align: "end"
+        },
+        {
+          value: "ts0_final",
+          text: "FPSP time",
+          align: "end"
+        },
+        {
+          value: "ts1_final",
+          text: "LPSP time",
+          align: "end"
+        },
+        {
+          value: "ts0",
+          text: "Start time",
+          align: "end"
+        },
+        {
+          value: "ts1",
+          text: "End time",
+          align: "end"
+        },
+        {
+          value: "num_points",
+          text: "Shots acquired",
+          align: "end"
+        },
+        {
+          value: "missing_shots",
+          text: "Shots missed",
+          align: "end"
+        },
+        {
+          value: "length",
+          text: "Length",
+          align: "end"
+        },
+        {
+          value: "azimuth",
+          text: "Azimuth",
+          align: "end"
+        },
+        {
+          value: "remarks",
+          text: "Remarks"
+        }
+      ],
+      items: [],
+      filter: "",
+      options: {},
+      loading: false,
+      num_rows: null
+    }
+  },
+
+  watch: {
+    options: {
+      handler () {
+        this.getSequences();
+      },
+      deep: true
+    }
+  },
+
+  methods: {
+
+    async getNumLines () {
+      const projectInfo = await this.api([`/project/${this.$route.params.project}`]);
+      this.num_rows = projectInfo.sequences;
+    },
+
+    async getSequences () {
+      this.loading = true;
+
+      const query = new URLSearchParams(this.options);
+      query.set("filter", this.filter);
+      if (this.options.itemsPerPage < 0) {
+        query.delete("itemsPerPage");
+      }
+      const url = `/project/${this.$route.params.project}/sequence?${query.toString()}`;
+
+      this.items = await this.api([url]) || [];
+
+      this.loading = false;
+    },
+
+    ...mapActions(["api"])
+  },
+
+  mounted () {
+    this.getSequences();
+    this.getNumLines();
+  }
+
 }

 </script>