Implement table methods

src/config.ts

@@ -0,0 +1,21 @@
+export const rejectedParts = [
+  'TP1',
+  'TP2',
+  'TP3',
+  'G',
+  'U$1',
+  'S1',
+  'J1',
+  'J2',
+  'JP1',
+  'JP2',
+  'V',
+  'I',
+  'O',
+  'T1',
+  'T2',
+  'T3',
+  'INPUT',
+  'IN',
+  'OUT',
+];

src/csvToJSON.ts

@@ -11,6 +11,7 @@ const csvConfig = {
 };
 
 export async function getBOM(csvBOM: string) {
-  const bom = await csv(csvConfig).fromString(csvBOM);
+  const rawBOM = await csv(csvConfig).fromString(csvBOM);
+  const bom = rawBOM.filter((part: part) => !isJunk(part));
   return bom;
 }

src/index.ts

@@ -1,10 +1,18 @@
 //Modules
 import { getBOM } from './csvToJSON';
+import {
+  createTableBody,
+  createTableHeader,
+  htmlTable,
+  clearTable,
+} from './utils';
 
 //DOM elements
 const input = document.getElementById('csvInput') as HTMLInputElement;
 const csvTextOutput = document.getElementById('csvText') as HTMLPreElement;
-let rawCSV: string;
+const jsonTextOutput = document.getElementById('partsJSON') as HTMLPreElement;
+
+let csvBOM: string;
 
 //Functions
 function handleUpload(event: Event) {
@@ -23,22 +31,33 @@ function processCSV(fileReader: Event) {
   const content = (fileReader.target as FileReader).result;
   if (content === null) throw new Error('CSV Cannot be null.');
   const csvString = content.toString();
+  csvBOM = csvString;
   //Display the CSV contents
   csvTextOutput.innerText = csvString;
-  const bomJSON = createJSONbom(csvString);
+  //JSON Object
+  printJSONbom(csvString);
+  //Table
+  clearTable();
+  createTable();
 }
 
 //TODO
-async function createJSONbom(csvString: string) {
+async function printJSONbom(csvString: string) {
   const bomJSON = await getBOM(csvString);
-  console.log(bomJSON);
+  // console.log(bomJSON);
+  jsonTextOutput.innerText = JSON.stringify(bomJSON, null, 2);
+  return bomJSON;
+}
+
+async function createTable() {
+  const bomJSON = await getBOM(csvBOM);
+  createTableHeader();
+  createTableBody(htmlTable, bomJSON);
 }
 
 //Add event listener
 input.addEventListener('change', handleUpload);
 
-// csvToJSON();
-
 /* TODO
 // Format the HTML nicely and output to a pre code block
 function displayMarkup() {
@@ -47,56 +66,6 @@ function displayMarkup() {
   markup.innerText = beautify(tableCode);
 }
 
-// Table functions
-function clearTable() {
-  document.querySelector('table')!.innerHTML = '';
-}
-
-function generateTableHead(table: HTMLTableElement, data: Array<string>) {
-  const thead = table.createTHead();
-  const row = thead.insertRow();
-  // Populate Header row
-  data.map((key) => {
-    const th = document.createElement('th');
-    const text = document.createTextNode(key);
-    th.appendChild(text);
-    row.appendChild(th);
-  });
-}
-
-function generateTableBody(table: HTMLTableElement, data: part[]) {
-  data.map((component) => {
-    const row = table.insertRow();
-    // Insert Part Name
-    const partName = row.insertCell();
-    const partNameText = document.createTextNode(component.Part);
-    partName.appendChild(partNameText);
-    // Insert Part Value
-    const partVal = row.insertCell();
-    const partValText = document.createTextNode(component.Value);
-    partVal.appendChild(partValText);
-  });
-}
-
-async function makeTable(csvString: string) {
-
-  const converter: Converter = csv({
-    delimiter: ';',
-    includeColumns: /(Part|Value)/,
-    ignoreEmpty: true,
-  })
-
-  const jsonArray = await converter.fromString(csvString);
-  // Filter out unwanted parts
-  const parts = jsonArray.filter(isJunk);
-  // Build table
-  const table = document.querySelector('table') as HTMLTableElement;
-  const headerData = Object.keys(parts[0]);
-  generateTableBody(table, parts);
-  generateTableHead(table, headerData);
-  displayMarkup();
-}
-
 // Create a JSON object for Contentful
 function makeJSON(csvString: string) {
   csv({
@@ -117,22 +86,4 @@ function makeJSON(csvString: string) {
       );
     });
 }
-
-const csvPicker = document.getElementById('csvFile') as HTMLInputElement;
-
-csvPicker.onchange = function handleFiles(event: Event) {
-  const target = event.target as HTMLInputElement;
-  const csvFile: File = (target.files as FileList)[0];
-  const reader = new FileReader();
-  reader.readAsText(csvFile);
-  reader.onload = () => {
-    if (reader.result == null) {
-      throw new Error('Something went wrong.');
-    }
-    const csvString = reader.result.toString();
-    clearTable();
-    makeTable(csvString);
-    makeJSON(csvString);
-  };
-}
 */

src/parts.d.ts

@@ -9,7 +9,7 @@ enum PartType {
 
 declare interface part {
   Part: string;
-  PartType: PartType;
+  PartType?: PartType;
   Value: string;
 }
 

src/utils.ts

@@ -1,8 +1,50 @@
+import { rejectedParts } 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
+/*
+
 export function getPartType(component: part) {
   if (component.Part.match(/^C\d/) != null) {
     return 'C';
@@ -16,8 +58,7 @@ export function getPartType(component: part) {
   return 'COMPONENT';
 }
 
-// TODO
-/*
+
 function getJSONParts(allParts: part[]) {
   const jsonParts: structuredParts = {
     C: {},
@@ -46,25 +87,3 @@ function getJSONParts(allParts: part[]) {
   return jsonParts;
 }
 */
-
-const rejectedParts = [
-  'TP1',
-  'TP2',
-  'TP3',
-  'G',
-  'U$1',
-  'S1',
-  'J1',
-  'J2',
-  'JP1',
-  'JP2',
-  'V',
-  'I',
-  'O',
-  'T1',
-  'T2',
-  'T3',
-  'INPUT',
-  'IN',
-  'OUT',
-];