diff --git a/public/js/little-library.js b/public/js/little-library.js new file mode 100644 index 0000000..6fc533b --- /dev/null +++ b/public/js/little-library.js @@ -0,0 +1,17 @@ +$(document).ready(function() { + $('.modal-background, .modal-close').click(function() { + $(this).parent('.modal').removeClass('is-active'); + }); + + $('#book').change(function() { + var fileName = $(this).val(); + if (fileName) { + const lastIndexOfSlash = fileName.lastIndexOf('\\'); + if (lastIndexOfSlash < 0) { + lastIndexOfSlash = fileName.lastIndexOf('/'); + } + fileName = fileName.substr(lastIndexOfSlash + 1); + } + $('#bookFileName').text(fileName ? fileName : 'None Selected'); + }) +}); \ No newline at end of file diff --git a/server.js b/server.js index 1fb277c..8d7ec65 100644 --- a/server.js +++ b/server.js @@ -42,7 +42,8 @@ function Server () { this.server.use('/css', express.static(path.join(__dirname, './public/css/'))); this.server.get('/', (req, res) => { - const html = this.fillTemplate('./public/index.html'); + const body = this.fillTemplate('./templates/pages/uploadForm.html'); + const html = this.fillTemplate('./templates/htmlContainer.html', { body }); if (html) { res.send(html); } else { @@ -56,16 +57,57 @@ function Server () { let success = false; - if (Object.keys(req.files).length > 0 && req.body.hasOwnProperty('title') && req.body.hasOwnProperty('summary')) { + if (Object.keys(req.files).length > 0 + && req.body.hasOwnProperty('title') && req.body.title.trim() !== '' + && req.body.hasOwnProperty('summary') && req.body.summary.trim() !== '') { const { book } = req.files; const { title, author, summary } = req.body; const fileType = book.name.substr(book.name.lastIndexOf('.')); - success = this.addBook({ book, title, author, summary, fileType }, () => { - res.send() + this.addBook({ book, title, author, summary, fileType }, () => { + const messageBox = this.fillTemplate('./templates/elements/messageBox.html', { + style: 'is-success', + header: 'Upload Successful', + message: 'Thank you for your contribution!' + }); + const modal = this.fillTemplate('./templates/elements/modal.html', { + content: messageBox, + }); + const body = this.fillTemplate('./templates/pages/uploadForm.html'); + const html = this.fillTemplate('./templates/htmlContainer.html', { body, modal }); + res.send(html); + }, (err) => { + const messageBox = this.fillTemplate('./templates/elements/messageBox.html', { + style: 'is-danger', + header: 'Upload Failed', + message: err, + }); + const modal = this.fillTemplate('./templates/elements/modal.html', { + content: messageBox, + }); + const body = this.fillTemplate('./templates/pages/uploadForm.html'); + const html = this.fillTemplate('./templates/htmlContainer.html', { body, modal }); + res.send(html); }); + } else { + let errorMessage = ''; + if (Object.keys(req.files).length <= 0) { + errorMessage += 'You have not selected a file.'; + } + if (!req.body.hasOwnProperty('title') || req.body.title.trim() === '') { + errorMessage += (errorMessage.length > 0 ? '
' : '') + 'You have not written a title.'; + } + if (!req.body.hasOwnProperty('summary') || req.body.summary.trim() === '') { + errorMessage += (errorMessage.length > 0 ? '
' : '') + 'You have not written a summary.'; + } + const message = this.fillTemplate('./templates/elements/messageBox.html', { + style: 'is-danger', + header: 'Missing Required Fields', + message: errorMessage, + }); + const body = this.fillTemplate('./templates/pages/uploadForm.html'); + const html = this.fillTemplate('./templates/htmlContainer.html', { body, message }); + res.send(html); } - - res.send(success); }); this.io.on('connection', socket => { @@ -96,9 +138,12 @@ Server.prototype.fillTemplate = function (file, templateVars = {}) { for (let templateVar in templateVars) { const regExp = new RegExp('\{\{' + templateVar + '\}\}', 'g') - filledTemplate = filledTemplate.replace(regexp, templateVars[templateVar]); + filledTemplate = filledTemplate.replace(regExp, templateVars[templateVar]); } + // If any template variable is not provided, don't even render them. + filledTemplate = filledTemplate.replace(/\{\{[a-zA-Z0-9\-_]+\}\}/g, ''); + return filledTemplate; } @@ -116,27 +161,27 @@ Server.prototype.start = function () { }); } -Server.prototype.addBook = function (uploadData = {}) { +Server.prototype.addBook = function (uploadData = {}, success = () => {}, error = () => {}) { const { book } = uploadData; const bookId = this.uuid4(); const bookPath = path.resolve(this.fileLocation, bookId); const bookData = { - title: uploadData.title, - author: uploadData.author, - summary: uploadData.summary, + title: uploadData.title.trim(), + author: uploadData.author.trim(), + summary: uploadData.summary.trim(), fileType: book.name.substr(book.name.lastIndexOf('.')), } - console.log('moving the book'); const bookFilePath = unusedFilename.sync(path.resolve(bookPath + bookData.fileType)); return book.mv(bookFilePath, function (err) { if (err) { - success = err; console.log(err); + error(err); } else { const bookDataPath = unusedFilename.sync(path.resolve(bookPath + '.json')); fs.writeFileSync(bookDataPath, JSON.stringify(bookData)); + success(); console.log('uploaded ' + bookData.title + ' to ' + bookFilePath + ', and saved metadata to ' + bookDataPath); } }); diff --git a/templates/elements/messageBox.html b/templates/elements/messageBox.html new file mode 100644 index 0000000..344483d --- /dev/null +++ b/templates/elements/messageBox.html @@ -0,0 +1,8 @@ +
+
+

{{header}}

+
+
+ {{message}} +
+
\ No newline at end of file diff --git a/templates/elements/modal.html b/templates/elements/modal.html new file mode 100644 index 0000000..a88ce30 --- /dev/null +++ b/templates/elements/modal.html @@ -0,0 +1,7 @@ + \ No newline at end of file diff --git a/templates/htmlContainer.html b/templates/htmlContainer.html new file mode 100644 index 0000000..9b55f4b --- /dev/null +++ b/templates/htmlContainer.html @@ -0,0 +1,28 @@ + + + + + + + + + {{title}}Little Library + + + + + + + + + + + {{message}} + + {{body}} + + {{modal}} + + + + \ No newline at end of file diff --git a/public/index.html b/templates/pages/uploadForm.html similarity index 54% rename from public/index.html rename to templates/pages/uploadForm.html index 87946ab..d1b81f5 100644 --- a/public/index.html +++ b/templates/pages/uploadForm.html @@ -1,47 +1,40 @@ - - - - - - - - Little Library - - - - - - - - - - -
+ +
+
+
+
+
+
-
+
+
+
+ +
- - - - \ No newline at end of file +
+ \ No newline at end of file