frontend FEATURE support creatin new top-level configuration data
diff --git a/frontend/config/config.component.html b/frontend/config/config.component.html
index 9b11e82..f9a7d95 100644
--- a/frontend/config/config.component.html
+++ b/frontend/config/config.component.html
@@ -71,10 +71,8 @@
</div>
<ng-container *ngIf="activeSession.dataVisibility!='none' && activeSession.data">
<div id="config-data">
- <ng-container *ngFor="let root of activeSession.data">
- <tree-view [node]="root"></tree-view>
- </ng-container>
- <!--<pre>{{activeSession.data | json}}</pre>-->
+ <tree-view [node]="root" [root]="root"></tree-view>
+ <!-- <pre *ngIf="root['schemaChildren']">{{root['schemaChildren'] | json}}</pre> -->
</div>
<div #modificationsStatus *ngIf="activeSession.modifications" class="modifications-status">
<div *ngIf="activeSession.modifications" class="msg-rounded" [style.width.px]="modificationsStatus.offsetWidth">
diff --git a/frontend/config/config.component.ts b/frontend/config/config.component.ts
index 2b0ad28..c916348 100644
--- a/frontend/config/config.component.ts
+++ b/frontend/config/config.component.ts
@@ -15,6 +15,7 @@
activeSession: Session;
err_msg = "";
loading = false;
+ root: {};
constructor(private sessionsService: SessionsService, private router: Router) {}
@@ -141,11 +142,13 @@
this.sessionsService.rpcGetSubtree(this.activeSession.key, all).subscribe(result => {
if (result['success']) {
this.activeSession.data = result['data'];
+ this.root['children'] = this.activeSession.data;
if (all) {
this.activeSession.dataVisibility = 'all';
} else {
this.activeSession.dataVisibility = 'root';
}
+ console.log(this.root);
} else {
this.activeSession.dataVisibility = 'none';
if ('error-msg' in result) {
@@ -201,9 +204,7 @@
cancelChanges() {
//console.log(JSON.stringify(this.activeSession.modifications))
- for (let iter of this.activeSession.data) {
- this.cancelChangesNode(iter);
- }
+ this.cancelChangesNode(this.root);
this.sessionsService.storeData();
//console.log(JSON.stringify(this.activeSession.modifications))
}
@@ -216,6 +217,11 @@
ngOnInit(): void {
this.sessionsService.checkSessions();
this.activeSession = this.sessionsService.getActiveSession();
+ this.root = {};
+ this.root['path'] = '/';
+ this.root['info'] = {};
+ this.root['info']['path'] = '/';
+ this.root['children'] = this.activeSession.data;
}
changeActiveSession(key: string) {
diff --git a/frontend/config/sessions.service.ts b/frontend/config/sessions.service.ts
index 1cfc51c..68fa136 100644
--- a/frontend/config/sessions.service.ts
+++ b/frontend/config/sessions.service.ts
@@ -215,8 +215,8 @@
let options = new RequestOptions({ search: params });
return this.http.get('/netopeer/session/rpcGet', options)
.map((resp: Response) => {
+ //console.log(resp);
let result = resp.json();
- //console.log(result);
if (result['success']) {
if (path.length) {
for (let iter of result['data']['children']) {
diff --git a/frontend/config/tree-indent.html b/frontend/config/tree-indent.html
index b68039d..2b279a5 100644
--- a/frontend/config/tree-indent.html
+++ b/frontend/config/tree-indent.html
@@ -10,28 +10,28 @@
(click)="deleteSubtree(node)"/>
</ng-container>
<ng-template #menu >
- <span *ngIf="node['info']['config']; else empty"
+ <span *ngIf="type == 'root' || node['info']['config']; else empty"
(mouseenter)="showEditMenu($event)"
(mouseleave)="hideEditMenu($event.currentTarget.lastElementChild)">
<img class="icon_action" src="assets/netopeer/icons/menu.svg"
onmouseover="this.src='assets/netopeer/icons/menu_active.svg'"
onmouseout="this.src='assets/netopeer/icons/menu.svg'"/>
<div class="editmenu msg-rounded">
- <div class="button_action" title="remove subtree {{node['path']}}"
+ <div *ngIf="type != 'root'" class="button_action" title="remove subtree {{node['path']}}"
onmouseover="this.firstElementChild.src='assets/netopeer/icons/close_active.svg'"
onmouseout="this.firstElementChild.src='assets/netopeer/icons/close.svg'"
(click)="deleteSubtree(node);hideEditMenu($event.currentTarget.parentElement);">
<img class="icon_action" src="assets/netopeer/icons/close.svg" />
delete
</div>
- <div class="button_action" title="create sibling data node(s)"
+ <div *ngIf="type != 'root'" class="button_action" title="create sibling data node(s)"
onmouseover="this.firstElementChild.src='assets/netopeer/icons/add_active.svg'"
onmouseout="this.firstElementChild.src='assets/netopeer/icons/add.svg'"
(click)="openCreatingDialog($event.currentTarget, node, true);hideEditMenu($event.currentTarget.parentElement);">
<img class="icon_action" src="assets/netopeer/icons/add.svg" />
create sibling
</div>
- <div *ngIf="node['info']['type'] != 4 && node['info']['type'] != 8"
+ <div *ngIf="type == 'root' || (node['info']['type'] != 4 && node['info']['type'] != 8)"
class="button_action" title="create children data node(s)"
onmouseover="this.firstElementChild.src='assets/netopeer/icons/add_active.svg'"
onmouseout="this.firstElementChild.src='assets/netopeer/icons/add.svg'"
@@ -56,5 +56,6 @@
<ng-template #nodes>
<img *ngIf="type == 'edit' || node['last']" class="indentation" src="assets/netopeer/icons/tree_last_branch.svg" />
<img *ngIf="type == 'current' && !node['last']" class="indentation" src="assets/netopeer/icons/tree_branch.svg" />
+ <img *ngIf="type == 'root'" class="indentation" src="assets/netopeer/icons/tree_root.svg" />
</ng-template>
</ng-container>
\ No newline at end of file
diff --git a/frontend/config/tree.component.html b/frontend/config/tree.component.html
index b41c612..d6fe16b 100644
--- a/frontend/config/tree.component.html
+++ b/frontend/config/tree.component.html
@@ -1,4 +1,42 @@
-<div class="subtree" *ngIf="node['info']['config'] || activeSession.statusVisibility" [class.status]="!node['info']['config']">
+<div *ngIf="node['path'] == '/'">
+ <!-- recursion - show children -->
+ <div class="node">
+ <tree-indent [node]="node" [indentation]="indentation" [type]="'root'"
+ (onOpenCreatingDialog)="openCreatingDialog($event.element, $event.node, $event.parent)">
+ </tree-indent>
+ </div>
+ <div class="children" *ngIf="node['children'] || node['newChildren']">
+ <ng-container *ngFor="let child of node['children']">
+ <tree-view [node]="child" [root]="root"></tree-view>
+ </ng-container>
+ <ng-container *ngFor="let child of newChildrenToShow(node)">
+ <tree-view [node]="child" [root]="root"></tree-view>
+ </ng-container>
+ </div>
+
+ <!-- create new child dialog -->
+ <div id="{{node['path']}}_createChildDialog" class="node_edit" *ngIf="node['creatingChild']" [class.dialog]="node['schemaChildren']"
+ treeScrollTo [node]="node">
+ <ng-container *ngIf="node['schemaChildren'].length; else nothingToCreate">
+ <tree-indent [node]="node" [indentation]="indentation" [type]="'edit'"
+ (onCloseCreatingDialog)="closeCreatingDialog($event)"></tree-indent>
+ <select #nodeSelect (change)="creatingDialogSelect(node, $event.target.value, $event.currentTarget)">
+ <option disabled selected value="-1" style="display:none"> </option>
+ <ng-container *ngFor="let schema of node['schemaChildren']; let i='index'">
+ <option value="{{i}}">{{schemaInfoName(node, schema)}}</option>
+ </ng-container>
+ </select>
+ <!-- <pre>{{node['schemaChildren'] | json}}</pre> -->
+ </ng-container>
+ <ng-template #nothingToCreate>
+ <div class="msg-failure msg-rounded">
+ <span class="msg-close" (click)="closeCreatingDialog(node);">x</span>There is no element to create at {{node['path']}}.
+ </div>
+ </ng-template>
+ </div>
+</div>
+<div class="subtree" *ngIf="node['path'] != '/' && (node['info']['config'] || activeSession.statusVisibility)"
+ [class.status]="!node['info']['config']">
<div class="node" [class.dirty]="node['dirty']" [class.deleted]="node['deleted']">
<tree-indent [node]="node" [indentation]="indentation"
@@ -99,10 +137,10 @@
</div>
<div class="children" *ngIf="(node['children'] || node['newChildren']) && !node['deleted']">
<ng-container *ngFor="let child of node['children']">
- <tree-view [node]="child" [indentation]="inheritIndentation(node)"></tree-view>
+ <tree-view [node]="child" [root]="root" [indentation]="inheritIndentation(node)"></tree-view>
</ng-container>
<ng-container *ngFor="let child of newChildrenToShow(node)">
- <tree-view [node]="child" [indentation]="inheritIndentation(node)"></tree-view>
+ <tree-view [node]="child" [root]="root" [indentation]="inheritIndentation(node)"></tree-view>
</ng-container>
</div>
diff --git a/frontend/config/tree.component.ts b/frontend/config/tree.component.ts
index c62fbf7..6c24302 100644
--- a/frontend/config/tree.component.ts
+++ b/frontend/config/tree.component.ts
@@ -91,16 +91,13 @@
export class TreeView implements OnInit {
@Input() node;
+ @Input() root;
@Input() indentation;
activeSession: Session;
- root: {};
constructor(private sessionsService: SessionsService, private changeDetector: ChangeDetectorRef) {}
ngOnInit(): void {
this.activeSession = this.sessionsService.getActiveSession();
- this.root = {};
- this.root['path'] = '/';
- this.root['children'] = this.activeSession.data;
}
inheritIndentation(node) {
@@ -255,7 +252,6 @@
nodeParent(node) {
let match = false;
let parent = null;
-
let children = this.activeSession.data;
let newChildren;
while (children || newChildren) {
@@ -280,6 +276,9 @@
break;
}
}
+ if (!match) {
+ children = null;
+ }
}
if (match) {
continue;
@@ -287,10 +286,12 @@
if (newChildren) {
for (let iter of newChildren) {
if (node['path'] == iter['path']) {
+ match = true;
children = null;
newChildren = null;
break;
} else if (node['path'].startsWith(iter['path'] + '/')) {
+ match = true;
parent = iter;
children = iter['children'];
if (('new' in node) && ('newChildren' in iter)) {
@@ -301,11 +302,13 @@
break;
}
}
+ if (!match) {
+ children = null;
+ }
}
}
if (!parent) {
parent = this.root;
- parent['children'] = this.activeSession.data;
}
return parent;
@@ -331,7 +334,11 @@
let newNode = {};
newNode['new'] = true;
newNode['info'] = node['schemaChildren'][index];
- newNode['path'] = node['path'] + '/' + this.schemaInfoName(node, newNode['info']);
+ if (node['path'] == '/') {
+ newNode['path'] = '/' + this.schemaInfoName(node, newNode['info']);
+ } else {
+ newNode['path'] = node['path'] + '/' + this.schemaInfoName(node, newNode['info']);
+ }
newNode['dirty'] = true;
if ('new' in node) {