Make loading spinner look cool

SimplyServers · Dec 24, 2018 · 50cb889 · 50cb889
1 parent f7a16f9
commit 50cb889
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 9 deletions.
diff --git a/src/app/controllers/panel/panel-create/panel-create.component.html b/src/app/controllers/panel/panel-create/panel-create.component.html
@@ -1,6 +1,7 @@
 <app-navbar></app-navbar>
 <div *ngIf="loading" id="loading">
   <div class="spinner"></div>
+  <p>Provisioning your server...</p>
 </div>
 
 <div *ngIf="!loading" class="container">
@@ -18,14 +19,14 @@ <h2>Create your server...</h2>
       </div>
     </div>
     <div class="form-group">
-      <label for="preset">Server type</label>
+      <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>
       </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 class="invalid" *ngIf="createForm.controls['preset'].errors.required">Plan is required</div>
       </div>
     </div>
     <div class="form-group">

diff --git a/src/app/controllers/panel/panel-home/panel-home.component.html b/src/app/controllers/panel/panel-home/panel-home.component.html
@@ -1,6 +1,7 @@
 <app-panel-frame>
   <div *ngIf="loading" id="loading">
     <div class="spinner"></div>
+    <p>Connecting to your server...</p>
   </div>
   <div class="row" id="console" *ngIf="!loading">
     <div class="col-md-9 col-sm-12">

diff --git a/src/app/controllers/panel/panel-home/panel-home.component.ts b/src/app/controllers/panel/panel-home/panel-home.component.ts
@@ -98,6 +98,7 @@ export class PanelHomeComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   updateServer() {
+    this.loading = true;
     this.currentServer = this.selectedServer.getCurrentServer();
     this.serverSocket.getSocket(this.currentServer._id, () => {
       this.loading = false;

diff --git a/src/app/controllers/panel/panel-settings/panel-settings.component.html b/src/app/controllers/panel/panel-settings/panel-settings.component.html
@@ -11,8 +11,10 @@
         </div>
         <div class="card-block">
           <div>
-            <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 type="button" class="btn btn-secondary btn-block server-action">Change Plan
+            <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"
+                    type="button" class="btn btn-secondary btn-block server-action">Change Plan
             </button>
           </div>
         </div>
@@ -24,9 +26,12 @@
           <span>Danger Zone</span>
         </div>
         <div class="card-block">
-          <p><b>Warning:</b> Server removal will result in immediate permanent loss of data. We recommend downloading your server files on a daily basis and backing up your data. We are not able to recover your server after deletion.</p>
+          <p><b>Warning:</b> Server removal will result in immediate permanent loss of data. We recommend downloading
+            your server files on a daily basis and backing up your data. We are not able to recover your server after
+            deletion.</p>
           <div>
-            <button [disabled]="serverSocket.lastStatus !== 'Stopped'" data-toggle="modal" data-target="#removeModal" type="button" class="btn btn-danger btn-block server-action">Remove My Server
+            <button [disabled]="serverSocket.lastStatus !== 'Stopped'" data-toggle="modal" data-target="#removeModal"
+                    type="button" class="btn btn-danger btn-block server-action">Remove My Server
             </button>
           </div>
         </div>
@@ -43,13 +48,50 @@ <h5 class="modal-title" id="reinstallModalLabel">Are you sure?</h5>
           </button>
         </div>
         <div class="modal-body">
-          <p><b>Wait just one moment!</b> Are you sure you want to remove your server? If your experiencing technical issues, our support team would be happy to assist you.</p>
+          <p><b>Wait just one moment!</b> Are you sure you want to remove your server? If your experiencing technical
+            issues, our support team would be happy to assist you.</p>
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-secondary" data-dismiss="modal">Nevermind</button>
-          <button [disabled]="serverSocket.lastStatus !== 'Stopped'" type="button" data-dismiss="modal" (click)="removeServer()" class="btn btn-primary">I'm sure</button>
+          <button [disabled]="serverSocket.lastStatus !== 'Stopped'" type="button" data-dismiss="modal"
+                  (click)="removeServer()" class="btn btn-primary">I'm sure
+          </button>
         </div>
       </div>
     </div>
   </div>
+  <div class="modal fade" id="changeModal" tabindex="-1" role="dialog" aria-labelledby="changeModal" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <form [formGroup]="changeForm" (ngSubmit)="onSubmit()">
+          <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">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <p><b>Warning:</b> Changing your server plan may be irreversible.</p>
+            <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>
+              </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>
+            </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>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
 </app-panel-frame>
diff --git a/src/styles.scss b/src/styles.scss
@@ -27,7 +27,68 @@ html, body{
 }
 
 #loading{
-  width: 100%;
+  -webkit-animation: fadein 1.5s;
+  -moz-animation: fadein 1.5s;
+  -ms-animation: fadein 1.5s;
+  -o-animation: fadein 1.5s;
+  animation: fadein 1.5s;
+
+  p {
+    padding-top: 1vh;
+    text-align: center;
+    color: #fff;
+    font-size: 1.2rem;
+  }
+
+}
+
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 .invalid{