wip

src/components/app.component.pug

@@ -1,15 +1,55 @@
 .sidebar
     img.logo(src='{{_logo}}')
 
-    div(ngbDropdown)
-        button.btn.btn-secondary(ngbDropdownToggle) Cfg
-        //) !{require('../icons/download-solid.svg')}
-        div(ngbDropdownMenu)
-            a(
-                *ngFor='let config of configs',
-                ngbDropdownItem,
-                (click)='selectConfig(config)'
-            ) Config modified at {{config.modified_at}}
+    div(ngbDropdown, placement='bottom-right')
+        button.btn.btn-secondary(ngbDropdownToggle)
+            fa-icon([icon]='_cogIcon', [fixedWidth]='true')
 
-.terminal([hidden]='!showApp')
+        .config-menu(ngbDropdownMenu)
+            .header(*ngIf='getActiveConfig()')
+                .dropdown-header Active config
+                .title {{getActiveConfig().modified_at}}
+                div(*ngIf='activeVersion')
+                    div App version:
+                    div(ngbDropdown)
+                        button.btn.btn-secondary(ngbDropdownToggle) {{activeVersion.version}}
+                        div(ngbDropdownMenu)
+                            a(
+                                *ngFor='let version of versions',
+                                ngbDropdownItem,
+                                [class.active]='version == activeVersion',
+                                (click)='selectVersion(version)'
+                            ) {{version.version}}
+
+                    .btn-toolbar
+                        button.btn.btn-light.w-50((click)='duplicateConfig()')
+                            fa-icon([icon]='_copyIcon', [fixedWidth]='true')
+                            span Duplicate
+
+                        button.btn.btn-light.w-50((click)='deleteConfig()')
+                            fa-icon([icon]='_deleteIcon', [fixedWidth]='true')
+                            span Delete
+
+            div(*ngIf='configs.length > 1')
+                .dropdown-header All configs
+
+                ng-container(*ngFor='let config of configs')
+                    a(
+                        *ngIf='config !== getActiveConfig()',
+                        ngbDropdownItem,
+                        (click)='selectConfig(config)'
+                    ) Config modified at {{config.modified_at}}
+
+            button.btn.btn-light.w-100((click)='createNewConfig()')
+                fa-icon([icon]='_addIcon', [fixedWidth]='true')
+                span New config
+
+    div(ngbDropdown, placement='bottom-right')
+        button.btn.btn-secondary(ngbDropdownToggle)
+            fa-icon([icon]='_userIcon', [fixedWidth]='true')
+
+        div(ngbDropdownMenu)
+            a(ngbDropdownItem, (click)='logout()') Logout
+
+.terminal([hidden]='!activeVersion')
     iframe(#iframe)

src/components/app.component.scss

@@ -32,3 +32,10 @@ iframe {
     height: 100%;
     border: none;
 }
+
+
+.config-menu {
+    .header {
+        border-bottom: 1px solid black;
+    }
+}

src/components/app.component.ts

@@ -1,7 +1,10 @@
+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 } from '@fortawesome/free-solid-svg-icons'
+
 @Component({
     selector: 'app',
     templateUrl: './app.component.pug',
@@ -9,8 +12,15 @@ import { AppConnectorService } from '../services/appConnector.service'
 })
 export class AppComponent {
     _logo = require('../assets/logo.svg')
-    showApp = false
+    _cogIcon = faCog
+    _userIcon = faUser
+    _copyIcon = faCopy
+    _addIcon = faPlus
+    _deleteIcon = faTrash
+
     configs: any[] = []
+    versions: any[] = []
+    activeVersion?: any
     @ViewChild('iframe') iframe: ElementRef
 
     constructor (
@@ -27,24 +37,69 @@ export class AppComponent {
 
     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())
+    }
+
     unloadApp () {
-        this.showApp = false
+        delete this.activeVersion
         this.iframe.nativeElement.src = 'about:blank'
     }
 
-    loadApp () {
-        this.iframe.nativeElement.src = '/terminal'
-        this.showApp = true
+    loadApp (version) {
+        this.iframe.nativeElement.src = `/terminal?${version.version}`
+        this.activeVersion = version
     }
 
-    selectConfig (config: any) {
-        this.appConnector.config = config
+    getActiveConfig () {
+        return this.appConnector.config
+    }
+
+    selectVersion (version: any) {
+        // TODO check config incompatibility
         this.unloadApp()
         setTimeout(() => {
-            this.loadApp()
+            this.loadApp(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]
+        }
+
+        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 logout () {
+        await this.http.post('/api/1/auth/logout', null).toPromise()
+    }
 }