85 lines
2.8 KiB
JavaScript
85 lines
2.8 KiB
JavaScript
|
|
||
|
|
Vue.component('entity-table', {
|
||
|
|
props: [ "data" ],
|
||
|
|
methods: {
|
||
|
|
component_headers: function(name) {
|
||
|
|
const value = this.data.data[name][0];
|
||
|
|
let headers = [];
|
||
|
|
for (key in value) {
|
||
|
|
headers.push(key);
|
||
|
|
}
|
||
|
|
return headers;
|
||
|
|
},
|
||
|
|
component_member: function(value) {
|
||
|
|
if (Array.isArray(value)) {
|
||
|
|
return "[...]";
|
||
|
|
} else if (typeof value === 'object') {
|
||
|
|
return "{...}";
|
||
|
|
} else if (typeof value === 'number') {
|
||
|
|
return value.toFixed(1);
|
||
|
|
} else {
|
||
|
|
return value;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
type: function(value) {
|
||
|
|
if (Array.isArray(value)) {
|
||
|
|
return 'array';
|
||
|
|
} else if (typeof value === 'object') {
|
||
|
|
return 'object';
|
||
|
|
} else if (typeof value === 'number') {
|
||
|
|
return 'number';
|
||
|
|
} else if (typeof value === 'boolean') {
|
||
|
|
return 'boolean';
|
||
|
|
} else if (typeof value === 'string') {
|
||
|
|
return 'string';
|
||
|
|
} else {
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
value_css: function(value) {
|
||
|
|
return "property-value-" + this.type(value);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
template: `
|
||
|
|
<div class="entity-table">
|
||
|
|
<div class="entity-table-body">
|
||
|
|
<table>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th class="table-component">Id</th>
|
||
|
|
<th class="table-separator"></th>
|
||
|
|
<th class="table-component">Name</th>
|
||
|
|
<template v-for="(component,key) in data.data" v-if="key != 'Name'">
|
||
|
|
<th class="table-separator"></th>
|
||
|
|
<th class="table-component" :colspan="component_headers(key).length"> {{ key }} </th>
|
||
|
|
</template>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th class="table-member"></th>
|
||
|
|
<th class="table-separator"></th>
|
||
|
|
<th class="table-member"></th>
|
||
|
|
<template v-for="(component, name) in data.data" v-if="name != 'Name'">
|
||
|
|
<th class="table-separator"></th>
|
||
|
|
<th class="table-member" v-for="member in component_headers(name)">{{ member }}</th>
|
||
|
|
</template>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr v-for="(entity, i) in data.entities">
|
||
|
|
<td class="table-value">{{ entity }}</td>
|
||
|
|
<td class="table-separator"></td>
|
||
|
|
<td class="table-value">{{ data.data.Name[i].value }}</td>
|
||
|
|
<template v-for="(component,key) in data.data" v-if="key != 'Name'">
|
||
|
|
<td class="table-separator"></td>
|
||
|
|
<td class="table-value" v-for="member in component_headers(key)" :class="value_css(component[i][member])">
|
||
|
|
{{ component_member(component[i][member]) }}
|
||
|
|
</td>
|
||
|
|
</template>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
});
|
||
|
|
|