1<template>
2  <div class="quicklinks">
3    <div>
4      <dl>
5        <!-- TODO: display timezone -->
6        <dt>BMC time</dt>
7        <dd>{{ bmcTime | date('DD MMM 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        <IconArrowRight />
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        <IconArrowRight />
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  created() {
60    this.getBmcTime();
61  },
62  computed: {
63    bmcTime() {
64      return this.$store.getters['global/bmcTime'];
65    }
66  },
67  methods: {
68    getBmcTime() {
69      this.$store.dispatch('global/getBmcTime');
70    }
71  },
72  data() {
73    return {
74      serverLedChecked: false
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}
93
94@media screen and (min-width: 600px) {
95  .quicklinks {
96    grid-template-columns: 1fr 1fr;
97  }
98}
99
100@media screen and (min-width: 1095px) {
101  .quicklinks {
102    grid-template-columns: 1fr 1fr 1fr 1fr;
103  }
104}
105</style>
106