diff --git a/task_2_ts/ts/main.ts b/task_2_ts/ts/main.ts index b9a3369..26ce995 100644 --- a/task_2_ts/ts/main.ts +++ b/task_2_ts/ts/main.ts @@ -15,6 +15,7 @@ import { import { readCSV } from './csv'; +import persistance from './persistance'; // ┌ ┐ @@ -76,15 +77,11 @@ columnDatatype.addConditionalElementBind( document.getElementById( 'title-column stringOrNumberCheckPredicate ); + // ┌ ┐ // │ 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]!; @@ -109,6 +106,7 @@ const loadFile = ( event: Event ) => { document.getElementById( 'table-header--' + i )!.addEventListener( 'click', () => { // TODO: Decide on sorting cycling // TODO: Add indicator as well + // TODO: Want to hide infos and do an else for file infos and selected columns info? if ( selectedColumn === column ) { ascendingSort.set( !ascendingSort.get() ); } else { @@ -145,6 +143,21 @@ const loadFile = ( event: Event ) => { } ); dataList.set( data ); + const config = persistance.get( file.name, file.size + 'B' ); + + if ( config ) { + const dtype = typeof dataList.get()[0]![ config.sorted ]; + + columnName.set( config.sorted ); + selectedColumn = config.active; + ascendingSort.set( config.ascending ); + columnDatatype.set( dtype ); + + if ( dtype === 'string' ) + filterInput.disabled = false; + else + filterInput.disabled = true; + } } ) .catch( e => { console.warn( e ); @@ -153,13 +166,21 @@ const loadFile = ( event: Event ) => { } else { alert( 'No file selected' ); } -}; +} ); +// TODO: Task says need to fire custom event on filter card... sure, why not. +// It doesn't say that we need to use it though! + +// TODO: Maybe add an overlay that is shown during load? + // ┌ ┐ // │ Sorting │ // └ ┘ const doSort = () => { filter.set( '' ); + persistance.store( + filename.get(), filesize.get(), selectedColumn, selectedColumn, ascendingSort.get() + ); if ( columnDatatype.get() === 'string' ) { columnEntries.set( computeDifferent( dataList.get(), selectedColumn ) ); @@ -196,6 +217,7 @@ columnName.onChange( doSort ); ascendingSort.onChange( doSort ); + // ┌ ┐ // │ Filtering │ // └ ┘ diff --git a/task_2_ts/ts/persistance.ts b/task_2_ts/ts/persistance.ts index 168ba95..fa8efb2 100644 --- a/task_2_ts/ts/persistance.ts +++ b/task_2_ts/ts/persistance.ts @@ -5,20 +5,42 @@ import { // Using localStorage for persistance const persistanceStore: PersistanceConfig = JSON.parse( localStorage.getItem( 'persistance' ) ?? '{}' ); -export const store = ( +/** + * Store state for filename. + * @param filename - The filename to store for + * @param size - The filesize (in case file is changed) + * @param sorted - The sorted column + * @param active - The active column + * @param ascending - True if sorting ascending + */ +const store = ( filename: string, - size: number, + size: string, sorted: string, - active: string + active: string, + ascending: boolean ) => { persistanceStore[ `${ filename }-${ size }` ] = { 'active': active, - 'sorted': sorted + 'sorted': sorted, + 'ascending': ascending }; localStorage.setItem( 'persistance', JSON.stringify( persistanceStore ) ); }; -export const get = ( filename: string, size: number ) => { +/** + * Get the state for filename + * @param filename - The file to retrieve from + * @param size - The size of the file + * @returns The state, if found + */ +const get = ( filename: string, size: string ) => { return persistanceStore[ `${ filename }-${ size }` ]; }; + + +export default { + store, + get +}; diff --git a/task_2_ts/ts/types.d.ts b/task_2_ts/ts/types.d.ts index 6cb0c42..cfb0c38 100644 --- a/task_2_ts/ts/types.d.ts +++ b/task_2_ts/ts/types.d.ts @@ -6,8 +6,9 @@ export type CSV_Data = CSVRecord[]; export interface PersistanceConfigEntry { 'sorted': string; 'active': string; + 'ascending': boolean; } export interface PersistanceConfig { - [filename: `${ string }-${ number }`]: PersistanceConfigEntry + [filename: `${ string }-${ string }`]: PersistanceConfigEntry }