(potentially buggy) Change your server plan via settings

src/app/controllers/panel/panel-frame/panel-frame.component.scss

@@ -52,13 +52,14 @@ body{
       padding-top: 1rem;
     }
 
+    color: #fff;
+
     #server{
       float: right;
       width: 10rem;
       margin-right: .5rem;
       margin-top: .7rem;
 
-      color: #fff;
       #status {
         .bold{
           font-weight: bold;

src/app/controllers/panel/panel-frame/panel-frame.component.ts

@@ -4,6 +4,7 @@ import {SelectedServerService} from '../../../core/services/selected-server.serv
 import {ServerDetails} from '../../../core/models/server-details';
 import {NavigationEnd, Router} from '@angular/router';
 import {Subject} from 'rxjs';
+import {SSAnalyticsService} from '../../../core/services/ssanalytics.service';
 
 @Component({
   selector: 'app-panel-frame',
@@ -26,7 +27,9 @@ export class PanelFrameComponent implements OnInit, OnDestroy {
   selectedServerEmitter: Subject<any>;
   statusEmitter: Subject<any>;
 
-  constructor(private serverSocket: ServerSocketManagerService, public selectedServer: SelectedServerService, private router: Router) {
+  motd = '';
+
+  constructor(private serverSocket: ServerSocketManagerService, public selectedServer: SelectedServerService, private router: Router, private analytics: SSAnalyticsService) {
     this.router.events.subscribe((e) => {
       if (e instanceof NavigationEnd) {
         this.currentUrl = e.url;
@@ -52,6 +55,7 @@ export class PanelFrameComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
+    this.motd = this.analytics.loadData.motd;
     this.updateStatus();
 
     this.statusEmitter = this.serverSocket.statusEmitter.subscribe(data => {

src/app/controllers/panel/panel-home/panel-home.component.ts

@@ -98,17 +98,17 @@ export class PanelHomeComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   updateServer() {
+    this.commandForm = this.formBuilder.group({
+      command: ['', Validators.compose([Validators.required, Validators.maxLength(50)])],
+    });
+
     this.loading = true;
     this.currentServer = this.selectedServer.getCurrentServer();
     this.serverSocket.getSocket(this.currentServer._id, () => {
       this.loading = false;
     });
 
     this.consoleHistory = this.serverSocket.getConsole();
-
-    this.commandForm = this.formBuilder.group({
-      command: ['', Validators.compose([Validators.required, Validators.maxLength(50)])],
-    });
   }
 
   serverOn() {

src/app/controllers/panel/panel-settings/panel-settings.component.html

@@ -10,10 +10,14 @@
           <span>General Settings</span>
         </div>
         <div class="card-block">
-          <div>
+          <div id="empty-change" *ngIf="nothingToChange">
+            <p>There seems to be nothing here...</p>
+          </div>
+          <div *ngIf="!nothingToChange">
             <p><b>Please note:</b> Changing your server plan may have unintended side-effects such as plugin removal.
               This change may be irreversible, due to certain technical limitations of certain games.</p>
-            <button [disabled]="serverSocket.lastStatus !== 'Stopped'" data-toggle="modal" data-target="#changeModal"
+            <button [disabled]="serverSocket.lastStatus !== 'Stopped' || changeLoading" data-toggle="modal"
+                    data-target="#changeModal"
                     type="button" class="btn btn-secondary btn-block server-action">Change Plan
             </button>
           </div>
@@ -60,10 +64,11 @@ <h5 class="modal-title" id="reinstallModalLabel">Are you sure?</h5>
       </div>
     </div>
   </div>
-  <div class="modal fade" id="changeModal" tabindex="-1" role="dialog" aria-labelledby="changeModal" aria-hidden="true">
+  <div class="modal fade" id="changeModal" tabindex="-1" role="dialog" aria-labelledby="changeModal" aria-hidden="true"
+       #changeModal>
     <div class="modal-dialog" role="document">
       <div class="modal-content">
-        <form [formGroup]="changeForm" (ngSubmit)="onSubmit()">
+        <form [formGroup]="changeForm" (ngSubmit)="updatePlan()">
           <div class="modal-header">
             <h5 class="modal-title" id="changeModalLabel">Update server plan</h5>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -75,19 +80,22 @@ <h5 class="modal-title" id="changeModalLabel">Update server plan</h5>
             <div class="form-group">
               <label for="preset">Server plan</label>
               <select id="preset" formControlName="preset" class="form-control"
-                      [ngClass]="{ 'is-invalid': submitted && createForm.controls['preset'].errors }">
-                <option *ngFor="let preset of serverPlans" [ngValue]="preset._id">{{ preset.name }}</option>
+                      [ngClass]="{ 'is-invalid': changeSubmitted && changeForm.controls['preset'].errors }">
+                <option *ngFor="let preset of presetList" [ngValue]="preset._id">{{ preset.name }}</option>
               </select>
 
-              <div *ngIf="submitted && createForm.controls['preset'].errors" class="invalid-feedback">
-                <div class="invalid" *ngIf="createForm.controls['preset'].errors.required">Type is required</div>
+              <div *ngIf="changeSubmitted && changeForm.controls['preset'].errors" class="invalid-feedback">
+                <div class="invalid" *ngIf="changeForm.controls['preset'].errors.required">Type is required</div>
               </div>
             </div>
+            <div *ngIf="error" class="invalid-feedback">
+              <div class="invalid bigerror">Failed to change preset; {{ error }}</div>
+            </div>
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-            <button [disabled]="serverSocket.lastStatus !== 'Stopped'" type="button" data-dismiss="modal"
-                    (click)="removeServer()" class="btn btn-primary">Update plan
+            <button [disabled]="serverSocket.lastStatus !== 'Stopped' || changeLoading" type="submit"
+                    class="btn btn-primary">Update plan
             </button>
           </div>
         </form>

src/app/controllers/panel/panel-settings/panel-settings.component.scss

@@ -11,3 +11,9 @@
     }
   }
 }
+
+#empty-change {
+  text-align: center;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}

src/app/controllers/panel/panel-settings/panel-settings.component.ts

@@ -1,37 +1,56 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
+import {Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {AuthenticationService} from '../../../core/services/authentication.service';
 import {ServerSocketManagerService} from '../../../core/services/server-socket-manager.service';
 import {ServerDetails} from '../../../core/models/server-details';
 import {SelectedServerService} from '../../../core/services/selected-server.service';
 import {Subject} from 'rxjs';
 import {NotifierService} from 'angular-notifier';
 import {Router} from '@angular/router';
+import {FormBuilder, FormGroup, NgModel, Validators} from '@angular/forms';
 
 @Component({
   selector: 'app-panel-settings',
   templateUrl: './panel-settings.component.html',
   styleUrls: ['./panel-settings.component.scss']
 })
 export class PanelSettingsComponent implements OnInit, OnDestroy {
+  @ViewChild('changeModal', {read: ElementRef}) changeModal: ElementRef;
+
   currentServer: ServerDetails;
   selectedServerEmitter: Subject<any>;
 
   loading = true;
+  error: string;
+
+  changeLoading = false;
+  changeSubmitted = false;
+  nothingToChange = false;
+  presetList: any;
 
-  constructor(private auth: AuthenticationService, public serverSocket: ServerSocketManagerService, private selectedServer: SelectedServerService, private notify: NotifierService, private router: Router) {
+  changeForm: FormGroup;
+
+  constructor(private auth: AuthenticationService, public serverSocket: ServerSocketManagerService, private selectedServer: SelectedServerService, private notify: NotifierService, private router: Router, private formBuilder: FormBuilder) {
   }
 
   updateServer() {
     this.currentServer = this.selectedServer.getCurrentServer();
 
+    if (Object.keys(this.currentServer.preset.allowSwitchingTo).length < 1)
+      this.nothingToChange = true;
+
     if (!this.currentServer.isOwner) {
       this.router.navigateByUrl('/panel');
     }
 
     this.loading = false;
+    this.presetList = this.currentServer.preset.allowSwitchingTo;
   }
 
   ngOnInit() {
+    this.changeForm = this.formBuilder.group({
+      preset: ['', Validators.compose([Validators.required, Validators.maxLength(30)])]
+    });
+
     if (this.selectedServer.getCurrentServer() !== undefined) {
       this.updateServer();
 
@@ -59,4 +78,30 @@ export class PanelSettingsComponent implements OnInit, OnDestroy {
     });
   }
 
+  updatePlan() {
+    this.changeSubmitted = true;
+    if (this.changeForm.invalid) {
+      return;
+    }
+    this.changeLoading = true;
+
+    //WTF BROWSERS ARE LITERALLY HORRIBLE
+    //This needs to set to a empty array to actually sync the actual value of the option dropdown with the one that is displayed
+    this.presetList = [];
+
+    this.auth.changePreset(this.currentServer._id, this.changeForm.controls.preset.value).subscribe(() => {
+      this.selectedServer.updateCache(true, () => {
+        this.selectedServer.reloadCurrentServer();
+        this.changeSubmitted = false;
+        this.changeLoading = false;
+        this.changeModal.nativeElement.click();
+        this.changeForm.controls.preset.setValue(undefined);
+      });
+    }, (err) => {
+      this.error = err;
+      this.changeLoading = false;
+      this.changeSubmitted = false;
+    });
+  }
+
 }

src/app/core/services/authentication.service.ts

@@ -57,6 +57,13 @@ export class AuthenticationService {
       }));
   }
 
+  changePreset(server: string, preset: string) {
+    return this.http.post<any>(this.config.getAPIURL() + 'server/' + server + '/changePreset', {preset: preset}, {headers: {Authorization: 'Token ' + this.getUser().token}})
+      .pipe(map(data => {
+        return data;
+      }));
+  }
+
   killServer(server: string) {
     return this.http.get<any>(this.config.getAPIURL() + 'server/' + server + '/power/kill', {headers: {Authorization: 'Token ' + this.getUser().token}})
       .pipe(map(data => {

src/app/core/services/ssanalytics.service.ts

@@ -8,7 +8,7 @@ import {HttpClient} from "@angular/common/http";
 })
 export class SSAnalyticsService {
 
-  public loadData: string;
+  public loadData: any;
 
   constructor(private http: HttpClient, private config: ConfigService) {}
 

src/styles.scss

@@ -1,3 +1,4 @@
+/* ss global */
 html, body{
   height: 100%;
   min-height: 100%;