add new server issue 1357

src/app/shared/server-selector/server-selector.component.html

@@ -1,8 +1,24 @@
 <mat-form-field id="server-selector">
-  <mat-label>Server</mat-label>
-  <mat-select [formControl]="serverSelector">
-    <mat-option *ngFor="let server of servers" [value]="server">
-      {{ server }}
-    </mat-option>
-  </mat-select>
-</mat-form-field>
+    <mat-label>Server</mat-label>
+    <mat-select [formControl]="serverSelector">
+        <div class="sticky">
+            <form [formGroup]="form" (ngSubmit)="setNewServer()">
+                <div class="actions">
+                    <mat-form-field class="ml" fxFlexAlign="start">
+                        <span matPrefix><mat-icon>language</mat-icon></span>
+                        <mat-label>Add new server</mat-label>
+                        <input matInput type="text" autocomplete="off" formControlName="url">
+                        <mat-error *ngIf="form.controls.url.hasError('required')">
+                            Url <strong>is required</strong>
+                        </mat-error>
+                    </mat-form-field>
+
+                    <button type="submit" [disabled]="form.invalid" class="ml" mat-raised-button color="primary">Add</button>
+                </div>
+            </form>
+        </div>
+        <mat-option *ngFor="let server of servers" [value]="server">
+            {{ server }}
+        </mat-option>
+    </mat-select>
+</mat-form-field>

src/app/shared/server-selector/server-selector.component.scss

@@ -0,0 +1,26 @@
+.actions {
+    display: inline-block;
+}
+
+.rg {
+    float: right;
+}
+
+.ml {
+    margin-left: 10px;
+}
+
+
+/* .pba {
+    width: 80%;
+    left: 10%;
+    margin: 12px;
+} */
+
+.sticky {
+    position: sticky;
+    z-index: 1; // appear above mat-option
+    top: 0; // fix at the top
+    background-color: white; // don't see mat-option when scrolling
+    box-shadow: 1px -2px 10px 0px grey; // shadow at the bottom
+}

src/app/shared/server-selector/server-selector.component.ts

@@ -1,7 +1,8 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
-
+import { MatDialog } from '@angular/material/dialog';
+import { FormBuilder, Validators } from '@angular/forms';
 /** Custom Services */
 import { SettingsService } from 'app/settings/settings.service';
 
@@ -13,8 +14,12 @@ import { SettingsService } from 'app/settings/settings.service';
   templateUrl: './server-selector.component.html',
   styleUrls: ['./server-selector.component.scss']
 })
+
 export class ServerSelectorComponent implements OnInit {
 
+  /** Input server. */
+  form: any;
+
   /** Server Settings. */
   servers: string[];
 
@@ -24,12 +29,15 @@ export class ServerSelectorComponent implements OnInit {
   /**
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor(private settingsService: SettingsService) { }
+  constructor(private settingsService: SettingsService, public dialog: MatDialog, private formBuilder: FormBuilder) { }
 
   ngOnInit(): void {
     this.servers = this.settingsService.servers;
     this.serverSelector.patchValue(this.settingsService.server);
     this.buildDependencies();
+    this.form = this.formBuilder.group({
+      'url': ['', [Validators.required]],
+    });
   }
 
   /**
@@ -42,4 +50,16 @@ export class ServerSelectorComponent implements OnInit {
     });
   }
 
+  /**
+   * Set new server.
+   */
+  setNewServer() {
+    let servers;
+    this.settingsService.setServer(this.form.value.url);
+    servers = this.settingsService.servers;
+    servers.push(this.form.value.url);
+    this.settingsService.setServers(servers);
+    window.location.reload();
+  }
+
 }