test-scheduler/ui/src/App.vue

   1 <template>
   2   <div id="app">
   3     <div class="row border-bottom blue-bg my-page-header">
   4         <p id="title">OPNFV Bottlenecks Portal</p>
   5         <ul id="intr_table" class="nav navbar-nav">
   6           <li v-bind:class="{'router-link-active': cur_route == '/'}"><router-link to="/">Test Suites</router-link></li>
   7           <li v-bind:class="{'router-link-active': cur_route == 'result'}"><router-link to="/result">Test Results</router-link></li>
   8           <li v-bind:class="{'router-link-active': cur_route == 'report'}"><router-link to="/report">Reports</router-link></li>
   9           <li v-bind:class="{'router-link-active': cur_route == 'environment'}"><router-link to="/environment">Environments</router-link></li>
  10         </ul>
  11     </div>
  12     <router-view/>
  13   </div>
  14 </template>
  15 <script>
  16 export default {
  17   name: 'App',
  18   data: function() {
  19     return {
  20       cur_route: ''
  21     }
  22   },
  23   watch: {
  24     '$route': function() {
  25       this.highlightLink();
  26     }
  27   },
  28   mounted: function() {
  29     this.highlightLink();
  30   },
  31   methods: {
  32     highlightLink: function() {
  33       var name = this.$route.name;
  34       if(name == 'result' || name == 'report' || name == 'environment') {
  35         this.cur_route = name;
  36       } else {
  37         this.cur_route = '/';
  38       }
  39     }
  40   }
  41 }
  42 </script>
  43