From 6a599a12a12765cc6289d7d7ddc4af087278c4be Mon Sep 17 00:00:00 2001
From: dpassoni <davide.passoni@positech.it>
Date: Mon, 6 Mar 2023 12:15:41 +0100
Subject: [PATCH] Moved uikit to view

---
 client/app.js                                 |   2 +
 client/public/stylesheets/contextmenu.css     |   4 +
 client/public/stylesheets/layout.css          |  15 ++
 client/routes/uikit.js                        |   9 ++
 client/views/connectionstatuspanel.ejs        |   3 +
 client/views/contextmenu.ejs                  |   9 ++
 client/views/index.ejs                        |   2 +-
 .../{mouseinfo.ejs => mouseinfopanel.ejs}     |   0
 client/views/navbar.ejs                       |  73 ++++++++++
 client/views/settings.ejs                     |  60 --------
 client/{public/uikit.html => views/uikit.ejs} | 136 +++++-------------
 client/views/unitcontrolpanel.ejs             |  35 +++++
 .../{unitcontrol.ejs => unitinfopanel.ejs}    |  36 -----
 13 files changed, 186 insertions(+), 198 deletions(-)
 create mode 100644 client/routes/uikit.js
 create mode 100644 client/views/connectionstatuspanel.ejs
 rename client/views/{mouseinfo.ejs => mouseinfopanel.ejs} (100%)
 create mode 100644 client/views/navbar.ejs
 delete mode 100644 client/views/settings.ejs
 rename client/{public/uikit.html => views/uikit.ejs} (93%)
 create mode 100644 client/views/unitcontrolpanel.ejs
 rename client/views/{unitcontrol.ejs => unitinfopanel.ejs} (51%)

diff --git a/client/app.js b/client/app.js
index 7e9f140e..ca21f2bf 100644
--- a/client/app.js
+++ b/client/app.js
@@ -4,6 +4,7 @@ var cookieParser = require('cookie-parser');
 var logger = require('morgan');
 
 var indexRouter = require('./routes/index');
+var uikitRouter = require('./routes/uikit');
 var usersRouter = require('./routes/users');
 
 var app = express();
@@ -16,6 +17,7 @@ app.use(express.static(path.join(__dirname, 'public')));
 
 app.use('/', indexRouter);
 app.use('/users', usersRouter);
+app.use('/uikit', uikitRouter);
 
 app.set('view engine', 'ejs');
 
diff --git a/client/public/stylesheets/contextmenu.css b/client/public/stylesheets/contextmenu.css
index 92508bc9..17cbd8de 100644
--- a/client/public/stylesheets/contextmenu.css
+++ b/client/public/stylesheets/contextmenu.css
@@ -2,6 +2,10 @@
     position: absolute;
 }
 
+.content #contextmenu {
+    position: relative;
+}
+
 .ol-contextmenu {
     display: flex;
     flex-direction: column;
diff --git a/client/public/stylesheets/layout.css b/client/public/stylesheets/layout.css
index 4a617991..0bb40f8b 100644
--- a/client/public/stylesheets/layout.css
+++ b/client/public/stylesheets/layout.css
@@ -36,6 +36,11 @@ body {
 	z-index: 1000;
 }
 
+.content #unit-info-panel {
+	position: static;
+	margin: 50px;
+}
+
 #settings-panel {
 	position: absolute;
 	left: 10px;
@@ -57,6 +62,10 @@ body {
 	z-index: 1000;
 }
 
+.content #unit-control-panel {
+	position: static;
+}
+
 #connection-status-panel {
 	position: absolute;
 	height: 30px;
@@ -75,6 +84,12 @@ body {
 	z-index: 1000;
 }
 
+.content #mouse-info-panel {
+	margin-bottom: 100px;
+	position: static;
+}
+
+
 #log-panel {
 	position: absolute;
 	height: 200px;
diff --git a/client/routes/uikit.js b/client/routes/uikit.js
new file mode 100644
index 00000000..d9d4cb46
--- /dev/null
+++ b/client/routes/uikit.js
@@ -0,0 +1,9 @@
+var express = require('express');
+var router = express.Router();
+
+/* GET home page. */
+router.get('/', function (req, res, next) {
+  res.render('uikit', { title: 'Express' });
+});
+
+module.exports = router;
diff --git a/client/views/connectionstatuspanel.ejs b/client/views/connectionstatuspanel.ejs
new file mode 100644
index 00000000..82e47961
--- /dev/null
+++ b/client/views/connectionstatuspanel.ejs
@@ -0,0 +1,3 @@
+<div id="connection-status-panel" class="ol-panel">
+    <h4 id="status-string"> Connected </h4>
+</div>
\ No newline at end of file
diff --git a/client/views/contextmenu.ejs b/client/views/contextmenu.ejs
index cb9864db..2997ad88 100644
--- a/client/views/contextmenu.ejs
+++ b/client/views/contextmenu.ejs
@@ -6,5 +6,14 @@
         </div>
     </div>
     <ul id="list" class="ol-panel ol-scroll">
