From 82e739d80e12ab606cda7e087061193ab054a9a9 Mon Sep 17 00:00:00 2001
From: Joseph Nuthalapati <njoseph@thoughtworks.com>
Date: Sat, 18 Nov 2017 13:08:35 +0530
Subject: [PATCH] Merge header columns for client rows of one type

Signed-off-by: Joseph Nuthalapati <njoseph@thoughtworks.com>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
---
 plinth/templates/clients.html        | 126 +++++++++++++++++++--------
 plinth/templatetags/plinth_extras.py |  13 +++
 2 files changed, 104 insertions(+), 35 deletions(-)

diff --git a/plinth/templates/clients.html b/plinth/templates/clients.html
index 7d86d0bcc..3e3d65e07 100644
--- a/plinth/templates/clients.html
+++ b/plinth/templates/clients.html
@@ -30,13 +30,28 @@
   </p>
 
   <table id="clients" class="table table-hover collapse">
-      {% if clients|has_web_clients %}
-    {% for client in clients %}
-      {% if client|has_web_clients %}
-        {% for platform in client.platforms %}
+
+    {% if clients|has_web_clients %}
+     {% with clients|of_type:'web' as web_clients %}
+      <tr>
+          <th rowspan=" {{ web_clients|length }}"> Web </th>
+          {% with web_clients|first as client %}
+          {% for platform in client.platforms %}
           {% if platform.type == 'web' %}
+          <td> {{ client.name }} </td>
+          <td>
+              <a href="{{ platform.url }}">
+                  <button type="button" class="btn btn-success">Launch</button>
+              </a>
+          </td>
+          {% endif %}
+          {% endfor %}
+          {% endwith %}
+      </tr>
+      {% for client in web_clients|slice:"1:" %}
+          {% for platform in client.platforms %}
+            {% if platform.type == 'web' %}
        <tr>
-          <th> Web </th>
           <td> {{ client.name }} </td>
           <td>
               <a href="{{ platform.url }}">
@@ -44,43 +59,83 @@
               </a>
           </td>
        </tr>
-       {% endif %}
+             {% endif %}
+           {% endfor %}
        {% endfor %}
-       {% endif %}
-       {% endfor %}
-       {% endif %}
+       {% endwith %}
+     {% endif %}
 
        {% if clients|has_desktop_clients %}
-       {% for client in clients %}
-       {% if client|has_desktop_clients %}
-      <tr>
-          <th> Desktop </th>
-          <td> {{ client.name }} </td>
-          <td>
-              <div class ="row">
-                  {% for platform in client.platforms %}
-                  {% if platform.type == 'download' %}
-                  <div class="col-md-2 col-xs-4">
-                      <a href="{{ platform.url }}">
-                          {% with 'theme/icons/'|add:platform.os|add:'.png' as icon %}
-                          <img class="os-icon" src="{% static icon %}" />
-                          {% endwith %}
-                      </a>
-                  </div>
-                  {% endif %}
-                  {% endfor %}
-              </div>
-          </td>
-      </tr>
-      {% endif %}
+       {% with clients|of_type:'desktop' as desktop_clients %}
+       <tr>
+           <th rowspan="{{ desktop_clients|length }}"> Desktop </th>
+           {% with desktop_clients|first as client %}
+           <td> {{ client.name }} </td>
+           <td>
+               <div class ="row">
+                   {% for platform in client.platforms %}
+                   {% if platform.type == 'download' %}
+                   <div class="col-md-2 col-xs-4">
+                       <a href="{{ platform.url }}">
+                           {% with 'theme/icons/'|add:platform.os|add:'.png' as icon %}
+                           <img class="os-icon" src="{% static icon %}" />
+                           {% endwith %}
+                       </a>
+                   </div>
+                   {% endif %}
+                   {% endfor %}
+               </div>
+           </td>
+           {% endwith %}
+       </tr>
+       {% for client in desktop_clients|slice:"1:" %}
+       <tr>
+           <td> {{ client.name }} </td>
+           <td>
+               <div class ="row">
+                   {% for platform in client.platforms %}
+                   {% if platform.type == 'download' %}
+                   <div class="col-md-2 col-xs-4">
+                       <a href="{{ platform.url }}">
+                           {% with 'theme/icons/'|add:platform.os|add:'.png' as icon %}
+                           <img class="os-icon" src="{% static icon %}" />
+                           {% endwith %}
+                       </a>
+                   </div>
+                   {% endif %}
+                   {% endfor %}
+               </div>
+           </td>
+       </tr>
       {% endfor %}
+      {% endwith %}
       {% endif %}
 
       {% if clients|has_mobile_clients %}
-      {% for client in clients %}
-      {% if client|has_mobile_clients %}
+      {% with clients|of_type:'mobile' as mobile_clients %}
+      <tr>
+          <th rowspan="{{ mobile_clients|length }}"> Mobile </th>
+          {% with mobile_clients|first as client %}
+          <td> {{ client.name }} </td>
+          <td>
+          <div class="row">
+              {% for platform in client.platforms %}
+              {% if platform.type == 'store' and platform.os == 'android' or platform.os == 'ios' %}
+              <div class="col-md-2 col-xs-4">
+                  <a href="{{ platform.url }}">
+                      {% with 'theme/icons/'|add:platform.store_name|add:'.png' as icon %}
+                      <img class="store-icon" src="{% static icon %}" />
+                      {% endwith %}
+                  </a>
+              </div>
+              {% endif %}
+              {% endfor %}
+          </div>
+          </td>
+          {% endwith %}
+      </tr>
+      {% for client in mobile_clients|slice:"1:" %}
       <tr>
-          <th> Mobile </th>
           <td> {{ client.name }} </td>
           <td>
               <div class="row">
@@ -98,9 +153,10 @@
               </div>
           </td>
       </tr>
-      {% endif %}
       {% endfor %}
+      {% endwith %}
       {% endif %}
+
   </table>
 
 {% endif %}
diff --git a/plinth/templatetags/plinth_extras.py b/plinth/templatetags/plinth_extras.py
index 70a5180c9..0b13671fb 100644
--- a/plinth/templatetags/plinth_extras.py
+++ b/plinth/templatetags/plinth_extras.py
@@ -108,3 +108,16 @@ def has_mobile_clients(clients):
 def has_web_clients(clients):
     """Filter to find out whether an application has web clients"""
     return __check(clients, lambda x: x['type'] == 'web')
+
+
+@register.filter(name='of_type')
+def of_type(clients, typ):
+    """Filter clients of a particular type"""
+    if typ == 'mobile':
+        return list(filter(has_mobile_clients, clients))
+    elif typ == 'desktop':
+        return list(filter(has_desktop_clients, clients))
+    elif typ == 'web':
+        return list(filter(has_web_clients, clients))
+    else:
+        return clients