diff options
Diffstat (limited to 'src/components/Global/SilaComponents/Tables/AccessoryTableDrivers.vue')
-rw-r--r-- | src/components/Global/SilaComponents/Tables/AccessoryTableDrivers.vue | 116 |
1 files changed, 116 insertions, 0 deletions
diff --git a/src/components/Global/SilaComponents/Tables/AccessoryTableDrivers.vue b/src/components/Global/SilaComponents/Tables/AccessoryTableDrivers.vue new file mode 100644 index 00000000..120a03a3 --- /dev/null +++ b/src/components/Global/SilaComponents/Tables/AccessoryTableDrivers.vue @@ -0,0 +1,116 @@ +<template> + <section class="bootstrap-table__section"> + <span class="bold-12px__caps"> + {{ $t('fansPage.valueIndicators') }} + </span> + <b-table + responsive="md" + class="bootstrap-fans-table bootstrap-fans-table__stripes" + :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"> +.bootstrap-fans-table__th { + background-color: transparent !important; + color: $text-primary !important; + border-top: none !important; + padding: 10px 5px !important; + border-bottom: 1px solid $faint-secondary-primary-10; +} + +.bootstrap-fans-table__td { + padding: 5px !important; + border-top: none !important; +} + +.SMART-table-col-first { + width: 34%; +} + +.SMART-table-col-second { + width: 32%; +} + +.SMART-table-col-last { + width: 39%; +} +</style> + +<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> |