Merge pull request #143 from Pax1601/76-add-configuration-file-for-server-properties

Added configuration file to set address and port

client/app.js

@@ -2,6 +2,7 @@ var express = require('express');
 var path = require('path');
 var cookieParser = require('cookie-parser');
 var logger = require('morgan');
+var fs = require('fs');
 
 var indexRouter = require('./routes/index');
 var uikitRouter = require('./routes/uikit');
@@ -21,12 +22,14 @@ app.use('/uikit', uikitRouter);
 
 app.set('view engine', 'ejs');
 
+let rawdata = fs.readFileSync('../olympus.json');
+let config = JSON.parse(rawdata);
+app.get('/config', (req, res) => res.send(config));
+
 module.exports = app;
 
 const DemoDataGenerator = require('./demo.js');
-
 var demoDataGenerator = new DemoDataGenerator(10);
-
 app.get('/demo/units', (req, res) => demoDataGenerator.units(req, res));
 app.get('/demo/logs', (req, res) => demoDataGenerator.logs(req, res));
 app.get('/demo/bullseyes', (req, res) => demoDataGenerator.bullseyes(req, res));

client/package.json

@@ -2,7 +2,7 @@
   "name": "DCSOlympus",
   "node-main": "./bin/www",
   "main": "http://localhost:3000",
-  "version": "0.1.0-alpha",
+  "version": "0.1.1-alpha",
   "private": true,
   "scripts": {
     "copy": "copy .\\node_modules\\leaflet\\dist\\leaflet.css .\\public\\stylesheets\\leaflet.css",

client/src/index.ts

@@ -9,7 +9,7 @@ import { AIC } from "./aic/aic";
 import { ATC } from "./atc/atc";
 import { FeatureSwitches } from "./featureswitches";
 import { LogPanel } from "./panels/logpanel";
-import { getAirbases, getBullseye as getBullseyes, getMission, getUnits, toggleDemoEnabled } from "./server/server";
+import { getAirbases, getBullseye as getBullseyes, getConfig, getMission, getUnits, setAddress, toggleDemoEnabled } from "./server/server";
 import { UnitDataTable } from "./units/unitdatatable";
 
 var map: Map;
@@ -69,16 +69,33 @@ function setup() {
     /* Setup event handlers */
     setupEvents();
 
-    /* On the first connection, force request of full data */
-    getAirbases((data: AirbasesData) => getMissionData()?.update(data));
-    getBullseyes((data: BullseyesData) => getMissionData()?.update(data));
-    getMission((data: any) => {getMissionData()?.update(data)});
-    getUnits((data: UnitsData) => getUnitsManager()?.update(data), true /* Does a full refresh */);
-
-    /* Start periodically requesting updates */
-    startPeriodicUpdate();
+    getConfig(readConfig)
 }
 
+function readConfig(config: any)
+{
+    if (config && config["server"] != undefined && config["server"]["address"] != undefined && config["server"]["port"] != undefined)
+    {
+        const address = config["server"]["address"];
+        const port = config["server"]["port"];
+        if ((typeof address === 'string' || address instanceof String) && typeof port == 'number')
+        {
+            setAddress(<string>address, <number>port);
+        } 
+
+        /* On the first connection, force request of full data */
+        getAirbases((data: AirbasesData) => getMissionData()?.update(data));
+        getBullseyes((data: BullseyesData) => getMissionData()?.update(data));
+        getMission((data: any) => {getMissionData()?.update(data)});
+        getUnits((data: UnitsData) => getUnitsManager()?.update(data), true /* Does a full refresh */);
+
+        /* Start periodically requesting updates */
+        startPeriodicUpdate();
+    }
+    else {
+        throw new Error('Could not read configuration file!');
+    }    
+}
 
 function startPeriodicUpdate() {
     requestUpdate();

client/src/panels/unitcontrolpanel.ts

@@ -87,7 +87,7 @@ export class UnitControlPanel extends Panel {
                 }
 
                 var button = document.createElement("button");
-                var callsign = aircraftDatabase.getByName(unit.getBaseData().unitName)?.label || "";
+                var callsign = unit.getBaseData().unitName || "";
 
                 button.innerText = unit.getBaseData().unitName;
                 button.setAttribute("data-short-label", database?.getByName(unit.getBaseData().name)?.shortLabel || "");

client/src/server/server.ts

@@ -2,9 +2,8 @@ import * as L from 'leaflet'
 import { setConnected } from '..';
 import { SpawnOptions } from '../controls/mapcontextmenu';
 
-/* Edit here to change server address */
-const REST_ADDRESS = "http://localhost:30000/olympus";
-const DEMO_ADDRESS = "http://localhost:3000/demo";
+var REST_ADDRESS = "http://localhost:30000/olympus";
+var DEMO_ADDRESS = window.location.href + "demo";
 const UNITS_URI = "units";
 const LOGS_URI = "logs";
 const AIRBASES_URI = "airbases";
@@ -45,6 +44,25 @@ export function POST(request: object, callback: CallableFunction){
     xhr.send(JSON.stringify(request));
 }
 
+export function getConfig(callback: CallableFunction) {
+    var xmlHttp = new XMLHttpRequest();
+    xmlHttp.open("GET", window.location.href + "config", true);
+    xmlHttp.onload = function (e) {
+        var data = JSON.parse(xmlHttp.responseText);
+        callback(data);
+        lastUpdateTime = parseInt(data.time);
+    };
+    xmlHttp.onerror = function () {
+        console.error("An error occurred during the XMLHttpRequest, could not retrieve configuration file");
+    };
+    xmlHttp.send(null);
+}
+
+export function setAddress(address: string, port: number) {
+    REST_ADDRESS = `http://${address}:${port}/olympus`
+    console.log(`Setting REST address to ${REST_ADDRESS}`)
+}
+
 export function getAirbases(callback: CallableFunction) {
     GET(callback, AIRBASES_URI);
 }

client/src/units/unit.ts

@@ -573,6 +573,15 @@ export class GroundUnit extends Unit {
         super(ID, data);
     }
 
+    getMarkerHTML() {
+        var role = groundUnitsDatabase.getByName(this.getBaseData().name)?.loadouts[0].roles[0];
+        return  `<div class="unit" data-object="unit-${this.getMarkerCategory()}" data-coalition="${this.getMissionData().coalition}">
+                    <div class="unit-selected-spotlight"></div>
+                    <div class="unit-marker"></div>
+                    <div class="unit-short-label">${role?.substring(0, 1)?.toUpperCase() || ""}</div>
+                </div>`
+    }
+
     getMarkerCategory()
     {
         // TODO this is very messy

client/views/index.ejs

@@ -10,13 +10,13 @@
   <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600;700;800&display=swap" rel="stylesheet"> 
 
   <!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z4L2TC3YX0"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-  gtag('config', 'G-Z4L2TC3YX0');
-</script>
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Z4L2TC3YX0"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', 'G-Z4L2TC3YX0');
+  </script>
 
 </head>
 

client/views/navbar.ejs

@@ -7,7 +7,7 @@
         <div class="ol-select-options">
             <div id="olympus-toolbar-summary">
                 <h3>Olympus</h3>
-                <div class="accent-green app-version-number">v0.1.0</div>
+                <div class="accent-green app-version-number">v0.1.1</div>
             </div>
             <div>
                 <a href="https://www.discord.com" target="_blank">Discord</a>