crafty-4/app/frontend/templates/panel/server_logs.html

{% extends ../base.html %}

{% block meta %}
{% end %}

{% block title %}Crafty Controller - {{ translate('serverDetails', 'serverDetails', data['lang']) }}{% end %}

{% block content %}

<div class="content-wrapper">

  <!-- Page Title Header Starts-->
  <div class="row page-title-header">
    <div class="col-12">
      <div class="page-header">
        <h4 class="page-title">
          {{ translate('serverDetails', 'serverDetails', data['lang']) }} - {{
          data['server_stats']['server_id']['server_name'] }}
          <br />
          <small>UUID: {{ data['server_stats']['server_id']['server_uuid'] }}</small>
        </h4>
      </div>
    </div>

  </div>
  <!-- Page Title Header Ends-->

  {% include "parts/details_stats.html" %}

  <div class="row">

    <div class="col-sm-12 grid-margin">
      <div class="card">
        <div class="card-body  pt-0">
          <span class="d-none d-sm-block">
            {% include "parts/server_controls_list.html %}
          </span>
          <span class="d-block d-sm-none">
            {% include "parts/m_server_controls_list.html %}
          </span>

          <div class="col-md-12">
            <div class="input-group">
              <div id="virt_console" class=""
                style="width: 100%; font-size: .8em; padding: 5px 10px; border: 1px solid var(--outline); background-color:var(--card-banner-bg);height:500px; overflow: scroll;">
              </div>
            </div>
            <br />
            <label for="ignore">{{ translate('serverDetails', 'filter', data['lang']) }}</label>
            <input type="text" class="form-control" name="ignore" id="searchbox" value="" required>
            <br />
            <br />
            <h4>{{ translate('serverDetails', 'filterList', data['lang']) }}</h4>
            <ul id="ignored-words" style="list-style: None;"></ul>
            <br />


          </div>

        </div>
      </div>
    </div>
  </div>

  <span class="is-hidden">secret</span>
</div>
<style>
  .is-hidden {
    display: none;
    position: fixed !important;
  }
</style>
<!-- content-wrapper ends -->

{% end %}

{% block js %}
<script>
  var cards = []
  if (localStorage.getItem("words")) {
    try {
      var words = JSON.parse(localStorage.getItem("words"));
    } catch {
      var words = []
    }
  } else {
    var words = [];
  }

  const serverId = new URLSearchParams(document.location.search).get('id')
  function get_server_log() {
    if (!$("#stop_scroll").is(':checked')) {
      $.ajax({
        type: 'GET',
        url: '/ajax/server_log?id=' + serverId + '&full=1',
        dataType: 'text',
        success: function (data) {
          console.log('Got Log From Server')
          $('#virt_console').html(data);
          scroll();
          cards = document.querySelectorAll('.box');
          liveSearch();
        },
      });
    }
  }

  //used to get cookies from browser - this is part of tornados xsrf protection - it's for extra security
  function getCookie(name) {
    var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
    return r ? r[1] : undefined;
  }

  $(document).ready(function () {
    console.log("ready!");
    get_server_log();
    populateWords();

  });


  function scroll() {
    var logview = $('#virt_console');
    if (logview.length)
      logview.scrollTop(logview[0].scrollHeight - logview.height());
  }

  function liveSearch() {
    let search_query = document.getElementById("searchbox").value;

    //Use innerText if all contents are visible
    //Use textContent for including hidden elements
    for (var i = 0; i < cards.length; i++) {
      if (words.length > 0) {
        let flag = false;
        for (var k = 0; k < words.length; k++) {
          if (cards[i].textContent.toLowerCase().includes(words[k])) {
            flag = true;
          }
        }
        if (!flag) {
          cards[i].classList.remove("is-hidden");
        } else {
          cards[i].classList.add("is-hidden");
        }
      } else {
        cards[i].classList.remove("is-hidden");
      }
    }
  }

  //A little delay
  let typingTimer;
  let typeInterval = 500;
  let searchInput = document.getElementById('searchbox');

  searchInput.addEventListener('keyup', (e) => {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(liveSearch, typeInterval);
    let key = e.keyCode;
    if (key === 13) {
      let word = document.getElementById("searchbox").value
      word = word.toLowerCase();
      if (word === "\\n") {
        window.alert("Nice try...");
        document.getElementById("searchbox").value = "";
        return;
      }
      safe_word = sanitize(word)
      words.push(word);
      $("#ignored-words").append("<li id=" + safe_word.replaceAll(" ", "-") + "><div class='card-header header-sm d-flex justify-content-between align-items-center'>" + word + "&nbsp;<button class='btn btn-danger' onclick='deleteItem(" + '"' + word + '"' + ")' ><i class='fas fa-trash'></i></button></div></li>")
      document.getElementById("searchbox").value = "";
      localStorage.setItem("words", JSON.stringify(words))
    }

  });

  function sanitize(string) {
    const map = {
      '&': '',
      '<': '',
      '>': '',
      '"': '',
      "'": '',
      "/": '',
    };
    const reg = /[&<>"'/]/ig;
    string = string.replaceAll("\\", "")
    return string.replace(reg, (match) => (map[match]));
  }

  function deleteItem(item) {
    safe_item = sanitize(item);
    console.log(item)
    words.splice(words.indexOf(item), words.indexOf(item));
    $("#" + safe_item.replaceAll(" ", "-")).remove();
    liveSearch();
    localStorage.setItem("words", JSON.stringify(words))
  }

  function populateWords() {
    for (var i = 0; i < words.length; i++) {
      let safe_word = sanitize(words[i]);
      $("#ignored-words").append("<li id=" + safe_word.replaceAll(" ", "-") + "><div class='card-header header-sm d-flex justify-content-between align-items-center'>" + words[i] + "&nbsp;<button class='btn btn-danger' onclick='deleteItem(" + '"' + words[i] + '"' + ")' ><i class='fas fa-trash'></i></button></div></li>")
    }
  }

</script>

{% end %}