+        <li><button>Option A</button></li>
+        <li><button>Option B</button></li>
+        <li><button>Option C</button></li>
+        <li><button>Option D</button></li>
+        <li><button>Option D</button></li>
+        <li><button>Option D</button></li>
+        <li><button>Option D</button></li>
+        <li><button>Option D</button></li>
+        <li><button>Option D</button></li>
     </ul>
 </div>
\ No newline at end of file
diff --git a/client/views/index.ejs b/client/views/index.ejs
index f601da0e..a6ad860b 100644
--- a/client/views/index.ejs
+++ b/client/views/index.ejs
@@ -27,7 +27,7 @@
 
   <%- include('contextmenu.ejs') %>
   <%- include('unitcontrol.ejs') %>
-  <%- include('settings.ejs') %>
+  <%- include('navbar.ejs') %>
   <%- include('mouseinfo.ejs') %>
   
   <% /* %>
diff --git a/client/views/mouseinfo.ejs b/client/views/mouseinfopanel.ejs
similarity index 100%
rename from client/views/mouseinfo.ejs
rename to client/views/mouseinfopanel.ejs
diff --git a/client/views/navbar.ejs b/client/views/navbar.ejs
new file mode 100644
index 00000000..06b70fca
--- /dev/null
+++ b/client/views/navbar.ejs
@@ -0,0 +1,73 @@
+<nav id="primary-toolbar" class="ol-panel">
+    <div id="app-icon">
+        (I)
+    </div>
+    <div id="map-type" class="ol-select">
+        <div class="ol-select-value">ArcGIS Satellite</div>
+        <div class="ol-select-options">
+            <div>
+                <button>ArcGIS Satellite</button>
+            </div>
+            <div>
+                <button>USGS Topographic</button>
+            </div>
+            <div>
+                <button>OpenStreet Map</button>
+            </div>
+            <div>
+                <button>OPENVKarte</button>
+            </div>
+            <div>
+                <button>ESRI.Delorme</button>
+            </div>
+            <div>
+                <button>CyclOSM</button>
+            </div>
+        </div>
+    </div>
+
+    <div class="ol-select">
+        <div class="ol-select-value">Caucasus</div>
+        <div class="ol-select-options">
+            <div>
+                <button>Caucasus</button>
+            </div>
+            <div>
+                <button>Nevada</button>
+            </div>
+            <div>
+                <button>Syria</button>
+            </div>
+        </div>
+    </div>
+    
+    <div class="ol-group">
+        <button>A</button>
+        <button>B</button>
+        <button>C</button>
+    </div>
+
+    <div class="ol-group ol-group-checkbox">
+
+        <div class="ol-checkbox">
+            <div class="ol-checkbox-input">
+                <input id="checkbox-1" type="checkbox" />
+            </div>
+            <label for="checkbox-1">My label</label>
+        </div>
+
+        <div class="ol-checkbox">
+            <div class="ol-checkbox-input">
+                <input id="checkbox-2" type="checkbox" />
+            </div>
+            <label for="checkbox-2">My label</label>
+        </div>
+
+        <div class="ol-checkbox">
+            <div class="ol-checkbox-input">
+                <input id="checkbox-3" type="checkbox" />
+            </div>
+            <label for="checkbox-3">My label</label>
+        </div>
+    </div>
+</nav>
\ No newline at end of file
diff --git a/client/views/settings.ejs b/client/views/settings.ejs
deleted file mode 100644
index 28de450d..00000000
--- a/client/views/settings.ejs
+++ /dev/null
@@ -1,60 +0,0 @@
-<div id="settings-panel" class="ol-panel" >
-    <nav>
-        <div class="ol-select">
-            <div id="options" class="ol-select-value icon"><img src="images/icon.png" class="main-logo"></img></div>
-            <ul class="ol-select-options">
-                <li>
-                    <div class="version-control">
-                        <img src="images/icon.png" class="main-logo">
-                        <div>
-                            <h2>DCS Olympus</h2>
-                            <div>Version 0.1.0</div>
-                        </div>
-                    </div>
-                </li>
-                <li><button>Preferences</button></li>
-                <li><button>Help and support</button></li>
-                <li><button>GitHub link</button></li>
-                <li class="hr"></li>
-                <li><button>Restart connection</button></li>
-                <li><button>Collapse to taskbar</button></li>
-                <li><button>Exit Oympus</button></li>
-            </ul>
-        </div>
-    </nav>
-    
-    <nav>
-        <div class="ol-select">
-            <div id="map-surce" class="ol-select-value">Map source</div>
-            <ul class="ol-select-options">
-            </ul>
-        </div>
-    </nav>
-
-    <nav>
-        <div class="ol-select">
-            <div id="options" class="ol-select-value">Options</div>
-            <ul class="ol-select-options">
-                <li><input type="checkbox">Auto scale units</li>
-                <li><input type="checkbox">Large text mode</li>
-                <li class="hr"></li>
-                <li><input type="checkbox">Hide name unitl hover</li>
-                <li><input type="checkbox">View BLUE BULLSEYE</li>
-                <li><input type="checkbox">View RED BULLSEYE</li>
-            </ul>
-        </div>
-    </nav>
-
-    <button>Aircraft</button>
-    <button>Ground</button>
-    <button>SAM</button>
-    <button>Navy</button>
-
-    <input type="checkbox" checked><div>View BLUEFOR</div>
-    <input type="checkbox" checked><div>View REDFOR</div>
-    <input type="checkbox" checked><div>View NEUTRAL</div>
-</div>
-
-<div id="connection-status-panel" class="ol-panel">
-    <h4 id="status-string"> Connected </h4>
-</div>
\ No newline at end of file
diff --git a/client/public/uikit.html b/client/views/uikit.ejs
similarity index 93%
rename from client/public/uikit.html
rename to client/views/uikit.ejs
index 063ab078..3df14546 100644
--- a/client/public/uikit.html
+++ b/client/views/uikit.ejs
@@ -17,6 +17,8 @@
                 <div class="section-header">Typeography</div>
                 <div class="section-header">Navbar</div>
                 <div class="section-header">Context menu</div>
+                <div class="section-header">Unit control panel</div>
+                <div class="section-header">Mouse info panel</div>
                 <div class="section-header">Buttons</div>
                 <div class="section-header">Ground Units</div>
                 <div class="section-header">Planes</div>
@@ -75,83 +77,7 @@
                     <div class="content-body">
 
                         <div class="example">
-                            
-                            <nav id="primary-toolbar" class="ol-panel">
-                                <div id="app-icon">
-                                    (I)
-                                </div>
-                                <div id="map-type" class="ol-select">
-                                    <div class="ol-select-value">ArcGIS Satellite</div>
-                                    <div class="ol-select-options">
-                                        <div>
-                                            <button>ArcGIS Satellite</button>
-                                        </div>
-                                        <div>
-                                            <button>USGS Topographic</button>
-                                        </div>
-                                        <div>
-                                            <button>OpenStreet Map</button>
-                                        </div>
-                                        <div>
-                                            <button>OPENVKarte</button>
-                                        </div>
-                                        <div>
-                                            <button>ESRI.Delorme</button>
-                                        </div>
-                                        <div>
-                                            <button>CyclOSM</button>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <div class="ol-select">
-                                    <div class="ol-select-value">Caucasus</div>
-                                    <div class="ol-select-options">
-                                        <div>
-                                            <button>Caucasus</button>
-                                        </div>
-                                        <div>
-                                            <button>Nevada</button>
-                                        </div>
-                                        <div>
-                                            <button>Syria</button>
-                                        </div>
-                                    </div>
-                                </div>
-                                
-                                <div class="ol-group">
-                                    <button>A</button>
-                                    <button>B</button>
-                                    <button>C</button>
-                                </div>
-
-                                <div class="ol-group ol-group-checkbox">
-
-                                    <div class="ol-checkbox">
-                                        <div class="ol-checkbox-input">
-                                            <input id="checkbox-1" type="checkbox" />
-                                        </div>
-                                        <label for="checkbox-1">My label</label>
-                                    </div>
-
-                                    <div class="ol-checkbox">
-                                        <div class="ol-checkbox-input">
-                                            <input id="checkbox-2" type="checkbox" />
-                                        </div>
-                                        <label for="checkbox-2">My label</label>
-                                    </div>
-
-                                    <div class="ol-checkbox">
-                                        <div class="ol-checkbox-input">
-                                            <input id="checkbox-3" type="checkbox" />
-                                        </div>
-                                        <label for="checkbox-3">My label</label>
-                                    </div>
-
-                                </div>
-
-                            </nav>
-                            
+                            <%- include('navbar.ejs') %>   
                         </div>
 
                     </div>
@@ -165,33 +91,41 @@
                 <div class="content">
 
                     <div class="content-header">Context menu</div>
+                    <div class="content-body">
+                        <div class="example">
+                            <%- include('contextmenu.ejs') %>  
+                        </div>
+                    </div>
+                </div>
+
+            </section>
+
+            <section>
+
+                <div class="content">
+
+                    <div class="content-header">Primary nav</div>
                     <div class="content-body">
 
                         <div class="example">
-                            
-                            <div class="ol-contextmenu" style="position: relative; left: 0px; top:0px;">
-                                <div class="ol-panel">
-                                    <div> Title </div>
-                                    <div> 
-                                        <label class="toggle">
-                                        <input type="checkbox">
-                                        <span class="slider"></span>
-                                      </label>
-                                    </div>
-                                </div>
-                                <ul id="list" class="ol-panel ol-scroll">
-                                    <li><button>Option 1</button></li>
-                                    <li><button>Option 2</button></li>
-                                    <li><button>Option 3</button></li>
-                                    <li><button>Option 4</button></li>
-                                    <li><button>Option 5</button></li>
-                                    <li><button>Option 6</button></li>
-                                    <li><button>Option 7</button></li>
-                                    <li><button>Option 8</button></li>
-                                    <li><button>Option 9</button></li>
-                                </ul>
-                            </div>
-                            
+                            <%- include('unitcontrolpanel.ejs') %>   
+                        </div>
+
+                    </div>
+        
+                </div>
+
+            </section>
+
+            <section>
+
+                <div class="content">
+
+                    <div class="content-header">Primary nav</div>
+                    <div class="content-body">
+
+                        <div class="example">
+                            <%- include('mouseinfopanel.ejs') %>   
                         </div>
 
                     </div>
diff --git a/client/views/unitcontrolpanel.ejs b/client/views/unitcontrolpanel.ejs
new file mode 100644
index 00000000..36fd7324
--- /dev/null
+++ b/client/views/unitcontrolpanel.ejs
@@ -0,0 +1,35 @@
+<div class="ol-panel" id="unit-control-panel">
+    <h2>Selected units</h2>
+    <div id="selected-units-container" class="ol-scroll">
+        <!-- This is where all the unit selection buttons will be shown-->
+    </div>
+
+    <h3>Controls</h3>
+    <div id="flight-controls-buttons-container">
+        <div class="slider-container flight-control-slider" id="altitude-slider">
+            <div class="flight-control-title">Altitude</div>
+            <div class="flight-control-value" id="value"></div>
+            <input type="range" min="1" max="100" value="50" class="slider">
+        </div>
+        <div class="slider-container flight-control-slider" id="airspeed-slider">
+            <div class="flight-control-title">Speed</div>
+            <div class="flight-control-value" id="value"></div>
+            <input type="range" min="1" max="100" value="50" class="slider">
+        </div>
+    </div>
+
+    <h3>Formation</h3>
+    <div id="formation-buttons-container">
+         <!-- This is where all the formation control buttons will be shown -->
+    </div>
+
+    <h3>Rules of engagement</h3>
+    <div id="roe-buttons-container">
+         <!-- This is where the roe buttons will be shown -->
+    </div>
+
+    <h3>Reaction to threat</h3>
+    <div id="reaction-to-threat-buttons-container">
+         <!-- This is where the reaction to threat buttons will be shown -->
+    </div>
+</div>
diff --git a/client/views/unitcontrol.ejs b/client/views/unitinfopanel.ejs
similarity index 51%
rename from client/views/unitcontrol.ejs
rename to client/views/unitinfopanel.ejs
index 5aa18176..0fa4849e 100644
--- a/client/views/unitcontrol.ejs
+++ b/client/views/unitinfopanel.ejs
@@ -1,39 +1,3 @@
-<div class="ol-panel" id="unit-control-panel">
-    <h2>Selected units</h2>
-    <div id="selected-units-container" class="ol-scroll">
-        <!-- This is where all the unit selection buttons will be shown-->
-    </div>
-
-    <h3>Controls</h3>
-    <div id="flight-controls-buttons-container">
-        <div class="slider-container flight-control-slider" id="altitude-slider">
-            <div class="flight-control-title">Altitude</div>
-            <div class="flight-control-value" id="value"></div>
-            <input type="range" min="1" max="100" value="50" class="slider">
-        </div>
-        <div class="slider-container flight-control-slider" id="airspeed-slider">
-            <div class="flight-control-title">Speed</div>
-            <div class="flight-control-value" id="value"></div>
-            <input type="range" min="1" max="100" value="50" class="slider">
-        </div>
-    </div>
-
-    <h3>Formation</h3>
-    <div id="formation-buttons-container">
-         <!-- This is where all the formation control buttons will be shown -->
-    </div>
-
-    <h3>Rules of engagement</h3>
-    <div id="roe-buttons-container">
-         <!-- This is where the roe buttons will be shown -->
-    </div>
-
-    <h3>Reaction to threat</h3>
-    <div id="reaction-to-threat-buttons-container">
-         <!-- This is where the reaction to threat buttons will be shown -->
-    </div>
-</div>
-
 <div id="unit-info-panel" class="ol-panel" >
     <div class="ol-panel-board">
         <div id="general" class="panel-section">