From c630ac3beb327346a772211b6b6834acac0df02b Mon Sep 17 00:00:00 2001
From: Paul van Tilburg <paul@luon.net>
Date: Thu, 12 Jan 2012 11:38:40 +0100
Subject: [PATCH] Changed the routes to provide a more RESTful interface

---
 plemp.js                      | 71 +++++++++++++++++++----------------
 public/index.html             |  2 +-
 public/javascripts/dragreg.js |  6 +--
 3 files changed, 42 insertions(+), 37 deletions(-)

diff --git a/plemp.js b/plemp.js
index 0d0dafa..1353bb9 100644
--- a/plemp.js
+++ b/plemp.js
@@ -10,12 +10,14 @@
 var express = require("express"),
     form = require("connect-form"),
     fs = require('fs'),
+    path = require('path'),
     util = require("util")
 
 // Set up the Node Express application.
 var app = express.createServer(form({ keepExtensions: true,
                                       uploadDir: __dirname + '/public/upload' }));
 
+// FIXME: dummy database
 var draggables = {};
 // Initialise the draggables info.
 fs.readdir(__dirname + '/public/upload', function (err, files) {
@@ -43,55 +45,58 @@ app.get('/', function(req, res) {
   res.redirect('/index.html');
 });
 
-// The draggable route: provides direct access to the HTML generating code
-// for draggable objects.
-app.get('/draggable/:id', function(req, res) {
-  var file = "public/upload/" + req.params.id;
-  // Stuff taken from the Camping implementation.
-  drag = draggables[req.params.id];
-  var default_style = "left:" + drag.left + "px;top:" + drag.top + "px;";
-  console.log("Draggable: " + file);
-  res.send('<img class="draggable" id="' + req.params.id + '" ' +
-                'style="' + default_style + '" src="' + file + '">');
-});
-
-// The current route: accessed through AJAX requests by the main page
-// for getting the current (global) state (positions) of the draggables.
-app.get('/current', function(req, res) {
+// The retrieval controller:  accessed through AJAX requests by the main
+// page for getting/setting the state (positions) of the draggables.
+app.get('/draggables', function(req, res) {
   // Retrieve the current status of the draggables and return in JSON format.
   res.send(draggables);
 });
 
-// The position save route: access through AJAX request by the main page
-// for committing position changes of the draggables to the database, i.e. the
-// global state.
-app.post('/savepos/:id', function(req, res) {
-  // Set the position for the file with the given ID.
-  console.log("Got position for " + req.params.id + ";" +
-              " left: " + req.body.left +
-              " top: " + req.body.top);
-  var new_pos = draggables[req.params.id];
-  new_pos.top = req.body.top;
-  new_pos.left = req.body.left;
-});
-
-// The upload route: handles uploads from the main site.  This can either
-// be a file or some pasted text.  After upload the controler redirects to
-// the main page which includes the just uploaded file.
-app.post('/upload', function(req, res, next) {
+// The upload controller: handles uploads from the main site.  This can
+// either be a file or some pasted text.  After upload the controler
+// redirects to the main page which includes the just uploaded file.
+app.post('/draggables', function(req, res) {
   req.form.complete(function(err, fields, files) {
     if (err) {
       next(err);
     }
     else {
-      draggables[files.file.filename] = [350,200];
       console.log('File %s uploaded to %s', files.file.filename,
                                             files.file.path);
+      var file_id = path.basename(files.file.path);
+      draggables[file_id] = { name: files.file.filename,
+                              top: 200,
+                              left: 350 };
     }
   });
   res.redirect('home');
 });
 
+// The draggables controller:  provides direct access to the HTML
+// generating code for draggable objects.
+app.get('/draggables/:id', function(req, res) {
+  var file = "../upload/" + req.params.id;
+  // Stuff taken from the Camping implementation.
+  drag = draggables[req.params.id];
+  var default_style = "left:" + drag.left + "px;top:" + drag.top + "px;";
+  console.log("Get draggable: " + file);
+  res.send('<img class="draggable" id="' + req.params.id + '" ' +
+                'style="' + default_style + '" src="' + file + '">');
+});
+
+// The position save controller:  access through AJAX request by the main
+// page for committing position changes of the draggables to the database,
+// i.e. the global state.
+app.post('/draggables/:id', function(req, res) {
+  console.log("Got position for draggable " + req.params.id + ";" +
+              " left: " + req.body.left +
+              " top: " + req.body.top);
+  // Set the position for the file with the given ID.
+  var new_pos = draggables[req.params.id];
+  new_pos.top = req.body.top;
+  new_pos.left = req.body.left;
+});
+
 // Start the application.
 app.listen(3300);
 console.log('Plemp! started on http://127.0.0.1:%d/', app.address().port)
diff --git a/public/index.html b/public/index.html
index 47b9a93..354d50a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -20,7 +20,7 @@
     </div>
     <div id="add_dialog" style="display:none;">
       <div class="background"></div>
-      <form method="post" action="/upload" enctype="multipart/form-data" id="add_form">
+      <form method="post" action="/draggables" enctype="multipart/form-data" id="add_form">
         <h2>Plemp it!</h2>
         <p>Scribble something below:</p>
         <textarea cols="60" rows="12" name="text" id="text"></textarea>
diff --git a/public/javascripts/dragreg.js b/public/javascripts/dragreg.js
index 6415a25..cac984c 100644
--- a/public/javascripts/dragreg.js
+++ b/public/javascripts/dragreg.js
@@ -2,9 +2,9 @@ $(document).ready(function() {
   $("#add").click(show_add_dialog);
   $("#add_form #cancel").click(hide_add_dialog);
 
-  $.get("current", function(data) {
+  $.get("draggables", function(data) {
     $.each(data, function(key, val) {
-       $.get("draggable/" + key, function(data) {
+       $.get("draggables/" + key, function(data) {
          $("#draggables").append(data);
          $(".draggable").draggable({ stack: "#draggables img",
                                      stop: update_drag_info });
@@ -24,5 +24,5 @@ function hide_add_dialog() {
 };
 
 function update_drag_info(event, ui) {
-  $.post("savepos/" + event.srcElement.id, ui.position, "json");
+  $.post("draggables/" + event.srcElement.id, ui.position, "json");
 }