dougal-software/lib/www/client/source/src/views/LineList.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
            ></v-text-field>
        </v-toolbar>
      </v-card-title>
      <v-card-text>

        <v-data-table
        :headers="headers"
        :items="items"
        :search="filter"
        :loading="loading"
        :fixed-header="true"
        :item-class="(item) => activeItem == item ? 'blue accent-1 elevation-3' : ''"
        @click:row="setActiveItem"
        >
        
          <template v-slot:item.status="{item}">
            <dougal-line-status
              :preplot="item"
              :sequences="sequences.filter(s => s.line == item.line)"
              :sequence-href="(s) => `/projects/${$route.params.project}/log/sequence/${s.sequence}`"
            >
            </dougal-line-status>
          </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>

<script>
import { mapActions, mapGetters } from 'vuex';
import DougalLineStatus from '@/components/line-status';


export default {
  name: "LineList",
  
  components: {
    DougalLineStatus
  },

  data () {
    return {
      headers: [
        {
          value: "line",
          text: "Line"
        },
        {
          value: "status",
          text: "Status"
        },
        {
          value: "fsp",
          text: "FSP",
          align: "end"
        },
        {
          value: "lsp",
          text: "LSP",
          align: "end"
        },
        {
          value: "num_points",
          text: "Num. points",
          align: "end"
        },
        {
          value: "length",
          text: "Length",
          align: "end"
        },
        {
          value: "azimuth",
          text: "Azimuth",
          align: "end"
        },
        {
          value: "remarks",
          text: "Remarks"
        }
      ],
      items: [],
      num_lines: null,
      sequences: [],
      activeItem: null,
      filter: null
    }
  },

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

  methods: {

    async getNumLines () {
      const projectInfo = await this.api([`/project/${this.$route.params.project}`]);
      this.num_lines = projectInfo.lines;
    },

    async getLines () {

      const url = `/project/${this.$route.params.project}/line`;

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

    },
    
    async getSequences () {
      const url = `/project/${this.$route.params.project}/sequence`;
      this.sequences = await this.api([url]) || [];
    },

    setActiveItem (item) {
      this.activeItem = this.activeItem == item
        ? null
        : item;
    },

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

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

}

</script>