fix broken file

src/app/app.component.ts

@@ -1,11 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 
-import { Platform } from '@ionic/angular';
+import { AlertController, Platform } 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';
 
 @Component({
   selector: 'app-root',
@@ -13,6 +14,10 @@ import { TREE_ACTIONS } from 'angular-tree-component';
   styleUrls: ['app.component.scss']
 })
 export class AppComponent implements OnInit {
+  public addChildTarget: any = false;
+  public deleteTarget: any = false;
+  public lastClickEvent: Array<any> = [];
+
   public nodes = [];
   public options = {
     actionMapping: {
@@ -25,10 +30,14 @@ export class AppComponent implements OnInit {
         click: (tree, node, $event) => {
           console.log('click', { tree, node, $event });
           TREE_ACTIONS.FOCUS(tree, node, $event);
+          this.addChildTarget = node;
+          this.deleteTarget = node;
+          this.lastClickEvent = [tree, node, $event];
         }
       }
     }
   };
+
   public darkMode = false;
 
   constructor(
@@ -36,14 +45,127 @@ export class AppComponent implements OnInit {
     private splashScreen: SplashScreen,
     private statusBar: StatusBar,
     private api: ApiService,
-    protected router: Router
+    protected router: Router,
+    protected alerts: AlertController
   ) {
     this.initializeApp();
   }
 
   ngOnInit() {
+    this.reloadMenuItems().subscribe();
+  }
+
+  async onTopLevelCreate() {
+    const alert = await this.alerts.create({
+      header: 'Create Page',
+      message: 'Please enter a new name for the page:',
+      cssClass: 'page-prompt',
+      inputs: [
+        {
+          name: 'name',
+          type: 'text',
+          placeholder: 'My Awesome Page'
+        }
+      ],
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          cssClass: 'secondary'
+        },
+        {
+          text: 'Create',
+          handler: async args => {
+            this.api.post('/page/create', args).subscribe(res => {
+              this.router.navigate(['/editor', { id: res.data.UUID }]);
+              this.reloadMenuItems().subscribe();
+            });
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+  async onChildCreate() {
+    const alert = await this.alerts.create({
+      header: 'Create Sub-Page',
+      message: 'Please enter a new name for the page:',
+      cssClass: 'page-prompt',
+      inputs: [
+        {
+          name: 'name',
+          type: 'text',
+          placeholder: 'My Awesome Page'
+        }
+      ],
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          cssClass: 'secondary'
+        },
+        {
+          text: 'Create',
+          handler: async args => {
+            args = {
+              name: args.name,
+              parentId: this.addChildTarget.data.id
+            };
+            this.api.post('/page/create-child', args).subscribe(res => {
+              this.reloadMenuItems().subscribe(() => {
+                TREE_ACTIONS.EXPAND(
+                  this.lastClickEvent[0],
+                  this.lastClickEvent[1],
+                  this.lastClickEvent[2]
+                );
+                this.router.navigate(['/editor', { id: res.data.UUID }]);
+              });
+            });
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+  async onDeleteClick() {
+    const alert = await this.alerts.create({
+      header: 'Delete page?',
+      message:
+        'Deleting this page will make its contents and  all of its children inaccessible. Are you sure you want to continue?',
+      buttons: [
+        {
+          text: 'Keep It',
+          role: 'cancel'
+        },
+        {
+          text: 'Delete It',
+          handler: async () => {
+            this.api
+              .post(`/page/delete/${this.deleteTarget.data.id}`)
+              .subscribe(res => {
+                this.reloadMenuItems().subscribe();
+                this.deleteTarget = false;
+                this.addChildTarget = false;
+              });
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+  reloadMenuItems() {
+    return new Observable(sub => {
       this.api.get('/menu/items').subscribe(result => {
         this.nodes = result.data;
+        sub.next();
+        sub.complete();
+      });
     });
   }
 
@@ -59,11 +181,5 @@ export class AppComponent implements OnInit {
     this.darkMode = !this.darkMode;
     console.log('toggel Dark mode');
     document.body.classList.toggle('dark', this.darkMode);
-
-    if (this.darkMode) {
-      console.log('Dark Mode On');
-    } else {
-      console.log('Dark Mode Off');
-    }
   }
 }