nick/bom2table
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: nick:tableclass
Branches Tags
nick:main
nick:deploy
nick:tableclass
nick:modernise
...
pull from: nick:main
Branches Tags
nick:deploy
nick:main
nick:tableclass
nick:modernise

11 Commits
tableclass ... main

Author SHA1 Message Date
Nick Playfair
e1dc531009 2.1.0 2025-06-12 22:24:02 +01:00
Nick Playfair
35c075e1b5 New ts-eslint config 2025-06-12 22:18:50 +01:00
Nick Playfair
9b836cc360 Remove old eslint files 2025-06-12 21:40:21 +01:00
Nick Playfair
8b65a52035 Remove some unused function plans 2025-06-12 19:08:46 +01:00
Nick Playfair
7c7ec2338b Favicon 2025-06-12 19:07:05 +01:00
Nick Playfair
c08017bd59 Prettify HTML code output 2025-06-12 16:44:44 +01:00
Nick Playfair
a3f3c2ed09 Get table HTML code 2025-06-12 16:33:03 +01:00
Nick Playfair
70e444d6a3 Filter parts using array methods instead of separate function 2025-06-12 15:35:46 +01:00
Nick Playfair
2584a58df2 2.0.0 2025-06-11 23:54:06 +01:00
Nick Playfair
fb632c1f72 remove unused import 2025-06-11 23:53:52 +01:00
Nick Playfair
744e48e812 FInish table class implementation 2025-06-11 23:42:59 +01:00
21 changed files with 2164 additions and 103 deletions
Show Stats Expand all files Collapse all files

2
.eslintignore
View File

@ -1,2 +0,0 @@
node_modules/
dist/

18
.eslintrc.json
View File

@ -1,18 +0,0 @@
{
"root": true,
"parser": "@typescript-eslint/parser",
"plugins": [
"@typescript-eslint"
],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended"
],
"parserOptions": {
"project": "./tsconfig.json"
},
"rules": {
"no-console": "off"
}
}

6
README.md
View File

