[enh] There should be a patch method. Also, DOM events should work...

dbInit/index.js

@@ -6,17 +6,17 @@ const dbInit = {};
 
 const bulkData = [
   { "index" : { "_index" : "changelog" } },
-  { "author" : "John Ripper <john@theripper.com", 
+  { "author" : "John Ripper  <john@theripper.com>", 
     "content":"* machines: Installed the server\n```debootstrap -t foobar```", 
     "server": "server.example.com",
     "created_at":"2020-05-23T09:50:33.397Z"},
   { "index" : { "_index" : "changelog" } },
-  { "author" : "John Ripper <john@theripper.com", 
+  { "author" : "John Ripper  <john@theripper.com>", 
     "content":"* db: Installed mysql\n```apt install mariadb-server```", 
     "server": "server.example.com",
     "created_at":"2020-05-23T10:50:33.397Z"},
   { "index" : { "_index" : "changelog" } },
-  { "author" : "John Ripper <john@theripper.com", 
+  { "author" : "John Ripper  <john@theripper.com>", 
     "content":"* nginx: add package\n```apt install nginx-full```", 
     "server": "server.example.com",
     "created_at":"2020-05-23T16:50:33.397Z"}

index.js

@@ -29,8 +29,6 @@ dbInit.init({
   seed : process.env.DB_SEED
 });
 
-console.log( "exit")
-
 const express = require('express');
 const app = express();
 
@@ -40,6 +38,7 @@ app.use(express.static('public'));
 const bodyParser = require('body-parser');
 app.use(bodyParser.json());
 app.use(bodyParser.raw());
+app.use(bodyParser.urlencoded({ extended: true })); 
 app.use(bodyParser.text({ type : "text/*" }));
 app.disable('x-powered-by');       
 
@@ -64,14 +63,15 @@ function requireAuthentication( req, res, next ){
 app.all('*', requireAuthentication);
 
 const routes = require( "./routes");
+app.get('/get/:id', routes.get);
 app.get('/log/:id', routes.log);
 app.get('/health', routes.health);
 app.get('/search', routes.search);
-app.post('/*', routes.add);
 app.get('/*', routes.main);
-app.patch('/*', routes.main);
+app.post('/*', routes.add);
+app.patch('/patch/:id', routes.patch);
 app.put('/*', routes.main);
-app.delete('/*', routes.main);
+app.delete('/delete/:id', routes.delete);
 
 
 app.listen(port, () => {

public/css/site.css

@@ -5,41 +5,30 @@
 */
 
 .log {
-    margin-bottom: 10px;
+  padding: 16px 0;
   border-top: 1px solid #eee;
-    padding-top: 6px;
-}
-.log p {
-    color: #666;
-}
-.log span.cmd {
-	background: #eee;
-	color: #003e80;
-	padding: 3px 8px;
-}
-.log pre {
-    font-size: 1.0rem;
-    color: #333;
 }
 
-.log .meta a {
-  color: #666;
+.log .meta {
   font-size: .875rem;
+  color: #888;
+  line-height:1.2em;
+  text-align: right;
+
 }
+
 .log .meta p {
-    font-size: .875rem;
-    line-height:1em;
   margin: 0px;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 .log .meta p.server {
   color: #333;
+  font-size:1.125rem;
 }
 .log .meta .actions-toggle {
   margin: 0;
   padding: 0;
-    color: #666;
   cursor: pointer;
   line-height:1em;
 }
@@ -47,3 +36,18 @@
 .log .meta .actions{
   display:none;
 }
+
+.log pre {
+  font-size: 1.125rem;
+  color: #333;
+}
+.log pre .cmd {
+  background: #eee;
+  color: #333f4d;
+  padding: 3px 8px;
+}
+@media (max-width: 991.98px){
+.log .meta {
+  text-align: left;
+}
+

public/js/app.js

@@ -1,5 +1,100 @@
 /* global initData, authorizationToken */
 
+$(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" );
+    });
+  };
+
   // List of HTML entities for escaping.
   var htmlEscapes = {
     '&': '&amp;',
@@ -14,27 +109,37 @@ var htmlEscapes = {
   var htmlEscaper = /[&<>"'\/]/g;
 
   // Escape a string for HTML interpolation.
-escape = function(string) {
+  const 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>')
-}
+  const urlRegex = /(\S+): (https?:&#x2F;&#x2F;[^\s]+)/g;
+  const url = function(string){
+    return ''+string.replace(urlRegex, '<a target="_blank" href="$2">$1</a>');
+  };
   var titleRegex = /^(.*\n)/;
-title = function(string){
+  const title = function(string){
     return ''+string.replace(titleRegex, '<b>$1</b>');
-}
-var cmdRegex = /```([^`]*?)```/g
-cmd = function(string) {
+  };
+  var cmdRegex = /```([^`]*?)```/g;
+  const cmd = function(string) {
     return ''+string.replace(cmdRegex, '<span class="cmd">$1</span>');
-}
-date = function(date){
-  var D = new Date(date);
+  };
+  const date = function(string){
+    var D = new Date(string);
     return D.toLocaleDateString()+" "+D.toLocaleTimeString();
-}
+  };
+  const mailRegexp = /(.*)  &lt;(.+@.+)&gt;/;
+  const  mail = function( string ){
+    return ''+string.replace(mailRegexp, `<a href="mailto:${string}">$1</a>`);
+  };
+  
+  const formatContent = function(string){
+    return cmd(title(url(escape(string))));
+  };
+  
+  
   function updatePage(data){
 
     var content = "";
@@ -51,53 +156,40 @@ function updatePage(data){
       content += `
 
       <div class="log row">
-      <div class="meta col-lg-2 text-right">
+        <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">  ${escape(item.author)} </p>
+            <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="destroy btn btn btn-outline-secondary" href="/destroy/${id}">Remove</a>
-		    <a class="edit btn btn btn-outline-secondary" href="/edit/${id}">Edit</a>
+              <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>
             </div>
         </div>
         </div>
-      <div class="col-lg">
-        <pre> ${cmd(title(url(escape(item.content))))}</pre>
+        <div class="col-lg data">
+          <pre> ${formatContent(item.content)}</pre>
         </div>
       </div>
       `;
     });
     $("#content").html(content);
     
+    // attache events
+    $(".actions-toggle").on("click",actionToggle );
+    $('.delete').on('click', deleteButton);
+    $('.edit').on('click', editButton );
+
   }
 
-$("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" );
-  });
-});
+  $("input").on("keyup",search );
 
   updatePage( initData );
 
-$(".actions-toggle").on("click",(e) => { var el=e.target; $(el).parent().siblings('.actions').show(); $(el).hide(); } )
 
+});

routes/index.js

@@ -54,6 +54,53 @@ const routes = {
           res.json({"health":0,"msg":"Lost connection to ES"});
       });
     },
+    delete: (req,res) => {
+      const id= req.params.id;
+      // Reindex the doc to the "trash" index
+      var log = client.reindex({
+        refresh: true,
+        max_docs: 1,
+        body: {
+          source: {
+            index: 'changelog',
+            query: {
+              term: {
+                _id: id
+              }
+            }          
+          },
+          dest: {
+            index: 'changelog-trash',
+          }
+        }
+      })
+      .then( (results, err) => {
+        
+          console.log(`reindexing success for id ${id}`)
+          // Remove it from the original index
+          return client.delete({
+            index: "changelog",
+            id: id
+          });
+
+        }, (e) => {
+
+          console.log("reindexing error")
+          res.status(400);
+          res.end("error");
+
+      })
+      .then( (results, err) => {
+        
+          console.log(`Delete success for id ${id}`)
+          res.end("ok");
+
+        },(results, err) => {
+          console.log(`Delete error for id ${id}`)
+          res.status(400);
+          res.end("error");      
+      });
+    },
     add: (req, res) => {
 
       const body = req.body;
@@ -69,6 +116,37 @@ const routes = {
         res.end("error");
       });
     } ,
+    get: (req, res) => {
+
+      const id= req.params.id;
+      var log = client.get({
+          index: 'changelog',
+          id: id
+      }).then( (results, err) => {
+        res.json(results);
+      }, (e) => {
+        res.status(400);
+        res.json({msg:"Failed to get record"});
+      });
+    },
+    patch: (req,res) => {
+      const id= req.params.id;
+      const content= req.body.content;
+      var log = client.update({
+        
+          index: 'changelog',
+          id: id,
+          body:{
+            doc:{
+              content:content
+            }
+          }
+      }).then( (results, err) => {
+        res.json(results);
+      }, (e) => {
+        res.status(400);
+        res.json({msg:"Failed to get record"});
+      });    },
     log: (req, res) => {
 
       const id= req.params.id;