frontend: show train-status in top-bar

Author: JeyRunner

frontend-angular/src/app/app-main/app-main.component.html

@@ -1,11 +1,21 @@
 <!-- Navigation ------------------------------------ -->
 <nav class="nav-extended">
  <div class="nav-wrapper">
-
- <ul class="right hide-on-med-and-down">
+ <!-- connection indicator -->
+ <ul class="right">
  <li><a [ngClass]="connected ? 'green-text' : 'red-text'" class="btn white btn-flat no-select">{{connected ? 'connected' : 'not connected'}}
  <i [ngClass]="connected ? 'green-text' : 'red-text'" class="material-icons red-text right">{{connected ? 'wifi' : 'wifi_off'}}</i></a></li>
  </ul>
+
+ <ul class="right" *ngIf="appState.training">
+ <li>
+ <a class="green-text btn white btn-flat no-select">
+ Training
+ <app-progress-indicator class="right" style="margin-top: 5px; margin-left: 10px;"></app-progress-indicator>
+ </a>
+ </li>
+ </ul>
+
  <div class="col s12" id="nav-at" style="margin-left: 20px">
  <a class="breadcrumb no-select" id="home"><i routerLink="/" class="material-icons">home</i></a>
  </div>

frontend-angular/src/app/app-main/app-main.component.ts

@@ -7,6 +7,7 @@ import {toastErr, toastInfo} from "../util/Log";
 import {DOCUMENT} from "@angular/common";
 import {BehaviorSubject} from "rxjs/BehaviorSubject";
 import {TestPlaygroundComponent} from "@frontend/test-playground/test-playground.component";
+import {AppState} from "@frontend/settings/app-state.service";
 
 /*
  *-- MainComponent ------------------------------------------------------- */
