routing and code reusability changes

Author: SiriChandanaGarimella

frontend/orca_data_converter/src/app/app-routing.module.ts

@@ -1,9 +1,12 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { Dashboard1Component } from './views/dashboard1/dashboard1.component';
+import { DashboardComponent } from './views/dashboard/dashboard.component';
+import { GaussianDashboardComponent } from './views/gaussianDashboard/gaussianDashboard.component';
 
 const routes: Routes = [
-  { path: 'home1', component: Dashboard1Component }
+  { path: 'orca', component: DashboardComponent },
+  { path: 'gaussian', component: GaussianDashboardComponent },
+  { path: '', redirectTo: 'orca', pathMatch: 'full' }
 ];
 
 @NgModule({

frontend/orca_data_converter/src/app/app.component.html

@@ -1,6 +1 @@
-<div class="filter-wrapper row" *ngIf="dashboard == '/' ">
-  <div class="col-md-3 offset-md-3">
-      <app-dashboard appendTo="body" [options]="options" (onPanelHide)="onPanelHide($event)"></app-dashboard>
-  </div>
-</div>
 <router-outlet></router-outlet>

frontend/orca_data_converter/src/app/app.component.ts

@@ -1,18 +1,19 @@
 import { Component, OnInit } from '@angular/core';
 import {HttpClient} from '@angular/common/http'; 
 import {firstValueFrom} from 'rxjs';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
 export class AppComponent implements OnInit {
-  dashboard:any;
+  dashboard:string;
 
 
-  constructor(private http: HttpClient) {
-    this.dashboard = window.location.pathname
+  constructor(private http: HttpClient, private router: Router) {
+    this.dashboard = this.router.url;
   }
 
   async ngOnInit(): Promise<void> {

frontend/orca_data_converter/src/app/views/dashboard/dashboard.component.html

@@ -18,12 +18,14 @@ interface BrandsGroup {
 
 @Component({
   selector: 'app-dashboard',
-  templateUrl: './dashboard.component.html',
-  styleUrls: ['./dashboardView.component.css']
+  templateUrl: '../dashboardView/dashboardView.component.html',
+  styleUrls: ['../dashboardView/dashboardView.component.css']
 })
 
 export class DashboardComponent implements OnInit{
 
+  fileType = 'ORCA';
+  fileExtension = '.txt';
   brandGroups: BrandsGroup[] = [];
   selectedBrands: Brand[] = [];
   public fileName: string;

frontend/orca_data_converter/src/app/views/dashboard/dashboard.component.ts

@@ -0,0 +1,52 @@
+<div id="whole">
+    <h2>Convert {{ fileType }} files to Word documents</h2>
+    <h3>Upload your {{ fileType }} data file</h3>
+    <div class="background-image"></div>
+    <div>
+      <input type="file" (change)="onFileSelected($event)" [accept]="fileExtension">
+      <button class="Submit" (click)="onUpload()">Submit</button>
+    </div>
+    <div>
+      <h3>Enter the terms you wish to search for (txt only):</h3>
+      <div class="keyterms-search">
+        <form action="localhost:4200/" method="POST">
+          <input type="text" placeholder="E.g., CARTESIAN COORDINATES" id="keyTerms-toSearch" />
+        </form>
+      </div>
+    </div>
+    <div>
+      <h3>Enter how you want the lines specified:</h3>
+      <div class="linesSpecified_search">
+        <form action="localhost:4200/" method="POST">
+          <input type="text" placeholder="E.g., WHOLE, FIRST X, LAST X" id="linesSpecified-toSearch" />
+        </form>
+      </div>
+    </div>
+    <div>
+      <h3>Number of sections?</h3>
+      <div class="sections_search">
+        <form action="localhost:4200/" method="POST">
+          <input type="text" placeholder="Input as number..." id="sections-toSearch" />
+        </form>
+      </div>
+    </div>
+    <div>
+      <h3>Use total lines?</h3>
+      <div class="useTotalLines_search">
+        <form action="localhost:4200/" method="POST">
+          <input type="text" placeholder="TRUE/FALSE" id="useTotalLines-toSearch" />
+        </form>
+      </div>
+    </div>
+    <div>
+      <h3>Total number of lines for output doc?</h3>
+      <div class="totalLines_search">
+        <form action="localhost:4200/" method="POST">
+          <input type="text" placeholder="Input as number..." id="totalLines-toSearch" />
+        </form>
+      </div>
+    </div>
+    <div>
+      <button id="downloadButton" value="Download" type="button" (click)="runBackend()">Convert</button>
+    </div>
+  </div>

frontend/orca_data_converter/src/app/views/dashboardView/dashboardView.component.html

@@ -18,12 +18,14 @@ interface BrandsGroup {
 
 @Component({
   selector: 'app-gaussianDashboard',
-  templateUrl: './gaussianDashboard.component.html',
-  styleUrls: ['./dashboardView.component.css']
+  templateUrl: '../dashboardView/dashboardView.component.html',
+  styleUrls: ['../dashboardView/dashboardView.component.css']
 })
 
 export class GaussianDashboardComponent implements OnInit{
 
+  fileType = 'Gaussian';
+  fileExtension = '.log';
   brandGroups: BrandsGroup[] = [];
   selectedBrands: Brand[] = [];
   public fileName: string;