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 class="sr-only">
29                  {{ $t('pageInventory.systemIndicator.identifyLed') }}
30                </span>
31                <span v-if="systems.locationIndicatorActive">
32                  {{ $t('global.status.on') }}
33                </span>
34                <span v-else>{{ $t('global.status.off') }}</span>
35              </b-form-checkbox>
36            </dd>
37          </dl>
38        </b-col>
39      </b-row>
40    </div>
41  </page-section>
42</template>
43<script>
44import PageSection from '@/components/Global/PageSection';
45import BVToastMixin from '@/components/Mixins/BVToastMixin';
46import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
47
48export default {
49  components: { PageSection },
50  mixins: [BVToastMixin, TableDataFormatterMixin],
51  computed: {
52    systems() {
53      let systemData = this.$store.getters['system/systems'][0];
54      return systemData ? systemData : {};
55    },
56    serverStatus() {
57      return this.$store.getters['global/serverStatus'];
58    },
59    powerStatus() {
60      if (this.serverStatus === 'unreachable') {
61        return `global.status.off`;
62      }
63      return `global.status.${this.serverStatus}`;
64    },
65  },
66  created() {
67    this.$store.dispatch('system/getSystem').finally(() => {
68      // Emit initial data fetch complete to parent component
69      this.$root.$emit('hardware-status-service-complete');
70    });
71  },
72  methods: {
73    toggleIdentifyLedSwitch(state) {
74      this.$store
75        .dispatch('system/changeIdentifyLedState', state)
76        .catch(({ message }) => this.errorToast(message));
77    },
78  },
79};
80</script>
81