Initial commit

Lts/Tools/TimelineParticipant/Readme.txt

@@ -0,0 +1,18 @@
+[Run TimelineParticipant]
+To start the Timeline you just need to run the "TimelineParticipant.sh" file. (Run "./TimelineParticipant.sh" in this folder) 
+If you get an error try to run the "installNode.sh".(Run "./installNode.sh" in this folder)
+
+[Stop TimelineParticipant]
+The "TimelineParticipant.sh" starts a process in the background.
+If you need to stop that process you can run "./KillTimelineParticipant.sh" or use pkill node from the console. 
+
+[Manually Run TimelineParticipant]
+1. Nodejs has to be installed. If it is not, install it with "nvm install --lts".
+
+2. If you want to use Nodemon run "npm install nodemon".
+   --If you start the Timeline with "node app.js" and you change any of the files you will have to stop the process with Crtl+C and then start it again. 
+   --Nodemon will automaticly restart the nodeserver for you if there have been changes to the program files. (Great for Development and Debuging).
+
+3. Now you just start the node server with "nodemon app.js" or "node app.js".
+
+4. If the process is running successfully you can open any Web Browser and go on "localhost:3000".

Lts/Tools/TimelineParticipant/TimelineParticipant.sh

@@ -0,0 +1,3 @@
+pkill node
+nodemon app.js &
+firefox localhost:3000

Lts/Tools/TimelineParticipant/app.js

@@ -0,0 +1,152 @@
+var { Client } = require('pg');
+var express = require("express");
+const path = require("path");
+var cors = require('cors')
+var app = express();
+const port = 3000;
+
+app.use(cors())
+
+const static_path = path.join(__dirname, "public"); // The path to a public folder.
+
+app.use(express.static(static_path));
+app.use(express.urlencoded({extended: true}));
+
+app.get('/', (req, res) => {
+    res.sendFile('js/index.html', {root: __dirname });// When you enter the url localhost:3000/ you get the index.html file.
+});
+
+
+app.get('/getExersises', (req,res) =>{
+    con = new Client({ // Establish a connection with the database called lts_ets_pro 
+        user: "",
+        host: "",
+        database: "lts_ets_pro",
+        password: ""
+    });
+    con.connect(function(err){ // When the connection attempt was successful this will run  
+        if(err) throw err// If there had been an error connecting to the database it will throw the error
+        con.query("select id, name, created from exm.exercise order by created",function(err,result,fields){
+            if(err) 
+                throw err;
+            var payload = [];
+            for(var i = 0; i < result.rows.length;i++)
+            {
+                
+                // This will just put the lat and lon variables in a point variable and then append the point to the payload
+                var exersise = {exersise_id: result.rows[i].id, exersise_name: result.rows[i].name}
+                payload.push(exersise);
+            }
+            res.send(payload)// Send the data to the client as a response
+        })
+    });
+});
+app.get('/getParticipants/p', (req,res)=> {
+    con = new Client({ // Establish a connection with the database called lts_ets_pro 
+        user: "",
+        host: "",
+        database: "lts_ets_pro",
+        password: ""
+    });
+    con.connect(function(err){ // When the connection attempt was successful this will run  
+        if(err) throw err// If there had been an error connecting to the database it will throw the error
+        con.query("SELECT DISTINCT id, equipment_number, designator from ex_" + req.query.exersiseId + ".rec_participant where equipment_number IS NOT NULL order by equipment_number",function(err,result,fields){
+            if(err) 
+                throw err;
+            var payload = [];
+            for(var i = 0; i < result.rows.length;i++)
+            {
+                // This will just put the lat and lon variables in a point variable and then append the point to the payload
+                var participant = {id: result.rows[i].id,equipment_number: result.rows[i].equipment_number, designator: result.rows[i].designator}
+                payload.push(participant);
+            }
+            res.send(payload)// Send the data to the client as a response
+        })
+    });
+});
+
+app.get("/getPositions/p", (req, res) => { // This will be run when you enter the URL localhost:3000/getData/p
+    con = new Client({ // Establish a connection with the database called lts_ets_pro 
+        user: "",
+        host: "",
+        database: "lts_ets_pro",
+        password: ""
+    });
+    con.connect(function(err){ // When the connection attempt was successful this will run  
+        if(err) throw err// If there had been an error connecting to the database it will throw the error
+        con.query("select sample_time, pos_lon*180/3.14159265359 as pos_lon, pos_lat*180/3.14159265359 as pos_lat, pos_z from ex_" + req.query.exersiseId + ".rec_participant_position where participant_id = " + req.query.parId + " order by sample_time",function(err,result,fields){
+            // Explenation:
+            // ---select sample_time, pos_lon*180/3.14159265359 as pos_lon, pos_lat*180/3.14159265359 as pos_lat, pos_z
+            // This will select what variables i want to get from the table.
+            // ---from ex_201.rec_participant_position
+            // This defines the table i want to get data from.
+            // ---where participant_id = " + req.query.parId + " 
+            // I only want to take the data if it is from the participant with the participantId that has been passed from the get request
+            // ---order by sample_time
+            // This will just order the data by the sample_time
+
+            if(err) 
+                throw err;
+            var Payload = [];
+            for(var i = 0; i < result.rows.length;i++)
+            {
+                
+                // This will just put the lat and lon variables in a point variable and then append the point to the payload
+                
+                var position = []; 
+                position.push(result.rows[i].pos_lat);
+                position.push(result.rows[i].pos_lon);
+                var event = {event_type_id: -1,event_name: "Position", sample_time: result.rows[i].sample_time,position: position}
+                Payload.push(event);
+            }
+            res.send(Payload)// Send the data to the client as a response
+        })
+    });
+})
+
+
+app.get("/getEvents/p", (req, res) => { // This will be run when you enter the URL localhost:3000/getEvents/p
+    con = new Client({ // Establish a connection with the database called lts_ets_pro 
+        user: "",
+        host: "",
+        database: "lts_ets_pro",
+        password: ""
+    });
+    
+    con.connect(function(err){ // When the connection attempt was successful this will run. 
+        if(err) throw err; // If there had been an error connecting to the database it will throw the error
+        con.query("select E.event_type_id, T.name, E.participant_id, E.sample_time,  E.position_x*180/3.14159265359 as position_x,  E.position_y*180/3.14159265359 as position_y from ex_" + req.query.exersiseId + ".eem_event E JOIN pdm.pdm_event_type T ON T.id = E.event_type_id where participant_id = " + req.query.parId + " and event_type_id IN (" + req.query.eventIds + ") order by sample_time",function(err,result,fields){
+            // Explenation:
+            // ---select T.name, E.participant_id, E.sample_time,  E.position_x*180/3.14159265359 as position_x,  E.position_y*180/3.14159265359 as position_y 
+            // This will select what variables i want to get from the table. The E and T will be different tables that will be defined in the next step.
+            // ---from ex_201.eem_event E JOIN pdm.pdm_event_type T
+            // This defines the tables i want to get data from.
+            // ---ON T.id = E.event_type_id
+            // This will look up the correct T.name by the event_type_id of the given event
+            // ---where participant_id = " + req.query.parId + " and event_type_id IN (" + req.query.eventIds + ")
+            // I only want to take the data if it is from the participant with the correct participantId and event_type_id that has been passed from the get request and
+            // ---order by sample_time
+            // This will just order the data by the sample_time
+
+            if(err) 
+                throw err;
+            var payload = [];
+            for(var i = 0; i < result.rows.length;i++)
+            {
+                // This will just put the data in a event object
+                var position = [];
+                position.push(result.rows[i].position_y);
+                position.push(result.rows[i].position_x);
+                var event = {event_type_id: result.rows[i].event_type_id,event_name: result.rows[i].name, sample_time: result.rows[i].sample_time,position: position}
+                payload.push(event);
+            }
+            res.send(payload) // Send the data to the client as a response
+        })
+    });
+})
+
+app.listen(port, () => {
+    console.log(`Example app listening on port ${port}`)
+})
+
+

