wip

src/components/app.component.ts

@@ -21,7 +21,9 @@ export class AppComponent {
 
     constructor (
         private loginService: LoginService,
-    ) { }
+    ) {
+        this.providers = [this.providers[0]] // only keep GH for now
+    }
 
     async ngOnInit () {
         await this.loginService.ready$.toPromise()

src/components/configModal.component.pug

@@ -0,0 +1,40 @@
+.modal-body
+    .header(*ngIf='configService.activeConfig')
+        .d-flex.align-items-center.py-2.px-4
+            .me-auto
+                label Active config
+                .title {{configService.activeConfig.modified_at}}
+
+            button.btn.btn-semi.me-2((click)='configService.duplicateConfig()')
+                fa-icon([icon]='_copyIcon', [fixedWidth]='true')
+
+            button.btn.btn-semi((click)='deleteConfig()')
+                fa-icon([icon]='_deleteIcon', [fixedWidth]='true')
+
+        .d-flex.align-items-center.py-2.px-4(*ngIf='configService.activeVersion')
+            .me-auto App version:
+            div(ngbDropdown)
+                button.btn.btn-semi(ngbDropdownToggle) {{configService.activeVersion.version}}
+                div(ngbDropdownMenu)
+                    a(
+                        *ngFor='let version of versions',
+                        ngbDropdownItem,
+                        [class.active]='version == configService.activeVersion',
+                        (click)='selectVersion(version)'
+                    ) {{version.version}}
+
+    div(*ngIf='configService.configs.length > 1')
+        .dropdown-header All 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}}
+
+    .p-3
+        button.btn.btn-semi.w-100((click)='configService.createNewConfig()')
+            fa-icon([icon]='_addIcon', [fixedWidth]='true')
+            span New config

src/components/configModal.component.ts

@@ -0,0 +1,29 @@
+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'
+
+@Component({
+    selector: 'config-modal',
+    templateUrl: './configModal.component.pug',
+    // styleUrls: ['./settingsModal.component.scss'],
+})
+export class ConfigModalComponent {
+    _addIcon = faPlus
+
+    constructor (
+        private modalInstance: NgbActiveModal,
+        public appConnector: AppConnectorService,
+        public configService: ConfigService,
+    ) {
+    }
+
+    async ngOnInit () {
+    }
+
+    cancel () {
+        this.modalInstance.dismiss()
+    }
+
+}

src/components/main.component.pug

@@ -1,66 +1,14 @@
 .sidebar
     img.logo(src='{{_logo}}')
 
-    div(ngbDropdown, placement='bottom-right')
-        button.btn(ngbDropdownToggle)
-            fa-icon([icon]='_cogIcon', [fixedWidth]='true')
+    button.btn((click)='openConfig()')
+        fa-icon([icon]='_cogIcon', [fixedWidth]='true')
 
-        .config-menu(ngbDropdownMenu)
-            .header(*ngIf='getActiveConfig()')
-                .d-flex.align-items-center.py-2.px-4
-                    .me-auto
-                        label Active config
-                        .title {{getActiveConfig().modified_at}}
+    button.btn((click)='openSettings()')
+        fa-icon([icon]='_settingsIcon', [fixedWidth]='true')
 
-                    button.btn.btn-semi.me-2((click)='duplicateConfig()')
-                        fa-icon([icon]='_copyIcon', [fixedWidth]='true')
+    button.btn.mt-auto((click)='logout()')
+        fa-icon([icon]='_logoutIcon', [fixedWidth]='true')
 
