FInish table class implementation

src/config.ts

@@ -1,3 +1,4 @@
+//Array of part names to omit from the BOM
 export const rejectedParts = [
   'TP1',
   'TP2',
@@ -19,3 +20,14 @@ export const rejectedParts = [
   'IN',
   'OUT',
 ];
+
+//Header titles for the table
+export const headers: string[] = ['Part', 'Value'];
+
+//Config object for csv library
+export const csvConfig = {
+  delimiter: `;`,
+  quote: '"',
+  ignoreEmpty: true,
+  includeColumns: /(Part|Value)/,
+};

src/csvToJSON.ts

@@ -1,15 +1,7 @@
-import { CSVParseParam } from '../node_modules/csvtojson/v2/Parameters';
 import { isJunk } from './utils';
+import { csvConfig } from './config';
 const csv = require('csvtojson');
 
-//CSV Config for EAGLE BOM
-const csvConfig = {
-  delimiter: `;`,
-  quote: '"',
-  ignoreEmpty: true,
-  includeColumns: /(Part|Value)/,
-};
-
 export async function getBOM(csvBOM: string) {
   const rawBOM = await csv(csvConfig).fromString(csvBOM);
   const bom = rawBOM.filter((part: part) => !isJunk(part));

src/index.ts

@@ -1,16 +1,13 @@
 //Modules
 import { getBOM } from './csvToJSON';
-import {
-  createTableBody,
-  createTableHeader,
-  htmlTable,
-  clearTable,
-} from './utils';
+import { PartsTable } from './table';
+import { headers } from './config';
 
 //DOM elements
 const input = document.getElementById('csvInput') as HTMLInputElement;
 const csvTextOutput = document.getElementById('csvText') as HTMLPreElement;
 const jsonTextOutput = document.getElementById('partsJSON') as HTMLPreElement;
+const htmlTable = document.getElementById('partsTable') as HTMLTableElement;
 
 let csvBOM: string;
 
@@ -37,22 +34,20 @@ function processCSV(fileReader: Event) {
   //JSON Object
   printJSONbom(csvString);
   //Table
-  clearTable();
   createTable();
 }
 
-//TODO
+//Print JSON
 async function printJSONbom(csvString: string) {
   const bomJSON = await getBOM(csvString);
-  // console.log(bomJSON);
   jsonTextOutput.innerText = JSON.stringify(bomJSON, null, 2);
-  return bomJSON;
 }
 
+//Construct table
 async function createTable() {
   const bomJSON = await getBOM(csvBOM);
-  createTableHeader();
-  createTableBody(htmlTable, bomJSON);
+  const partsTable = new PartsTable(htmlTable, headers, bomJSON);
+  partsTable.createTable();
 }
 
 //Add event listener

src/table.ts

@@ -0,0 +1,48 @@
+export class PartsTable {
+  constructor(
+    public htmlTable: HTMLTableElement,
+    public headers: string[],
+    public jsonBOM: part[],
+  ) {}
+
+  //Reset table
+  public clearTable(): void {
+    this.htmlTable.innerHTML = '';
+  }
+
+  //Header
+  private createTableHeader(): void {
+    const tHead = this.htmlTable.createTHead();
+    const hRow = tHead.insertRow();
+    //Populate headers with text
+    for (const header of this.headers) {
+      const th = document.createElement('th');
+      const headerText = document.createTextNode(header);
+      th.appendChild(headerText);
+      hRow.appendChild(th);
+    }
+  }
+
+  //Body
+  private createTableBody(): void {
+    this.jsonBOM.map((component) => {
+      //Create a row
+      const tRow = this.htmlTable.insertRow();
+      //Insert part name
+      const partName = tRow.insertCell();
+      const partNameText = document.createTextNode(component.Part);
+      partName.appendChild(partNameText);
+      //Insert part value
+      const partValue = tRow.insertCell();
+      const partValText = document.createTextNode(component.Value);
+      partValue.appendChild(partValText);
+    });
+  }
+
+  //Create full table
+  public createTable(): void {
+    this.clearTable();
+    this.createTableHeader();
+    this.createTableBody();
+  }
+}

src/utils.ts

@@ -1,47 +1,10 @@
-import { rejectedParts } from './config';
+import { rejectedParts, headers } from './config';
 
 export function isJunk(element: part): boolean {
   // Returns true if element is in the rejected list
   return rejectedParts.includes(element.Part);
 }
 
-//Table functions
-export function clearTable() {
-  document.querySelector('table')!.innerHTML = '';
-}
-
-export const htmlTable = document.getElementById(
-  'partsTable',
-) as HTMLTableElement;
-const headers: string[] = ['Part', 'Value'];
-
-export function createTableHeader(): void {
-  const tHead = htmlTable.createTHead();
-  const hRow = tHead.insertRow();
-  //Populate headers with text
-  for (const header of headers) {
-    const th = document.createElement('th');
-    const headerText = document.createTextNode(header);
-    th.appendChild(headerText);
-    hRow.appendChild(th);
-  }
-}
-
-export function createTableBody(table: HTMLTableElement, parts: part[]) {
-  parts.map((component) => {
-    //Create a row
-    const tRow = table.insertRow();
-    //Insert part name
-    const partName = tRow.insertCell();
-    const partNameText = document.createTextNode(component.Part);
-    partName.appendChild(partNameText);
-    //Insert part value
-    const partValue = tRow.insertCell();
-    const partValText = document.createTextNode(component.Value);
-    partValue.appendChild(partValText);
-  });
-}
-
 // TODO
 /*