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 { useI18n } from 'vue-i18n'; 44 45export default { 46 components: { PageSection }, 47 mixins: [BVToastMixin], 48 data() { 49 return { 50 $t: useI18n().t, 51 }; 52 }, 53 computed: { 54 systems() { 55 let systemData = this.$store.getters['system/systems'][0]; 56 return systemData ? systemData : {}; 57 }, 58 serverStatus() { 59 return this.$store.getters['global/serverStatus']; 60 }, 61 powerStatus() { 62 if (this.serverStatus === 'unreachable') { 63 return `global.status.off`; 64 } 65 return `global.status.${this.serverStatus}`; 66 }, 67 }, 68 created() { 69 this.$store.dispatch('system/getSystem').finally(() => { 70 // Emit initial data fetch complete to parent component 71 this.$root.$emit('hardware-status-service-complete'); 72 }); 73 }, 74 methods: { 75 toggleIdentifyLedSwitch(state) { 76 this.$store 77 .dispatch('system/changeIdentifyLedState', state) 78 .then((message) => this.successToast(message)) 79 .catch(({ message }) => this.errorToast(message)); 80 }, 81 }, 82}; 83</script> 84