Merge pull request #2 from judy-n/v1

please no conflicts

Author: JLambertazzo

client/static/js/actions.js

@@ -45,4 +45,10 @@ const updateNote = (note) => {
     return instance.patch('/note', {note})
         .then(res => res.data.note)
         .catch(err => console.error)
+}
+
+const updateNotePos = (note_id, pos) => {
+    return instance.patch(`/note/${note_id}/position`, {pos})
+        .then(res => res.data.pos)
+        .catch(err => console.error)
 }

client/static/js/board.js

@@ -2,7 +2,7 @@
 
 const socket = io()
 const board_id = window.location.href.split('/')[3]
-const tempQuadrant = {important: 0, urgent: 0}
+const defaultPos = {left: 0, top: 0}
 
 document.addEventListener('DOMContentLoaded', () => {
   const stickyArea = document.querySelector(
@@ -16,26 +16,48 @@ document.addEventListener('DOMContentLoaded', () => {
   const stickyTitleInput = document.querySelector('#stickytitle');
   const stickyTextInput = document.querySelector('#stickytext');
 
+  // helpers
+  const getBoardBounds = () => {
+    const topMin = document.querySelector('.h-titles').clientHeight
+    const leftMin = document.querySelector('.v-titles').clientWidth
+    const topMax = document.querySelector('.q-container').clientHeight + topMin
+    const leftMax = document.querySelector('.q-container').clientWidth + leftMin
+    return { topMin, leftMin, topMax, leftMax }
+  }
+
+  const normalize = ({x, y}) => {
+    const { topMin, leftMin, topMax, leftMax } = getBoardBounds()
+    const left = x * (leftMax - leftMin) + leftMin
+    const top = y * (topMax - topMin) + topMin
+    return { left, top }
+  }
+
   // socket.io functions
   const sendCreateNote = () => {
     // create a note and send it
     // here we have access to title and text field
     const title = stickyTitleInput.value
     const text = stickyTextInput.value
-    const note = { title, text, tempQuadrant }
+    const pos = { left: Math.random(), top: Math.random() }
+    const note = { title, text, pos }
     console.log('n', board_id, note)
     createNote(board_id, note).then(newNote => {
       socket.emit('note created', {note: newNote, board_id})
-      createSticky(newNote._id)
+      createSticky(newNote._id, pos)
     }).catch(e => console.log('an unknown error occurred'))
   }
-  const sendUpdateNote = (_id, title, text) => {
-    const note = { _id, title, text, tempQuadrant }
+  const sendUpdateNote = (_id, title, text, pos) => {
+    const note = { _id, title, text, tempQuadrant: defaultPos }
     updateNote(note).then(resNote => {
       socket.emit('note update', {note: resNote, board_id})
       console.log('up conf', resNote)
     }).catch(e => console.log('an error occurred'))
   }
+  const sendMoveNote = (note_id, pos) => {
+    updateNotePos(note_id, pos).then(_resPos => {
+      socket.emit('note move', {note_id, pos, board_id})
+    }).catch(e => console.error('an unknown error has occurred'))
+  }
   const sendDeleteNote = (note_id) => {
     deleteNote(note_id).then(note => {
       socket.emit('note delete', {note_id, board_id})
@@ -44,7 +66,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   const receiveCreatedNote = ({note, io_board_id}) => {
     if (io_board_id === board_id) {
-      loadSticky(note._id, note.title, note.text)
+      loadSticky(note._id, note.title, note.text, note.pos)
     }
   }
   const receiveUpdatedNote = ({note, io_board_id}) => {
@@ -54,6 +76,14 @@ document.addEventListener('DOMContentLoaded', () => {
       noteEL.querySelector('p').innerText = note.text
     }
   }
+  const receiveMoveNote = ({note_id, pos, io_board_id}) => {
+    if (io_board_id === board_id) {
+      const noteEl = document.querySelector(`.sticky[id="${note_id}"]`)
+      const { left, top } = normalize({x: pos.left, y: pos.top})
+      noteEl.style.left = `${left}px`
+      noteEl.style.top = `${top}px`
+    }
+  }
   const receiveDeleteNote = ({note_id, io_board_id}) => {
     if (io_board_id === board_id) {
       const el = document.querySelector(`.sticky[id="${note_id}"]`)
@@ -69,6 +99,10 @@ document.addEventListener('DOMContentLoaded', () => {
     receiveUpdatedNote({note, io_board_id})
   })
 
+  socket.on('receive move', ({note_id, pos, io_board_id}) => {
+    receiveMoveNote({note_id, pos, io_board_id})
+  })
+
   socket.on('receive delete', ({note_id, io_board_id}) => {
     receiveDeleteNote({note_id, io_board_id})
   })
@@ -107,7 +141,6 @@ document.addEventListener('DOMContentLoaded', () => {
     const text = sticky.querySelector('.input-p').value
     try {
       await sendUpdateNote(id, title, text)
-      console.log('up sent', id, title, text)
     } catch(e) {
       console.log('an error occured')
       return
@@ -142,12 +175,11 @@ document.addEventListener('DOMContentLoaded', () => {
     if (!isDragging) return;
 
     // console.log(lastOffsetX);
-
     dragTarget.style.left = e.clientX - lastOffsetX + 'px';
     dragTarget.style.top = e.clientY - lastOffsetY + 'px';
   }
 
-  function createSticky(note_id) {
+  function createSticky(note_id, pos) {
     const newSticky = document.createElement('div');
     newSticky.setAttribute('id', note_id)
     newSticky.addEventListener('dblclick', e => console.log(e))
@@ -164,11 +196,11 @@ document.addEventListener('DOMContentLoaded', () => {
     newSticky.innerHTML = html;
     // newSticky.style.backgroundColor = randomColor();
     stickyArea.append(newSticky);
-    positionSticky(newSticky);
+    positionSticky(newSticky, pos);
     applyDeleteListener();
     clearStickyForm();
   }
-  function loadSticky(note_id, title, text) {
+  function loadSticky(note_id, title, text, pos) {
     const newSticky = document.createElement('div');
     newSticky.setAttribute('id', note_id)
     const html = `<h3>${title.replace(
@@ -184,25 +216,18 @@ document.addEventListener('DOMContentLoaded', () => {
     newSticky.innerHTML = html;
     // newSticky.style.backgroundColor = randomColor();
     stickyArea.append(newSticky);
-    positionSticky(newSticky);
+    positionSticky(newSticky, pos)
     applyDeleteListener();
     clearStickyForm();
   }
   function clearStickyForm() {
     stickyTitleInput.value = '';
     stickyTextInput.value = '';
   }
-  function positionSticky(sticky) {
-    sticky.style.left =
-      window.innerWidth / 2 -
-      sticky.clientWidth / 2 +
-      (-100 + Math.round(Math.random() * 50)) +
-      'px';
-    sticky.style.top =
-      window.innerHeight / 2 -
-      sticky.clientHeight / 2 +
-      (-100 + Math.round(Math.random() * 50)) +
-      'px';
+  function positionSticky(sticky, pos) {
+    const {left, top} = normalize({x: pos.left, y: pos.top})
+    sticky.style.left = `${left}px`
+    sticky.style.top = `${top}px`
   }
 
   function stripHtml(text) {
@@ -241,7 +266,25 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   });
   window.addEventListener('mousemove', drag);
-  window.addEventListener('mouseup', () => (isDragging = false));
+  window.addEventListener('mouseup', async (e) => {
+    // some useful values
+    isDragging = false
+    if (e.target.classList.contains('drag')) {
+      const id = e.target.getAttribute('id')
+      const {left, top} = e.target.style
+      const { topMin, leftMin, topMax, leftMax } = getBoardBounds()
+      // x is left 0to1, y is top 0to1
+      const x = (parseFloat(left)-leftMin)/(leftMax-leftMin)
+      const y = (parseFloat(top)-topMin)/(topMax-topMin)
+      try {
+        await sendMoveNote(id, {left: x, top: y})
+      } catch(e) {
+        console.error('an unknown error has occurred')
+      } finally {
+        console.log('sent', id, x, y)
+      }
+    }
+  });
 
   createStickyButton.addEventListener('click', sendCreateNote);
   applyDeleteListener();
@@ -250,7 +293,7 @@ document.addEventListener('DOMContentLoaded', () => {
   getBoard(board_id).then(board => {
     if (board) {
       board.notes.forEach(note => {
-        loadSticky(note._id, note.title, note.text)
+        loadSticky(note._id, note.title, note.text, note.pos)
       })
     } else {
       // window.location.href = "/undefined"

index.js

@@ -43,6 +43,10 @@ io.on('connection', socket => {
     socket.broadcast.emit('receive update', {note, io_board_id: board_id})
   })
 
+  socket.on('note move', ({note_id, pos, board_id}) => {
+    socket.broadcast.emit('receive move', {note_id, pos, io_board_id: board_id})
+  })
+
   socket.on('note delete', ({note_id, board_id}) => {
     socket.broadcast.emit('receive delete', {note_id, io_board_id: board_id})
   })

mongo.js

@@ -19,11 +19,11 @@ class Board {
 }
 
 class Note {
-    constructor({title, text, quadrant}) {
+    constructor({title, text, pos}) {
         this._id = new ObjectId();
         this.title = title;
         this.text = text;
-        this.quadrant = quadrant;
+        this.pos = pos;
     }
 }
 
@@ -73,7 +73,6 @@ async function readNote(id){
     id = new ObjectId(id)
     const res = await client.db("FourQuadrant").collection("Notes").findOne({_id: id})
     if (res) {
-        console.log(res)
         return res
     }
     else {
@@ -96,12 +95,16 @@ async function removeNote(note){
     return
 }
 
-/* Changes the Note's text to <text>*/
 async function updateNote(note){
     note._id = new ObjectId(note._id)
     const res = await client.db("FourQuadrant").collection("Notes").updateOne({_id: note._id}, {$set: note});
 }
 
+async function updateNotePos(note_id, pos){
+    note_id = new ObjectId(note_id)
+    const res = await client.db("FourQuadrant").collection("Notes").updateOne({_id: note_id}, {$set: {pos}}, {returnNewDocument:true})
+}
+
 module.exports = {
     Board,
     Note,
@@ -113,4 +116,5 @@ module.exports = {
     removeBoard,
     removeNote,
     updateNote,
+    updateNotePos,
 }

router.js

@@ -139,4 +139,16 @@ router.patch('/note', async (req, res, next) => {
   }
 })
 
+router.patch('/note/:note_id/position', idChecker, async (req, res, next) => {
+  const { pos } = req.body
+  try {
+    await mongo.updateNotePos(req.params.note_id, pos)
+    res.send({pos})
+  } catch (e) {
+    handleError(e, res)
+    console.log('error', e)
+    next()
+  }
+})
+
 module.exports = router