Lts/Tools/TimelineParticipant/installNode.sh

@@ -0,0 +1,2 @@
+nvm install --lts
+npm install nodemon

Lts/Tools/TimelineParticipant/js/index.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        
+        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
+        integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
+        crossorigin=""/>
+        <link rel="stylesheet" href="/style.css">
+        <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
+        integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
+        crossorigin=""></script>
+        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
+        integrity=
+        "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
+        crossorigin="anonymous">
+        </script>
+
+        <title>Participant Timeline </title>
+    </head>
+    <body>
+        <h1>Participant Timeline</h1>
+        <div id="controlsContainer">
+            <div id = "controls">
+                <div id= "toolBox">
+                    <input type="checkbox" name="Auto Center View" id="autoCenterView" checked>
+                    <label for="autoCenterView">Auto Center View</label>
+                    <button id="btn_centerView" > 
+                        Center View
+                    </button>
+                    <select name="ddExersises" id="ddExersises">
+                    </select>
+                    <select name="ddParticipants" id="ddParticipants">
+                        <option value="">--Select Participant--</option>
+                    </select>
+                </div>
+                <div id="filterLabel"><label>Filter:</label></div>
+                <div id = "filterToggles" style="width: 600px; height: 60px; display: inline-block;">
+                    
+                </div>
+            </div>
+        </div>
+        <div id="mapContainer">
+            <div id="map" style="width: 80%; height: 580px; margin-left: 10%"></div>
+        </div>
+        <div id="slidersContainer">
+            <div class= "sliderDiv">
+                <label for="coarseTimeRange" class= "sliderLabel">Coarse</label>
+                <input type="range" min="0" max="300" value="0" class="slider" id="coarseTimeRange">
+            </div>
+            <div class= "sliderDiv">
+                <label for="fineTimeRange" class= "sliderLabel">Fine</label>
+                <input type="range" min="-300" max="300" value="0" class="slider" id="fineTimeRange">    
+            </div>
+            
+        </div>
+        
+
+        
+        
+        
+        
+        
+        <script src="/script.js"></script>
+        <script src="/events.js"></script>
+        <script src="/ui.js"></script>
+        <script src="/slider.js"></script>
+        
+                
+    </body>
+
+</html>