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

Compare commits

base: nick:main
Branches Tags
nick:main
nick:deploy
nick:tableclass
nick:modernise
..
compare: nick:modernise
Branches Tags
nick:main
nick:deploy
nick:tableclass
nick:modernise

No commits in common. "main" and "modernise" have entirely different histories.
main ... modernise

25 changed files with 1487 additions and 2962 deletions
Show Stats Expand all files Collapse all files

2
.eslintignore Normal file
View File

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

18
.eslintrc.json Normal file
View File

@ -0,0 +1,18 @@
{
"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,13 +1,7 @@
# 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
View File

@ -1,17 +0,0 @@
// @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
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.7 KiB

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

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

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

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.2 KiB

BIN
html/favicon-16x16.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 675 B

BIN
html/favicon-32x32.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

BIN
html/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

1
html/site.webmanifest
View File

@ -1 +0,0 @@
{"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"}

6
html/index.html → index.html
View File

@ -4,10 +4,6 @@
<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>
@ -34,6 +30,6 @@
<pre id="partsHTML"></pre> <pre id="partsHTML"></pre>
</section> </section>
</main> </main>
<script src="bundle.js"></script> <script src="dist/bundle.js"></script>
</body> </body>
</html> </html>

4021
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

15
package.json
View File

@ -1,28 +1,25 @@
{ {
"name": "bom2table", "name": "bom2table",
"version": "2.1.0", "version": "1.3.0",
"description": "", "description": "",
"main": "bom2table.js", "main": "bom2table.js",
"scripts": { "scripts": {
"dev": "http-server",
"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.8.1" "http-server": "^14.1.1",
"pretty": "^2.0.0"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.29.0", "@types/csvtojson": "^1.1.5",
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^13.0.0",
"eslint": "^9.29.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.1",
"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"

33
src/config.ts
View File

@ -1,33 +0,0 @@
//Array of part names to omit from the BOM
export const rejectedParts = [
'TP1',
'TP2',
'TP3',
'G',
'U$1',
'S1',
'J1',
'J2',
'JP1',
'JP2',
'V',
'I',
'O',
'T1',
'T2',
'T3',
'INPUT',
'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)/,
};

17
src/csvToJSON.ts
View File

@ -1,9 +1,16 @@
import { csvConfig, rejectedParts } from './config'; import { CSVParseParam } from '../node_modules/csvtojson/v2/Parameters';
// const csv = require('csvtojson'); import { isJunk } from './utils';
import csv from 'csvtojson'; const csv = require('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 bom = await csv(csvConfig).fromString(csvBOM);
const bom = rawBOM.filter((part: Part) => !rejectedParts.includes(part.Part));
return bom; return bom;
} }

107
src/index.ts
View File

@ -1,17 +1,10 @@
//Modules //Modules
import { getBOM } from './csvToJSON'; import { getBOM } from './csvToJSON';
import { PartsTable } from './table';
import { headers } from './config';
import { printHTMLtable } 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; let rawCSV: string;
const partsHTML = document.getElementById('partsHTML') as HTMLPreElement;
const htmlTable = document.getElementById('partsTable') as HTMLTableElement;
let csvBOM: string;
//Functions //Functions
function handleUpload(event: Event) { function handleUpload(event: Event) {
@ -30,34 +23,80 @@ function processCSV(fileReader: Event) {
const content = (fileReader.target as FileReader).result; const content = (fileReader.target as FileReader).result;
if (content === null) throw new Error('CSV Cannot be null.'); if (content === null) throw new Error('CSV Cannot be null.');
const csvString = content.toString(); const csvString = content.toString();
csvBOM = csvString;
//Display the CSV contents //Display the CSV contents
csvTextOutput.innerText = csvString; csvTextOutput.innerText = csvString;
//JSON Object const bomJSON = createJSONbom(csvString);
printJSONbom(csvString);
//Table
createTable();
//TODO Table HTML code
} }
//Print JSON //TODO
async function printJSONbom(csvString: string) { async function createJSONbom(csvString: string) {
const bomJSON = await getBOM(csvString); const bomJSON = await getBOM(csvString);
jsonTextOutput.innerText = JSON.stringify(bomJSON, null, 2); console.log(bomJSON);
}
//Construct table
async function createTable() {
const bomJSON = await getBOM(csvBOM);
const partsTable = new PartsTable(htmlTable, headers, 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);
// csvToJSON();
/* 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);
}
// 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 // Create a JSON object for Contentful
function makeJSON(csvString: string) { function makeJSON(csvString: string) {
csv({ csv({
@ -78,4 +117,22 @@ 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);
};
}
*/ */

36
src/old.html Normal file
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
<title>BOM2Table</title>
</head>
<body>
<header>
<h1>BOM to Table</h1>
</header>
<main>
<section class="upload">
<h2>Upload BOM csv file</h2>
<input id="csvFile" type="file" accept=".csv" />
<hr />
</section>
<section>
<h2>Table</h2>
<table></table>
</section>
<section>
<h2>Table HTML</h2>
<!-- <textarea id="markup" cols="30" rows="10"></textarea> -->
<pre contenteditable=""><code id="markup" class="language-html"></code></pre>
</section>
<section>
<h2>JSON Object</h2>
<pre contenteditable=""><code id="jsonObject"></code></pre>
</section>
</main>
<script src="bundle.js" defer></script>
</body>
</html>

20
src/parts.d.ts vendored
View File

@ -1,4 +1,4 @@
enum ComponentType { enum PartType {
R, R,
C, C,
D, D,
@ -7,26 +7,12 @@ enum ComponentType {
COMPONENT, COMPONENT,
} }
enum Potentiometers { declare interface part {
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;

49
src/table.ts
View File

@ -1,49 +0,0 @@
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(): HTMLElement {
this.clearTable();
this.createTableHeader();
this.createTableBody();
return this.htmlTable;
}
}

39
src/utils.ts
View File

@ -1,16 +1,8 @@
import { prettify } from 'htmlfy'; export function isJunk(element: part): boolean {
// Returns true if element is in the rejected list
//Print HTML code return rejectedParts.includes(element.Part);
export async function printHTMLtable(
table: HTMLTableElement,
codeBlock: HTMLPreElement,
) {
codeBlock.innerText = prettify(table.outerHTML);
} }
// TODO
/*
export function getPartType(component: part) { export function getPartType(component: part) {
if (component.Part.match(/^C\d/) != null) { if (component.Part.match(/^C\d/) != null) {
return 'C'; return 'C';
@ -24,7 +16,8 @@ export function getPartType(component: part) {
return 'COMPONENT'; return 'COMPONENT';
} }
// TODO
/*
function getJSONParts(allParts: part[]) { function getJSONParts(allParts: part[]) {
const jsonParts: structuredParts = { const jsonParts: structuredParts = {
C: {}, C: {},
@ -53,3 +46,25 @@ function getJSONParts(allParts: part[]) {
return jsonParts; return jsonParts;
} }
*/ */
const rejectedParts = [
'TP1',
'TP2',
'TP3',
'G',
'U$1',
'S1',
'J1',
'J2',
'JP1',
'JP2',
'V',
'I',
'O',
'T1',
'T2',
'T3',
'INPUT',
'IN',
'OUT',
];

0
html/style.css → style.css
View File

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. */

31
webpack.dev.js
View File

@ -1,39 +1,28 @@
const path = require('path'); const path = require("path");
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = { module.exports = {
mode: 'development', mode: "development",
entry: './src/index.ts', entry: "./src/index.ts",
devtool: 'inline-source-map', devtool: "inline-source-map",
devServer: { devServer: {
static: { static: {
directory: path.join(__dirname, './'), directory: path.join(__dirname, "./"),
}, },
}, },
module: { module: {
rules: [ rules: [
{ {
test: /\.tsx?$/, test: /\.tsx?$/,
use: 'ts-loader', use: "ts-loader",
exclude: /node_modules/, exclude: /node_modules/,
}, },
], ],
}, },
resolve: { resolve: {
extensions: ['.tsx', '.ts', '.js'], extensions: [".tsx", ".ts", ".js"],
}, },
output: { output: {
filename: 'bundle.js', filename: "bundle.js",
path: path.resolve(__dirname, 'dist'), path: path.resolve(__dirname, "dist"),
publicPath: '/dist', publicPath: "/dist",
}, },
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: 'html/**/*',
to: '[name][ext]',
},
],
}),
],
}; };

33
webpack.prod.js
View File

@ -1,42 +1,31 @@
const path = require('path'); const path = require("path");
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = { module.exports = {
mode: 'production', mode: "production",
entry: './src/index.ts', entry: "./src/index.ts",
// devtool: "inline-source-map", // devtool: "inline-source-map",
devServer: { devServer: {
static: { static: {
directory: path.join(__dirname, './'), directory: path.join(__dirname, "./"),
}, },
}, },
module: { module: {
rules: [ rules: [
{ {
test: /\.tsx?$/, test: /\.tsx?$/,
use: 'ts-loader', use: "ts-loader",
exclude: /node_modules/, exclude: /node_modules/,
}, },
], ],
}, },
resolve: { resolve: {
extensions: ['.tsx', '.ts', '.js'], extensions: [".tsx", ".ts", ".js"],
}, },
output: { output: {
filename: 'bundle.js', filename: "bundle.js",
path: path.resolve(__dirname, 'dist'), path: path.resolve(__dirname, "dist"),
publicPath: '/dist', publicPath: "/dist",
}, },
plugins: [ plugins: [new CleanWebpackPlugin()],
new CleanWebpackPlugin(),
new CopyWebpackPlugin({
patterns: [
{
from: 'html/**/*',
to: '[name][ext]',
},
],
}),
],
}; };