123 lines
3.3 KiB
TypeScript
123 lines
3.3 KiB
TypeScript
// Modules
|
|
import { csvToJSON } from './csvToJSON';
|
|
|
|
const input = document.getElementById('csvInput') as HTMLInputElement;
|
|
const csvText = document.getElementById('csvText') as HTMLPreElement;
|
|
|
|
//Functions
|
|
function handleUpload(event: Event) {
|
|
const file = (event.target as HTMLInputElement).files![0];
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
reader.onload = function (e) {
|
|
const content = (e.target as FileReader).result;
|
|
if (content === null) throw new Error('CSV Cannot be null.');
|
|
csvText.innerText = content.toString();
|
|
};
|
|
reader.readAsText(file);
|
|
}
|
|
}
|
|
|
|
//Add event listener
|
|
input.addEventListener('change', handleUpload);
|
|
|
|
// csvToJSON();
|
|
|
|
/* 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
|
|
function makeJSON(csvString: string) {
|
|
csv({
|
|
delimiter: ';',
|
|
includeColumns: /(Part|Value)/,
|
|
ignoreEmpty: true,
|
|
})
|
|
.fromString(csvString)
|
|
.then((res) => {
|
|
const object = res.filter(isJunk);
|
|
|
|
const parts = getJSONParts(object);
|
|
|
|
document.getElementById('jsonObject')!.innerText = JSON.stringify(
|
|
parts,
|
|
null,
|
|
2,
|
|
);
|
|
});
|
|
}
|
|
|
|
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);
|
|
};
|
|
}
|
|
*/
|