changelog-server/public/js/app.js

/* global initData, authorizationToken */

// List of HTML entities for escaping.
var htmlEscapes = {
  '&': '&',
  '<': '&lt;',
  '>': '&gt;',
  '"': '&quot;',
  "'": '&#x27;',
  '/': '&#x2F;'
};

// Regex containing the keys listed immediately above.
var htmlEscaper = /[&<>"'\/]/g;

// Escape a string for HTML interpolation.
escape = function(string) {
  return ('' + string).replace(htmlEscaper, function(match) {
    return htmlEscapes[match];
  });
};
var urlRegex = /(\S+): (https?:&#x2F;&#x2F;[^\s]+)/g;
url = function(string){
  return ''+string.replace(urlRegex, '<a target="_blank" href="$2">$1</a>')
}
var titleRegex = /^(.*\n)/;
title = function(string){
  return ''+string.replace(titleRegex, '<b>$1</b>');
}
var cmdRegex = /```([^`]*?)```/g
cmd = function(string) {
  return ''+string.replace(cmdRegex, '<span class="cmd">$1</span>');
}
date = function(date){
  var D = new Date(date);
  return D.toLocaleDateString()+" "+D.toLocaleTimeString();
}
function updatePage(data){
  
  var content = "";
  var item = {};
  var id = '';
  // If the log entry is unique, simulate a search result
  if( ! data['hits'] ){
    data = {hits:{hits:[data]}};
  }
  $.each(data.hits.hits, (k,v)=>{
    
    item = v._source;
    id = v._id;
    content += `

    <div class="log row">
      <div class="col-2 text-right">
	  <a href="/log/${id}">
	    ${date(escape(item.created_at))} <br/>
	  </a>
	  <div class="d-none d-lg-block">
		  <p class="server">  ${escape(item.server)} </p>
		  <p class="author">  ${escape(item.author)} </p>
		  <a class="actions-toggle btn-link btn-sm">Actions</a>
	  </div>
	  <div class="actions btn-group btn-group-sm" role="group" aria-label="log actions">
	    <a class="destroy btn btn btn-outline-secondary" href="/destroy/${id}">Remove</a>
	    <a class="edit btn btn btn-outline-secondary" href="/edit/${id}">Edit</a>
	  </div>
      </div>
      <div class="col-lg">
        <pre> ${cmd(title(url(escape(item.content))))}</pre>
      </div>
    </div>
    `;
  });
  $("#content").html(content);
  
}

$("input").on("keyup",function(e){
  const el = $(e.target);
  const val = el.val();
  if( val.length < 3 ){ return; }
  $.ajax("/search",{
    beforeSend: function(request) {
    request.setRequestHeader("authorizationToken", authorizationToken);
    },
    data: {
      q:val,
    }
  })  
  .done(function(data) {
    updatePage(data);
  })
  .fail(function() {
    alert( "error" );
  });
});

updatePage( initData );

$(".actions-toggle").on("click",(e) => { var el=e.target; $(el).next().show(); $(el).hide(); } )