map update 2

src/app/entities/servers/Player.ts

@@ -1,18 +1,44 @@
 import {SteamIDs} from "../profile/SteamIDs";
 
-export interface Player {
-  clz: number|null;
-  deads: number;
-  duration: string;
-  duration_seconds: number;
-  id: number;
-  loss: number;
-  name: string;
-  ping: number;
-  pos: number[];
-  score: number;
-  state: string;
-  steam: SteamIDs;
-  steam2: string;
-  team: number;
+export class Player {
+  clz!: number|null;
+  deads!: number;
+  duration!: string;
+  duration_seconds!: number;
+  id!: number;
+  loss!: number;
+  name!: string;
+  ping!: number;
+  pos!: number[];
+  score!: number;
+  state!: string;
+  steam!: SteamIDs;
+  steam2!: string;
+  team!: number;
+
+  static getClassName(clz: number|null) {
+    switch (clz) {
+      case 0: return null;
+      case 1: return "Scout";
+      case 2: return "Sniper";
+      case 3: return "Soldier";
+      case 4: return "Demoman";
+      case 5: return "Medic";
+      case 6: return "Heavy";
+      case 7: return "Pyro";
+      case 8: return "Spy";
+      case 9: return "Engineer";
+      default: return null;
+    }
+  }
+
+  static getTeamName(team: number|null) {
+    switch (team) {
+      case 0: return null;
+      case 1: return null;
+      case 2: return "RED";
+      case 3: return "BLU";
+      default: return null;
+    }
+  }
 }

src/app/pages/servers-page/livetime-server-map.ts

@@ -15,21 +15,61 @@ interface MapOverlayConfig {
 @Component({
   selector: "app-live-time-server-map",
   template: `
+    <div>
+      <mat-form-field appearance="fill">
+        <mat-label>Команда</mat-label>
+        <mat-select [(ngModel)]="teams_select">
+          <mat-option *ngFor="let team of teams" [value]="team.id">
+            {{team.name}}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field appearance="fill">
+        <mat-label>Класс</mat-label>
+        <mat-select [(ngModel)]="classes_select">
+          <mat-option *ngFor="let clz of classes" [value]="clz.id">
+            {{clz.name}}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
     <div [id]="server.name+'_map'" style="height: 500px;width: 100%;">
       <p hidden *ngFor="let player of server.players">{{updatePlayerPos(player)}}</p>
     </div>
-  `
+  `,
+  styleUrls: ["servers-page.component.scss"]
 })
 export class LivetimeServerMap implements AfterViewInit {
   @Input("server")
   server!: Server;
   map!: L.Map;
   canShow: boolean = false;
-  markers: {[player_id: string]: {marker: L.Marker, player: Player}} = {};
+  markers: {[player_id: string]: {marker: L.Marker, player: Player, hidden: boolean}} = {};
   config: MapOverlayConfig = {
     x: 0, y: 0, hu:0
   }
 
+  teams:{id:number, name:string}[] = [
+    {id: 0, name: "Все"},
+    {id: 1, name: "Наблюдатель"}, {id: 2, name: "Красные"}, {id: 3, name: "Синий"}
+  ];
+  teams_select: number = 0;
+
+  classes:{id:number, name:string}[] = [
+    {id: 0, name: "Все"},
+    {id: 1, name: "Все"},
+    {id: 2, name: "Все"},
+    {id: 3, name: "Все"},
+    {id: 4, name: "Все"},
+    {id: 5, name: "Все"},
+    {id: 6, name: "Все"},
+    {id: 7, name: "Все"},
+    {id: 8, name: "Все"},
+    {id: 9, name: "Все"}
+  ]
+  classes_select: number = 0;
+
   constructor(private http: HttpClient) {
   }
 
@@ -83,10 +123,44 @@ export class LivetimeServerMap implements AfterViewInit {
 
     if (ids.indexOf(id) != -1) {
       this.markers[id].marker.setLatLng(this.getRektPos(player));
+      this.markers[id].marker.setIcon(this.getPlayerEmblem(player))
+
       this.markers[id].player = player;
     } else {
-      this.markers[id] = {marker: L.marker(this.getRektPos(player)), player: player}
+      this.markers[id] = {marker: L.marker(this.getRektPos(player)), player: player, hidden: false};
       this.markers[id].marker.addTo(this.map);
+      this.markers[id].marker.setIcon(this.getPlayerEmblem(player));
+    }
+
+    switch (this.teams_select) {
+      case 0: {
+        if (this.markers[id].hidden) {
+          this.markers[id].marker.addTo(this.map);
+          this.markers[id].hidden = false;
+        }
+        break;
+      }
+      default: {
+        if (this.markers[id].player.team == this.teams_select && this.markers[id].hidden) {
+          this.markers[id].marker.addTo(this.map);
+          this.markers[id].hidden = false;
+        }
+
+        if (this.markers[id].player.team != this.teams_select && !this.markers[id].hidden) {
+          this.markers[id].marker.remove();
+          this.markers[id].hidden = true;
+        }
+        break;
+      }
+    }
+  }
+
+  private getPlayerEmblem(player: Player): L.Icon {
+    const c = Player.getClassName(player.clz);
+    const t = Player.getTeamName(player.team);
+    if (c == null || t == null) {
+      return new L.Icon({iconUrl: "assets/images/emblems/unknown/Unk_emblem_UNK.png", className: 'pm_icon'});
     }
+    return new L.Icon({iconUrl: `assets/images/emblems/${t.toLowerCase()}/${c}_emblem_${t}.png`, className: 'pm_icon'});
   }
 }

src/app/pages/servers-page/servers-page.component.html

@@ -38,7 +38,7 @@
               <mat-card-subtitle>игроков играло за год</mat-card-subtitle>
             </mat-card>
             <mat-card>
-              <mat-card-title>{{server.value.last_update * 1000 | date: "hh:mm:ss"}}</mat-card-title>
+              <mat-card-title>{{server.value.last_update * 1000 | date: "HH:mm:ss"}}</mat-card-title>
               <mat-card-subtitle>обновление информации</mat-card-subtitle>
             </mat-card>
             <mat-card>

src/app/pages/servers-page/servers-page.component.scss

@@ -1,3 +1,16 @@
 .container {
   padding: 24px;
 }
+
+::ng-deep .leaflet-marker-icon {
+  width: 24px !important;
+  height: 24px !important;
+  margin-left: -12px !important;
+  margin-top: -12px !important;
+  border-radius: 1px;
+  border: 0px solid black;
+}
+
+::ng-deep .leaflet-control-attribution {
+  display: none;
+}