{% extends "views/layouts/base.html" %}

{% block yield %}

  <div class="slds-grid slds-grid--vertical-stretch">
    <div class="slds-col slds-size--3-of-12">
      <h3 class="slds-section-title--divider">Debug Logs</h3>
      <table class="slds-table slds-table--bordered" id="log-list">
        <tbody>
          {% for l in logs %}
          <tr>
            <td>
              <a onclick="openLog(this)" data-path="{{mavensmate.ui.getPathBaseName(l)}}" href="#">{{mavensmate.ui.getPathBaseName(l)}}</a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <div class="slds-col--padded slds-size--9-of-12">
      <div id='log-actions' class="slds-grid" style="display:none;">
        <div class="slds-col slds-size--10-of-12">
            <label for="debug-only">Debug Only</label><input id='debug-only' type='checkbox' /> 
        </div>
        <div class="slds-col slds-size--2-of-12">
            <button class="slds-button slds-button--brand" id="copy" data-clipboard-target="#log">Copy to Clipboard</button>
        </div>
      </div> 
      <div class="slds-box slds-box--small slds-theme--shade slds-scrollable" id="log-wrapper">
        <div id="log">
          <div class="slds-align--absolute-center">Log will display here when selected</div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block buttons %}
  <button onclick="startLogging()" class="slds-button slds-button--brand">Start Logging</button>
  <button onclick="stopLogging()" class="slds-button slds-button--neutral">Stop Logging</button>
  <button onclick="flushLogs()" class="slds-button slds-button--neutral">Flush Logs</button>
{% endblock %}

{% block body_js %}

<script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
<script>
  $(function(){
    //setup log actions
    new Clipboard('#copy');

    $('#debug-only').on('change',function(e){
      if($(this).is(":checked")) {
        $("#log :not(div:contains('|USER_DEBUG|'))").hide();
      }else{
        $("#log div").show();
      }
    });
  });

  var logs = [];
  var editor;
  var socket = io.connect(baseLocalServerURL);

  socket.on('new-log', function (data) {
    if (logs.indexOf(data.locationBasename) === -1) {
      $('#log-list > tbody').prepend('<tr><td><a data-path="'+data.locationBasename+'" href="#" onclick="openLog(this)">'+data.locationBasename+'</a></td></tr>');
      logs.push(data.locationBasename);
    }
  });

  function startLogging() {
    var opts = {
      showPageHeaderLoading: true,
      ajax: {
        type: 'POST',
        url: '/execute?async=1',
        data: JSON.stringify({
          command: 'start-logging'
        })
      }
    };

    mavensmate.request(opts)
      .then(function(response) {
        console.log('deploy done', response);
        showToast(response.result.message, 'success');
      })
      .catch(function(err) {
        console.error('could not start logging', err);
      })
      .finally(function() {
        hidePageHeaderLoading();
      });
  }

  function stopLogging() {
    var opts = {
      showPageHeaderLoading: true,
      ajax: {
        type: 'POST',
        url: '/execute?async=1',
        data: JSON.stringify({
          command: 'stop-logging'
        })
      }
    };

    mavensmate.request(opts)
      .then(function(response) {
        console.log('deploy done', response);
        showToast(response.result.message, 'success');
      })
      .catch(function(err) {
        console.error('could not stop logging', err);
      })
      .finally(function() {
        hidePageHeaderLoading();
      });
  }

  function flushLogs() {
    var opts = {
      showPageHeaderLoading: true,
      async: false,
      ajax: {
        type: 'POST',
        url: '/execute',
        data: JSON.stringify({
          command: 'flush-logs'
        })
      }
    };

    mavensmate.request(opts)
      .then(function(response) {
        console.log('flush logs done', response);
        showToast(response.message, 'success');
        $('#log-list tbody').html('');
        $('#log').html('<div class="slds-align--absolute-center">Log will display here when selected</div>');
        logs = [];
      })
      .catch(function(err) {
        console.error('could not flush logs', err);
      })
      .finally(function() {
        hidePageHeaderLoading();
      });
  }

  function openLog(el) {
    var $a = $(el);
    var logPath = $a.data('path');

    var opts = {
      showPageHeaderLoading: true,
      async: false,
      ajax: {
        type: 'GET',
        dataType: 'html',
        url: '/app/logs/'+encodeURI(logPath)
      }
    };
    mavensmate.request(opts)
      .then(function(response) {
        console.log('open log done', response);
        $('#log').html(response);
        $('#log-list tr').removeClass('slds-is-selected');
        $a.parent().parent().addClass('slds-is-selected');
        
        //log actions
        $('#log-actions').show();
        $('#debug-only').prop('checked', false);
      })
      .catch(function(err) {
        console.error('could not open log', err);
      })
      .finally(function() {
        hidePageHeaderLoading();
      });
  }
</script>
{% endblock %}