1 <!-- Copyright (C) 2019 The Android Open Source Project 2 3 Licensed under the Apache License, Version 2.0 (the "License"); 4 you may not use this file except in compliance with the License. 5 You may obtain a copy of the License at 6 7 http://www.apache.org/licenses/LICENSE-2.0 8 9 Unless required by applicable law or agreed to in writing, software 10 distributed under the License is distributed on an "AS IS" BASIS, 11 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 See the License for the specific language governing permissions and 13 limitations under the License. 14 --> 15 <template> 16 <md-card-content class="container"> 17 <md-table class="log-table"> 18 <md-table-header> 19 <md-table-head class="time-column-header">Time</md-table-head> 20 <md-table-head class="tag-column-header">Tag</md-table-head> 21 <md-table-head class="at-column-header">At</md-table-head> 22 <md-table-head>Message</md-table-head> 23 </md-table-header> 24 <md-table-body> 25 <md-table-row v-for="line in data" :key="line.timestamp"> 26 <md-table-cell class="time-column">{{line.time}}</md-table-cell> 27 <md-table-cell class="tag-column">{{line.tag}}</md-table-cell> 28 <md-table-cell class="at-column">{{line.at}}</md-table-cell> 29 <md-table-cell>{{line.text}}</md-table-cell> 30 </md-table-row> 31 </md-table-body> 32 </md-table> 33 </md-card-content> 34 </template> 35 <script> 36 export default { 37 name: 'logview', 38 data() { 39 return { 40 data: [], 41 isSelected: false, 42 } 43 }, 44 methods: { 45 arrowUp() { 46 this.isSelected = !this.isSelected; 47 return !this.isSelected; 48 }, 49 arrowDown() { 50 this.isSelected = !this.isSelected; 51 return !this.isSelected; 52 } 53 }, 54 updated() { 55 let scrolltable = this.$el.getElementsByTagName("tbody")[0] 56 scrolltable.scrollTop = scrolltable.scrollHeight - 100; 57 }, 58 watch: { 59 selectedIndex: { 60 immediate: true, 61 handler(idx) { 62 if (this.file.data.length > 0) { 63 while (this.data.length > idx + 1) { 64 this.data.pop(); 65 } 66 while (this.data.length <= idx) { 67 this.data.push(this.file.data[this.data.length]); 68 } 69 } 70 }, 71 } 72 }, 73 props: ['file'], 74 computed: { 75 selectedIndex() { 76 return this.file.selectedIndex; 77 }, 78 }, 79 } 80 81 </script> 82 <style> 83 .log-table .md-table-cell { 84 height: auto; 85 } 86 87 .log-table { 88 width: 100%; 89 } 90 91 .time-column { 92 min-width: 15em; 93 } 94 95 .time-column-header { 96 min-width: 15em; 97 padding-right: 9em !important; 98 } 99 100 .tag-column { 101 min-width: 10em; 102 } 103 104 .tag-column-header { 105 min-width: 10em; 106 padding-right: 7em !important; 107 } 108 109 .at-column { 110 min-width: 35em; 111 } 112 113 .at-column-header { 114 min-width: 35em; 115 padding-right: 32em !important; 116 } 117 118 .log-table table { 119 display: block; 120 } 121 122 .log-table tbody { 123 display: block; 124 overflow-y: scroll; 125 width: 100%; 126 height: 20em; 127 } 128 129 .log-table tr { 130 width: 100%; 131 display: block; 132 } 133 134 .log-table td:last-child { 135 width: 100%; 136 } 137 138 </style> 139