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-model="filter"
            append-icon="mdi-magnify"
            label="Filter"
            single-line
            clearable
            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"
        item-key="sequence"
        :server-items-length="num_rows"
        :search="filter"
        :loading="loading"
        :fixed-header="true"
        show-expand
        >

          <template v-slot:expanded-item="{ headers, item }">
            <td :colspan="headers.length" class="pa-0">
              <v-container fluid class="pa-0">
                <v-row no-gutters class="d-flex flex-column flex-sm-row">
                  <v-col cols="6" class="d-flex flex-column">
                        <v-card outlined class="flex-grow-1">
                          <v-card-title>
                            Acquisition remarks
                          </v-card-title>
                          <v-card-subtitle>
                          </v-card-subtitle>
                          <v-card-text>
                          {{ item.remarks }}
                          </v-card-text>
                        </v-card>
                        <v-card outlined class="flex-grow-1">
                          <v-card-title>
                            Processing remarks
                          </v-card-title>
                          <v-card-subtitle>
                          </v-card-subtitle>
                          <v-card-text>
                            {{ item.remarks_final }}
                          </v-card-text>
                        </v-card>
                  </v-col>
                  <v-col cols="6" class="d-flex">
                    <v-card outlined class="flex-grow-1">
                      <v-card-title>
                        Source files
                      </v-card-title>
                      <v-card-subtitle>
                      </v-card-subtitle>
                      <v-card-text>
                        <v-list>
                          <v-list-group value="true">
                            <template v-slot:activator>
                              <v-list-item-title>
                                Raw files
                                <span class="grey--text text--lighten-1">
                                  {{item.raw_files.length}}
                                </span>
                              </v-list-item-title>
                            </template>
                            <v-list-item v-for="(path, index) in item.raw_files"
                              key="index"
                              link
                              title="View the shot log"
                            >
                              {{ basename(path) }}
                            </v-list-item>
                          </v-list-group>
                          <v-list-group value="true">
                            <template v-slot:activator>
                              <v-list-item-title>
                                Final files
                                <span class="grey--text text--lighten-1">
                                  {{item.final_files.length}}
                                </span>
                              </v-list-item-title>
                            </template>
                            <v-list-item v-for="(path, index) in item.final_files"
                              key="index"
                              link
                              title="View the shot log"
                            >
                              {{ basename(path) }}
                            </v-list-item>
                          </v-list-group>
                        </v-list>
                      </v-card-text>
                    </v-card>
                  </v-col>
                </v-row>
              </v-container>
            </td>
          </template>

          <template v-slot:item.sequence="{value}">
            <a
              :href="`/projects/${$route.params.project}/log/sequence/${value}`"
              title="View the event log for this sequence">{{value}}</a>
          </template>

          <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, mapGetters } from 'vuex';
import { basename } from 'path';

export default {
  name: "SequenceList",

  data () {
    return {
      headers: [
        {
          value: 'data-table-expand'
        },
        {
          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"
        }
      ],
      expanded: [],
      items: [],
      filter: "",
      options: {},
      num_rows: null
    }
  },

  computed: {
    ...mapGetters(['loading'])
  },

  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 () {

      const query = new URLSearchParams(this.options);
      query.set("filter", this.filter);
      query.set("files", true);
      if (this.options.itemsPerPage < 0) {
        query.delete("itemsPerPage");
      }
      const url = `/project/${this.$route.params.project}/sequence?${query.toString()}`;

      this.items = await this.api([url]) || [];

    },

    basename (path, ext) {
      return basename(path, ext);
    },

    ...mapActions(["api"])
  },

  mounted () {
    this.getSequences();
    this.getNumLines();
  }

}

</script>