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

     1  <template>
     2    <v-card flat>
     3      <v-card-title>Information</v-card-title>
     4      <v-divider />
     5      <v-card-text>
     6        <v-row>
     7          <v-text-field
     8            label="Report ID"
     9            :readonly="true"
    10            :value="repo.ReportID"
    11            hint="Use this ID to upload report. This ID is used only to identify your report. It can't be used to access repository information."
    12            outlined
    13            dense
    14            flat
    15            persistent-hint
    16          ></v-text-field>
    17        </v-row>
    18        <v-row class="d-flex mt-5">
    19          <v-text-field label="Badge" :readonly="true" :value="badge" outlined dense flat>
    20            <template v-slot:append>
    21              <img :src="badge" alt="badge" />
    22            </template>
    23          </v-text-field>
    24        </v-row>
    25        <v-row>
    26          <v-textarea
    27            name="markdown"
    28            :readonly="true"
    29            v-model="markdown"
    30            hint="copy the text and paste to README.md"
    31            rows="2"
    32            flat
    33            no-resize
    34            outlined
    35            persistent-hint
    36          ></v-textarea>
    37        </v-row>
    38        <v-row class="d-flex mt-5">
    39          <v-text-field label="Card" :readonly="true" :value="card" outlined flat>
    40            <template v-slot:append>
    41              <v-img :src="card" alt="card" class="mb-3 d-none d-lg-block" />
    42            </template>
    43          </v-text-field>
    44        </v-row>
    45        <v-row class="d-flex d-lg-none justify-center">
    46          <v-col cols="12" sm="8">
    47            <v-img :src="card" alt="card" />
    48          </v-col>
    49        </v-row>
    50      </v-card-text>
    51    </v-card>
    52  </template>
    53  
    54  <script lang="ts">
    55  import { Component } from 'vue-property-decorator';
    56  import Vue from '@/vue';
    57  
    58  @Component({
    59    name: 'setting-info'
    60  })
    61  export default class SettingInfo extends Vue {
    62    get repo(): Repository | undefined {
    63      return this.$store.state.repository.current;
    64    }
    65  
    66    get url(): string {
    67      let base = this.$store.state.base;
    68      if (base !== '') {
    69        base = base.replace(/\/$/, '');
    70        base = base.replace(/^\//, '');
    71        base = `/${base}`;
    72      }
    73      const protocol = window.location.protocol;
    74      const host = window.location.host;
    75      return `${protocol}//${host}${base}`;
    76    }
    77  
    78    get badge(): string {
    79      if (this.repo) {
    80        return `${this.url}/api/v1/reports/${this.repo.ReportID}/badge`;
    81      }
    82      return '';
    83    }
    84  
    85    get card(): string {
    86      if (this.repo) {
    87        return `${this.url}/api/v1/reports/${this.repo.ReportID}/card`;
    88      }
    89      return '';
    90    }
    91  
    92    get markdown(): string {
    93      if (this.repo) {
    94        const { SCM: scm, NameSpace: space, Name: name } = this.repo;
    95        return `[![badge](${this.badge})](${this.url}/report/${scm}/${space}/${name})`;
    96      }
    97      return '';
    98    }
    99  }
   100  </script>