Initial commit

Lts/Tools/TrackingTool/index.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Tracking Tool</title>
+        <link rel="stylesheet" href="../include/leaflet/leaflet.css">
+        <link rel="stylesheet" href="../include/bootstrap/css/bootstrap.css">
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+        <div class="d-flex" id="wrapper">
+            
+            <!--Sidebar-->
+            <div class="border-end" id="sidebar-wrapper">
+                <div id="sideber-header" class="container-fluid bg-light border-bottom">
+                    <div class="h3 p-1 pt-2 text-muted">Tracked Equipment</div> 
+                </div>
+                <div id="sidebar-body">
+                    <div class="accordion accordion-flush" id="accordionParty">
+                    </div>
+                </div>            
+            </div>
+
+            <!--Page Content Wrapper-->
+            <div id="page-content-wrapper">
+                <div id="content-header" class="container-fluid bg-light border-bottom">
+                    <div class="d-flex align-items-center p-1">
+                        <button id="sidebarToggle" class="btn btn-outline-secondary" >/</button>
+                        <div class="sidebar-heading px-3 pt-1 h3">Tracking Tool</div> 
+                        <span id="equipmentInfo" class="ms-auto"></span>  
+                    </div>
+                </div>
+                <div id="content-map">
+                    <div id="infoOverlay" class="h4" hidden></div>
+                </div>
+            </div>
+        </div>  
+        
+        <!-- Modal -->
+
+        <!-- Button trigger modal 
+        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
+            Launch static backdrop modal
+        </button>-->
+
+        <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+            <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                <h5 class="modal-title" id="staticBackdropLabel">Connect to Exercise</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <form class="input-group" action="input">
+                        <span class="input-group-text">IP-Adresse</span>
+                        <input id="connectInput" class="form-control" type="text" value="ws://localhost:7300">
+                        <button id="connectStaticBtn" type="button" class="btn btn-outline-danger">Connect</button>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <form class="input-group" action="input">
+                        <select id="exerciseSelect" class="form-select" aria-label="Default select example" disabled>
+                            <option selected>Choose Exercise</option>
+                        </select>
+                        <button id="connectDynamicBtn" type="button" class="btn btn-outline-danger" disabled>Connect</button>
+                    </form>
+                </div>
+            </div>
+            </div>
+        </div>
+
+        <script src="../include/leaflet/leaflet.js"></script>
+        <script src="../include/bootstrap/js/bootstrap.js"></script>
+        <script type="module" src="./script.js"></script>
+    </body>
+</html>