Add Socket.io alert

Author: DaneEveritt

public/themes/pterodactyl/js/frontend/server.socket.js

@@ -18,22 +18,52 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 (function initSocket() {
+    if (typeof $.notifyDefaults !== 'function') {
+        console.error('Notify does not appear to be loaded.');
+        return;
+    }
+
     if (typeof io !== 'function') {
         console.error('Socket.io is reqired to use this panel.');
         return;
     }
 
+    $.notifyDefaults({
+        placement: {
+            from: 'bottom',
+            align: 'right'
+        },
+        newest_on_top: true,
+        delay: 2000,
+        animate: {
+            enter: 'animated zoomInDown',
+            exit: 'animated zoomOutDown'
+        }
+    });
+
+    var notifySocketError = false;
+
     window.Socket = io(Pterodactyl.node.scheme + '://' + Pterodactyl.node.fqdn + ':' + Pterodactyl.node.daemonListen + '/ws/' + Pterodactyl.server.uuid, {
         'query': 'token=' + Pterodactyl.server.daemonSecret,
     });
 
     Socket.io.on('connect_error', function (err) {
-        console.error('Could not connect to socket.io.', err);
+        if(typeof notifySocketError !== 'object') {
+            notifySocketError = $.notify({
+                message: 'There was an error attempting to establish a WebSocket connection to the Daemon. This panel will not work as expected.<br /><br />' + err,
+            }, {
+                type: 'danger',
+                delay: 0
+            });
+        }
     });
 
     // Connected to Socket Successfully
     Socket.on('connect', function () {
-        console.log('connected to socket');
+        if (notifySocketError !== false) {
+            notifySocketError.close();
+            notifySocketError = false;
+        }
     });
 
     Socket.on('initial status', function (data) {

public/themes/pterodactyl/vendor/animate/animate.min.css

@@ -30,6 +30,7 @@
             {!! Theme::css('vendor/adminlte/admin.min.css') !!}
             {!! Theme::css('vendor/adminlte/colors/skin-blue.min.css') !!}
             {!! Theme::css('vendor/sweetalert/sweetalert.min.css') !!}
+            {!! Theme::css('vendor/animate/animate.min.css') !!}
             {!! Theme::css('css/pterodactyl.css') !!}
             <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
             <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
@@ -266,6 +267,7 @@ class="active"
             {!! Theme::js('vendor/slimscroll/jquery.slimscroll.min.js') !!}
             {!! Theme::js('vendor/adminlte/app.min.js') !!}
             {!! Theme::js('js/vendor/socketio/socket.io.min.js') !!}
+            {!! Theme::js('vendor/bootstrap-notify/bootstrap-notify.min.js') !!}
         @show
     </body>
 </html>

public/themes/pterodactyl/vendor/bootstrap-notify/bootstrap-notify.min.js

@@ -44,10 +44,10 @@
                 <div id="terminal" style="width:100%;"></div>
             </div>
             <div class="box-footer text-center">
-                @can('power-start', $server)<button class="btn btn-success" data-attr="power" data-action="start">Start</button>@endcan
-                @can('power-off', $server)<button class="btn btn-primary" data-attr="power" data-action="restart">Restart</button>@endcan
-                @can('power-restart', $server)<button class="btn btn-danger" data-attr="power" data-action="stop">Stop</button>@endcan
-                @can('power-kill', $server)<button class="btn btn-danger" data-attr="power" data-action="kill">Kill</button>@endcan
+                @can('power-start', $server)<button class="btn btn-success disabled" data-attr="power" data-action="start">Start</button>@endcan
+                @can('power-off', $server)<button class="btn btn-primary disabled" data-attr="power" data-action="restart">Restart</button>@endcan
+                @can('power-restart', $server)<button class="btn btn-danger disabled" data-attr="power" data-action="stop">Stop</button>@endcan
+                @can('power-kill', $server)<button class="btn btn-danger disabled" data-attr="power" data-action="kill">Kill</button>@endcan
             </div>
         </div>
     </div>