diff options
Diffstat (limited to 'src/components/_sila/Global/SilaComponents/Tables/AccessoryTable.vue')
-rw-r--r-- | src/components/_sila/Global/SilaComponents/Tables/AccessoryTable.vue | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/src/components/_sila/Global/SilaComponents/Tables/AccessoryTable.vue b/src/components/_sila/Global/SilaComponents/Tables/AccessoryTable.vue new file mode 100644 index 00000000..4cb64929 --- /dev/null +++ b/src/components/_sila/Global/SilaComponents/Tables/AccessoryTable.vue @@ -0,0 +1,88 @@ +<template> + <section class="bootstrap-table__section"> + <b-table + id="table-accessory" + responsive="md" + class="table-accessory" + no-border-collapse + :items="records.items" + :fields="records.fields" + > + <template #cell(name)="{ value, index }"> + <div + class="fans-colors" + :style="`background-color: ${colors[index]}`" + ></div> + <span class="light-12px"> + {{ value }} + </span> + </template> + <template #cell(minDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #cell(maxDate)="{ value }"> + <span class="regular-12px"> + {{ value.time }} + </span> + <span class="regular-12px tretiatry"> + {{ value.date }} + </span> + </template> + <template #head(currentPower)="{ label }"> + <span class="semi-bold-12px"> + {{ label }} + </span> + <span class="semi-bold-12px errors"> + {{ '(15)' }} + </span> + </template> + <template #cell(currentPower)="{ value }"> + <row> + <span class="light-12px"> + {{ value }} + </span> + </row> + </template> + </b-table> + </section> +</template> + +<script> +import { colors } from '../colors'; + +export default { + props: { + records: { + type: Object, + default: null, + }, + }, + data() { + return { + colors, + }; + }, +}; +</script> +<style lang="scss" scoped> +.fans-colors { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 2px; +} +.row { + align-items: center; + flex-wrap: nowrap; + justify-content: flex-end; +} + +.errors { + color: $indicators-errors; +} +</style> |