- |
+ |
ETA |
{statusData.eta}
diff --git a/src/client/css/start.css b/src/client/css/start.css
index 2cf2bba..f83d4f6 100644
--- a/src/client/css/start.css
+++ b/src/client/css/start.css
@@ -129,10 +129,10 @@
}
.MuiLinearProgress-root {
- margin: -0.5em 0 1em -0.8em;
+ margin: -0.5em 1em 1em -0.8em;
@media (min-width: 30em) {
- margin: -0.7em -1em 1em -2em;
+ margin: -0.7em 1em 1em -2em;
}
}
diff --git a/src/client/pages/Login.tsx b/src/client/pages/Login.tsx
index 35adcc8..38b709c 100644
--- a/src/client/pages/Login.tsx
+++ b/src/client/pages/Login.tsx
@@ -1,6 +1,13 @@
import React, { useContext, useState } from 'react';
-import { TextField, Button, InputAdornment, CircularProgress } from '@mui/material';
-import { AccountCircle, Lock, HighlightOff, Login as LoginIcon, Check } from '@mui/icons-material';
+import TextField from '@mui/material/TextField';
+import Button from '@mui/material/Button';
+import InputAdornment from '@mui/material/InputAdornment';
+import CircularProgress from '@mui/material/CircularProgress';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import LockIcon from '@mui/icons-material/Lock';
+import HighlightOffIcon from '@mui/icons-material/HighlightOff';
+import LoginIcon from '@mui/icons-material/Login';
+import CheckIcon from '@mui/icons-material/Check';
import "../css/login.css";
import ModeSwitcher from '../components/ModeSwitcher';
import axios from 'axios';
@@ -90,7 +97,7 @@ function Login() {
const token = response.data.token;
localStorage.setItem("jwt", token);
contextObj.setLogin(true);
- setMessageObj({ isError: false, status: , message: "Success!" })
+ setMessageObj({ isError: false, status: , message: "Success!" })
// update linearBar for delay until redirect
const date = new Date();
@@ -138,12 +145,12 @@ function Login() {
name: "user",
startAdornment: (
-
+
),
endAdornment: formInfo.user.isError ? (
-
+
) : null
}}
@@ -167,12 +174,12 @@ function Login() {
name: "password",
startAdornment: (
-
+
),
endAdornment: formInfo.password.isError ? (
-
+
) : null
}}
diff --git a/src/client/pages/Start.tsx b/src/client/pages/Start.tsx
index 53a75e2..ba4d675 100644
--- a/src/client/pages/Start.tsx
+++ b/src/client/pages/Start.tsx
@@ -1,16 +1,18 @@
-import React, { useEffect, useState, useContext, useRef } from 'react'
+import React, { useState, useContext, useRef, useCallback, Suspense } from 'react'
import "../css/start.css";
-import axios from 'axios';
import { Context } from "../components/App";
-import { HighlightOff, Check } from '@mui/icons-material';
-import { Button } from '@mui/material';
+import HighlightOffIcon from '@mui/icons-material/HighlightOff';
+import CheckIcon from '@mui/icons-material/Check';
+import Button from '@mui/material/Button';
import ModeSwitcher from '../components/ModeSwitcher';
-import Map from '../components/Map';
-import Status from '../components/Status';
-import LinearBuffer from "../components/LinearBuffer";
-import MiniMap from "../components/MiniMap";
+import { useGetData } from "../scripts/getData";
import { layers } from "../scripts/layers";
+// Lazy load the components
+const Status = React.lazy(() => import('../components/Status'));
+const LinearBuffer = React.lazy(() => import('../components/LinearBuffer'));
+const MiniMap = React.lazy(() => import('../components/MiniMap'));
+const Map = React.lazy(() => import('../components/Map'));
function timeAgo(timestamp: number): string {
if (!Number.isInteger(timestamp)) {
@@ -38,90 +40,51 @@ function timeAgo(timestamp: number): string {
}
function Start() {
- //const [isLoggedIn, setLogin, userInfo] = useContext(Context);
- const [contextObj] = useContext(Context);
+ const fetchIntervalMs = 1000 * 55;
+ const index = useRef(0); // used to hold information on how many entries, for looping and refetching second to last entry (ignore check)
+ const initialRender = useRef(true);
+ const intervalID = useRef();
- const [entries, setEntries] = useState([]);
+ const [contextObj] = useContext(Context);
const [messageObj, setMessageObj] = useState({ isError: null, status: null, message: null });
+ const [entries, setEntries] = useState([]);
const [lastFetch, setLastFetch] = useState();
const [nextFetch, setNextFetch] = useState();
- const index = useRef(0);
- const intervalID = useRef();
-
- const fetchIntervalMs = 1000 * 55;
-
- const getData = async () => {
- const token = localStorage.getItem("jwt");
- let response;
-
- if (!token) {
- contextObj.setLogin(false);
- setMessageObj({ isError: true, status: "403", message: "No valid login" })
- return false;
- }
-
- try {
- const now = new Date().getTime();
- setLastFetch(now);
- response = await axios({
- method: 'get',
- url: "/read?index=" + (Math.max(index.current - 1, 0)) + "&noCache=" + now,
- headers: {
- 'Authorization': `Bearer ${token}`
- }
- });
-
- const newEntries = response.data.entries;
-
- if (newEntries.length) {
- setEntries((prevEntries) => {
- let allButLastPrevEntries, mergedEntries = [];
-
- if (prevEntries.length) {
- allButLastPrevEntries = prevEntries.slice(0, prevEntries.length - 1);
- mergedEntries = [...allButLastPrevEntries, ...newEntries];
- } else {
- mergedEntries = newEntries;
- }
-
- index.current = mergedEntries.length;
-
- return mergedEntries;
- });
+ const { fetchData } = useGetData(index, fetchIntervalMs, setEntries);
+ const getData = useCallback(async () => {
+ if (!contextObj.isLoggedIn) {
+ if (contextObj.userInfo) { // no valid login but userInfo
+ setMessageObj({ isError: true, status: "403", message: "Login expired" })
}
+ return; // no need to fetch if logged out
+ }
- setMessageObj({ isError: null, status: null, message: null });
- setNextFetch(new Date().getTime() + fetchIntervalMs);
- } catch (error) {
- console.log("error fetching data %o", error);
-
- if (!error.response) {
- setMessageObj({ isError: true, status: 499, message: error.message || "offline" });
- setNextFetch(new Date().getTime() + fetchIntervalMs);
- return;
- }
-
- if (error.response.status == 403) { contextObj.setLogin(false) }
+ const { isError, status, message, fetchTimeData } = await fetchData();
- setMessageObj({ isError: true, status: error.response.data.status || error.response.status, message: error.response.data.message || error.message });
+ setMessageObj({ isError, status, message });
+ if (isError && status == 403) {
clearInterval(intervalID.current); intervalID.current = null;
console.info("cleared Interval");
- setNextFetch(null);
}
- };
-
- useEffect(() => {
- if (contextObj.isLoggedIn) {
- getData();
- intervalID.current = setInterval(getData, fetchIntervalMs); // capture interval ID as return from setInterval and pass to state
- return () => { console.log("cleanup"); clearInterval(intervalID.current); intervalID.current = null; };
- } else if (contextObj.userInfo) { // no valid login but userInfo
- setMessageObj({ isError: true, status: "403", message: "Login expired" })
+
+ if (fetchTimeData.last && fetchTimeData.next) {
+ setLastFetch(fetchTimeData.last);
+ setNextFetch(fetchTimeData.next);
}
- }, []);
+
+ if (initialRender.current) {
+ intervalID.current = setInterval(getData, fetchIntervalMs); // capture interval ID as return from setInterval
+ }
+
+ initialRender.current = false;
+ }, [fetchData]);
+
+ if (initialRender.current) {
+ getData();
+ }
return (
<>
@@ -142,31 +105,51 @@ function Start() {
variant="contained"
href={contextObj.isLoggedIn ? null : "/login"}
onClick={contextObj.isLoggedIn ? () => { contextObj.setLogin(false); localStorage.clear(); } : null}
- endIcon={contextObj.isLoggedIn ? : null}
- startIcon={contextObj.isLoggedIn ? null : }
+ endIcon={contextObj.isLoggedIn ? : null}
+ startIcon={contextObj.isLoggedIn ? null : }
color={contextObj.isLoggedIn ? "success" : "error"}
size="large"
>
{contextObj.isLoggedIn ? "Logged In" : "Logged Out"}
+
+ {contextObj.userInfo && (
+
+ Loading Map... }>
+
+
+
+ )}
-
-
-
+
+ {contextObj.isLoggedIn && (
+
+ Loading Status... }>
+
+
+
{entries.at(-1) && layers.map((layer, index) => {
return (
-
+ Loading MiniMap... } key={index}>
+
+
)
})}
-
+ )}
- {contextObj.isLoggedIn && intervalID &&
-
+ {contextObj.isLoggedIn && intervalID && lastFetch && nextFetch &&
+ Loading Progress... }>
+
+
}
- {contextObj.isLoggedIn && intervalID && entries?.length > 0 &&
+
+ {entries?.length > 0 &&
<>
GPS:
{entries.at(-1).lat} / {entries.at(-1).lon}
@@ -174,7 +157,7 @@ function Start() {
}
-
+
diff --git a/src/client/scripts/getData.ts b/src/client/scripts/getData.ts
new file mode 100644
index 0000000..5789367
--- /dev/null
+++ b/src/client/scripts/getData.ts
@@ -0,0 +1,71 @@
+import { useContext } from "react";
+import { Context } from "../components/App";
+import axios from "axios";
+
+export const useGetData = (index: React.RefObject, fetchIntervalMs: number, setEntries) => {
+ const [contextObj] = useContext(Context);
+
+ const fetchData = async function () {
+ const token = localStorage.getItem("jwt");
+ let response;
+ let returnObj: client.entryData = { isError: false, status: 200, message: "", fetchTimeData: { last: null, next: null }}
+
+ if (!token) {
+ contextObj.setLogin(false);
+ returnObj = { isError: true, status: 403, message: "No valid login", fetchTimeData: null }
+ return returnObj;
+ }
+
+ try {
+ const now = new Date().getTime();
+ returnObj.fetchTimeData.last = now;
+
+ response = await axios({
+ method: 'get',
+ url: "/read?index=" + (Math.max(index.current - 1, 0)) + "&noCache=" + now,
+ headers: {
+ 'Authorization': `Bearer ${token}`
+ }
+ });
+
+ const newEntries = response.data.entries;
+
+ if (newEntries.length) {
+ setEntries((prevEntries) => {
+ let allButLastPrevEntries, mergedEntries = [];
+
+ if (prevEntries.length) {
+ allButLastPrevEntries = prevEntries.slice(0, prevEntries.length - 1);
+ mergedEntries = [...allButLastPrevEntries, ...newEntries];
+ } else {
+ mergedEntries = newEntries;
+ }
+
+ (index as unknown as React.MutableRefObject).current = mergedEntries.length; // typescript blocks reassignment on refs https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065#issuecomment-547327595
+
+ return mergedEntries;
+ });
+
+ }
+
+ returnObj = { isError: false, status: 200, message: "", fetchTimeData: { ...returnObj.fetchTimeData, next: new Date().getTime() + fetchIntervalMs } }
+ return returnObj;
+
+ } catch (error) {
+ console.log("error fetching data %o", error);
+
+ if (!error.response) {
+ returnObj = { isError: true, status: 499, message: error.message || "offline", fetchTimeData: { ...returnObj.fetchTimeData, next: new Date().getTime() + fetchIntervalMs } }
+ return returnObj;
+ }
+
+ if (error.response.status == 403) { contextObj.setLogin(false) }
+
+ returnObj = { isError: true, status: error.response.data.status || error.response.status, message: error.response.data.message || error.message, fetchTimeData: { last: null, next: null } }
+ return returnObj;
+ }
+ }
+
+ return { fetchData }
+
+};
\ No newline at end of file
diff --git a/src/client/types.d.ts b/src/client/types.d.ts
index 6542881..146bef7 100644
--- a/src/client/types.d.ts
+++ b/src/client/types.d.ts
@@ -18,6 +18,13 @@ declare namespace client {
lastEntry: Models.IEntry
index?: number
}
+
+ interface entryData {
+ isError: boolean,
+ status: number,
+ message: string,
+ fetchTimeData: {last: number, next: number} | null
+ }
}
diff --git a/src/models/entry.ts b/src/models/entry.ts
index 5758492..cc94619 100644
--- a/src/models/entry.ts
+++ b/src/models/entry.ts
@@ -86,7 +86,7 @@ export const entry = {
query('lat').custom(checkNumber(-90, 90)),
query('lon').custom(checkNumber(-180, 180)),
query('timestamp').custom((value) => checkTime(value)),
- query('hdop').custom(checkNumber(0, 100)),
+ query('hdop').custom(checkNumber(0, 500)),
query('altitude').custom(checkNumber(-100, 10000)),
query('speed').custom(checkNumber(0, 300)),
query('heading').custom(checkNumber(0, 360, "integer")),
diff --git a/types.d.ts b/types.d.ts
index 776fef2..a9bf852 100644
--- a/types.d.ts
+++ b/types.d.ts
@@ -138,4 +138,4 @@ interface CSRFToken {
interface HttpError extends Error {
status?: number;
statusCode?: number;
-}
\ No newline at end of file
+}
diff --git a/views/index.ejs b/views/index.ejs
index 2663cd1..b9a5619 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -8,7 +8,7 @@
LOREX - Osmand Webtracking Frontend
-
+
diff --git a/webpack.config.js b/webpack.config.js
index 641fd28..79ffcef 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,4 +1,5 @@
const path = require('path');
+// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = (args) => {
const mode = args.mode || 'development';
@@ -12,17 +13,17 @@ module.exports = (args) => {
use: {
loader: 'ts-loader',
options: {
- configFile: 'src/client/tsconfig.json'
- }
+ configFile: 'src/client/tsconfig.json',
+ },
},
- exclude: /node_modules/
+ exclude: /node_modules/,
},
{
test: /\.css$/,
use: [
- "style-loader",
+ 'style-loader',
{
- loader: "css-loader",
+ loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
@@ -33,17 +34,25 @@ module.exports = (args) => {
},
{
test: /\.css$/,
- use: ["style-loader", "css-loader"],
- exclude: /\.module\.css$/
+ use: ['style-loader', 'css-loader'],
+ exclude: /\.module\.css$/,
},
],
},
resolve: {
- extensions: ['.tsx', '.ts', '.js']
+ extensions: ['.tsx', '.ts', '.js'],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist/httpdocs/js')
- }
+ },
+
+ optimization: {
+ minimize: mode === 'production',
+ },
+ plugins: [
+ // Uncomment if you want to analyze the bundle
+ // new BundleAnalyzerPlugin(),
+ ],
}
-};
+}
|