Added server list to dashboard #72

kdb-web/src/app/modules/view/dashboard/components/dashboard/dashboard.component.html

@@ -2,11 +2,49 @@
     {{'view.dashboard.header' | translate}}
 </h1>
 <div class="content-wrapper">
+    <div class="content-header">
+        <h2>
+            <i class="pi pi-server"></i>
+            {{'view.dashboard.server.header' | translate}}
+        </h2>
+    </div>
+
     <div class="content">
-        <ul>
-            <li *ngFor="let server of servers">
-                {{server.name}}
-            </li>
-        </ul>
+        <div class="server-list-wrapper">
+            <div class="server-filter">
+                <form [formGroup]="filterForm">
+                    <div class="input-field">
+                        <input type="text" pInputText formControlName="name"
+                            placeholder="{{'view.dashboard.filter.name' | translate}}" autocomplete="given-name">
+                    </div>
+                </form>
+            </div>
+
+            <div class="server-count">
+                {{servers.length}} {{'view.dashboard.of' | translate}} {{totalRecords}} {{'view.dashboard.servers' | translate}}:
+                <hr>
+            </div>
+
+            <div class="server-list">
+                <div class="server" *ngFor="let server of servers">
+                    <div class="logo">
+                        <img *ngIf="server.iconURL" [src]="server.iconURL">
+                    </div>
+
+                    <div class="info">
+                        <h3 class="name">
+                            {{server.name}}
+                        </h3>
+
+                        <div class="data">
+                            <i class="pi pi-users"></i>
+                            {{server.memberCount}}
+                            {{'view.dashboard.server.member_count' | translate}}
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
     </div>
 </div>