From b70c248cadc62e29f7b95463754c3dfc7dae01d9 Mon Sep 17 00:00:00 2001
From: Type-Style <github@type-style.de>
Date: Fri, 19 Jul 2024 15:06:02 +0200
Subject: [PATCH] [Fix] #94, refactor-ignore logic (multiline) (#95)

Serverside: When writing entry, the most recent previous entry is checked wether to be ignored.
Also if more than 2 items already exist meaning writing is preparing at least the 3rd entry, we recalculate distances and timing if previousItems are ignored.

Frontend:
In order to benefit and get the recent information that a previous item is being ignored, frontEnd askes for the current item again and merges it and following items.

Remember the most recent item can never be ignored due to policy. Maybe there is no further writing, so I want to have the latest datapoint.
---
 src/client/components/Map.tsx    | 15 ++++++++++-----
 src/client/components/Status.tsx |  2 +-
 src/client/pages/Start.tsx       | 24 +++++++++++++++++++-----
 src/models/entry.ts              | 29 +++++++++++++++++++++++------
 src/scripts/ignore.ts            |  4 ++--
 src/tests/integration.test.ts    | 19 +++++++++++++------
 views/index.ejs                  |  6 +++---
 7 files changed, 71 insertions(+), 28 deletions(-)

diff --git a/src/client/components/Map.tsx b/src/client/components/Map.tsx
index 3eb782a..abfe558 100644
--- a/src/client/components/Map.tsx
+++ b/src/client/components/Map.tsx
@@ -23,7 +23,9 @@ function Map({ entries }: { entries: Models.IEntry[] }) {
 	if (!entries?.length) {
 		return <span className="noData cut">No Data to be displayed</span>
 	}
+
 	const lastEntry = entries.at(-1);
+	const cleanEntries = entries.filter((entry) => !entry.ignore);
 
 	return (
 		<MapContainer className={css.mapContainer} center={[lastEntry.lat, lastEntry.lon]} zoom={13} scrollWheelZoom={false}>
@@ -32,11 +34,14 @@ function Map({ entries }: { entries: Models.IEntry[] }) {
 				attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
 				url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
 			/>
-			<Marker position={[lastEntry.lat, lastEntry.lon]}>
-				<Popup>
-					{JSON.stringify(lastEntry, null, 2)}
-				</Popup>
-			</Marker>
+			{cleanEntries.map((entry) =>
+				<Marker key={entry.index} position={[entry.lat, entry.lon]}>
+					<Popup>
+						<pre>{JSON.stringify(entry, null, 2)}</pre>
+					</Popup>
+				</Marker>
+			)}
+
 		</MapContainer>
 	)
 }
diff --git a/src/client/components/Status.tsx b/src/client/components/Status.tsx
index 48a04bc..5c1991e 100644
--- a/src/client/components/Status.tsx
+++ b/src/client/components/Status.tsx
@@ -44,7 +44,7 @@ function Map({ entries }: { entries: Models.IEntry[] }) {
 		return <span className="noData cut">No Data to be displayed</span>
 	}
 	const statusData = getStatusData(entries);
-	const lastEntry = entries.at(-1);
+	//const lastEntry = entries.at(-1);
 
 	return (
 		<ul>
diff --git a/src/client/pages/Start.tsx b/src/client/pages/Start.tsx
index a84ef6e..25cf726 100644
--- a/src/client/pages/Start.tsx
+++ b/src/client/pages/Start.tsx
@@ -62,18 +62,32 @@ function Start() {
       setLastFetch(now);
       response = await axios({
         method: 'get',
-        url: "/read?index=" + index.current + "&noCache=" + now,
+        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) => [...prevEntries, ...newEntries]);
-        index.current += newEntries.length;
+
+      if (newEntries.length == 1) {
+        setEntries(newEntries);
       }
 
+      if (newEntries.length > 1) {
+        setEntries((prevEntries) => {
+          const allButLastPrevEntries = prevEntries.slice(0, prevEntries.length -1);
+          console.log("newEntries %o", newEntries);
+          const mergedEntries = [...allButLastPrevEntries, ...newEntries];
+          index.current = mergedEntries.length;
+          console.log("mergedEntries %o", mergedEntries);
+          console.log("index.current %o", index.current);
+          
+          return mergedEntries;
+        });
+        
+      }     
+
       setMessageObj({ isError: null, status: null, message: null });
       setNextFetch(new Date().getTime() + fetchIntervalMs);
     } catch (error) {
@@ -97,7 +111,7 @@ function Start() {
 
   return (
     <>
-    {console.info("entries %o", entries)}
+      {console.info("entries %o", entries)}
       <div className="start">
         <div className="grid-item info">
           {messageObj.isError &&
diff --git a/src/models/entry.ts b/src/models/entry.ts
index e7fc107..02b0bd8 100644
--- a/src/models/entry.ts
+++ b/src/models/entry.ts
@@ -21,6 +21,7 @@ export const entry = {
     }
     const entries = fileObj.content.entries;
     const lastEntry = fileObj.content.entries.at(-1);
+    let previousEntry = fileObj.content.entries.at(-1); // potentially overwritten if entry is set to ignore
     const entry = {} as Models.IEntry;
 
     entry.altitude = Number(req.query.altitude);
@@ -32,11 +33,27 @@ export const entry = {
     entry.user = req.query.user as string;
     entry.ignore = false;
 
-    if (lastEntry) { // so there is a previous entry
-      entry.time = getTime(Number(req.query.timestamp), lastEntry);
-      lastEntry.ignore = getIgnore(lastEntry, entry);
-      entry.angle = getAngle(lastEntry, entry);
-      entry.distance = getDistance(entry, lastEntry)
+    if (lastEntry && previousEntry) {
+      entry.time = getTime(Number(req.query.timestamp), lastEntry); // time data is needed for ignore calculation
+
+      if (entries.length > 1) { // the very first entry one shall never be ignored
+        lastEntry.ignore = getIgnore(lastEntry, entry);
+      } else {
+        lastEntry.ignore = false;
+      }
+
+      if (lastEntry.ignore) { // rectify or replace previousEntry with last non ignored element
+        for (let i = entries.length - 1; i >= 0; i--) {
+          if (!entries[i].ignore) {
+            previousEntry = entries[i];
+            break;
+          }
+        }
+      }
+
+      entry.time = getTime(Number(req.query.timestamp), previousEntry); // overwrite time in case previousEnty was changed
+      entry.angle = getAngle(previousEntry, entry);
+      entry.distance = getDistance(entry, previousEntry)
       entry.speed = getSpeed(Number(req.query.speed), entry);
     } else {
       entry.angle = undefined;
@@ -46,7 +63,7 @@ export const entry = {
 
     if (entries.length >= 1000) {
       logger.log(`File over 1000 lines: ${fileObj.path}`);
-      if (entry.hdop < 12 || (lastEntry && entry.hdop < lastEntry.hdop)) {
+      if (entry.hdop < 12 || (previousEntry && entry.hdop < previousEntry.hdop)) {
         entries[entries.length - 1] = entry; // replace last entry
       }
     } else {
diff --git a/src/scripts/ignore.ts b/src/scripts/ignore.ts
index 3e92857..d16bb1c 100644
--- a/src/scripts/ignore.ts
+++ b/src/scripts/ignore.ts
@@ -4,10 +4,10 @@ export function getIgnore(lastEntry: Models.IEntry, entry: Models.IEntry): boole
 
   const timing = Math.max(lastEntry.time.diff, entry.time.diff)
 
-  // Threshold increases with older previous entries or farther future entries.
+  // Threshold increases with older previous entries
   if (timing > 32) {
     threshold += Math.min(lastEntry.time.diff / 60, maxThreshold);
   }
-
+  
   return lastEntry.hdop > threshold;
 }
\ No newline at end of file
diff --git a/src/tests/integration.test.ts b/src/tests/integration.test.ts
index 2696d06..e79be6f 100644
--- a/src/tests/integration.test.ts
+++ b/src/tests/integration.test.ts
@@ -195,16 +195,23 @@ describe("GET /write", () => {
 
   it('check ignore', async () => {
     let jsonData = getData(filePath);
-    let entry = jsonData.entries[1];
-    const lastEntry = jsonData.entries[0];
+    let entry = jsonData.entries.at(-1);
+    let firstEntry = jsonData.entries[0];
+    let previousEntry = null;
 
-    expect(entry.ignore).toBe(false); // current one to be false allways
-    expect(lastEntry.ignore).toBe(true); // last one to high hdop to be true
+    expect(entry.ignore).toBe(false); // current one to be false always
+    expect(firstEntry.ignore).toBe(false); // start entry to be false always
 
     await callServer(undefined, "user=xx&lat=52.51627&lon=13.37770&timestamp=R3Pl4C3&hdop=50&altitude=4000.000&speed=150.000&heading=180.0&key=test", 200, "GET");
+
     jsonData = getData(filePath);
-    entry = jsonData.entries[1]; // same data point, but not last now therefore ignore true
-    expect(entry.ignore).toBe(true);
+    entry = jsonData.entries.at(-1);
+    previousEntry = jsonData.entries.at(-2);
+    firstEntry = jsonData.entries[0];
+
+    expect(entry.ignore).toBe(false); // current one to be false always
+    expect(firstEntry.ignore).toBe(false); // start entry to be false always
+    expect(previousEntry.ignore).toBe(true); // now since there is 3 entries the previous can be ignored
   });
 });
 
diff --git a/views/index.ejs b/views/index.ejs
index 6ccb8bf..b194ff6 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -6,10 +6,10 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
 	<title>LOREX - Osmand Webtracking Frontend</title>
-	<meta name="viewport" content="width=device-width, initial-scale=1">
-
+	
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 	<link rel="preload" href="/font/science-gothic.woff2" as="font" type="font/woff2">
-	<meta name="color-scheme" content"dark light">
+	<meta name="color-scheme" content="dark light">
 
 	<meta property="og:title" content="LOREX - Osmand Webtracking Frontend">
 	<meta name="description" content="LOREX - Based on leaflet, openstreetmap React and Express, save your webtracking and display it on a map">