From 2e9436297fccb376b078d81324548f3784d64018 Mon Sep 17 00:00:00 2001
From: Denis Thiessen <mail@denisthiessen.de>
Date: Sat, 18 May 2024 18:11:55 +0200
Subject: [PATCH] feat: Added Sensor Logging Capabilities.

---
 src/App.js                    | 14 ++++++++++----
 src/core/Constants.jsx        |  2 ++
 src/core/log/SensorLogger.jsx | 33 +++++++++++++++++++++++++++++++++
 src/index.js                  |  4 ++++
 src/pages/TestPage.jsx        |  4 +++-
 5 files changed, 52 insertions(+), 5 deletions(-)
 create mode 100644 src/core/Constants.jsx
 create mode 100644 src/core/log/SensorLogger.jsx

diff --git a/src/App.js b/src/App.js
index 71138b5..71f1c6a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,8 @@ import React, {useEffect} from "react";
 import { Route, Routes } from "react-router-dom";
 import { GeistProvider, CssBaseline } from '@geist-ui/core'
 
+import { SensorLogger } from "./core/log/SensorLogger";
+
 import h337 from "heatmap.js";
 
 const NoPageFound = React.lazy(() => import("./pages/NoPageFound"));
@@ -68,14 +70,18 @@ function App() {
 
   wait(200);
 
+  var logRoutePath = (path) => {
+    SensorLogger.pushToVisitLog(path);
+  };
+
   return (
     <GeistProvider>
       <React.Suspense fallback="loading">
         <Routes>
-          <Route path="/" element={<React.Suspense fallback={<>...</>}><TestPage /></React.Suspense>} />
-          <Route path="/info" element={<React.Suspense fallback={<>...</>}><TestPage /></React.Suspense>} />
-          <Route path="/questionnaire/:id" element={<React.Suspense fallback={<>...</>}><TestQuestionnaire /></React.Suspense>} />
-          <Route path="*" element={<React.Suspense fallback={<>...</>}><NoPageFound /></React.Suspense>} />
+          <Route path="/" action={logRoutePath("/")} element={<React.Suspense fallback={<>...</>}><TestPage /></React.Suspense>} />
+          <Route path="/info" action={logRoutePath("/info")} element={<React.Suspense fallback={<>...</>}><TestPage /></React.Suspense>} />
+          <Route path="/questionnaire/:id" action={logRoutePath("/questionnaire")} element={<React.Suspense fallback={<>...</>}><TestQuestionnaire /></React.Suspense>} />
+          <Route path="*" action={logRoutePath("*")} element={<React.Suspense fallback={<>...</>}><NoPageFound /></React.Suspense>} />
         </Routes>
       </React.Suspense>
       <CssBaseline />
diff --git a/src/core/Constants.jsx b/src/core/Constants.jsx
new file mode 100644
index 0000000..39929e7
--- /dev/null
+++ b/src/core/Constants.jsx
@@ -0,0 +1,2 @@
+export const MOUSE_MODE = false;
+export const HEATMAP_MAX = 999;
\ No newline at end of file
diff --git a/src/core/log/SensorLogger.jsx b/src/core/log/SensorLogger.jsx
new file mode 100644
index 0000000..b1e1614
--- /dev/null
+++ b/src/core/log/SensorLogger.jsx
@@ -0,0 +1,33 @@
+import {Component} from 'react';
+
+export class SensorLogger extends Component {
+    static sensorLog = {mouseLog: [], orientationLog: [], clickedElements: [], visitedSites: [], playedSonifications: []};
+
+    static pushToMouseLog(logElement) {
+        this.sensorLog.mouseLog.push(logElement);
+    }
+
+    static pushToOrientationLog(logElement) {
+        this.sensorLog.orientationLog.push(logElement);
+    }
+
+    static pushToClickLog(logElement) {
+        this.sensorLog.clickedElements.push(logElement);
+    }
+
+    static pushToVisitLog(logElement) {
+        this.sensorLog.visitedSites.push(logElement);
+    }
+
+    static pushToSonificationLog(logElement) {
+        this.sensorLog.playedSonifications.push(logElement);
+    }
+
+    static getSensorLog() {
+        return this.sensorLog;
+    }
+
+    static resetSensorLog() {
+        this.sensorLog = {mouseLog: [], orientationLog: [], clickedElements: [], visitedSites: [], playedSonifications: []};
+    }
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index fab2226..b958206 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,6 +5,10 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 import { BrowserRouter } from "react-router-dom";
 import "./core/i18n/i18n";
+import { SensorLogger } from './core/log/SensorLogger';
+
+document.onclick = function(event) {SensorLogger.pushToClickLog(event);};
+window.addEventListener("deviceorientation", function(event) {SensorLogger.pushToOrientationLog(event);});
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
diff --git a/src/pages/TestPage.jsx b/src/pages/TestPage.jsx
index 7e6cfab..23c58ba 100644
--- a/src/pages/TestPage.jsx
+++ b/src/pages/TestPage.jsx
@@ -1,10 +1,12 @@
 import React from "react";
 import InfoPageComponent from "../components/InfoPageComponent";
 import { getTranslation } from "../core/i18n/I18NHandler";
+import WebpageBanner from "../components/webpage_container/WebpageBanner";
+import { SensorLogger } from "../core/log/SensorLogger";
 
 export default class TestPage extends InfoPageComponent {
 
     render() {
-        return (<InfoPageComponent><p>{getTranslation("hello_world")}</p></InfoPageComponent>);
+        return (<InfoPageComponent><WebpageBanner translationKey="hello_world" /><p>{getTranslation("hello_world")}</p><button onClick={function(){console.log(SensorLogger.getSensorLog())}}>Heeeyyy</button></InfoPageComponent>);
     }
 }
\ No newline at end of file