FABE: Admin console

Final phase, the admin console, where we can list, edit and delete entries at will. This post is going to be a little longer than previous ones so don't get bored, pay attention.

First, the list of entries from where to pick one to edit or delete. We will call it 'admin' and as usual, we need a jss script and an html template as follows:

/* admin.jss */

var view,model,data={};
model = require('./models.jss');
data  = model.getLastTitles(20);
view  = new Template().process('admin',data);
response.write(view);

Grab the html template from here: admin.html

Now, in order to edit an entry we will use their urlified id and pass it to the edit script:

/* edit.jss?url=anypost */

var view,model,data={};
model     = require('./models.jss');
data.post = model.getPost(request.get.url);
view      = new Template().process('edit',data);
response.write(view);

The edit form will use the same Yahoo Rich Text Editor we used to create new entries. Grab the html template from here: edit.html

Once we are done editing, we review our changes and update them to the database like this:

/* review.jss */

var view,data={};
data.title   = request.post.xtitle;
data.content = request.post.xcontent;
view = new Template().process('review',data);
response.write(view);

And the template to approve or dissapprove the changes review.html from where we send the changes to the server to update the database and the feed:

/* update.jss */

var model,feed,post;
model = require('./models.jss');
feed  = require('./feeder.jss');

post={
  content : cleanContent(request.post.xcontent),
  summary : cleanSummary(request.post.xcontent)
}

model.updatePost(post);  // save post
feed.updateFeed();       // update feed

response.status(303); 
response.header({'Location':'admin'}); // redirect to admin page

// Utils
function cleanContent(txt){ return HTML.unescape(txt).replace(/'/g,"\'"); }
function cleanSummary(txt){ return HTML.unescape(txt).replace(/'/g,"\'").replace(/<[a-zA-Z\/][^>]*>/gi,'').substr(0,200)+'...'; }

To delete entries, we just click on an article and ask for confirmation, then we call an ajax method to delete the entry on the server without leaving the page. On return we remove the entry from the list.

/* delete.jss?url=anypost */

var model,ok;
model = require('./models.jss');
ok    = model.deletePost(request.post.url);
response.write(ok);

This is the code on the client side to interact with the server using ajax, cool huh?

function delpost(title,url,n){
  var ok=confirm('Title: '+title+'.\n\n Do you want to delete this entry?');
  if(ok){ ajax('delete','url='+url,delrow,n); } // delete post 
}
function delrow(res,n){
  var tr = document.querySelector("#row"+n);
  tr.parentNode.removeChild(tr);
}
function ajax(url,data,callback,args){
  var http = new XMLHttpRequest();
  if(!data){mode="GET";} else {mode="POST";}
  http.open(mode,url,true);
  if(mode=="POST"){http.setRequestHeader('Content-Type','application/x-www-form-urlencoded');}
  http.onreadystatechange=function(){if(http.readyState==4){callback(http.responseText,args);}};
  http.send(data);
}

Finally, some minor changes to the models.jss script to add the admin methods of updatePost() and deletePost(), some minor changes to the style.css stylesheet for the list of entries, and some other changes to the .htaccess file to prettify view and edit urls.

Pheew, we're done. A fully functional and fricking awesome blog engine!