52 lines
1013 B
Vue
52 lines
1013 B
Vue
<template>
|
|
<span class="text-content">
|
|
<div class="name">{{ name }}</div>
|
|
<div class="hostname">{{ asset.name }}</div>
|
|
<div class="mac">{{ getCustom('MAC Address') }}</div>
|
|
<div class="mac">{{ getCustom('MAC Address 2') }}</div>
|
|
</span>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Vue, Component, Prop } from 'vue-property-decorator';
|
|
import { toWords as numberToWords } from 'number-to-words';
|
|
|
|
import snipeit from './snipeit';
|
|
|
|
@Component
|
|
export default class ComputersLabelText extends Vue {
|
|
@Prop(Object) readonly asset: snipeit.Hardware;
|
|
|
|
get name() {
|
|
return numberToWords(this.asset.name.match(/[0-9]+$/)[0]).toUpperCase();
|
|
}
|
|
|
|
getCustom(field) {
|
|
return this.asset.custom_fields[field]?.value;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.text-content {
|
|
font-family: monospace;
|
|
line-height: 1;
|
|
}
|
|
|
|
.emoji {
|
|
font: 'Twemoji Mozilla';
|
|
font-size: 20;
|
|
vertical-align: 30%;
|
|
}
|
|
|
|
.name {
|
|
font-size: 30;
|
|
line-height: 0.8;
|
|
margin-bottom: 0.1em;
|
|
}
|
|
|
|
.mac {
|
|
font-size: 10;
|
|
}
|
|
</style>
|