wip

src/components/configModal.component.pug

@@ -3,9 +3,11 @@
         .d-flex.align-items-center.py-2.px-4
             .me-auto
                 label Active config
-                .title {{configService.activeConfig.modified_at}}
+                .title
+                    fa-icon([icon]='_configIcon')
+                    span.ms-2 {{configService.activeConfig.created_at|date:"medium"}}
 
-            button.btn.btn-semi.me-2((click)='configService.duplicateConfig()')
+            button.btn.btn-semi.me-2((click)='configService.duplicateActiveConfig()')
                 fa-icon([icon]='_copyIcon', [fixedWidth]='true')
 
             button.btn.btn-semi((click)='deleteConfig()')
@@ -16,25 +18,26 @@
             div(ngbDropdown)
                 button.btn.btn-semi(ngbDropdownToggle) {{configService.activeVersion.version}}
                 div(ngbDropdownMenu)
-                    a(
-                        *ngFor='let version of versions',
+                    button(
+                        *ngFor='let version of configService.versions',
                         ngbDropdownItem,
                         [class.active]='version == configService.activeVersion',
                         (click)='selectVersion(version)'
                     ) {{version.version}}
 
-    div(*ngIf='configService.configs.length > 1')
-        .dropdown-header All configs
+    .px-4.pt-3(*ngIf='configService.configs.length > 1')
+        h5 Other configs
 
-        ng-container(*ngFor='let config of configService.configs')
-            a(
-                *ngIf='config !== configService.activeConfig',
-                ngbDropdownItem,
-                (click)='selectConfig(config)',
-                href='#'
-            ) Config modified at {{config.modified_at}}
+        .list-group.list-group-light
+            ng-container(*ngFor='let config of configService.configs')
+                button.list-group-item.list-group-item-action(
+                    *ngIf='config !== configService.activeConfig',
+                    (click)='selectConfig(config)'
+                )
+                    fa-icon([icon]='_configIcon')
+                    span Config created at {{config.created_at|date:"medium"}}
 
-    .p-3
-        button.btn.btn-semi.w-100((click)='configService.createNewConfig()')
+    .py-3.px-4
+        button.btn.btn-semi.w-100((click)='createNewConfig()')
             fa-icon([icon]='_addIcon', [fixedWidth]='true')
             span New config

src/components/configModal.component.ts

@@ -2,7 +2,8 @@ import { Component } from '@angular/core'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { AppConnectorService } from '../services/appConnector.service'
 import { ConfigService } from '../services/config.service'
-import { faPlus } from '@fortawesome/free-solid-svg-icons'
+import { faCopy, faFile, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons'
+import { Config, Version } from '../api'
 
 @Component({
     selector: 'config-modal',
@@ -11,6 +12,9 @@ import { faPlus } from '@fortawesome/free-solid-svg-icons'
 })
 export class ConfigModalComponent {
     _addIcon = faPlus
+    _copyIcon = faCopy
+    _deleteIcon = faTrash
+    _configIcon = faFile
 
     constructor (
         private modalInstance: NgbActiveModal,
@@ -26,4 +30,20 @@ export class ConfigModalComponent {
         this.modalInstance.dismiss()
     }
 
+    async createNewConfig () {
+        const config = await this.configService.createNewConfig()
+        await this.configService.selectConfig(config)
+        this.modalInstance.dismiss()
+    }
+
+    async selectConfig (config: Config) {
+        await this.configService.selectConfig(config)
+        this.modalInstance.dismiss()
+    }
+
+    async selectVersion (version: Version) {
+        await this.configService.selectVersion(version)
+        this.modalInstance.dismiss()
+    }
+
 }

src/components/home.component.pug

@@ -16,8 +16,8 @@
         .intro
             h1 Hey.
             div My name is Eugene and I've built a nice terminal app, #[em.ms-1 just for you].
-            div Crossplatform, local, SSH, serial - it's all there.
-            div Go on, try it out 👇
+            div Crossplatform, local, SSH, serial, Telnet - it's all there.
+            div Here's a demo 👇
 
         iframe(#iframe)
 

src/components/home.component.ts

@@ -103,7 +103,7 @@ export class HomeComponent {
 
     async ngAfterViewInit () {
         const versions = await this.http.get('/api/1/versions').toPromise()
-        versions.sort((a, b) => semverGT(a, b))
+        versions.sort((a, b) => semverGT(a.version, b.version))
         this.connector = new DemoConnector(this.iframe.nativeElement.contentWindow, versions[0])
         this.iframe.nativeElement.src = '/terminal'
     }

src/components/main.component.pug

@@ -1,13 +1,13 @@
 .sidebar
     img.logo(src='{{_logo}}')
 
-    button.btn((click)='openConfig()')
-        fa-icon([icon]='_cogIcon', [fixedWidth]='true')
+    button.btn.mt-auto((click)='openConfig()')
+        fa-icon([icon]='_configIcon', [fixedWidth]='true')
 
     button.btn((click)='openSettings()')
         fa-icon([icon]='_settingsIcon', [fixedWidth]='true')
 
-    button.btn.mt-auto((click)='logout()')
+    button.btn.mt-3((click)='logout()')
         fa-icon([icon]='_logoutIcon', [fixedWidth]='true')
 
 .terminal([hidden]='!showApp')

src/components/main.component.ts

@@ -2,7 +2,7 @@ import { Component, ElementRef, ViewChild } from '@angular/core'
 import { HttpClient } from '@angular/common/http'
 import { AppConnectorService } from '../services/appConnector.service'
 
-import { faCog, faCopy, faTrash, faPlus, faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
+import { faCog, faFile, faPlus, faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
 import { LoginService } from '../services/login.service'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { SettingsModalComponent } from './settingsModal.component'
@@ -19,12 +19,10 @@ import { Router } from '@angular/router'
 })
 export class MainComponent {
     _logo = require('../assets/logo.svg')
-    _cogIcon = faCog
     _settingsIcon = faCog
     _logoutIcon = faSignOutAlt
-    _copyIcon = faCopy
     _addIcon = faPlus
-    _deleteIcon = faTrash
+    _configIcon = faFile
 
     showApp = false
 

src/components/settingsModal.component.pug

@@ -1,5 +1,6 @@
 .modal-header
     h5.modal-title Settings
+
 .modal-body
     .mb-3
         .form-check.form-switch
@@ -27,6 +28,13 @@
             )
             label Gateway authentication token
 
+    div(*ngIf='appConnector.sockets.length')
+        h5 Active connections
+        .list-group.list-group-flush
+            .list-group-item(*ngFor='let socket of appConnector.sockets')
+                div {{socket.options.host}}:{{socket.options.port}}
+                .text-muted via {{socket.url}}
+
 .modal-footer
     button.btn.btn-primary((click)='apply()') Apply
     button.btn.btn-secondary((click)='cancel()') Cancel

src/components/settingsModal.component.ts

@@ -3,6 +3,7 @@ import { LoginService } from '../services/login.service'
 
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { User } from '../api'
+import { AppConnectorService } from '../services/appConnector.service'
 
 @Component({
     selector: 'settings-modal',
@@ -14,6 +15,7 @@ export class SettingsModalComponent {
     customGatewayEnabled = false
 
     constructor (
+        public appConnector: AppConnectorService,
         private modalInstance: NgbActiveModal,
         private loginService: LoginService,
     ) {