From ede0a6f1a4fc326cf507bf4a5b9015bf2e973151 Mon Sep 17 00:00:00 2001
From: Marian Steinbach <marian@giantswarm.io>
Date: Fri, 25 May 2018 20:05:19 +0200
Subject: [PATCH] Replace unicode check and x icons with ionicons icons

---
 webapp/src/index.js | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/webapp/src/index.js b/webapp/src/index.js
index 4044d6f..54e42c7 100644
--- a/webapp/src/index.js
+++ b/webapp/src/index.js
@@ -17,6 +17,9 @@ $(function(){
 
   var table = null;
 
+  var yes = '<i class="icon ion-md-checkmark-circle"></i>',
+    no = '<i class="icon ion-md-close-circle"></i>';
+
   $.getJSON('data/screenshots.json', function(screenshots){
 
     $.getJSON('data/spider_result.json', function(data){
@@ -53,10 +56,10 @@ $(function(){
 
         // IPs
         var ips = _.join(item.details.ipv4_addresses, ', ');
-        row.append('<td class="text '+ (ips === '' ? 'bad' : 'good') +' text-center">' + (ips === '' ? '❌' : ips) + '</td>');
+        row.append('<td class="text '+ (ips === '' ? 'bad' : 'good') +' text-center">' + (ips === '' ? no : ips) + '</td>');
 
         // SITE_REACHABLE
-        row.append('<td class="'+ (item.result.SITE_REACHABLE.value ? 'good' : 'bad') +' text-center">' + (item.result.SITE_REACHABLE.value ? '✅' : '❌') + '</td>');
+        row.append('<td class="'+ (item.result.SITE_REACHABLE.value ? 'good' : 'bad') +' text-center" data-order="'+ (item.result.SITE_REACHABLE.value ? '1' : '0') +'">' + (item.result.SITE_REACHABLE.value ? yes : no) + '</td>');
 
         // HTTP_RESPONSE_DURATION
         var durationClass = 'bad';
@@ -67,26 +70,26 @@ $(function(){
         // FAVICON
         var icon = item.result.FAVICON.value;
         var iconFile = (icon ? item.details.icons[0] : '');
-        row.append('<td class="' + (icon ? 'good' : 'bad') + ' text-center" data-order="'+ iconFile +'">' + (icon ? ('<img src="/siteicons/' + iconFile + '" class="icon" title="'+ iconFile +'">') : '❌') + '</td>');
+        row.append('<td class="' + (icon ? 'good' : 'bad') + ' text-center" data-order="'+ iconFile +'">' + (icon ? ('<img src="/siteicons/' + iconFile + '" class="siteicon" title="'+ iconFile +'">') : no) + '</td>');
 
         // HTTPS
         var hasHTTPS = item.result.HTTPS.value;
-        row.append('<td class="'+ (hasHTTPS ? 'good' : 'bad') +' text-center">' + (hasHTTPS ? '✅' : '❌') + '</td>');
+        row.append('<td class="'+ (hasHTTPS ? 'good' : 'bad') +' text-center" data-order="'+ (hasHTTPS ? '1' : '0') +'">' + (hasHTTPS ? yes : no) + '</td>');
 
         // WWW_OPTIONAL
         var wwwOptional = item.result.WWW_OPTIONAL.value;
-        row.append('<td class="'+ (wwwOptional ? 'good' : 'bad') +' text-center">' + (wwwOptional ? '✅' : '❌') + '</td>');
+        row.append('<td class="'+ (wwwOptional ? 'good' : 'bad') +' text-center" data-order="'+ (wwwOptional ? '1' : '0') +'">' + (wwwOptional ? yes : no) + '</td>');
 
         // one canonical URL
         var canonical = item.result.CANONICAL_URL.value;
-        row.append('<td class="'+ (canonical ? 'good' : 'bad') +' text-center">' + (canonical ? '✅' : '❌') + '</td>');
+        row.append('<td class="'+ (canonical ? 'good' : 'bad') +' text-center" data-order="'+ (canonical ? '1' : '0') +'">' + (canonical ? yes : no) + '</td>');
 
         var responsive = item.result.RESPONSIVE.value;
-        row.append('<td class="'+ (responsive ? 'good' : 'bad') +' text-center">' + (responsive ? '✅' : '❌') + '</td>');
+        row.append('<td class="'+ (responsive ? 'good' : 'bad') +' text-center" data-order="'+ (responsive ? '1' : '0') +'">' + (responsive ? yes : no) + '</td>');
 
         // feeds
         var feeds = item.result.FEEDS.value;
-        row.append('<td class="'+ (feeds ? 'good' : 'bad') +' text-center">' + (feeds ? '✅' : '❌') + '</td>');
+        row.append('<td class="'+ (feeds ? 'good' : 'bad') +' text-center" data-order="'+ (feeds ? '1' : '0') +'">' + (feeds ? yes : no) + '</td>');
 
         // screenshots
         var screenshot = false;
@@ -98,7 +101,7 @@ $(function(){
             screenshot += '<a class="screenshot" href="'+ lurl +'" target="_blank" title="Desktop"><i class="icon ion-md-desktop"></i></a>';
           }
         }
-        row.append('<td class="'+ (screenshot ? 'good' : 'bad') +' text-center">' + (screenshot ? screenshot : '❌') + '</td>');
+        row.append('<td class="'+ (screenshot ? 'good' : 'bad') +' text-center" data-order="'+ (screenshot ? '1' : '0') +'">' + (screenshot ? screenshot : no) + '</td>');
 
         // cms
         row.append('<td class="text text-center">' + (item.details.cms ? item.details.cms : '') + '</td>');