ang client upd

Author: maxchistt

WebCellLifeSimulationApp/ClientApp/src/app/home/home.component.html

@@ -1,18 +1,67 @@
-<h1 class="container h1">Cells</h1>
+<div class="container">
+  <h1 class="container h1 m-2"></h1>
+</div>
+
 <div class="container mb-2">
-  <button class="btn btn-light" (click)="this.clearCells()">
-    clearCells
-  </button>
-  <button class="btn btn-light ml-2" (click)="this.generateCells()">
-    generateCells
-  </button>
+  <div class="row text-center">
+    <div class="col-sm m-2">
+      <button class="btn btn-light p-2 m-0 w-100  h-100" (click)="this.clearCells()">
+        clearCells
+      </button>
+    </div>
+    <div class="col-sm m-2">
+      <button class="btn btn-light p-2 m-0  w-100 h-100" (click)="this.generateCells()">
+        generateCells
+      </button>
+    </div>
+    <div class="col-sm m-2">
+      <div class="alert bg-light p-2 m-0 w-100  h-100">
+        <span>Connections = {{connections}}</span>
+      </div>
+    </div>
+  </div>
+
+</div>
+<div class="container">
+  <p class="m-2">W: {{this.size[0]}} H: {{this.size[1]}}</p>
+</div>
+
+
+<div class="container mb-3">
+  <div class="progress m-2">
+    <div class="bg-danger progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
+      [ngStyle]="{'width':(100*colors[0]/(colors[0]+colors[1]+colors[2]))+'%'}" aria-valuemin="0" aria-valuemax="100">
+    </div>
+  </div>
+  <div class="progress m-2">
+    <div class="bg-success progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
+      [ngStyle]="{'width':(100*colors[1]/(colors[0]+colors[1]+colors[2]))+'%'}" aria-valuemin="0" aria-valuemax="100">
+    </div>
+  </div>
+  <div class="progress m-2">
+    <div class="bg-primary progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
+      [ngStyle]="{'width':(100*colors[2]/(colors[0]+colors[1]+colors[2]))+'%'}" aria-valuemin="0" aria-valuemax="100">
+    </div>
+  </div>
 </div>
-<p class="container">W: {{this.size[0]}} H: {{this.size[1]}}</p>
-<ul class="container">
-  <li *ngFor="let item of this.frame">
-    <span>{{item.color}} </span>
-    <span class="ml-2">Size {{item.size}} </span>
-    <span class="ml-2">X {{item.x}} </span>
-    <span class="ml-2">Y {{item.y}} </span>
-  </li>
-</ul>
+
+<div class="container mt-3">
+  <table class="table">
+    <thead>
+      <tr>
+        <th scope="col">Color</th>
+        <th scope="col-3">Size</th>
+        <th scope="col-2">X</th>
+        <th scope="col-2">Y</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let item of this.frame">
+        <th>{{item.color}}</th>
+        <td>{{item.size}}</td>
+        <td>{{item.x}}</td>
+        <td>{{item.y}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>

WebCellLifeSimulationApp/ClientApp/src/app/home/home.component.ts

@@ -12,15 +12,23 @@ export class HomeComponent {
   http: HttpClient;
   baseUrl: string;
   size: number[] = [2, 2];
+  colors: number[] = [0,0,0];
+
+  connections:number=0;
 
   constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
     this.http = http;
     this.baseUrl = baseUrl;
 
     this.http.get<number[]>(this.baseUrl + 'api/Simulation/getSize').subscribe(this.setSize, error => console.error(error));
     this.initWebSocket(new URL(this.baseUrl).host);
+
+    
   }
 
+  requestConnections = ()=>this.http.get<number>(this.baseUrl + `wsserver/getConnections`).subscribe(this.setConnectionsCounter, error => console.error(error));
+  setConnectionsCounter=(num:number)=>this.connections=num;
+
   clearCells = () => {
     this.http.get(this.baseUrl + `api/Simulation/clearCells`).subscribe();
   }
@@ -35,16 +43,29 @@ export class HomeComponent {
 
   initWebSocket = (host: string) => {
     this.socket = new WebSocket("ws://" + host + "/ws");
-    this.socket.onopen = () => { console.log("success");};
+    this.socket.onopen = () => { console.log("success");this.requestConnections();};
     this.socket.onmessage = (msg) => this.onUpdate(msg);
     this.socket.onclose = () => { console.log("closed"); };
     this.socket.onerror = () => { console.log("error"); };
   }
 
   onUpdate = (msg: ISocketMessage) => {
-    console.log("income msg", msg.data);
-    let framearr: IDrawEntity[] = this.parseDrawEntities(msg.data);
-    this.frame = framearr;
+    //console.log("income msg", msg.data);
+    this.frame = this.parseDrawEntities(msg.data);
+    this.calccolors();
+  }
+
+  calccolors= ()=>{
+    this.colors=[0,0,0];
+    this.frame.forEach(element => {
+      if(element.color=="Color [Red]"){
+        this.colors[0]++;
+      }else if(element.color=="Color [Green]"){
+        this.colors[1]++;
+      }else if(element.color=="Color [Blue]"){
+        this.colors[2]++;
+      }
+    });
   }
 
   parseDrawEntities(value: string): IDrawEntity[] {