implemented editable help

src/app/help/help.component.html

@@ -1,14 +1,25 @@
-<h3>Help</h3>
+<h3>Help
+  <span *ngIf="login.isLevel.dev" class="rb-ic rb-ic-edit clickable space-left" (click)="edit = true"></span>
+</h3>
 
-<ng-container [ngSwitch]="route">
- <p *ngSwitchCase="'/'">Please log in for further access. If you do not have an account yet, please contact
-   <a [href]="'mailto:' + d.contact.mail">{{d.contact.name}}</a>.
- </p>
- <p *ngSwitchCase="'/home'">Please log in for further access. If you do not have an account yet, please contact
-   <a [href]="'mailto:' + d.contact.mail">{{d.contact.name}}</a>.
- </p>
- <p *ngSwitchDefault>
-   Sadly, currently there is no help available for this page. Please contact
-   <a [href]="'mailto:' + d.contact.mail">{{d.contact.name}}</a> for further questions.
- </p>
-</ng-container>
+<div *ngIf="edit; else normalView">
+  <rb-form-select label="level" [(ngModel)]="content.level">
+    <option value="none">none</option>
+    <option *ngFor="let level of login.levels" [value]="level">{{level}}</option>
+  </rb-form-select>
+  <rb-form-textarea label="text" [(ngModel)]="content.text"></rb-form-textarea>
+  <rb-icon-button icon="save" mode="primary" (click)="saveHelp()">Save</rb-icon-button>
+  <rb-icon-button icon="delete" mode="danger" (click)="deleteHelp()" class="delete-btn">Delete</rb-icon-button>
+</div>
+
+<ng-template #normalView>
+  <p *ngIf="content.text; else defaultContent">
+    {{content.text}}
+  </p>
+  <ng-template #defaultContent>
+    <ng-container *ngIf="content.text === ''">
+      Sadly, currently there is no help available for this page. Please contact
+      <a [href]="'mailto:' + d.contact.mail">{{d.contact.name}}</a> for further questions.
+    </ng-container>
+  </ng-template>
+</ng-template>

src/app/help/help.component.scss

@@ -0,0 +1,3 @@
+.delete-btn {
+  float: right;
+}

src/app/help/help.component.ts

@@ -1,6 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import {Router} from '@angular/router';
 import {DataService} from '../services/data.service';
+import {ApiService} from '../services/api.service';
+import {HelpModel} from '../models/help.model';
+import {LoginService} from '../services/login.service';
 
 @Component({
   selector: 'app-help',
@@ -9,16 +12,41 @@ import {DataService} from '../services/data.service';
 })
 export class HelpComponent implements OnInit {
 
-  route = '';
+  content: HelpModel = new HelpModel().deserialize({text: null, level: 'none'});
+  edit = false;
+  private route = '';
 
   constructor(
     private router: Router,
-    public d: DataService
+    public d: DataService,
+    private api: ApiService,
+    public login: LoginService
   ) { }
 
   ngOnInit(): void {
-    this.route = this.router.url.replace(/\/[0-9a-f]{24}/, '');  // remove ids
-    console.log(this.route);
+    this.route = encodeURIComponent(this.router.url.replace(/\/[0-9a-f]{24}/, ''));
+    // remove ids from path and get help content
+    this.api.get<HelpModel>('/help/' + this.route, (data, err) => {
+      if (!err) {  // content was found
+        this.content = new HelpModel().deserialize(data);
+      }
+      else {
+        this.content.text = '';
+      }
+      console.log(this.content);
+    });
   }
 
+  saveHelp() {
+    this.api.post('/help/' + this.route, this.content.sendFormat(), () => {
+      this.edit = false;
+    });
+  }
+
+  deleteHelp() {
+    this.api.delete('/help/' + this.route, (ignore, ignore) => {
+      this.content = new HelpModel().deserialize({text: null, level: 'none'});
+      this.edit = false;
+    });
+  }
 }