github.com/covergates/covergates@v0.2.2-0.20201009050117-42ef8a19fb95/web/src/components/ReportSource.vue (about)

     1  <template>
     2    <v-card class="ma-5">
     3      <v-toolbar flat>
     4        <v-toolbar-title class="grey--text">{{filePath}}</v-toolbar-title>
     5      </v-toolbar>
     6      <v-divider></v-divider>
     7      <v-card-text>
     8        <table cellspacing="0" cellpadding="0">
     9          <tbody>
    10            <tr v-for="(line, index) in codeLines" :key="index" :class="[hitClass(index+1)]">
    11              <td class="line-number">{{index+1}}</td>
    12              <td>
    13                <pre v-html="line"></pre>
    14              </td>
    15            </tr>
    16          </tbody>
    17        </table>
    18      </v-card-text>
    19    </v-card>
    20  </template>
    21  
    22  <script lang="ts">
    23  import { Component, Watch, Mixins } from 'vue-property-decorator';
    24  import Vue from '@/vue';
    25  import ReportMixin from '@/mixins/report';
    26  
    27  @Component
    28  export default class ReportSource extends ((Mixins(
    29    ReportMixin
    30  ) as typeof Vue) && ReportMixin) {
    31    hitMap = {} as { [key: number]: boolean };
    32  
    33    mounted() {
    34      this.updateHitMap();
    35    }
    36  
    37    get report(): Report | undefined {
    38      return this.$store.state.report.current;
    39    }
    40  
    41    get filePath(): string {
    42      return this.$route.params.path;
    43    }
    44  
    45    get sourceCode() {
    46      const source = this.$store.state.report.source;
    47      return source ? this.$highlight(source) : '';
    48    }
    49  
    50    get codeLines(): string[] {
    51      return this.sourceCode.split(/\r?\n/);
    52    }
    53  
    54    updateHitMap() {
    55      this.hitMap = {};
    56      const file = this.findSourceFile(this.filePath);
    57      if (file) {
    58        for (const hit of file.StatementHits) {
    59          this.hitMap[hit.LineNumber] = hit.Hits > 0;
    60        }
    61      }
    62    }
    63  
    64    hitClass(i: number): string {
    65      return this.hitMap[i] ? 'statement-hit' : 'statement-miss';
    66    }
    67  
    68    @Watch('report')
    69    onReportChange() {
    70      this.updateHitMap();
    71    }
    72  }
    73  </script>
    74  
    75  <style lang="scss" scoped>
    76  @import '@/assets/styles/variables';
    77  
    78  table {
    79    border: none;
    80    table-layout: fixed;
    81    word-wrap: break-word;
    82    width: 100%;
    83    pre {
    84      white-space: pre-wrap;
    85      word-wrap: break-word;
    86    }
    87    .line-number {
    88      user-select: none;
    89      width: 55px;
    90      color: $line-number-color;
    91      font-size: 12px;
    92    }
    93  }
    94  
    95  .statement-hit {
    96    background-color: $hit-statement-color;
    97  }
    98  </style>