changelog-server/public/js/app.js

196 lines
4.9 KiB
JavaScript
Raw Normal View History

2020-05-16 16:20:04 +00:00
/* global initData, authorizationToken */
2020-05-15 23:24:56 +00:00
2020-05-23 21:26:51 +00:00
$(function(){
const actionToggle = function(e){
var el=e.target;
$(el).parent().siblings('.actions').show();
$(el).hide();
};
const deleteButton = function(e){
const el = $(e.target);
const url = el.attr('href');
$.ajax(url,{
method: "DELETE",
beforeSend: function(request) {
request.setRequestHeader("authorizationToken", authorizationToken);
}
})
.done(function(data) {
$(el).parents('.log').remove();
})
.fail(function() {
alert( "error" );
});
return false;
};
const editButton = function(e){
const el = $(e.target);
const id = el.attr("rel");
const pre = el.parents(".log").find("pre");
$.ajax(`/get/${id}`,{
beforeSend: function(request) {
request.setRequestHeader("authorizationToken", authorizationToken);
}
})
.done(function(data) {
pre
.text(data._source.content)
.attr('rel',id)
.css("background","#ccc")
.attr("contenteditable",true)
.focus();
$('body pre[contenteditable]').on('focusout', contentEdited );
})
.fail(function(data,err) {
console.log(data,err);
alert( "error" );
});
return false;
};
const contentEdited = function(e) {
const el = $(e.target);
const id = el.attr('rel');
const content = el.text();
$.ajax(`/patch/${id}`,{
method: "PATCH",
data: {content:content},
beforeSend: function(request) {
request.setRequestHeader("authorizationToken", authorizationToken);
}
})
.done(function(data) {
el
.css("background","")
.html( formatContent(content) );
})
.fail(function(data,err) {
console.log(data,err);
alert( "error" );
});
};
const search = 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" );
});
};
2020-05-23 21:26:51 +00:00
// List of HTML entities for escaping.
var htmlEscapes = {
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
'"': '&quot;',
"'": '&#x27;',
'/': '&#x2F;'
};
2020-05-15 23:24:56 +00:00
2020-05-23 21:26:51 +00:00
// Regex containing the keys listed immediately above.
var htmlEscaper = /[&<>"'\/]/g;
2020-05-15 23:24:56 +00:00
2020-05-23 21:26:51 +00:00
// Escape a string for HTML interpolation.
const escape = function(string) {
2020-05-23 21:26:51 +00:00
return ('' + string).replace(htmlEscaper, function(match) {
return htmlEscapes[match];
});
};
const urlRegex = /(\S+): (https?:&#x2F;&#x2F;[^\s]+)/g;
const url = function(string){
2020-05-23 21:26:51 +00:00
return ''+string.replace(urlRegex, '<a target="_blank" href="$2">$1</a>');
};
var titleRegex = /^(.*\n)/;
const title = function(string){
2020-05-23 21:26:51 +00:00
return ''+string.replace(titleRegex, '<b>$1</b>');
};
var cmdRegex = /```([^`]*?)```/g;
const cmd = function(string) {
2020-05-23 21:26:51 +00:00
return ''+string.replace(cmdRegex, '<span class="cmd">$1</span>');
};
const date = function(string){
2020-05-23 21:26:51 +00:00
var D = new Date(string);
return D.toLocaleDateString()+" "+D.toLocaleTimeString();
};
const mailRegexp = /(.*) &lt;(.+@.+)&gt;/;
const mail = function( string ){
2020-05-23 21:26:51 +00:00
return ''+string.replace(mailRegexp, `<a href="mailto:${string}">$1</a>`);
};
const formatContent = function(string){
return cmd(title(url(escape(string))));
};
2020-05-23 21:26:51 +00:00
function updatePage(data){
2020-05-15 23:24:56 +00:00
2020-05-23 21:26:51 +00:00
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="meta col-lg-2 ">
<p class="server"> ${escape(item.server)} </p>
<a href="/log/${id}">
${date(escape(item.created_at))} <br/>
</a>
<div class="d-none d-lg-block">
<p class="author"> ${mail(escape(item.author))} </p>
<p>
<a class="actions-toggle btn-link btn-sm">Actions</a>
</p>
<div class="actions btn-group btn-group-sm" role="group" aria-label="log actions">
<a class="delete btn btn btn-outline-secondary" rel="${id}" href="/delete/${id}">Remove</a>
<a class="edit btn btn btn-outline-secondary" rel="${id}" href="/edit/${id}">Edit</a>
2020-05-23 21:26:51 +00:00
</div>
</div>
</div>
<div class="col-lg data">
<pre> ${formatContent(item.content)}</pre>
2020-05-23 21:26:51 +00:00
</div>
2020-05-22 21:44:10 +00:00
</div>
2020-05-23 21:26:51 +00:00
`;
});
$("#content").html(content);
// attache events
$(".actions-toggle").on("click",actionToggle );
$('.delete').on('click', deleteButton);
$('.edit').on('click', editButton );
2020-05-15 23:24:56 +00:00
2020-05-23 21:26:51 +00:00
}
$("input").on("keyup",search );
2020-05-15 23:24:56 +00:00
2020-05-23 21:26:51 +00:00
updatePage( initData );
2020-05-22 21:44:10 +00:00
2020-05-23 21:26:51 +00:00
});