ln.ethercat/ln.ethercat.service/www/static/js/sdotable.js

72 lines
2.2 KiB
JavaScript

(function(){
Vue.component('sdo-table',{
props: {
sdolist: {
type: Array,
required: true,
},
},
computed: {
},
data: function(){
return {
filters: {
slave: null,
name: null,
index: null,
datatype: null,
}
};
},
methods: {
getFilteredSDOList: function(){
return this.sdolist.filter((sdo)=>
(!this.filters.name || sdo.Name.toLowerCase().includes(this.filters.name.toLowerCase())) &&
(!this.filters.index || sdo.Address.Index.toString(16).toLowerCase().includes(this.filters.index.toLowerCase())) &&
(!this.filters.datatype || sdo.DataType.toLowerCase().includes(this.filters.datatype.toLowerCase())) &&
(!this.filters.slave || sdo.Address.Slave.toLowerCase().includes(this.filters.slave.toLowerCase()))
);
},
},
template: `
<table>
<thead>
<tr>
<td>#</td>
<td>Slave</td>
<td>Name</td>
<td>Index</td>
<td>SubIndex</td>
<td>Data Type</td>
<td>Current Value</td>
</tr>
<tr>
<td>#</td>
<td><input tyoe="number" v-model="filters.slave"></td>
<td><input tyoe="text" v-model="filters.name"></td>
<td><input tyoe="number" v-model="filters.index"></td>
<td></td>
<td><input tyoe="text" v-model="filters.datatype"></td>
<td></td>
</tr>
</thead>
<tbody>
<tr v-for="(sdo,index) in getFilteredSDOList()">
<td></td>
<td>{{ sdo.Address.Slave }}</td>
<td>{{ sdo.Name }}</td>
<td>0x{{ sdo.Address.Index.toString(16) }}</td>
<td>{{ sdo.Address.SubIndex }}</td>
<td>{{ sdo.DataType }}</td>
<td>{{ sdo.Value }}</td>
</tr>
</tbody>
<tfooter>
</tfooter>
</table>
`,
});
})();