From 2c4ef208c94c142a17b3ed58d9a45e638a1a5757 Mon Sep 17 00:00:00 2001
From: Type-Style <github@type-style.de>
Date: Fri, 19 Jul 2024 14:28:43 +0200
Subject: [PATCH] [Fix] #94, refactor-ignore logic (multiline)

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 3eb782a8..abfe5581 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 48a04bcb..5c1991ea 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 a84ef6e7..25cf726f 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 e7fc107e..02b0bd8d 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 3e928575..d16bb1c2 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 2696d06b..e79be6f7 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 6ccb8bff..b194ff6f 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">