This repository has been archived on 2022-10-05. You can view files and clone it, but cannot push or open issues or pull requests.
assetLabelGen/AssetLabel.vue

105 lines
1.7 KiB
Vue
Raw Normal View History

<template>
<article class="label">
<div class="content">
<img class="qrcode" :src="qrcode_dataURL" />
<slot> </slot>
</div>
<div class="bottom">
<span class="scanme">Scan the QR code to learn more!</span>
<span class="barcode-tag">
<img class="barcode" ref="barcode" />
<div class="tag">{{ asset.asset_tag }}</div>
</span>
</div>
</article>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import JsBarcode from 'jsbarcode';
import QRCode from 'qrcode';
import snipeit from './snipeit';
@Component
export default class ComputerLabel extends Vue {
QRCODE_BASE = 'https://inv.claremontmakerspace.org/';
@Prop(Object) readonly asset: snipeit.Hardware;
qrcode_dataURL: string | null = null;
async mounted() {
this.qrcode_dataURL = await QRCode.toDataURL(
this.QRCODE_BASE + this.asset.asset_tag,
{
margin: 0,
}
);
JsBarcode(this.$refs.barcode, this.asset.asset_tag, {
displayValue: false,
margin: 0,
});
}
}
</script>
<style>
.label {
background-size: cover;
page-break-after: always;
clear: both;
width: calc(146.64pt - 4.32pt);
height: calc(69.12pt - 4.08pt);
position: relative;
padding-top: 1.9mm;
/* overflow: hidden; */
}
@media screen {
.label {
border: 1px solid red;
}
}
.content {
display: flex;
height: 70%;
}
.qrcode {
height: 100%;
}
.text-content {
margin-left: 1ex;
}
.bottom {
margin-top: 2%;
display: flex;
height: 26%;
padding-right: 1.2mm;
}
.scanme {
font-size: 10px;
}
.barcode-tag {
width: 90%;
display: flex;
flex-direction: column;
align-items: center;
font-size: 7px;
}
.barcode {
width: 90%;
height: 60%;
}
</style>