Skip to content

Commit aaef773

Browse files
Angular2GuyAngular2Guy
committed
feat: add component
1 parent c841d3a commit aaef773

File tree

3 files changed

+126
-19
lines changed

3 files changed

+126
-19
lines changed

‎frontend/app/data-table/data-table.tsx‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
/*
2+
- Copyright 2022 Sven Loesekann
3+
Licensed under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License.
5+
You may obtain a copy of the License at
6+
http://www.apache.org/licenses/LICENSE-2.0
7+
Unless required by applicable law or agreed to in writing, software
8+
distributed under the License is distributed on an "AS IS" BASIS,
9+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10+
See the License for the specific language governing permissions and
11+
limitations under the License.
12+
*/
13+
import {TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody} from '@mui/material';
14+
import { nanoid } from 'nanoid';
15+
import { useMemo } from 'react';
16+
import styles from "./datatable.module.css";
17+
18+
export interface TableDataRow {
19+
location: string;
20+
e5: number;
21+
e10: number;
22+
diesel: number;
23+
date: Date;
24+
longitude: number;
25+
latitude: number;
26+
e5Class: string;
27+
e10Class: string;
28+
dieselClass: string;
29+
}
30+
31+
export interface DataTableProps {
32+
location: string;
33+
time: string;
34+
showAverages: boolean;
35+
e5: string;
36+
e10: string;
37+
diesel: string;
38+
rows: TableDataRow[];
39+
}
40+
41+
42+
export default function DataTable(props: DataTableProps) {
43+
44+
useMemo(() => {
45+
if(props?.rows?.length < 4) {
46+
return;
47+
}
48+
const e5Arr = [...props.rows].filter(row => row.e5 > 10);
49+
e5Arr.sort((a,b) => a.e5 - b.e5);
50+
const e10Arr = [...props.rows].filter(row => row.e10 > 10);
51+
e10Arr.sort((a,b) => a.e10 - b.e10);
52+
const dieselArr = [...props.rows].filter(row => row.diesel > 10);
53+
dieselArr.sort((a,b) => a.diesel - b.diesel);
54+
if(e5Arr?.length >= 3) {
55+
e5Arr[0].e5Class = 'best-price';
56+
e5Arr[1].e5Class = 'good-price';
57+
e5Arr[2].e5Class = 'good-price';
58+
}
59+
if(e10Arr?.length >= 3) {
60+
e10Arr[0].e10Class = 'best-price';
61+
e10Arr[1].e10Class = 'good-price';
62+
e10Arr[2].e10Class = 'good-price';
63+
}
64+
if(dieselArr?.length >= 3) {
65+
dieselArr[0].dieselClass = 'best-price';
66+
dieselArr[1].dieselClass = 'good-price';
67+
dieselArr[2].dieselClass = 'good-price';
68+
}
69+
},[props.rows]);
70+
71+
return (
72+
<TableContainer component={Paper}>
73+
<Table sx={{ minWidth: '100%' }}>
74+
<TableHead>
75+
<TableRow>
76+
<TableCell>{props.location}</TableCell>
77+
<TableCell>{props.time}</TableCell>
78+
<TableCell align="right">{props.e5}</TableCell>
79+
<TableCell align="right">{props.e10}</TableCell>
80+
<TableCell align="right">{props.diesel}</TableCell>
81+
</TableRow>
82+
</TableHead>
83+
<TableBody>
84+
{props.rows.map((row) => (
85+
<TableRow
86+
key={nanoid()}
87+
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
88+
>
89+
<TableCell component="th" scope="row">
90+
{row.location}
91+
</TableCell>
92+
<TableCell>{row.date.toISOString().split('T')[0]+' '+row.date.toTimeString().split(' ')[0]}</TableCell>
93+
<TableCell align="right" className={styles[row.e5Class]}>{row.e5}</TableCell>
94+
<TableCell align="right" className={styles[row.e10Class]}>{row.e10}</TableCell>
95+
<TableCell align="right" className={styles[row.dieselClass]}>{row.diesel}</TableCell>
96+
</TableRow>
97+
))}
98+
</TableBody>
99+
</Table>
100+
</TableContainer>
101+
);
102+
}

‎frontend/app/data-table/datatable.module.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/*
2+
- Copyright 2022 Sven Loesekann
3+
Licensed under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License.
5+
You may obtain a copy of the License at
6+
http://www.apache.org/licenses/LICENSE-2.0
7+
Unless required by applicable law or agreed to in writing, software
8+
distributed under the License is distributed on an "AS IS" BASIS,
9+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10+
See the License for the specific language governing permissions and
11+
limitations under the License.
12+
*/
13+
14+
.best-price {
15+
background-color: #afffb1;
16+
}
17+
18+
.good-price {
19+
background-color: #fdff79;
20+
}

‎frontend/app/main/main.tsx‎

Lines changed: 4 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@
1313
import * as React from 'react';
1414
import { Box, Tab, Tabs } from '@mui/material';
1515
import { useEffect, useState, type SyntheticEvent } from 'react';
16-
//import DataTable, { type TableDataRow } from './DataTable';
16+
import DataTable, { type TableDataRow } from '../data-table/data-table';
1717
//import GsMap from './GsMap';
1818
import GlobalState from '../GlobalState';
19-
//import styles from './main.module.scss';
19+
//import styles from './main.module.css';
2020
//import Chart from './Chart';
2121
import { useNavigate } from 'react-router';
2222
import { fetchGasStations, fetchPriceAvgs, fetchTimeSlots, fetchUserNotifications } from '../service/http-client';
@@ -25,21 +25,6 @@ import { type GsValue } from '../model/gs-point';
2525
import { type MyDataJson } from '../model/my-data-json';
2626
import { useAtom } from "jotai";
2727

28-
29-
//TODO use interface of DataTable component after migration
30-
interface TableDataRow {
31-
location: string;
32-
e5: number;
33-
e10: number;
34-
diesel: number;
35-
date: Date;
36-
longitude: number;
37-
latitude: number;
38-
e5Class: string;
39-
e10Class: string;
40-
dieselClass: string;
41-
}
42-
4328
export default function Main() {
4429
const navigate = useNavigate();
4530
const [controller, setController] = useState(null as AbortController | null);
@@ -150,10 +135,10 @@ export default function Main() {
150135
<Tab label="Current Prices" />
151136
<Tab label="Last Price matches" />
152137
<Tab label="Current Prices Map" />
153-
</Tabs>
154-
{/*
138+
</Tabs>
155139
{value === 0 &&
156140
<DataTable diesel='Diesel' e10='E10' e5='E5' location='Location' showAverages={true} time='Time' rows={rows}></DataTable>}
141+
{/*
157142
{value === 1 &&
158143
<Chart timeSlots={avgTimeSlots}></Chart>}
159144
{value === 1 &&

0 commit comments

Comments
 (0)