From 98392327693d03be92fee7c619dba89d08dfc964 Mon Sep 17 00:00:00 2001 From: Nick Playfair <842413+nplayfair@users.noreply.github.com> Date: Wed, 11 Jun 2025 22:22:23 +0100 Subject: [PATCH] Implement table methods --- src/config.ts | 21 ++++++++++ src/csvToJSON.ts | 3 +- src/index.ts | 99 ++++++++++++------------------------------------ src/parts.d.ts | 2 +- src/utils.ts | 67 ++++++++++++++++++++------------ 5 files changed, 92 insertions(+), 100 deletions(-) create mode 100644 src/config.ts diff --git a/src/config.ts b/src/config.ts new file mode 100644 index 0000000..21f21d3 --- /dev/null +++ b/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', +]; diff --git a/src/csvToJSON.ts b/src/csvToJSON.ts index 0eb5294..558f43b 100644 --- a/src/csvToJSON.ts +++ b/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; } diff --git a/src/index.ts b/src/index.ts index 1672ca7..baddd87 100644 --- a/src/index.ts +++ b/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) { - 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); - }; -} */ diff --git a/src/parts.d.ts b/src/parts.d.ts index bc821ad..c930c7f 100644 --- a/src/parts.d.ts +++ b/src/parts.d.ts @@ -9,7 +9,7 @@ enum PartType { declare interface part { Part: string; - PartType: PartType; + PartType?: PartType; Value: string; } diff --git a/src/utils.ts b/src/utils.ts index 55c753f..e96df79 100644 --- a/src/utils.ts +++ b/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', -];