From 03d11bc278cfd1187bd474d33aedbf636c39ebfe Mon Sep 17 00:00:00 2001 From: Peter Hoppe Date: Tue, 6 Dec 2022 11:40:35 +0100 Subject: [PATCH] FlightsTable component props <=> parameter --- src/App.tsx | 2 + src/classes/CFlight.ts | 2 + src/components/FlightsTable.tsx | 6 +-- src/components/SortableTable.tsx | 72 +++++++++----------------------- src/tools/tools.ts | 4 ++ tsconfig.json | 2 +- 6 files changed, 31 insertions(+), 57 deletions(-) create mode 100644 src/tools/tools.ts diff --git a/src/App.tsx b/src/App.tsx index 51701ea..580038e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,6 +6,7 @@ import {groupByMap} from './global/tools'; import flights from './data/HoPe_all_flights.json'; import {CFlight} from './classes/CFlight'; import {CSeason} from './classes/CSeason'; +import {CheckArray} from './tools/tools'; const data_raw = flights.data; const data: CFlight[] = []; @@ -15,6 +16,7 @@ for (let fl of data_raw) { data.push(new CFlight(fl)); } +CheckArray(data); const seasondata_raw = groupByMap(data, i => i.FKSeason); diff --git a/src/classes/CFlight.ts b/src/classes/CFlight.ts index 99f849c..eb83c85 100644 --- a/src/classes/CFlight.ts +++ b/src/classes/CFlight.ts @@ -11,6 +11,7 @@ export class CFlight implements IKey public readonly BestTaskType: string; public readonly BestTaskPoints: string; public readonly FlightDuration: CHour; + public readonly FlightDurationDispl: string; // need for sorting public readonly FKSeason: string; constructor(inData: any) @@ -24,6 +25,7 @@ export class CFlight implements IKey this.BestTaskPoints = inData.BestTaskPoints; this.FKSeason = inData.FKSeason; this.FlightDuration = new CHour(+inData.FlightDuration); + this.FlightDurationDispl = this.FlightDuration.Print(); } public get key() diff --git a/src/components/FlightsTable.tsx b/src/components/FlightsTable.tsx index 4ffc940..1932f8d 100644 --- a/src/components/FlightsTable.tsx +++ b/src/components/FlightsTable.tsx @@ -21,8 +21,7 @@ function Meter2Km(key: string, row: any, data: string | null) return val; } -//export default function FlightsTable(flightdata: IFlight[]) -export default function FlightsTable(flightdata: any) +export default function FlightsTable({flightdata}: {flightdata: CFlight[]}) { const headers: THeader[] = [ { key: "IDFlight", label: "ID", visible: false }, @@ -31,7 +30,8 @@ export default function FlightsTable(flightdata: any) { key: "Glider", label: "Gleitschirm" }, { key: "BestTaskDistance", label: "Strecke", callback: Meter2Km }, { key: "BestTaskType", label: "Streckentyp" }, - { key: "BestTaskPoints", label: "Punkte" } + { key: "BestTaskPoints", label: "Punkte" }, + { key: "FlightDurationDispl", label: "Dauer" } ]; return( diff --git a/src/components/SortableTable.tsx b/src/components/SortableTable.tsx index 3d5e7c8..d3bc684 100644 --- a/src/components/SortableTable.tsx +++ b/src/components/SortableTable.tsx @@ -35,30 +35,33 @@ function SortButton({ } export default function SortableTable({ headers, dataTbl }: - { headers: THeader[], dataTbl: any }) + { headers: THeader[], dataTbl: T[] }) { const [sortKey, setSortKey] = useState(headers[0].key); const [sortOrder, setSortOrder] = useState("ascn"); - var sortedData: any = sortData( + var sortedData: T[] = sortData( { tableData: dataTbl, sortKey: sortKey, reverse: sortOrder === "desc" }); - function changeSort(key: string) { + function changeSort(key: string) + { setSortOrder(sortOrder === "ascn" ? "desc" : "ascn"); setSortKey(key); } - function sortData({ + function sortData( + { tableData, sortKey, reverse, - }: { - tableData: any; + }: + { + tableData: T[]; sortKey: string; reverse: boolean; }) @@ -66,13 +69,12 @@ export default function SortableTable({ headers, dataTbl }: if (!sortKey) return tableData; const order = reverse ? 'asc': 'desc'; - // var helpArr: any = tableData; - // const reval: any = orderBy(helpArr, [sortKey], [order]); - const reval = tableData; + const reval: T[] = orderBy(tableData, [sortKey], [order]); return reval; } - function TableTd({ item, key, row_item, data } : {item: THeader, key: number, row_item: any, data: string | null}) + function TableTd({ item, key, row_item, data } + : {item: THeader, key: number, row_item: T, data: string | null}) { var val_complete: JSX.Element = <>; if(item.visible === undefined || item.visible === true) @@ -98,62 +100,27 @@ export default function SortableTable({ headers, dataTbl }: { return( - { + { headers.map((h_item, key) => { var c: any = row_item; // workaround TS2322 TS7053 return ( ); - })} + }) + } ); } - function dummy() - { - var val_complete: JSX.Element = <>; - var a = 2+2; - return val_complete; - } - function tableBody(headers: THeader[], tableDataSorted : any) { var body: JSX.Element[] = []; - // body.push( - // - // 1_ - // 1_ - // 1_ - // 1_ - // 1_ - // 1_ - // ); - // body.push( - // - // 2_ - // 2_ - // 2_ - // 2_ - // 2_ - // 2_ - // ); - // body.push( - // - // 3_ - // 3_ - // 3_ - // 3_ - // 3_ - // 3_ - // ); - for(var flight of tableDataSorted) { var index: number = flight.key; body.push( ); - } return( @@ -167,9 +134,8 @@ export default function SortableTable({ headers, dataTbl }: { return( headers.map( - (row, key) => + (row) => { - var a = key; if(row.visible === undefined || row.visible === true) { return ( @@ -195,9 +161,9 @@ export default function SortableTable({ headers, dataTbl }: } return ( - - - +
+ + {tableHeader(headers)} diff --git a/src/tools/tools.ts b/src/tools/tools.ts new file mode 100644 index 0000000..fc772f6 --- /dev/null +++ b/src/tools/tools.ts @@ -0,0 +1,4 @@ +export function CheckArray(collection: any) +{ + console.log("data is array: " + Array.isArray(collection)); +} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 41473fd..5dad4b0 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -18,7 +18,7 @@ "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, - "jsx": "react-jsx", + "jsx": "preserve", "downlevelIteration": true }, "include": [