flask-soc-site/templates/results-overview.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="static/javascript.js"></script>

<!-- took this from https://stackoverflow.com/questions/71301182/creating-a-html-table-with-expandable-collapsible-sections, need to place the Javascript elsewhere -->
<div class="table-container">
  <div class="results-table">
    <table id="myTable" class="table table-striped">
      <tr class="header">
        <th>IP address</th>
        <th>VirusTotal</th>
        <th>AbuseIPDB</th>
        <th>Domain</th>
        <th>Registration country</th>
        <th>Registration date</th>
        <th>Email security</th>
      </tr>
      <tbody>
        {% for host in hosts %}
        <tr>
          <td>{{host.host}}</td>
          <td>Score: {{host.vt['vendors_malicious']}} / {{host.vt['vendors_total']}}<br>
            Last updated: {{host.vt['last_update']}}</td>
          <td>Score: {{host.abuseipdb['data']['abuseConfidenceScore']}}
            Last reported: {{host.abuseipdb['data']['lastReportedAt']}}</td>
          <td>{{host.domain}}</td>
          <td>{{host.metadata['registrar_country']}}</td>
          <td>{{host.metadata['creation_date']}}</td>
          <td>SPF: {{host.emailsec[0]}}, DMARC: {{host.emailsec[1]}}</td>
        </tr>
        <tr>
          <td colspan="7" id="info">
            <p>
              Vendor marked this host as malicious or suspicious:
              {% for key, value in host.vt['all_vendors'].items() if value['category'] in ['malicious', 'suspicious'] %}
              {{key}}
              {% endfor %}
            </p>

          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

{# {% include "test-table.html" %} #}
<!-- important to know: uncommenting the line above makes the red/green JavaScript not work anymore, BUT makes the collapsible table row table work! Go figure it out XD -->

{% block scripts %}

{#{% for host in hosts %}#}
{#whoopsie = JSON.parse({{ host.vt_json.text | tojson }}) {% endfor %}#}
{#{{whoopsie}}#}

<script>


  $(document).ready(function () {
    $('myTable').DataTable({
      paging: false,
      searching: false,
      info: false,
      columnDefs: [{
        targets: '_all',
        createdCell: function (td, cellData, rowData, row, col) {
          if (cellData == 'outlook.com' && col == 0) {
            $(td).css({'background-color': 'red', 'color': 'white'});
          }
          if (cellData.startsWith('Score: 0' && col == 1)) {
            $(td).css({'background-color': 'orange', 'color': 'white'});
          }
          if (cellData > 0 && col == 2) {
            $(td).css({'background-color': 'grey', 'color': 'white'});
          }
          if (cellData > 0 && col == 3) {
            $(td).css({'background-color': 'green', 'color': 'white'});
          }
        },
      }
      ]
    })
  });

</script>

{% endblock %}