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