dougal-software/lib/www/client/source/src/views/SequenceList.vue

<template>
  <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",

  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>