weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Moved uikit to view

Browse Source
This commit is contained in:
dpassoni 2023-03-06 12:15:41 +01:00
parent 5fe125beff
commit 6a599a12a1
13 changed files with 186 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/app.js
View File

@ -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');

4
client/public/stylesheets/contextmenu.css
View File

@ -2,6 +2,10 @@
position: absolute;
}
.content #contextmenu {
position: relative;
}
.ol-contextmenu {
display: flex;
flex-direction: column;

15
client/public/stylesheets/layout.css
View File

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

9
client/routes/uikit.js Normal file
View File

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

3
client/views/connectionstatuspanel.ejs Normal file
View File

@ -0,0 +1,3 @@
<div id="connection-status-panel" class="ol-panel">
<h4 id="status-string"> Connected </h4>
</div>

9
client/views/contextmenu.ejs
View File

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

2
client/views/index.ejs
View File

@ -27,7 +27,7 @@
<%- include('contextmenu.ejs') %>
<%- include('unitcontrol.ejs') %>
<%- include('settings.ejs') %>
<%- include('navbar.ejs') %>
<%- include('mouseinfo.ejs') %>
<% /* %>

0
client/views/mouseinfo.ejs → client/views/mouseinfopanel.ejs
View File

73
client/views/navbar.ejs Normal file
View File

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

60
client/views/settings.ejs
View File

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

136
client/public/uikit.html → client/views/uikit.ejs
View File

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

35
client/views/unitcontrolpanel.ejs Normal file
View File

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

36
client/views/unitcontrol.ejs → client/views/unitinfopanel.ejs
View File

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