c3lf/c3lf-system-3
9
0
Fork 0
Code Issues 55 Pull requests Projects 2 Releases Wiki Activity Actions

create admin panel views

Browse source
This commit is contained in:
j3d1 2024-01-07 21:45:03 +01:00
parent 48b2752a1e
commit 8c85aa4fe4
8 changed files with 363 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

45
web/src/components/Matrix2D.vue Normal file
View file

@ -0,0 +1,45 @@
<template>
<table class="table table-striped table-dark" style="table-layout: fixed">
<thead>
<tr>
<th scope="col"></th>
<th scope="col" v-for="(column, index) in columns" :key="index">
{{ column }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, i) in rows" :key="i">
<td>{{ row }}</td>
<td v-for="(column, j) in columns" :key="j">
<font-awesome-icon v-if="items[j][i]" icon="check" class="text-success"/>
<font-awesome-icon v-else icon="times" class="text-danger"/>
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
name: 'Matrix2D',
props: {
items: {
type: Array,
required: true
},
columns: {
type: Array,
required: true
},
rows: {
type: Array,
required: true
}
},
};
</script>
<style>
</style>

61
web/src/components/Matrix3D.vue Normal file
View file

@ -0,0 +1,61 @@
<template>
<table class="table table-striped table-dark" style="table-layout: fixed">
<thead>
<tr>
<th scope="col"></th>
<th scope="col" v-for="(column, index) in columns" :key="index">
{{ column }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, i) in rows" :key="i">
<td>{{ row }}</td>
<td v-for="(column, j) in columns" :key="j">
<font-awesome-icon v-if="triState(items[j][i]) === 'on'" icon="check" class="text-success"/>
<font-awesome-icon v-else-if="triState(items[j][i]) === 'off'" icon="times" class="text-danger"/>
<font-awesome-icon v-else icon="minus" class="text-warning"/>
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
name: 'Matrix3D',
props: {
items: {
type: Array,
required: true
},
columns: {
type: Array,
required: true
},
rows: {
type: Array,
required: true
},
foldedDimension: {
type: Array,
required: true
}
},
methods: {
triState(list) {
if(list.every(e => e === true)) {
return 'on';
} else if(list.every(e => e === false)) {
return 'off';
} else {
return 'partial';
}
}
},
};
</script>
<style>
</style>