Add test control

openhtf/output/web_gui/src/app/stations/station/station.component.html

@@ -17,18 +17,11 @@
 <div class="station">
 
   <div class="nav-bar">
-    <button
-      *ngIf="dashboardEnabled"
-      (click)="goBack()"
-      type="button"
-      class="htf-link-button">
+    <button *ngIf="dashboardEnabled" (click)="goBack()" type="button" class="htf-link-button">
       ‹ Return to station selection
     </button>
     <div class="u-flex-grow"></div>
-    <button
-      (click)="manualReload()"
-      type="button"
-      class="htf-link-button">
+    <button (click)="manualReload()" type="button" class="htf-link-button">
       Refresh station
     </button>
   </div>
@@ -52,19 +45,18 @@
       <htf-user-input-plug [test]="activeTest"></htf-user-input-plug>
     </div>
 
+
+
     <div class="htf-layout-widgets-container">
       <div class="htf-layout-widgets-left">
-        <div
-          *ngIf="selectedTest !== null"
-          class="past-test-warning htf-layout-widget">
+        <htf-test-control [test]="activeTest" [station]="selectedStation"
+          (onSelectTest)="onSelectTest($event.test)"></htf-test-control>
+        <div *ngIf="selectedTest !== null" class="past-test-warning htf-layout-widget">
           <div class="htf-layout-widget-header">
             <div>Displaying test record for a previous test run</div>
             <span>&nbsp;({{ selectedTest.startTimeMillis | timeAgo }})</span>
             <div class="u-flex-grow"></div>
-            <button
-              type="button"
-              class="htf-rounded-button-grey"
-              (click)="onSelectTest(null)">
+            <button type="button" class="htf-rounded-button-grey" (click)="onSelectTest(null)">
               Return to current test
             </button>
           </div>
@@ -77,9 +69,7 @@
       </div>
 
       <div class="htf-layout-widgets-right">
-        <htf-history
-          [selectedTest]="selectedTest"
-          [station]="selectedStation"
+        <htf-history [selectedTest]="selectedTest" [station]="selectedStation"
           (onSelectTest)="onSelectTest($event.test)">
         </htf-history>
       </div>

openhtf/output/web_gui/src/app/stations/station/station.component.spec.ts

@@ -28,6 +28,7 @@ import {TimeAgoPipe} from '../../shared/time-ago.pipe';
 
 import {StationComponent} from './station.component';
 import {StationService} from './station.service';
+import {TestControlComponent} from './test-control.component';
 
 // Selectors for components used in the station component template which take
 // a single test state as input.
@@ -123,6 +124,7 @@ describe('station component', () => {
     TestBed.configureTestingModule({
       declarations: (testWidgetStubs as Array<{}>).concat([
         HistoryComponentStub,
+        TestControlComponent,
         StationComponent,
         HostComponent,
         TimeAgoPipe,

openhtf/output/web_gui/src/app/stations/station/test-control.component.html

@@ -0,0 +1,45 @@
+<div class="htf-layout-widget">
+  <div [@animateIn]="'in'" *ngIf="!testRunning() && hasTests()">
+
+    <div class="htf-layout-widget-header">
+      <div>Start new test</div>
+    </div>
+
+    <div class="htf-layout-widget-body">
+      <div class="dropdown" (mouseleave)="isDropdownOpen = false">
+        <input #response_field type="text" [style.display]="inline" class="u-push-top" [(ngModel)]="searchText"
+          (input)="filterItems()" placeholder="Select test..." (click)="isDropdownOpen = true">
+        <ul *ngIf="isDropdownOpen" class="" dropdown-list>
+          <li *ngFor="let item of filteredTests" (click)="selectItem(item)" [class.selected]="item === selectedValue"
+            (mouseenter)="onMouseEnter(item)" (mouseleave)="onMouseLeave()">
+            {{item}}
+          </li>
+        </ul>
+      </div>
+
+      <div class="test-control-error-text u-push-top-third" *ngIf="error">
+        {{ error }}
+      </div>
+
+      <div class="u-text-align-right">
+        <button type="button" class="htf-rounded-button-grey u-push-top" (click)="sendTestStart(response_field)">
+          START
+        </button>
+      </div>
+
+    </div>
+  </div>
+
+  <div [@animateIn]="'in'" *ngIf="testRunning()">
+
+    <div class="htf-layout-widget-body">
+      <div [innerHTML]="control"></div>
+
+      <div class="u-font-size-large">
+        <button type="button" class="htf-rounded-button-red  u-font-size-large" (click)="abort()">
+          ABORT TEST
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

openhtf/output/web_gui/src/app/stations/station/test-control.component.scss

@@ -0,0 +1,77 @@
+/**
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import 'vars';
+
+// Styling for lists injected into the prompt.
+:host ::ng-deep ol,
+:host ::ng-deep ul {
+  padding-left: 25px;
+  margin: 0;
+}
+
+.test-control-has-error {
+  border-color: $theme-red;
+
+  &:focus {
+    border-color: darken($theme-red, 20%);
+  }
+}
+
+.test-control-error-text {
+  color: $theme-red;
+  font-size: $font-size-small;
+}
+
+.dropdown {
+  position: relative;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  max-height: 300px;
+  overflow-y: auto;
+  border: 1px solid #ccc;
+  border-top: none;
+  border-radius: 0 0 4px 4px;
+  position: absolute;
+  background-color: #fff;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+li {
+  padding: 10px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+li.selected {
+  background-color: #3498db;
+  color: #fff;
+}
+
+li:hover {
+  background-color: #f2f2f2;
+  cursor: pointer;
+}
+
+li:hover.selected {
+  background-color: #3498db;
+  color: #fff;
+}