-                    button.btn.btn-semi((click)='deleteConfig()')
-                        fa-icon([icon]='_deleteIcon', [fixedWidth]='true')
-
-                .d-flex.align-items-center.py-2.px-4(*ngIf='activeVersion')
-                    .me-auto App version:
-                    div(ngbDropdown)
-                        button.btn.btn-semi(ngbDropdownToggle) {{activeVersion.version}}
-                        div(ngbDropdownMenu)
-                            a(
-                                *ngFor='let version of versions',
-                                ngbDropdownItem,
-                                [class.active]='version == activeVersion',
-                                (click)='selectVersion(version)'
-                            ) {{version.version}}
-
-            div(*ngIf='configs.length > 1')
-                .dropdown-header All configs
-
-                ng-container(*ngFor='let config of configs')
-                    a(
-                        *ngIf='config !== getActiveConfig()',
-                        ngbDropdownItem,
-                        (click)='selectConfig(config)',
-                        href='#'
-                    ) Config modified at {{config.modified_at}}
-
-            .p-3
-                button.btn.btn-semi.w-100((click)='createNewConfig()')
-                    fa-icon([icon]='_addIcon', [fixedWidth]='true')
-                    span New config
-
-    div(ngbDropdown, placement='bottom-right')
-        button.btn(ngbDropdownToggle)
-            fa-icon([icon]='_connectionIcon', [fixedWidth]='true')
-
-        div(ngbDropdownMenu)
-            .form-check.form-switch
-                input.form-check-input(type='checkbox', ngModel='!!loginService.user.custom_connection_gateway')
-                label(class='form-check-label') Use custom connection gateway
-
-    div(ngbDropdown, placement='bottom-right')
-        button.btn(ngbDropdownToggle)
-            fa-icon([icon]='_userIcon', [fixedWidth]='true')
-
-        div(ngbDropdownMenu)
-            a(ngbDropdownItem, (click)='logout()', href='#') Logout
-
-.terminal([hidden]='!activeVersion')
+.terminal([hidden]='!showApp')
     iframe(#iframe)

src/components/main.component.ts

@@ -1,10 +1,15 @@
-import * as semverGT from 'semver/functions/gt'
 import { Component, ElementRef, ViewChild } from '@angular/core'
 import { HttpClient } from '@angular/common/http'
 import { AppConnectorService } from '../services/appConnector.service'
 
-import { faCog, faUser, faCopy, faTrash, faPlus, faPlug } from '@fortawesome/free-solid-svg-icons'
+import { faCog, faCopy, faTrash, 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'
+import { ConfigModalComponent } from './configModal.component'
+import { ConfigService } from '../services/config.service'
+import { combineLatest } from 'rxjs'
+import { Config, Version } from '../api'
 
 @Component({
     selector: 'main',
@@ -14,21 +19,22 @@ import { LoginService } from '../services/login.service'
 export class MainComponent {
     _logo = require('../assets/logo.svg')
     _cogIcon = faCog
-    _userIcon = faUser
+    _settingsIcon = faCog
+    _logoutIcon = faSignOutAlt
     _copyIcon = faCopy
     _addIcon = faPlus
     _deleteIcon = faTrash
-    _connectionIcon = faPlug
 
-    configs: any[] = []
-    versions: any[] = []
-    activeVersion?: any
+    showApp = false
+
     @ViewChild('iframe') iframe: ElementRef
 
     constructor (
-        private appConnector: AppConnectorService,
+        public appConnector: AppConnectorService,
         private http: HttpClient,
         public loginService: LoginService,
+        private ngbModal: NgbModal,
+        private config: ConfigService,
     ) {
         window.addEventListener('message', event => {
             if (event.data === 'request-connector') {
@@ -39,68 +45,47 @@ export class MainComponent {
     }
 
     async ngAfterViewInit () {
-        this.configs = await this.http.get('/api/1/configs').toPromise()
-        this.versions = await this.http.get('/api/1/versions').toPromise()
-
-        this.versions.sort((a, b) => semverGT(a, b))
-
-        if (!this.configs.length) {
-            await this.createNewConfig()
-        }
-
-        this.selectConfig(this.configs[0])
-    }
-
-    async createNewConfig () {
-        this.configs.push(await this.http.post('/api/1/configs', {
-            content: '{}',
-            last_used_with_version: this.versions[0].version,
-        }).toPromise())
-    }
-
-    async duplicateConfig () {
-        const copy = {...this.appConnector.config, pk: undefined}
-        this.configs.push(await this.http.post('/api/1/configs', copy).toPromise())
+        combineLatest(
+            this.config.activeConfig$,
+            this.config.activeVersion$
+        ).subscribe(([config, version]) => {
+            if (config && version) {
+                this.reloadApp(config, version)
+            }
+        })
+        this.config
+        await this.config.ready$.toPromise()
+        await this.config.selectDefaultConfig()
     }
 
     unloadApp () {
-        delete this.activeVersion
+        this.showApp = false
         this.iframe.nativeElement.src = 'about:blank'
     }
 
-    loadApp (version) {
+    async loadApp (config, version) {
+        this.showApp = true
         this.iframe.nativeElement.src = '/terminal'
-        this.activeVersion = version
+        await this.http.patch(`/api/1/configs/${config.id}`, {
+            last_used_with_version: version.version,
+        }).toPromise()
     }
 
-    getActiveConfig () {
-        return this.appConnector.config
-    }
-
-    selectVersion (version: any) {
+    reloadApp (config: Config, version: Version) {
         // TODO check config incompatibility
         this.unloadApp()
         setTimeout(() => {
-            this.appConnector.version = version
-            this.loadApp(version)
+            this.appConnector.setState(config, version)
+            this.loadApp(config, version)
         })
     }
 
-    async selectConfig (config: any) {
-        let matchingVersion = this.versions.find(x => x.version === config.last_used_with_version)
-        if (!matchingVersion) {
-            // TODO ask to upgrade
-            matchingVersion = this.versions[0]
-        }
+    async openConfig () {
+        await this.ngbModal.open(ConfigModalComponent).result
+    }
 
-        this.appConnector.config = config
-
-        const result = await this.http.patch(`/api/1/configs/${config.id}`, {
-            last_used_with_version: matchingVersion.version,
-        }).toPromise()
-        Object.assign(config, result)
-
-        this.selectVersion(matchingVersion)
+    async openSettings () {
+        await this.ngbModal.open(SettingsModalComponent).result
     }
 
     async logout () {

src/components/settingsModal.component.pug

@@ -0,0 +1,32 @@
+.modal-header
+    h5.modal-title Settings
+.modal-body
+    .mb-3
+        .form-check.form-switch
+            input.form-check-input(
+                type='checkbox',
+                [(ngModel)]='customGatewayEnabled'
+            )
+            label(class='form-check-label') Use custom connection gateway
+
+    .mb-3(*ngIf='customGatewayEnabled')
+        .form-floating
+            input.form-control(
+                type='text',
+                [(ngModel)]='user.custom_connection_gateway',
+                placeholder='wss://1.2.3.4'
+            )
+            label Gateway address
+
+    .mb-3(*ngIf='customGatewayEnabled')
+        .form-floating
+            input.form-control(
+                type='password',
+                [(ngModel)]='user.custom_connection_gateway_token',
+                placeholder='123'
+            )
+            label Gateway authentication token
+
+.modal-footer
+    button.btn.btn-primary((click)='apply()') Apply
+    button.btn.btn-secondary((click)='cancel()') Cancel

src/components/settingsModal.component.ts

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core'
+import { LoginService } from '../services/login.service'
+
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { User } from '../api'
+
+@Component({
+    selector: 'settings-modal',
+    templateUrl: './settingsModal.component.pug',
+    // styleUrls: ['./settingsModal.component.scss'],
+})
+export class SettingsModalComponent {
+    user: User
+    customGatewayEnabled = false
+
+    constructor (
+        private modalInstance: NgbActiveModal,
+        private loginService: LoginService,
+    ) {
+        this.user = { ...loginService.user }
+        this.customGatewayEnabled = !!this.user.custom_connection_gateway
+    }
+
+    async ngOnInit () {
+    }
+
+    async apply () {
+        Object.assign(this.loginService.user, this.user)
+        this.modalInstance.close()
+        await this.loginService.updateUser()
+    }
+
+    cancel () {
+        this.modalInstance.dismiss()
+    }
+}