assetLabelGen/ComputersLabelText.vue

<template>
  <span class="text-content">
    <div class="name">{{ name }}</div>
    <div class="hostname">{{ asset.name }}</div>
    <div class="mac">{{ mac }}</div>
    <div class="mac">{{ mac2 }}</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();
  }

  get mac() {
    return this.asset.custom_fields['MAC Address']?.value;
  }
  get mac2() {
    return this.asset.custom_fields['MAC Address 2']?.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>