From 58999913ba38b89ac9cb7c39ed3ba797abeb942d Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Thu, 23 Feb 2017 22:52:05 -0500
Subject: [PATCH] More improvements to add server page.

---
 .../Controllers/Admin/ServersController.php   |   8 +-
 public/themes/pterodactyl/css/pterodactyl.css |  51 +++++-
 .../pterodactyl/admin/servers/new.blade.php   | 165 ++++++++++++------
 3 files changed, 164 insertions(+), 60 deletions(-)

diff --git a/app/Http/Controllers/Admin/ServersController.php b/app/Http/Controllers/Admin/ServersController.php
index 195a66314..ba4e5d1cb 100644
--- a/app/Http/Controllers/Admin/ServersController.php
+++ b/app/Http/Controllers/Admin/ServersController.php
@@ -120,13 +120,13 @@ class ServersController extends Controller
         $nodes = Models\Node::with('allocations')->where('location_id', $request->input('location'))->get();
         return $nodes->map(function ($item) {
             $filtered = $item->allocations->map(function($map) {
-                return collect($map)->only(['ip', 'port']);
+                return collect($map)->only(['id', 'ip', 'port']);
             });
 
-            $item->ports = $filtered->unique('ip')->map(function ($map) use ($item) {
+            $item->ports = $filtered->map(function ($map) use ($item) {
                 return [
-                    'ip' => $map['ip'],
-                    'ports' => $item->allocations->where('ip', $map['ip'])->pluck('port')->all(),
+                    'id' => $map['id'],
+                    'text' => $map['ip'] . ':' . $map['port'],
                 ];
             })->values();
 
diff --git a/public/themes/pterodactyl/css/pterodactyl.css b/public/themes/pterodactyl/css/pterodactyl.css
index 13e50047b..4a3fe3bf2 100644
--- a/public/themes/pterodactyl/css/pterodactyl.css
+++ b/public/themes/pterodactyl/css/pterodactyl.css
@@ -141,11 +141,60 @@ li.select2-results__option--highlighted[aria-selected="false"] > .user-block > .
     color: #eee;
 }
 
+.select2-search--inline .select2-search__field:focus {
+    outline: none;
+    border: 0 !important;
+}
+
 .img-bordered-xs {
     border: 1px solid #d2d6de;
     padding: 1px;
 }
 
-span[aria-labelledby="select2-pOwner-container"] {
+span[aria-labelledby="select2-pUserId-container"] {
     padding-left: 2px !important;
 }
+
+.callout-slim a {
+    color: #555 !important;
+}
+
+.callout.callout-info.callout-slim {
+    border: 1px solid #0097bc !important;
+    border-left: 5px solid #0097bc !important;
+    border-right: 5px solid #0097bc !important;
+    color: #777 !important;
+    background: transparent !important;
+}
+
+.callout.callout-danger.callout-slim {
+    border: 1px solid #c23321 !important;
+    border-left: 5px solid #c23321 !important;
+    border-right: 5px solid #c23321 !important;
+    color: #777 !important;
+    background: transparent !important;
+}
+
+.callout.callout-warning.callout-slim {
+    border: 1px solid #c87f0a !important;
+    border-left: 5px solid #c87f0a !important;
+    border-right: 5px solid #c87f0a !important;
+    color: #777 !important;
+    background: transparent !important;
+}
+
+.callout.callout-success.callout-slim {
+    border: 1px solid #00733e !important;
+    border-left: 5px solid #00733e !important;
+    border-right: 5px solid #00733e !important;
+    color: #777 !important;
+    background: transparent !important;
+}
+
+.callout.callout-default.callout-slim {
+    border: 1px solid #eee !important;
+    border-left: 5px solid #eee !important;
+    border-right: 5px solid #eee !important;
+    color: #777 !important;
+    background: transparent !important;
+}
diff --git a/resources/themes/pterodactyl/admin/servers/new.blade.php b/resources/themes/pterodactyl/admin/servers/new.blade.php
index 84e45dfa9..ad9256e33 100644
--- a/resources/themes/pterodactyl/admin/servers/new.blade.php
+++ b/resources/themes/pterodactyl/admin/servers/new.blade.php
@@ -36,7 +36,7 @@
 <form action="{{ route('admin.servers.new') }}" method="POST">
     <div class="row">
         <div class="col-xs-12">
-            <div class="box box-primary">
+            <div class="box">
                 <div class="box-header with-border">
                     <h3 class="box-title">Core Details</h3>
                 </div>
@@ -62,36 +62,29 @@
                     <h3 class="box-title">Allocation Management</h3>
                 </div>
                 <div class="box-body row">
-                    <div class="form-group col-sm-6">
+                    <div class="form-group col-sm-4">
                         <label for="pLocationId">Location</label>
                         <select name="location_id" id="pLocationId" class="form-control">
-                            <option disabled selected>Select a Location</option>
                             @foreach($locations as $location)
                                 <option value="{{ $location->id }}">{{ $location->long }} ({{ $location->short }})</option>
                             @endforeach
                         </select>
                         <p class="small text-muted no-margin">The location in which this server will be deployed.</p>
                     </div>
-                    <div class="form-group col-sm-6">
+                    <div class="form-group col-sm-4">
                         <label for="pNodeId">Node</label>
-                        <select name="node_id" id="pNodeId" class="form-control">
-                            <option disabled selected>Select a Node</option>
-                        </select>
+                        <select name="node_id" id="pNodeId" class="form-control"></select>
                         <p class="small text-muted no-margin">The node which this server will be deployed to.</p>
                     </div>
-                    <div class="form-group col-sm-6">
-                        <label for="pIp">IP Address</label>
-                        <select name="ip" id="pIp" class="form-control">
-                            <option disabled selected>Select an IP</option>
-                        </select>
-                        <p class="small text-muted no-margin">The IP address that this server will be allocated to.</p>
+                    <div class="form-group col-sm-4">
+                        <label for="pAllocation">Default Allocation</label>
+                        <select name="allocation_id" id="pAllocation" class="form-control"></select>
+                        <p class="small text-muted no-margin">The main allocation that will be assigned to this server.</p>
                     </div>
-                    <div class="form-group col-sm-6">
-                        <label for="pPort">Port</label>
-                        <select name="port" id="pPort" class="form-control">
-                            <option disabled selected>Select a Port</option>
-                        </select>
-                        <p class="small text-muted no-margin">The port that this server will be allocated to.</p>
+                    <div class="form-group col-sm-12">
+                        <label for="pAllocationAdditional">Additional Allocation(s)</label>
+                        <select name="allocation_additional" id="pAllocationAdditional" class="form-control" multiple></select>
+                        <p class="small text-muted no-margin">Additional allocations to assign to this server on creation.</p>
                     </div>
                 </div>
                 <div class="box-footer">
@@ -103,6 +96,73 @@
             </div>
         </div>
     </div>
+    <div class="row">
+        <div class="col-xs-12">
+            <div class="box">
+                <div class="box-header with-border">
+                    <h3 class="box-title">Resource Management</h3>
+                </div>
+                <div class="box-body row">
+                    <div class="form-group col-sm-4">
+                        <label for="pMemory">Memory</label>
+                        <div class="input-group">
+                            <input type="text" class="form-control" name="memory" id="pMemory" />
+                            <span class="input-group-addon">MB</span>
+                        </div>
+                    </div>
+                    <div class="form-group col-sm-4">
+                        <label for="pSwap">Swap</label>
+                        <div class="input-group">
+                            <input type="text" class="form-control" name="swap" id="pSwap" />
+                            <span class="input-group-addon">MB</span>
+                        </div>
+                    </div>
+                    <div class="form-group col-sm-4">
+                        <label for="pOOMDisabled">Out-of-Memory Killer</label>
+                        <div class="input-group">
+                            <span class="input-group-addon">
+                                <input type="checkbox" id="pOOMDisabled" name="oom_disabled"/>
+                            </span>
+                            <input type="text" class="form-control" readonly style="background:transparent !important;" value="Disable OOM Killer" />
+                        </div>
+                    </div>
+                </div>
+                <div class="box-footer no-border" style="padding: 0 10px 10px;">
+                    <div class="callout callout-info callout-slim no-margin">
+                        <p class="small no-margin">If you do not want to assign swap space to a server simply put <code>0</code> for the value, or <code>-1</code> to allow unlimited swap space. If you want to disable memory limiting on a server simply enter <code>0</code> into the memory field. We suggest leaving OOM Killer enabled unless you know what you are doing, disabling it could cause your server to hang unexpectedly.<p>
+                    </div>
+                </div>
+                <div class="box-body row">
+                    <div class="form-group col-sm-4">
+                        <label for="pDisk">Disk Space</label>
+                        <div class="input-group">
+                            <input type="text" class="form-control" name="disk" id="pDisk" />
+                            <span class="input-group-addon">GB</span>
+                        </div>
+                    </div>
+                    <div class="form-group col-sm-4">
+                        <label for="pCPU">CPU Limit</label>
+                        <div class="input-group">
+                            <input type="text" class="form-control" name="cpu" id="pCPU" />
+                            <span class="input-group-addon">%</span>
+                        </div>
+                    </div>
+                    <div class="form-group col-sm-4">
+                        <label for="pIO">Block IO Weight</label>
+                        <div class="input-group">
+                            <input type="text" class="form-control" value="500" name="io" id="pIO" />
+                            <span class="input-group-addon">I/O</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="box-footer no-border" style="padding: 0 10px 10px;">
+                    <div class="callout callout-info callout-slim">
+                        <p class="small no-margin">If you do not want to limit CPU usage set the value to <code>0</code>. To determine a value, take the number <em>physical</em> cores and multiply it by 100. For example, on a quad core system <code>(4 * 100 = 400)</code> there is <code>400%</code> available. To limit a server to using half of a single core, you would set the value to <code>50</code>. To allow a server to use up to two physical cores, set the value to <code>200</code>. BlockIO should be a value between <code>10</code> and <code>1000</code>. Please see <a href="https://docs.docker.com/engine/reference/run/#/block-io-bandwidth-blkio-constraint" target="_blank">this documentation</a> for more information about it.<p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </form>
 @endsection
 
@@ -110,10 +170,18 @@
     @parent
     <script>
     $(document).ready(function() {
-        $('#pLocationId').select2();
-        $('#pNodeId').select2();
-        $('#pIp').select2();
-        $('#pPort').select2();
+        $('#pLocationId').select2({
+            placeholder: 'Select a Location',
+        }).change();
+        $('#pNodeId').select2({
+            placeholder: 'Select a Node',
+        });
+        $('#pAllocation').select2({
+            placeholder: 'Select a Default Allocation',
+        });
+        $('#pAllocationAdditional').select2({
+            placeholder: 'Select Additional Allocations',
+        });
 
         $('#pUserId').select2({
             ajax: {
@@ -165,16 +233,22 @@
         $('#allocationLoader').show();
     }
 
+    var lastActiveBox = null;
+    $(document).on('click', function (event) {
+        if (lastActiveBox !== null) {
+            lastActiveBox.removeClass('box-primary');
+        }
+
+        lastActiveBox = $(event.target).closest('.box');
+        lastActiveBox.addClass('box-primary');
+    });
+
     var currentLocation = null;
     var curentNode = null;
-    var currentIP = null;
-
-    var NodeDataIdentifier = null;
     var NodeData = [];
-    var AllocationsForNode = null;
 
     $('#pLocationId').on('change', function (event) {
-        showLoader()
+        showLoader();
         currentLocation = $(this).val();
         currentNode = null;
 
@@ -185,8 +259,7 @@
             data: { location: currentLocation },
         }).done(function (data) {
             NodeData = data;
-            console.log(data);
-            $('#pNodeId').select2({data: data});
+            $('#pNodeId').select2({data: data}).change();
         }).fail(function (jqXHR) {
             cosole.error(jqXHR);
             currentLocation = null;
@@ -197,31 +270,13 @@
         currentNode = $(this).val();
         $.each(NodeData, function (i, v) {
             if (v.id == currentNode) {
-                NodeDataIdentifier = i;
-                $('#pIp').select2({
-                    data: $.map(v.allocations, function (item) {
-                        return {
-                            id: item.ip,
-                            text: item.ip,
-                        }
-                    }),
-                })
-            }
-        });
-    });
-
-    $('#pIp').on('change', function (event) {
-        currentIP = $(this).val();
-        $.each(NodeData[NodeDataIdentifier].allocations, function (i, v) {
-            if (v.ip == currentIP) {
-                $('#pPort').val(null);
-                $('#pPort').select2({
-                    data: $.map(v.ports, function (item) {
-                        return {
-                            id: item,
-                            text: item,
-                        }
-                    }),
+                $('#pAllocation').select2({
+                    data: v.allocations,
+                    placeholder: 'Select a Default Allocation',
+                });
+                $('#pAllocationAdditional').select2({
+                    data: v.allocations,
+                    placeholder: 'Select Additional Allocations',
                 })
             }
         });