diff options
Diffstat (limited to 'src/views/Processors/Specification/AcceleratorSpecificationTable.vue')
-rw-r--r-- | src/views/Processors/Specification/AcceleratorSpecificationTable.vue | 194 |
1 files changed, 194 insertions, 0 deletions
diff --git a/src/views/Processors/Specification/AcceleratorSpecificationTable.vue b/src/views/Processors/Specification/AcceleratorSpecificationTable.vue new file mode 100644 index 00000000..2baa7d5d --- /dev/null +++ b/src/views/Processors/Specification/AcceleratorSpecificationTable.vue @@ -0,0 +1,194 @@ +<template> + <b-table + responsive="md" + show-empty + class="bootstrap-rounded-table" + :items="accelerators" + :fields="fields" + > + <template #cell(expandRow)=""> + <b-button + variant="link" + data-test-id="hardwareStatus-button-expandAccelerators" + :title="expandRowLabel" + > + <icon-chevron /> + <span class="sr-only">{{ expandRowLabel }}</span> + </b-button> + </template> + <template #cell(status)="{ value }"> + <div v-if="value" class="fans-table-col-first__cell"> + <img class="status__img" src="@/assets/images/fans-page/working.svg" /> + <span> + {{ $t('fansPage.inWork') }} + </span> + </div> + <div v-else class="fans-table-col-first__cell"> + <img + class="status__img" + src="@/assets/images/fans-page/notWorking.svg" + /> + <span> + {{ $t('fansPage.notWorking') }} + </span> + </div> + </template> + </b-table> +</template> + +<script> +import TableRowExpandMixin, { + expandRowLabel, +} from '@/components/Mixins/TableRowExpandMixin'; +import IconChevron from '@carbon/icons-vue/es/chevron--down/20'; +import BVToastMixin from '@/components/Mixins/BVToastMixin'; +import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin'; + +import { Accelerators } from './mock'; +export default { + components: { IconChevron }, + mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin], + data() { + return { + isBusy: true, + isAddersСolon: false, + accelerators: Accelerators, + fields: [ + { + key: 'expandRow', + label: '', + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-expand`, + tdClass: 'table-row-expand bootstrap-rounded-table__td', + sortable: false, + }, + { + key: 'status', + label: 'Статус', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-first`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'name', + label: 'Имя', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-third`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'slot_number', + label: '№ Слота', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-fourth`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'board_number', + label: '№ Платы', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-fourth`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'serial_number', + label: 'Серийный номер', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-first`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'frequency', + label: '№ Детали', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__without-border + fans-table-col-fourth`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + { + key: 'cores', + label: 'Версия прошивки', + formatter: this.dataFormatter, + thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg', + class: `bootstrap-rounded-table__column-last + fans-table-col-third`, + tdClass: 'regular-12px bootstrap-rounded-table__td', + }, + ], + expandRowLabel: expandRowLabel, + }; + }, +}; +</script> +<style lang="scss"> +.fans-table-col-expand { + width: 3%; +} +.fans-table-col-first { + width: 15%; +} + +.fans-table-col-second { + width: 12%; +} + +.fans-table-col-third { + width: 10%; +} + +.fans-table-col-fourth { + width: 8%; +} +</style> + +<style lang="scss" scoped> +.row { + margin: 0px; + flex-wrap: nowrap; +} +.fans-table-col-first__cell { + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: flex-start; +} + +.status__img { + margin-right: 7px; +} + +.bold-16px { + margin: 24px 0 0 2rem; +} + +.bold-12px__caps { + color: $text-secondary; +} + +.attrib-names { + border-bottom: 1px solid $faint-secondary-primary-10; + color: $text-secondary !important; + font-weight: 600; +} + +.custom-switch { + margin: 0; +} + +.btn-link { + width: 30px !important; + height: 20px !important; +} +</style> |