Merge pull request #39 from oss-slu/Issue#33

fixes issue #33 Webpage for Gaussian Data

frontend/orca_data_converter/README.md

@@ -25,3 +25,10 @@ Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To u
 ## Further help
 
 To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+
+## Client's Request for Gaussian Webpage
+
+The ORCA and Gaussian websites should be very similar or perhaps even merged if possible. 
+The types of data needed are going to be very similar, the only difference will be the formatting of the text in the output files. 
+The suggestion would be to try and duplicate the orca website with the gaussian website. 
+It might be easier to select the output file type (ORCA or Gaussian) on the same page, and then use the same code to do the text extraction.

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/app.module.ts

@@ -6,6 +6,7 @@ import { BrowserAnimationsModule }
     from "@angular/platform-browser/animations";
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { GaussianDashboardComponent } from './views/gaussianDashboard/gaussianDashboard.component';
 import { DashboardComponent } from './views/dashboard/dashboard.component';
 import { MultiSelectModule } from "primeng/multiselect";
 import { Dashboard1Component } from './views/dashboard1/dashboard1.component';
@@ -14,6 +15,7 @@ import { HttpClientModule } from "@angular/common/http";
 @NgModule({
   declarations: [
     AppComponent,
+    GaussianDashboardComponent,
     DashboardComponent,
     Dashboard1Component
   ],

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

@@ -18,12 +18,14 @@ interface BrandsGroup {
 
 @Component({
   selector: 'app-dashboard',
-  templateUrl: './dashboard.component.html',
-  styleUrls: ['./dashboard.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/dashboardView/dashboardView.component.html

@@ -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/gaussianDashboard/gaussianDashboard.component.spec.ts

@@ -0,0 +1,35 @@
+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from '../../app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'example'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('example');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.content span')?.textContent).toContain('example app is running!');
+  });
+});