|
|
|
@ -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,6 +30,9 @@ 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];
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
@ -37,14 +45,120 @@ 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.api.get('/menu/items').subscribe(result => {
|
|
|
|
|
this.nodes = result.data;
|
|
|
|
|
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();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
@ -58,13 +172,6 @@ export class AppComponent implements OnInit {
|
|
|
|
|
toggleDark() {
|
|
|
|
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
|
|
|
|
|
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');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|