Add options menu and option to export to HTML

src/app/app.component.html

@@ -40,7 +40,10 @@
         <ion-item button slot="end" lines="full" (click)="logOut()">
           <ion-icon name="exit" slot="start"></ion-icon>
           <ion-label>Log out</ion-label>
-
+        </ion-item>
+        <ion-item button slot="end" lines="full" (click)="showOptions()">
+          <ion-icon name="list" slot="start"></ion-icon>
+          <ion-label>Options</ion-label>
         </ion-item>
       </ion-footer>
     </ion-menu>

src/app/app.component.ts

@@ -1,12 +1,13 @@
 import { Component, OnInit } from '@angular/core';
 
-import { AlertController, Platform } from '@ionic/angular';
+import {AlertController, Platform, PopoverController} from '@ionic/angular';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
 import { ApiService } from './service/api.service';
 import { Router } from '@angular/router';
 import { TREE_ACTIONS } from 'angular-tree-component';
 import { Observable } from 'rxjs';
+import {OptionPickerComponent} from './components/option-picker/option-picker.component';
 
 @Component({
   selector: 'app-root',
@@ -44,7 +45,8 @@ export class AppComponent implements OnInit {
     private statusBar: StatusBar,
     private api: ApiService,
     protected router: Router,
-    protected alerts: AlertController
+    protected alerts: AlertController,
+    protected popover: PopoverController,
   ) {
     this.initializeApp();
   }
@@ -53,6 +55,12 @@ export class AppComponent implements OnInit {
     this.reloadMenuItems().subscribe();
   }
 
+  showOptions() {
+    this.popover.create({
+      component: OptionPickerComponent,
+    }).then(popover => popover.present());
+  }
+
   async onTopLevelCreate() {
     const alert = await this.alerts.create({
       header: 'Create Page',

src/app/components/components.module.ts

@@ -10,11 +10,12 @@ import {FormsModule} from '@angular/forms';
 import {CodeComponent} from './editor/code/code.component';
 import {MonacoEditorModule} from 'ngx-monaco-editor';
 import {FilesComponent} from './editor/files/files.component';
+import {OptionPickerComponent} from './option-picker/option-picker.component';
 
 @NgModule({
-  declarations: [HostComponent, NodePickerComponent, DatabaseComponent, ColumnsComponent, CodeComponent, FilesComponent],
+  declarations: [HostComponent, NodePickerComponent, DatabaseComponent, ColumnsComponent, CodeComponent, FilesComponent, OptionPickerComponent],
   imports: [CommonModule, IonicModule, AgGridModule, FormsModule, MonacoEditorModule],
-  entryComponents: [HostComponent, NodePickerComponent, DatabaseComponent, ColumnsComponent, CodeComponent, FilesComponent],
+  entryComponents: [HostComponent, NodePickerComponent, DatabaseComponent, ColumnsComponent, CodeComponent, FilesComponent, OptionPickerComponent],
-  exports: [HostComponent, NodePickerComponent, DatabaseComponent, ColumnsComponent, CodeComponent, FilesComponent]
+  exports: [HostComponent, NodePickerComponent, DatabaseComponent, ColumnsComponent, CodeComponent, FilesComponent, OptionPickerComponent]
 })
 export class ComponentsModule {}

src/app/components/option-picker/option-picker.component.html

@@ -0,0 +1,6 @@
+<ion-list>
+  <ion-item button (click)="onSelect('html_export')">
+    <ion-icon slot="start" name="menu"></ion-icon>
+    <ion-label>Export to HTML Site</ion-label>
+  </ion-item>
+</ion-list>

src/app/components/option-picker/option-picker.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import {Router} from '@angular/router';
+import {ApiService} from '../../service/api.service';
+
+@Component({
+  selector: 'app-option-picker',
+  templateUrl: './option-picker.component.html',
+  styleUrls: ['./option-picker.component.scss'],
+})
+export class OptionPickerComponent implements OnInit {
+
+  constructor(
+      protected api: ApiService
+  ) { }
+
+  ngOnInit() {}
+
+  onSelect(key) {
+    if ( key === 'html_export' ) {
+      window.open(this.api._build_url('/data/export/html'), '_blank');
+    }
+  }
+}