OpenDTU-old/webapp/src/components/GridProfile.vue
2023-12-09 11:12:37 +01:00

63 lines
2.0 KiB
Vue

<template>
<BootstrapAlert :show="!hasValidData">
<h4 class="alert-heading">
<BIconInfoSquare class="fs-2" />&nbsp;{{ $t('gridprofile.NoInfo') }}
</h4>{{ $t('gridprofile.NoInfoLong') }}
</BootstrapAlert>
<template v-if="hasValidData">
<table class="table table-hover">
<tbody>
<tr>
<td>{{ $t('gridprofile.Name') }}</td>
<td>{{ gridProfileList.name }}</td>
</tr>
<tr>
<td>{{ $t('gridprofile.Version') }}</td>
<td>{{ gridProfileList.version }}</td>
</tr>
</tbody>
</table>
<BootstrapAlert :show="true" variant="danger">
<h4 class="info-heading">
<BIconInfoSquare class="fs-2" />&nbsp;{{ $t('gridprofile.GridprofileSupport') }}
</h4><div v-html="$t('gridprofile.GridprofileSupportLong')"></div>
</BootstrapAlert>
<samp >
{{ rawContent() }}
</samp>
</template>
</template>
<script lang="ts">
import BootstrapAlert from '@/components/BootstrapAlert.vue';
import type { GridProfileStatus } from "@/types/GridProfileStatus";
import { BIconInfoSquare } from 'bootstrap-icons-vue';
import { defineComponent, type PropType } from 'vue';
export default defineComponent({
components: {
BootstrapAlert,
BIconInfoSquare,
},
props: {
gridProfileList: { type: Object as PropType<GridProfileStatus>, required: true },
},
computed: {
rawContent() {
return () => {
return this.gridProfileList.raw.map(function (x) {
let y = x.toString(16); // to hex
y = ("00" + y).substr(-2); // zero-pad to 2-digits
return y
}).join(' ');
}
},
hasValidData() {
return this.gridProfileList.raw.reduce((sum, x) => sum + x, 0) > 0;
},
},
});
</script>