[WEB] insert modelling tool via i frame in fbs (#1500)

* added fbs modelling component to tabs

* removed unnecessary element

* add temp admin restriction

* lint fix

---------

Co-authored-by: Johannes Kunz <[email protected]>

modules/fbs-core/web/src/app/app-routing.module.ts

@@ -19,6 +19,7 @@ import { SqlCheckerComponent } from "./page-components/sql-checker/sql-checker.c
 import { SqlCheckerResultsComponent } from "./page-components/sql-checker/sql-checker-results/sql-checker-results.component";
 import { SqlPlaygroundComponent } from "./page-components/sql-playground/sql-playground.component";
 import { AnalyticsToolComponent } from "./page-components/analytics-tool/analytics-tool.component";
+import { FbsModellingComponent } from "./page-components/fbs-modelling/fbs-modelling.component";
 
 const routes: Routes = [
   { path: "login", component: LoginComponent },
@@ -86,6 +87,12 @@ const routes: Routes = [
         component: AnalyticsToolComponent,
         canActivate: [AuthGuard],
       },
+      // Modelling
+      {
+        path: "modelling",
+        component: FbsModellingComponent,
+        canActivate: [AuthGuard],
+      },
 
       // Admin
       {

modules/fbs-core/web/src/app/app.module.ts

@@ -108,6 +108,7 @@ import { HighlightedInputComponent } from "./page-components/sql-playground/sql-
 import "mathlive";
 import "@cortex-js/compute-engine";
 import { MathInputComponent } from "./tool-components/math-input/math-input.component";
+import { FbsModellingComponent } from "./page-components/fbs-modelling/fbs-modelling.component";
 import { I18NextModule } from "angular-i18next";
 import { I18N_PROVIDERS } from "./util/i18n";
 import { LanguageMenuComponent } from "./page-components/sidebar/language-menu/language-menu.component";
@@ -208,6 +209,7 @@ export const httpInterceptorProviders = [
     ExportTasksDialogComponent,
     HighlightedInputComponent,
     MathInputComponent,
+    FbsModellingComponent,
     LanguageMenuComponent,
   ],
   imports: [

modules/fbs-core/web/src/app/page-components/fbs-modelling/fbs-modelling.component.html

@@ -0,0 +1 @@
+<iframe [src]="getURL()" title="FBS-Modellierung" frameBorder="0"></iframe>

modules/fbs-core/web/src/app/page-components/fbs-modelling/fbs-modelling.component.scss

@@ -0,0 +1,7 @@
+iframe{
+  width: 100%;
+  position: absolute;
+  left: 0;
+  height: calc(100% - 64px);
+  margin-top: -10px;
+}

modules/fbs-core/web/src/app/page-components/fbs-modelling/fbs-modelling.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit } from "@angular/core";
+import { AuthService } from "src/app/service/auth.service";
+import { TitlebarService } from "src/app/service/titlebar.service";
+import { DomSanitizer, SafeResourceUrl } from "@angular/platform-browser";
+
+@Component({
+  selector: "app-fbs-modelling",
+  templateUrl: "./fbs-modelling.component.html",
+  styleUrls: ["./fbs-modelling.component.scss"],
+})
+export class FbsModellingComponent implements OnInit {
+  token: string;
+  safeUrl: SafeResourceUrl;
+
+  constructor(
+    private titlebar: TitlebarService,
+    private auth: AuthService,
+    private sanitizer: DomSanitizer
+  ) {
+    this.token = this.auth.loadToken();
+  }
+  ngOnInit() {
+    this.titlebar.emitTitle("FBS Modellierung");
+  }
+
+  getURL(): SafeResourceUrl {
+    const url = `http://localhost:8080/?jsessionid=${this.token}`;
+    this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
+    return this.safeUrl;
+  }
+}

modules/fbs-core/web/src/app/page-components/sidebar/sidebar.component.html

@@ -68,6 +68,16 @@ <h1>
           <mat-icon>bar_chart</mat-icon>
           <p>{{ "sidebar.label.analyticsPlatform" | i18nextEager }}</p>
         </a>
+
+        <a
+          mat-list-item
+          routerLink="/modelling"
+          routerLinkActive="selected"
+          *ngIf="isAdmin || isModerator"
+        >
+          <mat-icon> format_shapes</mat-icon>
+          <p>FBS Modellierung</p>
+        </a>
       </mat-nav-list>
 
       <span class="filler"></span>