1<template> 2 <page-section 3 :section-title="$t('pageInventory.systemIndicator.sectionTitle')" 4 > 5 <div class="form-background pl-4 pt-4 pb-1"> 6 <b-row> 7 <b-col sm="6" md="3"> 8 <dl> 9 <dt>{{ $t('pageInventory.systemIndicator.powerStatus') }}</dt> 10 <dd> 11 {{ $t(powerStatus) }} 12 </dd> 13 </dl> 14 </b-col> 15 <b-col sm="6" md="3"> 16 <dl> 17 <dt> 18 {{ $t('pageInventory.systemIndicator.identifyLed') }} 19 </dt> 20 <dd> 21 <b-form-checkbox 22 id="identifyLedSwitchService" 23 v-model="systems.locationIndicatorActive" 24 data-test-id="inventoryService-toggle-identifyLed" 25 switch 26 @change="toggleIdentifyLedSwitch" 27 > 28 <span v-if="systems.locationIndicatorActive"> 29 {{ $t('global.status.on') }} 30 </span> 31 <span v-else>{{ $t('global.status.off') }}</span> 32 </b-form-checkbox> 33 </dd> 34 </dl> 35 </b-col> 36 </b-row> 37 </div> 38 </page-section> 39</template> 40<script> 41import PageSection from '@/components/Global/PageSection'; 42import BVToastMixin from '@/components/Mixins/BVToastMixin'; 43import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin'; 44 45export default { 46 components: { PageSection }, 47 mixins: [BVToastMixin, TableDataFormatterMixin], 48 computed: { 49 systems() { 50 let systemData = this.$store.getters['system/systems'][0]; 51 return systemData ? systemData : {}; 52 }, 53 serverStatus() { 54 return this.$store.getters['global/serverStatus']; 55 }, 56 powerStatus() { 57 if (this.serverStatus === 'unreachable') { 58 return `global.status.off`; 59 } 60 return `global.status.${this.serverStatus}`; 61 }, 62 }, 63 created() { 64 this.$store.dispatch('system/getSystem').finally(() => { 65 // Emit initial data fetch complete to parent component 66 this.$root.$emit('hardware-status-service-complete'); 67 }); 68 }, 69 methods: { 70 toggleIdentifyLedSwitch(state) { 71 this.$store 72 .dispatch('system/changeIdentifyLedState', state) 73 .catch(({ message }) => this.errorToast(message)); 74 }, 75 }, 76}; 77</script> 78