1<template> 2 <page-section :section-title="$t('pageFirmware.sectionTitleBiosCards')"> 3 <b-row class="row-cols-1 row-cols-md-2"> 4 <!-- Running image --> 5 <b-col class="mb-3"> 6 <b-card class="h-100"> 7 <template #header> 8 <p class="fw-bold m-0"> 9 {{ $t('pageFirmware.cardTitleRunning') }} 10 </p> 11 </template> 12 <dl class="mb-0"> 13 <dt>{{ $t('pageFirmware.cardBodyVersion') }}</dt> 14 <dd class="mb-0">{{ runningVersion }}</dd> 15 </dl> 16 </b-card> 17 </b-col> 18 19 <!-- Backup image --> 20 <b-col class="mb-3"> 21 <b-card class="h-100"> 22 <template #header> 23 <p class="fw-bold m-0"> 24 {{ $t('pageFirmware.cardTitleBackup') }} 25 </p> 26 </template> 27 <dl class="mb-0"> 28 <dt>{{ $t('pageFirmware.cardBodyVersion') }}</dt> 29 <dd class="mb-0"> 30 <status-icon v-if="showBackupImageStatus" status="danger" /> 31 <span 32 v-if="showBackupImageStatus" 33 class="visually-hidden-focusable" 34 > 35 {{ backupStatus }} 36 </span> 37 {{ backupVersion }} 38 </dd> 39 </dl> 40 </b-card> 41 </b-col> 42 </b-row> 43 </page-section> 44</template> 45 46<script> 47import PageSection from '@/components/Global/PageSection'; 48import { useI18n } from 'vue-i18n'; 49 50export default { 51 components: { PageSection }, 52 data() { 53 return { 54 $t: useI18n().t, 55 }; 56 }, 57 computed: { 58 running() { 59 return this.$store.getters['firmware/activeBiosFirmware']; 60 }, 61 backup() { 62 return this.$store.getters['firmware/backupBiosFirmware']; 63 }, 64 runningVersion() { 65 return this.running?.version || '--'; 66 }, 67 backupVersion() { 68 return this.backup?.version || '--'; 69 }, 70 backupStatus() { 71 return this.backup?.status || null; 72 }, 73 showBackupImageStatus() { 74 return ( 75 this.backupStatus === 'Critical' || this.backupStatus === 'Warning' 76 ); 77 }, 78 }, 79}; 80</script> 81 82<style lang="scss" scoped> 83.page-section { 84 margin-top: -$spacer * 1.5; 85} 86</style> 87