UX improvements for servers

allejo · Dec 11, 2015 · 32ec36b · 32ec36b
1 parent 01d861e
commit 32ec36b
Show file tree

Hide file tree

Showing 10 changed files with 53 additions and 130 deletions.
diff --git a/controllers/ServerController.php b/controllers/ServerController.php
@@ -11,6 +11,9 @@ public function listAction()
         return array("servers" => $servers);
     }
 
+    /**
+     * @todo An unstyled page might not be great
+     */
     public function showAction(Server $server, Player $me, Request $request)
     {
         if ($server->staleInfo()) {
@@ -38,4 +41,11 @@ public function editAction(Player $me, Server $server)
     {
         return $this->edit($server, $me, "server");
     }
+
+
+    protected function redirectTo($model)
+    {
+        // Redirect to the server list after creating/editing a server
+        return $this->redirectToList($model);
+    }
 }
diff --git a/src/Controller/CRUDController.php b/src/Controller/CRUDController.php
@@ -188,7 +188,7 @@ protected function canEdit($player, $model)
      * @param  ModelInterface $model The model to redirect to
      * @return Response
      */
-    private function redirectTo($model)
+    protected function redirectTo($model)
     {
         if ($model instanceof UrlModel) {
             return new RedirectResponse($model->getUrl());

diff --git a/views/Server/list.html.twig b/views/Server/list.html.twig
@@ -30,34 +30,7 @@
                     <div class="o-col--half c-servers__server" data-id="{{ server.id }}">
                         <div class="dimmable">
                             <div class="c-servers__server__info">
-                                <header>
-                                    {% set status = (server.online) ? "online" : "offline" %}
-
-                                    <span class="c-servers__server__info__status c-servers__server__info__status--{{ status }}" title="Server is currently {{ status }}">&bull;</span>
-                                    <span class="c-servers__server__info__name">{{ server.name }}</span>
-                                    {{ server.country.flagLiteral | raw }}
-
-                                    {% if me.canEdit(server) or me.canDelete(server) %}
-                                        <ul class="c-servers__server__options is-horizontal has-no-padding">
-                                            {% if me.canEdit(server) %}
-                                                <li>
-                                                    <a class="server-refresh" href="{{ path('server_show', { server: server.id, forced: 1 }) }}">
-                                                        <i class="fa fa-refresh"></i>
-                                                    </a>
-                                                </li>
-                                                <li>{{ link_to(server, 'pencil', 'edit') }}</li>
-                                            {% endif %}
-
-                                            {% if me.canDelete(server) %}
-                                                <li>{{ link_to(server, 'minus', 'delete') }}</li>
-                                            {% endif %}
-                                        </ul>
-                                    {% endif %}
-                                </header>
-
-                                <p class="c-servers__server__info__address">{{ server.address }}</p>
-                                <p class="c-servers__server__info__playerCount">Player count: {{ server.numPlayers }}</p>
-                                <small class="c-servers__server__info__updated">Updated {{ server.lastUpdate | humanTime }}</small>
+                                {% include "Server/show.html.twig" %}
                             </div>
                         </div>
                     </div>

diff --git a/views/Server/show.html.twig b/views/Server/show.html.twig
@@ -1,59 +1,28 @@
-{% import _self as serverlist %}
+<header>
+    {% set status = (server.online) ? "online" : "offline" %}
 
-<section class="title">
-    {% set status = "offline" %}
-
-    {% if server.online %}
-        {% set status = "online" %}
-    {% endif %}
-
-    <span class="status {{ status }}" title="Server is currently {{ status }}">&bull;</span>
-    <span class="name">{{ server.name }}</span>
+    <span class="c-servers__server__info__status c-servers__server__info__status--{{ status }}" title="Server is currently {{ status }}">&bull;</span>
+    <span class="c-servers__server__info__name">{{ server.name }}</span>
     {{ server.country.flagLiteral | raw }}
 
-    <ul>
-        {% if me.canEdit(server) %}
-            <li>
-                <a class="server-refresh" href="{{ path('server_show', { server: server.id, forced: 1 }) }}">
-                    <i class="fa fa-refresh"></i>
-                </a>
-            </li>
-            <li>{{ link_to(server, 'pencil', 'edit') }}</li>
-        {% endif %}
-
-        {% if me.canDelete(server) %}
-            <li>{{ link_to(server, 'minus', 'delete') }}</li>
-        {% endif %}
-    </ul>
-</section>
-
-<p class="address">{{ server.address }}</p>
-<p class="playerCount">Player count: {{ server.numPlayers }}</p>
-
-{% if server.players is not empty %}
-    <ul class="players">
-        {% for player in server.players %}
-            <li>{{ player.sign ~ " " ~ serverlist.team(player) | trim }}</li>
-        {% endfor %}
-    </ul>
-{% endif %}
-
-<small>Updated {{ server.lastUpdate | humanTime }}</small>
-
-{% macro team(player) %}
-    {% set team = player.team %}
-
-    {% if team == 0 %}
-        (Rogue)
-    {% elseif team == 1 %}
-        (Red)
-    {% elseif team == 2 %}
-        (Green)
-    {% elseif team == 3 %}
-        (Blue)
-    {% elseif team == 4 %}
-        (Purple)
-    {% elseif team == 5 %}
-        (Observer)
+    {% if me.canEdit(server) or me.canDelete(server) %}
+        <ul class="c-servers__server__options is-horizontal has-no-padding">
+            {% if me.canEdit(server) %}
+                <li>
+                    <a class="server-refresh" href="{{ path('server_show', { server: server.id, forced: 1 }) }}">
+                        <i class="fa fa-refresh"></i>
+                    </a>
+                </li>
+                <li>{{ link_to(server, 'pencil', 'edit') }}</li>
+            {% endif %}
+
+            {% if me.canDelete(server) %}
+                <li>{{ link_to(server, 'minus', 'delete') }}</li>
+            {% endif %}
+        </ul>
     {% endif %}
-{% endmacro %}
+</header>
+
+<p class="c-servers__server__info__address">{{ server.address }}</p>
+<p class="c-servers__server__info__playerCount">Player count: {{ server.numPlayers }}</p>
+<small class="c-servers__server__info__updated">Updated {{ server.lastUpdate | humanTime }}</small>
diff --git a/web/assets/js/min/utilities.js b/web/assets/js/min/utilities.js
diff --git a/web/assets/js/partials/Select2-Country.js b/web/assets/js/partials/Select2-Country.js
@@ -15,6 +15,10 @@ function formatCountry(country) {
 }
 
 $(document).ready(function() {
+    if (!$.fn.select2) {
+        return;
+    }
+
     $(".js-select__country").select2({
         templateResult: formatCountry,
         templateSelection: formatCountry

diff --git a/web/assets/js/partials/Select2-Roles.js b/web/assets/js/partials/Select2-Roles.js
@@ -15,6 +15,10 @@ function formatRole(role) {
 }
 
 $(document).ready(function() {
+    if (!$.fn.select2) {
+        return;
+    }
+
     $(".js-select__role").select2({
         templateResult: formatRole,
         templateSelection: formatRole,

diff --git a/web/assets/js/partials/Select2-Timezones.js b/web/assets/js/partials/Select2-Timezones.js
@@ -1,3 +1,7 @@
 $(document).ready(function() {
+    if (!$.fn.select2) {
+        return;
+    }
+
     $(".js-select__timezone").select2();
 });
diff --git a/web/assets/js/profile.js b/web/assets/js/profile.js
diff --git a/web/assets/js/servers.js b/web/assets/js/servers.js
@@ -8,7 +8,7 @@ function initPage() {
     // Add an invisible dimmer to elements that don't have one yet
     $(".dimmable").prepend(dimmer).prepend(spinner);
 
-    $(".server").each(function() {
+    $(".c-servers__server").each(function() {
         var url = baseURLNoHost + "/servers/" + $(this).attr("data-id");
         $(this).updateServer(url);
     });
@@ -18,16 +18,16 @@ $(document).ready(function() {
     initPage();
 });
 
-$(".servers").on("click", ".server-refresh", function(event) {
+$(".c-servers").on("click", ".server-refresh", function(event) {
     event.preventDefault();
 
-    $(this).parents(".server").updateServer($(this).attr("href"));
+    $(this).parents(".c-servers__server").updateServer($(this).attr("href"));
 });
 
 $.fn.updateServer = function(url) {
     var server = $(this);
 
-    server.startSpinners().find(".server_info").load(url, function() {
+    server.startSpinners().find(".c-servers__server__info").load(url, function() {
         server.stopSpinners();
     });
 };