1<template>
2  <div class="quicklinks">
3    <div>
4      <dl>
5        <dt>{{ $t('pageOverview.quicklinks.bmcTime') }}</dt>
6        <dd>{{ bmcTime | formatDate }} {{ bmcTime | formatTime }}</dd>
7      </dl>
8    </div>
9    <div>
10      <!-- TODO: add toggle LED on/off funtionality -->
11      <dl>
12        <dt>{{ $t('pageOverview.quicklinks.serverLed') }}</dt>
13        <dd>
14          <b-form-checkbox
15            v-model="serverLedChecked"
16            name="check-button"
17            switch
18          >
19            <span v-if="serverLedChecked">{{ $t('global.status.on') }}</span>
20            <span v-else>{{ $t('global.status.off') }}</span>
21          </b-form-checkbox>
22        </dd>
23      </dl>
24    </div>
25    <div>
26      <!-- TODO: link to network settings -->
27      <b-button
28        href="#"
29        variant="secondary"
30        class="d-flex justify-content-between align-items-center"
31      >
32        <span>{{ $t('pageOverview.quicklinks.editNetworkSettings') }}</span>
33        <icon-arrow-right />
34      </b-button>
35    </div>
36    <div>
37      <!-- TODO: link to SOL -->
38      <b-button
39        href="#"
40        variant="secondary"
41        class="d-flex justify-content-between align-items-center"
42      >
43        <span>{{ $t('pageOverview.quicklinks.solConsole') }}</span>
44        <icon-arrow-right />
45      </b-button>
46    </div>
47  </div>
48</template>
49
50<script>
51import ArrowRight16 from '@carbon/icons-vue/es/arrow--right/16';
52
53export default {
54  name: 'QuickLinks',
55  components: {
56    IconArrowRight: ArrowRight16
57  },
58  data() {
59    return {
60      serverLedChecked: false
61    };
62  },
63  computed: {
64    bmcTime() {
65      return this.$store.getters['global/bmcTime'];
66    }
67  },
68  created() {
69    this.getBmcTime();
70  },
71  methods: {
72    getBmcTime() {
73      this.$store.dispatch('global/getBmcTime');
74    }
75  }
76};
77</script>
78
79<style lang="scss" scoped>
80dd,
81dl {
82  margin: 0;
83}
84
85.quicklinks {
86  background: $container-bgd;
87  display: grid;
88  grid-gap: 1rem;
89  padding: 1rem;
90  white-space: nowrap;
91  align-items: center;
92}
93
94@include media-breakpoint-up(sm) {
95  .quicklinks {
96    grid-template-columns: repeat(2, 1fr);
97  }
98}
99
100@include media-breakpoint-up(xl) {
101  .quicklinks {
102    grid-template-columns: repeat(4, 1fr);
103  }
104}
105</style>
106