From 665fdc91a82537dd6d63f2cb9a44b42826e3e870 Mon Sep 17 00:00:00 2001
From: garrettmills <garrett@garrettmills.dev>
Date: Sun, 9 Feb 2020 06:08:25 -0600
Subject: [PATCH] Add options menu and option to export to HTML

---
 src/app/app.component.html                    |  5 +++-
 src/app/app.component.ts                      | 12 ++++++++--
 src/app/components/components.module.ts       |  7 +++---
 .../option-picker.component.html              |  6 +++++
 .../option-picker.component.scss              |  0
 .../option-picker/option-picker.component.ts  | 23 +++++++++++++++++++
 6 files changed, 47 insertions(+), 6 deletions(-)
 create mode 100644 src/app/components/option-picker/option-picker.component.html
 create mode 100644 src/app/components/option-picker/option-picker.component.scss
 create mode 100644 src/app/components/option-picker/option-picker.component.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index efa5ef8..d0110b8 100644
--- a/src/app/app.component.html
+++ b/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>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7f5a4ac..f949780 100644
--- a/src/app/app.component.ts
+++ b/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',
diff --git a/src/app/components/components.module.ts b/src/app/components/components.module.ts
index 326421f..f88cec1 100644
--- a/src/app/components/components.module.ts
+++ b/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],
-  exports: [HostComponent, NodePickerComponent, DatabaseComponent, ColumnsComponent, CodeComponent, FilesComponent]
+  entryComponents: [HostComponent, NodePickerComponent, DatabaseComponent, ColumnsComponent, CodeComponent, FilesComponent, OptionPickerComponent],
+  exports: [HostComponent, NodePickerComponent, DatabaseComponent, ColumnsComponent, CodeComponent, FilesComponent, OptionPickerComponent]
 })
 export class ComponentsModule {}
diff --git a/src/app/components/option-picker/option-picker.component.html b/src/app/components/option-picker/option-picker.component.html
new file mode 100644
index 0000000..6441c67
--- /dev/null
+++ b/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>
diff --git a/src/app/components/option-picker/option-picker.component.scss b/src/app/components/option-picker/option-picker.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/option-picker/option-picker.component.ts b/src/app/components/option-picker/option-picker.component.ts
new file mode 100644
index 0000000..85b1925
--- /dev/null
+++ b/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');
+    }
+  }
+}