paul/plemp-node
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Changed the routes to provide a more RESTful interface

Browse source
This commit is contained in:
Paul van Tilburg 2012-01-12 11:38:40 +01:00
parent 95e030921d
commit c630ac3beb
3 changed files with 42 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
plemp.js
View file

@ -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)

2
public/index.html
View file

@ -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>

6
public/javascripts/dragreg.js
View file

@ -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");
}