[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

@@ -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>
 	)
 }

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>

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 &&

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 {

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;
 }

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
   });
 });
 

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">