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,26 +1,39 @@
-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";
 
-  let clone = document.importNode(template.content, true);
+  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 });
-  clone.querySelector(".qrcode").src = qrcode;
+    let qrcode = await QRCode.toDataURL(URL_BASE + assetTag, { margin: 0 });
+    clone.querySelector(".qrcode").src = qrcode;
 
-  JsBarcode(clone.querySelector(".barcode"), assetTag, {
-    displayValue: false,
-    margin: 0
-  });
+    JsBarcode(clone.querySelector(".barcode"), assetTag, {
+      displayValue: false,
+      margin: 0
+    });
 
-  clone.querySelector(".name").textContent = assetName;
+    let name = numberToWords(assetName.match(/[0-9]+$/)[0]).toUpperCase();
 
-  document.body.appendChild(clone);
+    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"
   }
 }