eth-janishutz/fundamentals-of-webengineering
1
0
Fork 0
mirror of https://github.com/janishutz/fundamentals-of-webengineering.git synced 2025-11-25 13:54:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Start framework refactor

Browse Source
This commit is contained in:
Janis Hutz
2025-10-20 12:45:06 +02:00
parent d35a47e4b0
commit b156ddedb9
8 changed files with 335 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
task_2_ts/ts/main.ts
View File

@@ -5,14 +5,17 @@ import {
listRef, ref
} from './rendering/framework';
import {
CSV_Data
CSVRecord
} from './types';
import {
RenderTemplate
} from './rendering/rendering';
import {
readCSV
} from './csv';
const dataList = listRef<CSV_Data>(
document.getElementById( 'data-table' )!,
const dataList = listRef<CSVRecord>(
document.getElementById( 'table-body' )!,
[],
'table-body',
{
@@ -22,7 +25,7 @@ const dataList = listRef<CSV_Data>(
}
);
const headerList = listRef<string>(
document.getElementById( 'data-header' )!,
document.getElementById( 'table-header' )!,
[],
'table-header',
{
@@ -31,18 +34,64 @@ const headerList = listRef<string>(
'children': []
}
);
const tableRowElement: RenderTemplate = {
'type': 'td',
'cssClasses': [],
'children': [],
};
const filter = ref<string>( [ document.getElementById( 'filter' )! ], '' );
const filename = ref<string>( [ document.getElementById( 'data-filename' )! ], '' );
const filetype = ref<string>( [ document.getElementById( 'data-filetype' )! ], '' );
const filesize = ref<string>( [ document.getElementById( 'data-filesize' )! ], '' );
const rowCount = ref<string>( [ document.getElementById( 'data-rowcount' )! ], '' );
const filter = ref<string>( [ document.getElementById( 'filter' )! ], '' );
const columnName = ref<string>( [ document.getElementById( 'column-selected' )! ], '' );
const columnDatatype = ref<string>( [ document.getElementById( 'column-datatype' )! ], '' );
const columnEntries = ref<string>( [ document.getElementById( 'column-entries' )! ], '' );
const columnMax = ref<string>( [ document.getElementById( 'column-max' )! ], '' );
const columnMin = ref<string>( [ document.getElementById( 'column-min' )! ], '' );
const fileInput = document.getElementById( 'file-input' )! as HTMLInputElement;
// Bind to file input event
fileInput.addEventListener( 'change', event => {
loadFile( event );
} );
const loadFile = ( event: Event ) => {
if ( fileInput.files && fileInput.files.length > 0 ) {
const file = fileInput.files[0]!;
filename.set( file.name );
filetype.set( file.type );
filesize.set( String( file.size ) + 'B' ); // TODO: KB / MB conversion stuff
readCSV( event )
.then( data => {
// Row count
rowCount.set( String( data.length ) );
// Header will be the keyset of any row
const header = Object.keys( data[0]! );
headerList.set( header );
// ── Generate list. Need to first generate the correct template ───
// Reset, to not trigger expensive rerender
dataList.set( [] );
dataList.setTemplate( {
'type': 'tr',
'cssClasses': [],
'children': header.map( val => {
return {
'type': 'td',
'cssClasses': [],
'children': [],
'attribute': val
};
} )
} );
dataList.set( data );
} )
.catch( e => {
console.warn( e );
alert( 'Failed to read CSV' );
} );
} else {
alert( 'No file selected' );
}
};