@@ -28,6 +29,7 @@ export class AppMainComponent {
  connected: boolean = false;
 
  constructor(
+ public appState: AppState,
  route: ActivatedRoute,
  @Inject(DOCUMENT) private document: Document)
  {

frontend-angular/src/app/app.module.ts

@@ -20,7 +20,7 @@ import {ApiChart} from "@catflow/extensions/Chart-range";
 import {KeysPipe} from "@catflow/Utils";
 import { SettingsComponent } from './settings/settings.component';
 import { SelectionViewComponent } from './settings/selection-view/selection-view.component';
-import {SettingsService} from "@frontend/settings/settings.service";
+import {AppState} from "@frontend/settings/app-state.service";
 import {ApiSeriesChart} from "@catflow/extensions/Chart-series";
 import {AngularResizedEventModule} from "angular-resize-event";
 import { ModelEditorComponent } from './test-playground/model-editor/model-editor.component';
@@ -29,6 +29,7 @@ import { TestPlaygroundComponent } from './test-playground/test-playground.compo
 import { ChartPlotlyComponent } from './test-playground/chart-plotly/chart-plotly.component';
 import { ModelEditorNodeComponent } from './test-playground/model-editor/model-editor-node/model-editor-node.component';
 import { ModelEditorConnectionComponent } from './test-playground/model-editor/model-editor-connection/model-editor-connection.component';
+import { ProgressIndicatorComponent } from './util/progress-indicator/progress-indicator.component';
 
 
 
@@ -50,7 +51,8 @@ import { ModelEditorConnectionComponent } from './test-playground/model-editor/m
  TestPlaygroundComponent,
  ChartPlotlyComponent,
  ModelEditorNodeComponent,
- ModelEditorConnectionComponent
+ ModelEditorConnectionComponent,
+ ProgressIndicatorComponent
  ],
  imports: [
  BrowserModule,
@@ -65,7 +67,7 @@ import { ModelEditorConnectionComponent } from './test-playground/model-editor/m
  ],
  providers: [
  Api,
- SettingsService
+ AppState
  /*{provide: RouteReuseStrategy, useClass: CustomReuseStrategy}*/
  ],
  entryComponents: [

frontend-angular/src/app/backend-console/backend-console.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import {ApiConnection, CONNECTION_STATUS} from "@catflow/ApiConnection";
-import {SettingsService} from "@frontend/settings/settings.service";
+import {AppState} from "@frontend/settings/app-state.service";
 
 @Component({
  selector: 'app-backend-console',
@@ -15,7 +15,7 @@ export class BackendConsoleComponent implements OnInit {
  CONNECTION_STATUS = CONNECTION_STATUS;
 
 
- constructor(private settings:SettingsService) {
+ constructor(private settings:AppState) {
  ApiConnection.onReceive.subscribe(data => {
  this.log.push({direction: 'got', message: data});
  if (this.log.length > 50)

frontend-angular/src/app/network-train/network-train.component.ts

@@ -5,6 +5,7 @@ import {toastInfo, toastOk} from "../util/Log";
 import {FormBuilder, FormGroup} from "@angular/forms";
 import {ApiObject} from "@catflow/ApiObject";
 import { Chart, ChartData, Point } from 'chart.js';
+import {AppState} from "@frontend/settings/app-state.service";
 
 
 @Component({
@@ -26,9 +27,11 @@ export class NetworkTrainComponent implements OnInit {
  lastProgressValue: number = -1;
  private dataChartInited: boolean = false;
 
- constructor(private router: ActivatedRoute,
- private fb: FormBuilder,
- public api: Api)
+ constructor(
+ private appState: AppState,
+ private router: ActivatedRoute,
+ private fb: FormBuilder,
+ public api: Api)
  {
 
 
@@ -66,6 +69,7 @@ export class NetworkTrainComponent implements OnInit {
  this.networkChart.apiObject = this.api.object('/dataStructures/' + this.structureID + '/networks/' + this.networkID + '/charts/netOutput/');
  this.networkProgressChart.apiObject = this.api.object('/dataStructures/' + this.structureID + '/networks/' + this.networkID + '/charts/progress/');
  this.networkProgressChart.lastValues.subscribe(value => this.lastProgressValue = Math.round(value[0] *100000) /100000);
+ //this.modelEditor.networkObject = this.network;
  this.dataChartInited = true;
  }
 
@@ -138,13 +142,17 @@ export class NetworkTrainComponent implements OnInit {
  //toastInfo("start train: ", this.trainParams.value);
  this.network.update(this.trainParams.value);
  this.network.action('startTrain')
- .then(() => toastOk('start train'));
-
-
-
+ .then(() => {
+ this.appState.training = true;
+ toastOk('start train');
+ });
  }
  else {
- this.network.action('stopTrain').then(() => toastOk('stopped train'));
+ this.network.action('stopTrain')
+ .then(() => {
+ this.appState.training = false;
+ toastOk('stopped train');
+ });
  }
  }
 

frontend-angular/src/app/settings/settings.service.ts renamed to frontend-angular/src/app/settings/app-state.service.ts

@@ -1,9 +1,10 @@
 import { Injectable } from '@angular/core';
 
 @Injectable()
-export class SettingsService {
+export class AppState {
 
  public settings:any = undefined;
+ public training: boolean = false;
 
  constructor() {}
 

frontend-angular/src/app/settings/settings.component.ts

@@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {Api} from "@catflow/Api";
 import {ApiObject} from "@catflow/ApiObject";
 import {toastOk} from "@frontend/util/Log";
-import {SettingsService} from "@frontend/settings/settings.service";
+import {AppState} from "@frontend/settings/app-state.service";
 
 @Component({
  selector: 'app-settings',
@@ -14,7 +14,7 @@ export class SettingsComponent implements OnInit {
  settings: any = undefined;
  settingsKeys: any[] = [];
 
- constructor(private api: Api, settingsServ:SettingsService) {
+ constructor(private api: Api, settingsServ:AppState) {
  api.object("/settings/").subscribe();
  api.object("/settings/").object().subscribe(value => {
  if (value == null)

frontend-angular/src/app/test-playground/model-editor/model-editor-connection/model-editor-connection.component.ts

@@ -22,7 +22,6 @@ export class ModelEditorConnectionComponent implements OnInit, AfterViewInit, On
  static tension = 0.5;
  dragOutput: Drag;
  static dragging: boolean = false;
-
  @Input() editor: ModelEditorComponent;
  @Input() inPoint: Point = {x:1, y:2};
  @Input() outPoint: Point = {x:100, y:20};

frontend-angular/src/app/test-playground/model-editor/model-editor.component.html

@@ -1,9 +1,4 @@
 <div style="">
- <p>
- model-editor works!
- </p>
-
-
  <div class="row s12">
  <!-- editor panel ------------------------------------------------ -->
  <div class="col s9 backgroundCol" >
@@ -23,8 +18,6 @@ <h5>Add Layer</h5>
  <div style="margin-top: 40px">
  <div class="btn waves-effect green" (click)="saveModel()">Save Model <i class="material-icons right">save</i></div>
  </div>
- <div class="btn waves-effect green" (click)="removeAllNodesAndConnections(); modelToJson();">Clear<i class="material-icons right">delete</i></div>
- <div class="btn waves-effect green" (click)="modelToJson();">To Jon<i class="material-icons right">refresh</i></div>
  <pre>{{modelJson | json}}</pre>
  </div>
 

frontend-angular/src/app/util/progress-indicator/progress-indicator.component.css

@@ -0,0 +1,51 @@
+.spinner {
+ width: 40px;
+ height: 25px;
+ text-align: center;
+ font-size: 10px;
+}
+
+.spinner > div {
+ background-color: #4CAF50;
+ height: 100%;
+ width: 4px;
+ display: inline-block;
+
+ -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+ animation: sk-stretchdelay 1.2s infinite ease-in-out;
+}
+
+.spinner .rect2 {
+ -webkit-animation-delay: -1.1s;
+ animation-delay: -1.1s;
+}
+
+.spinner .rect3 {
+ -webkit-animation-delay: -1.0s;
+ animation-delay: -1.0s;
+}
+
+.spinner .rect4 {
+ -webkit-animation-delay: -0.9s;
+ animation-delay: -0.9s;
+}
+
+.spinner .rect5 {
+ -webkit-animation-delay: -0.8s;
+ animation-delay: -0.8s;
+}
+
+@-webkit-keyframes sk-stretchdelay {
+ 0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
+ 20% { -webkit-transform: scaleY(1.0) }
+}
+
+@keyframes sk-stretchdelay {
+ 0%, 40%, 100% {
+ transform: scaleY(0.4);
+ -webkit-transform: scaleY(0.4);
+ } 20% {
+ transform: scaleY(1.0);
+ -webkit-transform: scaleY(1.0);
+ }
+}