assetLabelGen/ComputersLabelText.vue

<template>
  <span class="text-content">
    <div class="name">
      <span class="emoji">{{ emoji }}</span
      >{{ 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 emoji() {
    return this.asset.name.includes('Laptop')
      ? '💻'
      : this.asset.name.includes('Desktop')
      ? '🖥'
      : '?';
  }
  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: 20px;
  vertical-align: 30%;
}

.name {
  font-size: 30px;
  line-height: 0.8;
  margin-bottom: 0.1em;
}

.mac {
  font-size: 10px;
}
</style>