add hero list

public/index.html

@@ -14,6 +14,8 @@
         small{font-size:65%;font-weight:400}
         pre{background-color:#DDD;padding-bottom:3px;padding-right:3px;border-radius:0 5px 0 5px;max-width:480px}
         code{display:block;background-color:#EEE;padding:4px}
+        dt{background-color:#EEE;padding:4px 6px}
+        dd{text-indent:1em;margin:4px 0 8px 0}
 
         .text-center{text-align:center}
         .mt-d5{margin-top:0.5em}
@@ -95,6 +97,18 @@
     <h4 class="mt-d5">JSON数据</h4>
     <pre><code id="herounion_stats">...</code></pre>
 
+    <h3 class="mt-1">爬虫列表</h3>
+    <dl class="mt-d5" id="herobots">
+        <!--
+        <dt>爬虫 1 <small>空闲</small></dt>
+        <dd>
+            Machete的Hero爬虫
+            - https://tajian.tv
+        </dd>
+        -->
+    </dl>
+
+
     <footer class="mt-4 text-center">
         &copy;copyright <a href="https://filesite.io" target="_blank">FileSite.io</a>
     </footer>
@@ -120,6 +134,33 @@
             }
         };
 
+        var htmlspecialchars = function(str) {
+            return str.replace('&', '&amp;').replace('<', '&lt;').replace('>', '&gt;');
+        };
+
+        var renderHeros = function(heros) {
+            if (!heros || heros.length == 0) {
+                $('#herobots').text('暂无爬虫加入联盟。');
+                return;
+            }
+
+            var txtStatus = {idle: '空闲', busy: '繁忙', offline: '离线'};
+            var html = '', item;
+            for (var index in heros) {
+                item = heros[index];
+                html += '<dt>' + htmlspecialchars(item['name']) + ' <small>'
+                        + txtStatus[item['status']] + '</small></dt>';
+                html += '<dd>'
+                        + htmlspecialchars(item['description'])
+                        + '，支持：' + JSON.stringify(item['platforms'])
+                        + '，合约：' + JSON.stringify(item['contracts'])
+                        + '，联系：' + htmlspecialchars(item['contact'])
+                        + '</dd>';
+            }
+
+            $('#herobots').html(html);
+        };
+
         var api = '/api/stats/';
         $.ajax({
             url: api,
@@ -131,6 +172,15 @@
             renderStats(data.taskStatus);
             renderStats(data.heroStatus);
         });
+
+        api = '/api/heros/';
+        $.ajax({
+            url: api,
+            method: 'GET',
+            dataType: 'json'
+        }).done(function(data) {
+            renderHeros(data);
+        });
     </script>
 </body>
 </html>