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