wip

src/components/app.component.pug

@@ -0,0 +1,15 @@
+.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}}
+
+.terminal([hidden]='!showApp')
+    iframe(#iframe)

src/components/app.component.scss

@@ -0,0 +1,34 @@
+:host {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+}
+
+.sidebar {
+    width: 64px;
+    flex: none;
+
+    .logo {
+        width: 64px;
+        height: 64px;
+    }
+}
+
+.terminal {
+    flex: 1 1 0;
+    overflow: hidden;
+    position: relative;
+}
+
+iframe {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+}

src/components/app.component.ts

@@ -0,0 +1,50 @@
+import { Component, ElementRef, ViewChild } from '@angular/core'
+import { HttpClient } from '@angular/common/http'
+import { AppConnectorService } from '../services/appConnector.service'
+
+@Component({
+    selector: 'app',
+    templateUrl: './app.component.pug',
+    styleUrls: ['./app.component.scss'],
+})
+export class AppComponent {
+    _logo = require('../assets/logo.svg')
+    showApp = false
+    configs: any[] = []
+    @ViewChild('iframe') iframe: ElementRef
+
+    constructor (
+        private appConnector: AppConnectorService,
+        private http: HttpClient,
+    ) {
+        window.addEventListener('message', event => {
+            if (event.data === 'request-connector') {
+                this.iframe.nativeElement.contentWindow['__connector__'] = this.appConnector
+                this.iframe.nativeElement.contentWindow.postMessage('connector-ready', '*')
+            }
+        })
+    }
+
+    async ngAfterViewInit () {
+        this.configs = await this.http.get('/api/1/configs').toPromise()
+        this.selectConfig(this.configs[0])
+    }
+
+    unloadApp () {
+        this.showApp = false
+        this.iframe.nativeElement.src = 'about:blank'
+    }
+
+    loadApp () {
+        this.iframe.nativeElement.src = '/terminal'
+        this.showApp = true
+    }
+
+    selectConfig (config: any) {
+        this.appConnector.config = config
+        this.unloadApp()
+        setTimeout(() => {
+            this.loadApp()
+        })
+    }
+}