Skip to content

Commit c841d3a

Browse files
Angular2GuyAngular2Guy
committed
feat: use main
1 parent 1b44ab0 commit c841d3a

File tree

4 files changed

+201
-1
lines changed

4 files changed

+201
-1
lines changed

‎frontend/app/login/login.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -250,6 +250,7 @@ export function Login() {
250250
</div>
251251
</Box>
252252
</TabPanel>
253+
<Button onClick={navToApp}>Test</Button>
253254
</DialogContent>
254255
</Dialog>);
255256
}

‎frontend/app/main/main.module.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
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+
.myText {
14+
color: #000000;
15+
}
16+
17+
.headerTabs {
18+
display: flex;
19+
justify-content: space-around;
20+
}
21+
22+
.headerTab {
23+
width: fit-content;
24+
line-height: 2rem;
25+
}
26+
27+
.linkText {
28+
color: rgb(25, 118, 210);
29+
--Link-underlineColor: rgba(25, 118, 210, 0.4);
30+
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
31+
font-weight: 400;
32+
text-decoration-color: var(--Link-underlineColor);
33+
}

‎frontend/app/main/main.tsx‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
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 * as React from 'react';
14+
import { Box, Tab, Tabs } from '@mui/material';
15+
import { useEffect, useState, type SyntheticEvent } from 'react';
16+
//import DataTable, { type TableDataRow } from './DataTable';
17+
//import GsMap from './GsMap';
18+
import GlobalState from '../GlobalState';
19+
//import styles from './main.module.scss';
20+
//import Chart from './Chart';
21+
import { useNavigate } from 'react-router';
22+
import { fetchGasStations, fetchPriceAvgs, fetchTimeSlots, fetchUserNotifications } from '../service/http-client';
23+
import { type TimeSlot } from '../model/time-slot-response';
24+
import { type GsValue } from '../model/gs-point';
25+
import { type MyDataJson } from '../model/my-data-json';
26+
import { useAtom } from "jotai";
27+
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+
43+
export default function Main() {
44+
const navigate = useNavigate();
45+
const [controller, setController] = useState(null as AbortController | null);
46+
const [timer, setTimer] = useState(undefined as undefined | NodeJS.Timeout);
47+
const [value, setValue] = useState(0);
48+
const [first, setFirst] = useState(true);
49+
const [rows, setRows] = useState([] as TableDataRow[]);
50+
const [avgTimeSlots, setAvgTimeSlots] = useState([] as TimeSlot[])
51+
const [gsValues, setGsValues] = useState([] as GsValue[]);
52+
const [globalJwtTokenState, setGlobalJwtTokenState] = useAtom(GlobalState.jwtTokenState);
53+
const [globalUserUuidState, setGlobalUserUuidState] = useAtom(GlobalState.userUuidState);
54+
const [globalUserDataState, setGlobalUserDataState] = useAtom(GlobalState.userDataState);
55+
const [refreshJwtTokenState, setRefreshJwtTokenState] = useAtom(GlobalState.jwtTokenState);
56+
57+
const handleTabChange = (event: SyntheticEvent, newValue: number) => {
58+
setValue(newValue);
59+
clearInterval(timer);
60+
getData(newValue);
61+
setTimer(setInterval(() => getData(newValue), 10000));
62+
}
63+
64+
const formatPostCode = (myPlz: number) => {
65+
return '00000'.substring(0, 5 - myPlz?.toString()?.length > 0 ? myPlz?.toString()?.length : 0) + myPlz.toString();
66+
}
67+
68+
const getData = (newValue: number) => {
69+
if (globalJwtTokenState?.length < 10 || globalUserUuidState?.length < 10) {
70+
navigate('/');
71+
return;
72+
}
73+
//console.log(newValue);
74+
if (!!controller) {
75+
controller.abort();
76+
}
77+
setController(new AbortController());
78+
const jwtToken = !!GlobalState.jwtToken ? GlobalState.jwtToken : globalJwtTokenState;
79+
if (newValue === 0 || newValue === 2) {
80+
fetchSearchLocation(jwtToken);
81+
} else {
82+
fetchLastMatches(jwtToken);
83+
};
84+
}
85+
86+
const fetchSearchLocation = async (jwtToken: string) => {
87+
const result = await fetchGasStations(jwtToken, controller, globalUserDataState);
88+
const myResult = result.filter(value => value?.GasPrices?.length > 0).map(value => {
89+
return value;
90+
}).map(value => ({
91+
location: value.Place + ' ' + value.Brand + ' ' + value.Street + ' ' + value.HouseNumber, e5: value.GasPrices[0].E5,
92+
e10: value.GasPrices[0].E10, diesel: value.GasPrices[0].Diesel, date: new Date(Date.parse(value.GasPrices[0].Date)), longitude: value.Longitude, latitude: value.Latitude
93+
} as TableDataRow));
94+
const myPostcode = formatPostCode(globalUserDataState.PostCode);
95+
const myJson = await fetchPriceAvgs(jwtToken, controller, myPostcode);
96+
const rowCounty = ({
97+
location: myJson.County, e5: Math.round(myJson.CountyAvgE5), e10: Math.round(myJson.CountyAvgE10), diesel: Math.round(myJson.CountyAvgDiesel), date: new Date(), longitude: 0, latitude: 0
98+
} as TableDataRow);
99+
const rowState = ({
100+
location: myJson.State, e5: Math.round(myJson.StateAvgE5), e10: Math.round(myJson.StateAvgE10), diesel: Math.round(myJson.StateAvgDiesel), date: new Date(), longitude: 0, latitude: 0
101+
} as TableDataRow);
102+
const resultRows = [rowCounty, rowState, ...myResult]
103+
setRows(resultRows);
104+
setGsValues(myResult);
105+
setController(null);
106+
}
107+
108+
const fetchLastMatches = async (jwtToken: string) => {
109+
const myResult = await fetchUserNotifications(jwtToken, controller, globalUserUuidState);
110+
//console.log(myJson);
111+
const result2 = myResult?.map(value => {
112+
//console.log(JSON.parse(value?.DataJson));
113+
return (JSON.parse(value?.DataJson) as MyDataJson[])?.map(value2 => {
114+
//console.log(value2);
115+
return {
116+
location: value2.Place + ' ' + value2.Brand + ' ' + value2.Street + ' ' + value2.HouseNumber,
117+
e5: value2.E5, e10: value2.E10, diesel: value2.Diesel, date: new Date(Date.parse(value2.Timestamp)), longitude: 0, latitude: 0
118+
} as TableDataRow;
119+
});
120+
})?.flat() || [];
121+
setRows(result2);
122+
//const result
123+
const myPostcode = formatPostCode(globalUserDataState.PostCode);
124+
const myJson1 = await fetchTimeSlots(jwtToken, controller, myPostcode);
125+
const timeSlots = [] as TimeSlot[];
126+
timeSlots.push(...myJson1.filter(myValue => myValue.AvgDiesel > 10).map(myValue => {
127+
const dieselTimeSlot = { x: '00.00', diesel: 0, e10: 0, e5: 0 } as TimeSlot;
128+
const myDate = new Date(myValue.StartDate);
129+
dieselTimeSlot.x = '' + myDate.getHours() + ':' + (myDate.getMinutes().toString().length < 2 ? myDate.getMinutes().toString().length + '0' : myDate.getMinutes());
130+
dieselTimeSlot.diesel = myValue.AvgDiesel / 1000;
131+
dieselTimeSlot.e10 = myValue.AvgE10 / 1000;
132+
dieselTimeSlot.e5 = myValue.AvgE5 / 1000;
133+
return dieselTimeSlot;
134+
}));
135+
setAvgTimeSlots(timeSlots);
136+
//console.log(myJson1);
137+
setController(null);
138+
}
139+
140+
// eslint-disable-next-line
141+
useEffect(() => {
142+
if (globalJwtTokenState?.length > 10 && globalUserUuidState?.length > 10 && first) {
143+
setTimeout(() => handleTabChange({} as unknown as SyntheticEvent, value), 3000);
144+
setFirst(false);
145+
}
146+
});
147+
148+
return (<Box sx={{ width: '100%' }}>
149+
<Tabs value={value} onChange={handleTabChange} centered={true}>
150+
<Tab label="Current Prices" />
151+
<Tab label="Last Price matches" />
152+
<Tab label="Current Prices Map" />
153+
</Tabs>
154+
{/*
155+
{value === 0 &&
156+
<DataTable diesel='Diesel' e10='E10' e5='E5' location='Location' showAverages={true} time='Time' rows={rows}></DataTable>}
157+
{value === 1 &&
158+
<Chart timeSlots={avgTimeSlots}></Chart>}
159+
{value === 1 &&
160+
<DataTable diesel='Diesel' e10='E10' e5='E5' location='Location' showAverages={true} time='Time' rows={rows}></DataTable>}
161+
{value === 2 &&
162+
<GsMap gsValues={gsValues} center={globalUserDataState}></GsMap>}
163+
*/}
164+
</Box>);
165+
}

‎frontend/app/routes/app.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
See the License for the specific language governing permissions and
1111
limitations under the License.
1212
*/
13+
import Main from "~/main/main";
1314
import type { Route } from "./+types/app";
1415
import { Welcome } from "~/welcome/welcome";
1516

@@ -21,5 +22,5 @@ export function meta({}: Route.MetaArgs) {
2122
}
2223

2324
export default function Home() {
24-
return <Welcome />;
25+
return <Main />;
2526
}

0 commit comments

Comments
 (0)