@ -1,7 +1,13 @@
# bom2table # bom2table
Generate a nicely formatted table from an EAGLE BOM Generate a nicely formatted table from an EAGLE BOM
## Usage ## Usage
Run `npm install` and `npm build` Run `npm install` and `npm build`
Upload a BOM exported in csv format from EAGLE (untick 'List attributes') to get a table and the corresponding HTML. Upload a BOM exported in csv format from EAGLE (untick 'List attributes') to get a table and the corresponding HTML.
## Credits
Favicon by [Round Icons](https://unsplash.com/illustrations/a-computer-chip-with-a-red-yellow-and-green-color-scheme-otzESK2sBG4?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) via Unsplash

17
eslint.config.mjs Normal file
View File

@ -0,0 +1,17 @@
// @ts-check
import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
export default tseslint.config(
{
ignores: [
'dist/**',
'node_modules/**',
'webpack.dev.js',
'webpack.prod.js',
],
},
eslint.configs.recommended,
tseslint.configs.recommended,
);

BIN
html/android-chrome-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
html/android-chrome-512x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
html/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
html/favicon-16x16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 675 B

BIN
html/favicon-32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
html/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

4
html/index.html
View File

@ -4,6 +4,10 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<title>Read CSV File</title> <title>Read CSV File</title>
</head> </head>
<body> <body>

1
html/site.webmanifest Normal file
View File

@ -0,0 +1 @@
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

2070
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

11
package.json
View File

@ -1,24 +1,29 @@
{ {
"name": "bom2table", "name": "bom2table",
"version": "1.3.0", "version": "2.1.0",
"description": "", "description": "",
"main": "bom2table.js", "main": "bom2table.js",
"scripts": { "scripts": {
"serve": "webpack serve --config webpack.dev.js", "serve": "webpack serve --config webpack.dev.js",
"build": "webpack --config webpack.prod.js" "build": "webpack --config webpack.prod.js",
"lint": "eslint ."
}, },
"author": "nplayfair", "author": "nplayfair",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"csvtojson": "^2.0.10" "csvtojson": "^2.0.10",
"htmlfy": "^0.7.5"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.28.0",
"@types/csvtojson": "^1.1.5", "@types/csvtojson": "^1.1.5",
"clean-webpack-plugin": "^4.0.0", "clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^13.0.0", "copy-webpack-plugin": "^13.0.0",
"eslint": "^9.28.0",
"prettier": "^3.5.3", "prettier": "^3.5.3",
"ts-loader": "^9.5.2", "ts-loader": "^9.5.2",
"typescript": "^5.8.3", "typescript": "^5.8.3",
"typescript-eslint": "^8.34.0",
"webpack": "^5.99.9", "webpack": "^5.99.9",
"webpack-cli": "^6.0.1", "webpack-cli": "^6.0.1",
"webpack-dev-server": "^5.2.2" "webpack-dev-server": "^5.2.2"

12
src/config.ts
View File

@ -1,3 +1,4 @@
//Array of part names to omit from the BOM
export const rejectedParts = [ export const rejectedParts = [
'TP1', 'TP1',
'TP2', 'TP2',
@ -19,3 +20,14 @@ export const rejectedParts = [
'IN', 'IN',
'OUT', '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)/,
};

16
src/csvToJSON.ts
View File

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

30
src/index.ts
View File

@ -1,16 +1,15 @@
//Modules //Modules
import { getBOM } from './csvToJSON'; import { getBOM } from './csvToJSON';
import { import { PartsTable } from './table';
createTableBody, import { headers } from './config';
createTableHeader, import { printHTMLtable } from './utils';
htmlTable,
clearTable,
} from './utils';
//DOM elements //DOM elements
const input = document.getElementById('csvInput') as HTMLInputElement; const input = document.getElementById('csvInput') as HTMLInputElement;
const csvTextOutput = document.getElementById('csvText') as HTMLPreElement; const csvTextOutput = document.getElementById('csvText') as HTMLPreElement;
const jsonTextOutput = document.getElementById('partsJSON') as HTMLPreElement; const jsonTextOutput = document.getElementById('partsJSON') as HTMLPreElement;
const partsHTML = document.getElementById('partsHTML') as HTMLPreElement;
const htmlTable = document.getElementById('partsTable') as HTMLTableElement;
let csvBOM: string; let csvBOM: string;
@ -37,35 +36,28 @@ function processCSV(fileReader: Event) {
//JSON Object //JSON Object
printJSONbom(csvString); printJSONbom(csvString);
//Table //Table
clearTable();
createTable(); createTable();
//TODO Table HTML code
} }
//TODO //Print JSON
async function printJSONbom(csvString: string) { async function printJSONbom(csvString: string) {
const bomJSON = await getBOM(csvString); const bomJSON = await getBOM(csvString);
// console.log(bomJSON);
jsonTextOutput.innerText = JSON.stringify(bomJSON, null, 2); jsonTextOutput.innerText = JSON.stringify(bomJSON, null, 2);
return bomJSON;
} }
//Construct table
async function createTable() { async function createTable() {
const bomJSON = await getBOM(csvBOM); const bomJSON = await getBOM(csvBOM);
createTableHeader(); const partsTable = new PartsTable(htmlTable, headers, bomJSON);
createTableBody(htmlTable, bomJSON); const tableMarkup = await partsTable.createTable();
printHTMLtable(tableMarkup as HTMLTableElement, partsHTML);
} }
//Add event listener //Add event listener
input.addEventListener('change', handleUpload); input.addEventListener('change', handleUpload);
/* TODO /* TODO
// Format the HTML nicely and output to a pre code block
function displayMarkup() {
const tableCode = document.querySelector('table')!.outerHTML;
const markup = document.getElementById('markup') as HTMLElement;
markup.innerText = beautify(tableCode);
}
// Create a JSON object for Contentful // Create a JSON object for Contentful
function makeJSON(csvString: string) { function makeJSON(csvString: string) {
csv({ csv({

20
src/parts.d.ts vendored
View File

@ -1,4 +1,4 @@
enum PartType { enum ComponentType {
R, R,
C, C,
D, D,
@ -7,12 +7,26 @@ enum PartType {
COMPONENT, COMPONENT,
} }
declare interface part { enum Potentiometers {
VOL = 'VOL',
TONE = 'TONE',
GAIN = 'GAIN',
RES = 'RES',
LEVEL = 'LEVEL',
DIST = 'DIST',
PRESENCE = 'PRESENCE',
}
declare interface Part {
Part: string; Part: string;
PartType?: PartType;
Value: string; Value: string;
} }
declare interface Component extends Part {
Designator: string; //A letter like R, C, D etc
ComponentType: ComponentType;
}
declare interface structuredParts { declare interface structuredParts {
C: { C: {
[key: string]: string; [key: string]: string;

10
src/table.ts
View File

@ -2,7 +2,7 @@ export class PartsTable {
constructor( constructor(
public htmlTable: HTMLTableElement, public htmlTable: HTMLTableElement,
public headers: string[], public headers: string[],
public jsonBOM: part[], public jsonBOM: Part[],
) {} ) {}
//Reset table //Reset table
@ -38,4 +38,12 @@ export class PartsTable {
partValue.appendChild(partValText); partValue.appendChild(partValText);
}); });
} }
//Create full table
public createTable(): HTMLElement {
this.clearTable();
this.createTableHeader();
this.createTableBody();
return this.htmlTable;
}
} }

48
src/utils.ts
View File

@ -1,45 +1,11 @@
import { rejectedParts } from './config'; import { prettify } from 'htmlfy';
export function isJunk(element: part): boolean { //Print HTML code
// Returns true if element is in the rejected list export async function printHTMLtable(
return rejectedParts.includes(element.Part); table: HTMLTableElement,
} codeBlock: HTMLPreElement,
) {
//Table functions codeBlock.innerText = prettify(table.outerHTML);
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 // TODO

2
tsconfig.json
View File

@ -46,7 +46,7 @@
// "noPropertyAccessFromIndexSignature": true, /* Require undeclared properties from index signatures to use element accesses. */ // "noPropertyAccessFromIndexSignature": true, /* Require undeclared properties from index signatures to use element accesses. */
/* Module Resolution Options */ /* Module Resolution Options */
// "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
// "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
// "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */