Support for Readme

src/app/app.module.ts

@@ -286,6 +286,7 @@ import { MarkedDirective } from './directives/marked.directive';
 import { InformationDialogComponent } from './components/dialogs/information-dialog.component';
 import { TemplateNameDialogComponent } from './components/project-map/new-template-dialog/template-name-dialog/template-name-dialog.component';
 import { UpdatesService } from './services/updates.service';
+import { ProjectReadmeComponent } from './components/project-map/project-readme/project-readme.component';
 
 
 @NgModule({
@@ -621,7 +622,8 @@ import { UpdatesService } from './services/updates.service';
     ChangeHostnameDialogComponent,
     ApplianceInfoDialogComponent,
     ConfigureCustomAdaptersDialogComponent,
-    EditNetworkConfigurationDialogComponent
+    EditNetworkConfigurationDialogComponent,
+    ProjectReadmeComponent
   ],
   bootstrap: [AppComponent]
 })

src/app/components/project-map/project-map.component.ts

@@ -72,6 +72,7 @@ import { ThemeService } from '../../services/theme.service';
 import { Title } from '@angular/platform-browser';
 import { NewTemplateDialogComponent } from './new-template-dialog/new-template-dialog.component';
 import { NodeConsoleService } from '../../services/nodeConsole.service';
+import { ProjectReadmeComponent } from './project-readme/project-readme.component';
 
 
 @Component({
@@ -258,8 +259,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
             if (!project ) this.router.navigate(['/servers']);
 
             this.projectService.open(this.server, this.project.project_id);
-            this.title.setTitle(this.project.name);
+            this.title.setTitle(this.project.name); 
-
             this.isInterfaceLabelVisible = this.mapSettingsService.showInterfaceLabels;
             
             this.recentlyOpenedProjectService.setServerId(this.server.id.toString());
@@ -277,6 +277,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
         .subscribe(
           (project: Project) => {
             this.onProjectLoad(project);
+            if (this.mapSettingsService.openReadme) this.showReadme();
           },
           error => {
             this.progressService.setError(error);
@@ -897,6 +898,18 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     instance.project = this.project;
   }
 
+  public showReadme() {
+    const dialogRef = this.dialog.open(ProjectReadmeComponent, {
+      width: '600px',
+      height: '650px',
+      autoFocus: false,
+      disableClose: true
+    });
+    let instance = dialogRef.componentInstance;
+    instance.server = this.server;
+    instance.project = this.project;
+  }
+
   public ngOnDestroy() {
     this.nodeConsoleService.openConsoles = 0;
     this.title.setTitle('GNS3 Web UI');

src/app/components/project-map/project-readme/project-readme.component.html

@@ -0,0 +1,7 @@
+<h1 mat-dialog-title>Project README</h1>
+
+<div class="textWrapper" id="text"></div>
+
+<div mat-dialog-actions>
+  <button mat-button (click)="onNoClick()" color="accent">Close</button>
+</div>

src/app/components/project-map/project-readme/project-readme.component.scss

@@ -0,0 +1,4 @@
+.textWrapper {
+    height: 500px!important;
+    overflow-y: scroll;
+}

src/app/components/project-map/project-readme/project-readme.component.ts

@@ -0,0 +1,45 @@
+import { Component, AfterViewInit } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+import { Server } from '../../../models/server';
+import { Project } from '../../../models/project';
+import { ProjectService } from '../../../services/project.service';
+import * as marked from 'marked';
+import { ElementRef } from '@angular/core';
+import { Renderer2 } from '@angular/core';
+import { ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'app-project-readme',
+  templateUrl: './project-readme.component.html',
+  styleUrls: ['./project-readme.component.scss']
+})
+export class ProjectReadmeComponent implements AfterViewInit {
+  server: Server;
+  project: Project;
+  @ViewChild('text', {static: false}) text: ElementRef;
+  
+  constructor(
+    public dialogRef: MatDialogRef<ProjectReadmeComponent>,
+    private projectService: ProjectService,
+    private elementRef: ElementRef,
+    private renderer: Renderer2
+  ) {}
+
+  ngAfterViewInit() {
+    let markdown = ``;
+
+    this.projectService.getReadmeFile(this.server, this.project.project_id).subscribe(file => {
+        if (file) {
+            markdown = file;
+            setTimeout(function(){
+                const markdownHtml = marked(markdown);
+                document.getElementById('text').innerHTML = markdownHtml;
+            }, 1000);
+        }
+    });
+  }
+
+  onNoClick() {
+    this.dialogRef.close();
+  }
+}

src/app/components/projects/edit-project-dialog/readme-editor/readme-editor.component.html

@@ -1,5 +1,5 @@
 <mat-tab-group>
-    <mat-tab label="Write">
+    <mat-tab label="Edit">
         <textarea class="editorWrapper" matInput type="text" [(ngModel)]="markdown"></textarea>
     </mat-tab>
 

src/app/components/projects/edit-project-dialog/readme-editor/readme-editor.component.scss

@@ -1,5 +1,4 @@
 .textWrapper {
-    background-color: white;
     height: 500px!important;
     overflow-y: scroll;
 }

src/app/components/settings/settings.component.html

@@ -11,7 +11,8 @@
 
           <div>
             <mat-checkbox [(ngModel)]="settings.crash_reports">Send anonymous crash reports</mat-checkbox><br/>
-            <mat-checkbox [(ngModel)]="integrateLinksLabelsToLinks">Integrate link labels to links</mat-checkbox>
+            <mat-checkbox [(ngModel)]="integrateLinksLabelsToLinks">Integrate link labels to links</mat-checkbox><br/>
+            <mat-checkbox [(ngModel)]="openReadme">Automatically open project README files</mat-checkbox>
           </div>
 
           <!-- <div>

src/app/components/settings/settings.component.ts

@@ -15,6 +15,7 @@ export class SettingsComponent implements OnInit {
   settings = { ...SettingsService.DEFAULTS };
   consoleCommand: string;
   integrateLinksLabelsToLinks: boolean;
+  openReadme: boolean;
 
   constructor(
     private settingsService: SettingsService,
@@ -29,12 +30,15 @@ export class SettingsComponent implements OnInit {
     this.settings = this.settingsService.getAll();
     this.consoleCommand = this.consoleService.command;
     this.integrateLinksLabelsToLinks = this.mapSettingsService.integrateLinkLabelsToLinks;
+    this.openReadme = this.mapSettingsService.openReadme;
   }
 
   save() {
     this.settingsService.setAll(this.settings);
     this.toaster.success('Settings have been saved.');
+    
     this.mapSettingsService.toggleIntegrateInterfaceLabels(this.integrateLinksLabelsToLinks);
+    this.mapSettingsService.toggleOpenReadme(this.openReadme);
   }
 
   setDarkMode(value: boolean) {

src/app/services/mapsettings.service.ts

@@ -13,10 +13,12 @@ export class MapSettingsService {
 
     public showInterfaceLabels: boolean = true;
     public integrateLinkLabelsToLinks: boolean = true;
+    public openReadme: boolean = true;
 
     constructor() {
         this.isLayerNumberVisible = localStorage.getItem('layersVisibility') === 'true' ? true : false;
         if (localStorage.getItem('integrateLinkLabelsToLinks')) this.integrateLinkLabelsToLinks = localStorage.getItem('integrateLinkLabelsToLinks') === 'true' ? true : false;
+        if (localStorage.getItem('openReadme')) this.openReadme = localStorage.getItem('openReadme') === 'true' ? true : false;
     }
 
     changeMapLockValue(value: boolean) {
@@ -56,4 +58,14 @@ export class MapSettingsService {
             localStorage.setItem('integrateLinkLabelsToLinks', 'false');
         }
     }
+
+    toggleOpenReadme(value: boolean) {
+        this.openReadme = value;
+        localStorage.removeItem('openReadme');
+        if (value) {
+            localStorage.setItem('openReadme', 'true');
+        } else {
+            localStorage.setItem('openReadme', 'false');
+        }
+    }
 }