1<template>
2  <overview-card
3    :title="$t('pageOverview.inventory')"
4    :to="`/hardware-status/inventory`"
5  >
6    <b-row class="mt-3">
7      <b-col sm="6">
8        <dl sm="6">
9          <dt>{{ $t('pageOverview.systemIdentifyLed') }}</dt>
10          <dd>
11            <b-form-checkbox
12              id="identifyLedSwitch"
13              v-model="systems.locationIndicatorActive"
14              data-test-id="overviewInventory-checkbox-identifyLed"
15              switch
16              @change="toggleIdentifyLedSwitch"
17            >
18              <span v-if="systems.locationIndicatorActive">
19                {{ $t('global.status.on') }}
20              </span>
21              <span v-else>{{ $t('global.status.off') }}</span>
22            </b-form-checkbox>
23          </dd>
24        </dl>
25      </b-col>
26    </b-row>
27  </overview-card>
28</template>
29
30<script>
31import OverviewCard from './OverviewCard';
32import BVToastMixin from '@/components/Mixins/BVToastMixin';
33import { useI18n } from 'vue-i18n';
34
35export default {
36  name: 'Inventory',
37  components: {
38    OverviewCard,
39  },
40  mixins: [BVToastMixin],
41  data() {
42    return {
43      $t: useI18n().t,
44    };
45  },
46  computed: {
47    systems() {
48      let systemData = this.$store.getters['system/systems'][0];
49      return systemData ? systemData : {};
50    },
51  },
52  created() {
53    this.$store.dispatch('system/getSystem').finally(() => {
54      this.$root.$emit('overview-inventory-complete');
55    });
56  },
57  methods: {
58    toggleIdentifyLedSwitch(state) {
59      this.$store
60        .dispatch('system/changeIdentifyLedState', state)
61        .then((message) => this.successToast(message))
62        .catch(({ message }) => this.errorToast(message));
63    },
64  },
65};
66</script>
67