Remove taken book and notify if what you are looking at is taken

public/js/little-library.js

@@ -4,10 +4,19 @@ $(document).ready(function() {
   var downloadButton;
 
   socket.on('get book', function(url) {
-    console.log(url);
     $(downloadButton).replaceWith('<a download href="' + url + '" class="button is-success is-large">Download</a>');
   });
 
+  socket.on('remove book', function(bookId) {
+    var book = $('#book_' + bookId);
+    var modal = $('<div class="modal is-active"><div class="modal-background"></div><div class="modal-content"><button class="modal-close"></button><div class="notification is-danger"><h2 class="title">Sorry!</h2><p>Someone took the book you were looking at.</h2></div></div></div>');
+    modal.find('.modal-background, .modal-close').click(function() {
+      modal.remove();
+    });
+    book.after(modal);
+    book.remove();
+  });
+
   $('.navbar-burger').click(function() {
     if ($(this).hasClass('is-active')) {
       $(this).removeClass('is-active');
@@ -32,6 +41,9 @@ $(document).ready(function() {
 
   $('.take-book').click(function() {
     var id = $(this).data('book');
+    $('#book_' + id).find('.box')
+      .removeClass('box').addClass(['notification', 'is-success'])
+      .attr('title', 'This can be downloaded until you leave this page');
     socket.emit('take book', id);
     downloadButton = this;
     $(this).addClass('is-loading');

server.js

@@ -144,10 +144,12 @@ function Server () {
         console.log(socket.id + ' removed ' + bookId);
         const downloadLocation = fileLocation.substr(fileLocation.lastIndexOf('/'));
         socket.emit('get book', encodeURI('./files' + downloadLocation));
+        socket.broadcast.emit('remove book', bookId);
       }
     });
 
     socket.on('disconnect', () => {
+      // console.log(socket.id + ' disconnected');
       this.broadcastVisitors();
       this.deleteBooks(socket.id);
     });
@@ -240,7 +242,7 @@ Server.prototype.generateHistoryPage = function (req) {
     const id = fileName.replace('.json', '');
     const added = fecha.format(new Date(bookData.added), 'hh:mm:ssA on dddd MMMM Do, YYYY');
     const removed = fecha.format(new Date(parseInt(id)), 'hh:mm:ssA on dddd MMMM Do, YYYY');
-    const removedTag = '<div class="control"><div class="tags has-addons"><span class="tag">Taken</span><span class="tag is-primary">' + removed + '</span></div></div>';
+    const removedTag = '<div class="control"><div class="tags has-addons"><span class="tag">Taken</span><span class="tag is-warning">' + removed + '</span></div></div>';
     const modal = this.fillTemplate('./templates/elements/modalCard.html', {
       id,
       header: '<h2 class="title">' + bookData.title + '</h2><h4 class="subtitle">' + bookData.author + '</h4>',
@@ -353,6 +355,7 @@ Server.prototype.deleteBooks = function (socketId) {
     if (data.socketId === socketId) {
       const check = this.checkId(data.bookId, (bookPath, bookDataPath) => {
         fs.unlinkSync(bookPath);
+        // console.log('removed ' + bookPath);
         fs.renameSync(bookDataPath, unusedFilename.sync(path.resolve(this.historyLocation, Date.now() + '.json')));
       });
       if (check === false) {

templates/elements/book.html

@@ -1,10 +1,10 @@
-<div class="column is-one-quarter">
+<div class="column is-one-quarter" id="book_{{id}}">
   <div class="box modal-button has-text-centered" data-modal="{{id}}">
     <h2 class="title">{{title}}</h2>
     <h4 class="subtitle">{{author}}</h4>
     <div class="tags has-addons">
       <span class="tag">File Format</span>
-      <span class="tag is-primary">{{fileType}}</span>
+      <span class="tag is-info">{{fileType}}</span>
     </div>
   </div>
   

templates/elements/bookInfo.html

@@ -4,7 +4,7 @@
     <div class="control">
       <div class="tags has-addons">
         <span class="tag">File Format</span>
-        <span class="tag is-primary">{{fileFormat}}</span>
+        <span class="tag is-info">{{fileFormat}}</span>
       </div>
     </div>
     <div class="control">