NavRoute populated in UI.

index.html

@@ -32,7 +32,7 @@
             <!-- system name -->
             <div class="container-fluid">
                 <div class="row ms-1 me-1">
-                    <div id="currentSystem" class="col highlighted text-center">
+                    <div id="currentSystem" class="col system highlighted text-center">
                         <i id="currentSystemIcon" class="flaticon-solar-system hidden"></i>
                         <span id="currentSystemName">Unknown</span>
                     </div>
@@ -41,10 +41,12 @@
 
             <!-- high-value scans -->
             <div class="container-fluid" id="highValueScans">
+
             </div>
 
             <!-- low-value scans -->
             <div class="container-fluid" id="lowValueScans">
+
             </div>
 
             <!-- NAV ROUTE -->
@@ -66,6 +68,12 @@
                 </div>
             </div>
 
+            <!-- route -->
+            <div id="navRoute" class="container-fluid">
+
+            </div>
+
+            <!-- bottom border -->
             <div class="container-fluid">
                 <div class="row separator align-items-center">
                     <div class="col"><hr class="separator"></div>

src/@types/journalLines.d.ts

@@ -179,11 +179,35 @@ export interface completeFsdJump extends journalEntry<'FSDJump'> {
     JumpDist: number,
     FuelUsed: number,
     FuelLevel: number,
+    Factions?: faction[],
+    SystemFaction?: {Name: string},
+}
+
+export interface location extends journalEntry<'Location'> {
+    Docked: boolean,
+    Taxi: boolean,
+    Multicrew: boolean,
+    StarSystem: string,
+    SystemAddress: number,
+    StarPos: [number, number, number],
+    SystemAllegiance: string,
+    SystemEconomy: string,
+    SystemEconomy_Localised: string,
+    SystemSecondEconomy: string,
+    SystemSecondEconomy_Localised: string,
+    SystemGovernment: string,
+    SystemGovernment_Localised: string,
+    SystemSecurity: string,
+    SystemSecurity_Localised: string,
+    Population: number,
+    Body: string,
+    BodyID: string,
+    BodyType: string,
     Factions: faction[],
     SystemFaction: {Name: string},
 }
 
-interface navRouteSystem {
+export interface navRouteSystem {
     StarSystem: string,
     SystemAddress: number,
     StarPos: [number, number, number],

src/interfaces/JournalInterface.ts

@@ -241,16 +241,16 @@ export class JournalInterface extends EventEmitter {
             const route: navRoute = JSON.parse(routeFile)
 
             route.Route.forEach((system) => {
-                this.navRoute.push(new System(system.StarSystem, system.StarClass))
+                this.navRoute.push(new System(system))
             })
 
             log('NavRoute set.')
 
             if (init) {
                 this.emit('INIT_COMPLETE')
-            } else {
-                this.emit('SET_NAV_ROUTE')
             }
+
+            this.emit('SET_NAV_ROUTE')
         }
     }
 
@@ -264,7 +264,7 @@ export class JournalInterface extends EventEmitter {
         switch (line.event) {
             // CMDR jumped to new system, so update current location.
             case 'FSDJump': {
-                this.location = new System((line as completeFsdJump).StarSystem)
+                this.location = new System((line as completeFsdJump))
                 log(`FSD Jump detected, current location updated to ${this.location.name}.`)
                 this.emit('ENTERED_NEW_SYSTEM')
                 break

src/models/System.ts

@@ -1,15 +1,26 @@
+import type { completeFsdJump, location, navRouteSystem } from "../@types/journalLines"
 import { Body } from "./Body"
 
 export class System {
     name: string
-    starClass: string|null
+    SystemAddress?: number
+    StarClass?: string
     bodies: Body[]
 
-    constructor(StarSystem: string, StarClass: string|null = null) {
+    constructor(line: navRouteSystem|completeFsdJump|location|string) {
         // In future, this is where we preform EDSM lookup
 
-        this.name = StarSystem
-        this.starClass = StarClass
+        if (typeof line === 'string') {
+            this.name = line
+        } else {
+            this.name = line.StarSystem
+            this.SystemAddress = line.SystemAddress
+
+            if ('StarClass' in line) {
+                this.StarClass = line.StarClass
+            }
+        }
+
         this.bodies = []
     }
 }

src/models/UI.js

@@ -55,7 +55,7 @@ export class UI {
         row.appendChild($('<div>').addClass('col-1 system'))
 
         // name
-        const name = $('<div>').addClass(`col-2 text-left system ${chartedStyle}`)
+        const name = $('<div>').addClass(`col-2 text-start system ${chartedStyle}`)
         name.appendChild($('<i>')).addClass(`flaticon-${body.nameIcon()}`)
         name.appendChild($('<span>')).text(body.simpleName())
         row.appendChild(name)
@@ -94,7 +94,30 @@ export class UI {
         row.appendChild(info)
 
         // mapped value
-        const value = $('<div>').addClass(`col-2 text-right system ${chartedStyle}`)
+        // TODO APPRAISAL DATA
+        const value = $('<div>').addClass(`col-2 text-end system ${chartedStyle}`)
+        row.appendChild(value)
+
+        return row
+    }
+
+    /* --------------------------------------------------------------------- createSystemRow ---- */
+
+    static createSystemRow(system) {
+        const row = $('<div>').addClass('row ms-1 me-1')
+        row.attr('id', system.SystemAddress)
+        // TODO APPRAISAL DATA
+        const chartedStyle = 'charted'
+
+        // name
+        const name = $('<div>').addClass(`col system ${chartedStyle}`)
+        name.appendChild($('<i>').addClass('flaticon-solar-system'))
+        name.appendChild($('<span>').text(` ${system.name}`))
+        row.appendChild(name)
+
+        // mapped value
+        // TODO APPRAISAL DATA
+        const value = $('<div>').addClass(`col-2 text-end system ${chartedStyle}`)
         row.appendChild(value)
 
         return row

src/renderer.js

@@ -115,4 +115,18 @@ journal.on('BODY_SCANNED', (body, DSS) => {
 
 journal.on('SET_NAV_ROUTE', () => {
     // clear previous nav route, if any
+    $('#navRoute').children().remove()
+
+    if (journal.navRoute.length > 1) {
+        journal.navRoute.forEach((system) => {
+            // duplicate check
+            // CSS.escape is needed since CSS technically doesn't allow numeric IDs
+            const systemRow = $(`#${CSS.escape(system.SystemAddress)}`)
+
+            if (systemRow.length === 0) {
+                const row = UI.createSystemRow(system)
+                $('#navRoute').appendChild(row)
+            }
+        })
+    }
 })