Use data from snipeit export, also render name as word, add mac address

computerLabel.css

@@ -14,7 +14,7 @@ body {
     width: calc(146.64pt - 4.32pt);
     height: calc(69.12pt - 4.08pt);
     position: relative;
-    padding-top: 2mm;
+    padding-top: 1.9mm;
 
     overflow: hidden;
 }
@@ -36,6 +36,18 @@ body {
 
 .text-content {
     margin-left: 1ex;
+    font-family: monospace;
+    line-height: 0.9;
+}
+
+.name {
+    font-size: 30;
+    line-height: 0.8;
+    margin-bottom: .1em;
+}
+
+.mac {
+    font-size: 10;
 }
 
 .barcode {

computerLabel.html

@@ -7,6 +7,9 @@
       <img class="qrcode" />
       <span class="text-content">
         <div class="name"></div>
+        <div class="hostname"></div>
+        <div class="mac"></div>
+        <div class="tag"></div>
       </span>
     </div>
     <img class="barcode" />

computerLabel.js

@@ -1,13 +1,20 @@
-import QRCode from "qrcode";
 import JsBarcode from "jsbarcode";
+import { toWords as numberToWords } from "number-to-words";
+import QRCode from "qrcode";
+
+import data from "./export-computers-assets-2020-01-30.json";
 
 async function renderLabels() {
   const template = document.querySelector("#labelTemplate");
 
   const URL_BASE = "https://inv.claremontmakerspace.org/";
-  const assetTag = "TSMS00001";
-  const assetName = "Laptop1";
 
+  for (const asset of data.data) {
+    const {
+      "Asset Tag": assetTag,
+      "Asset Name": assetName,
+      "MAC Address": mac
+    } = asset;
     let clone = document.importNode(template.content, true);
 
     let qrcode = await QRCode.toDataURL(URL_BASE + assetTag, { margin: 0 });
@@ -18,9 +25,15 @@ async function renderLabels() {
       margin: 0
     });
 
-  clone.querySelector(".name").textContent = assetName;
+    let name = numberToWords(assetName.match(/[0-9]+$/)[0]).toUpperCase();
+
+    clone.querySelector(".name").textContent = name;
+    clone.querySelector(".hostname").textContent = assetName;
+    clone.querySelector(".mac").textContent = mac;
+    clone.querySelector(".tag").textContent = assetTag;
 
     document.body.appendChild(clone);
   }
+}
 
 window.addEventListener("load", renderLabels);

package.json

@@ -5,6 +5,7 @@
   ],
   "dependencies": {
     "jsbarcode": "^3.11.0",
+    "number-to-words": "^1.2.4",
     "qrcode": "^1.4.4"
   }
 }