Improve result page

static/css/style.css

@@ -24,3 +24,11 @@ input[type=text] {
     border-radius: 100ex;
     border-style: solid;
 }
+
+.red {
+    color: #e00;
+}
+
+.orange {
+    color: #a00;
+}

templates/results.html

@@ -3,25 +3,33 @@
 {% block content %}
 <h2>Latency to {{ target }}</h2>
 
-<p>Job submitted at {{ target.submitted }}</p>
+<p>Job submitted at {{ target.submitted.strftime('%Y-%m-%d %H:%M') }}</p>
 
 <table>
   <tr>
-    <th>Source</th>
-    <th>Contact</th>
     <th>Latency</th>
     <th>Jitter</th>
     <th>Packet loss</th>
+    <th>Source</th>
+    <th>Contact</th>
     <th>Date</th>
   </tr>
   {% for r in results %}
+  {% set packetloss = (100 * (r.probes_sent - r.probes_received) / r.probes_sent) %}
   <tr>
+    <td>{% if r.avgrtt is not none() %}{{ r.avgrtt }} ms{% endif %}</td>
+    <td>{% if r.jitter is not none() %}{{ r.jitter }} ms{% endif %}</td>
+    <td><span {% if packetloss >= 50 %}
+        class="red"
+        {% elif packetloss > 0 %}
+        class="orange"
+        {% endif %}>
+        {{ packetloss|round(2) }}%
+      </span>
+    </td>
     <td>{{ r.participant.name }}</td>
     <td>{{ r.participant.contact }}</td>
-    <td><strong>{{ r.avgrtt }} ms</strong></td>
-    <td>{{ r.jitter }} ms</td>
-    <td>{{ 100 * (r.probes_sent - r.probes_received) / r.probes_sent }}%</td>
-    <td>{{ r.date }}</td>
+    <td>{{ r.date.strftime('%Y-%m-%d %H:%M') }}</td>
   </tr>
   {% endfor %}
 </table>