adding metowrk grpah

Author: vinod

controllers/notes.controller.js

@@ -103,7 +103,7 @@ function myFirstFunction(data, callback) {
     });
 }
 function mySecondFunction(data, callback) {
-  User.find({}, { name: 1 }).limit(2).lean()
+  User.find({}, { name: 1 }).limit(10).lean()
     .then(users => {
       let obj = {
         note: data,
@@ -126,7 +126,6 @@ notesCtrl.renderNotesgrids = (req, res) => {
         let obj={}
         var date = moment(item.createdAt, "YYYYMMDD").fromNow();
         item.date = date
-       
         obj={
           title:item.title,
           description:item.description,
@@ -142,4 +141,27 @@ notesCtrl.renderNotesgrids = (req, res) => {
       });
     });
 };
+notesCtrl.renderNotesNetwork = (req, res) => {
+  Note.find({user:req.user.id})
+    .then(notes => {
+      var temp=[]
+      notes.forEach(function (item) {
+        let obj={}
+        var date = moment(item.createdAt, "YYYYMMDD").fromNow();
+        item.date = date
+        obj={
+          title:item.title,
+          description:item.description,
+          Created:item.date
+        }
+        temp.push(obj)
+      });
+     temp=JSON.stringify(temp)
+      res.render("notes/notesnetwork", { temp });
+    }).catch(err => {
+      res.status(500).send({
+        message: err.message
+      });
+    });
+};
 module.exports = notesCtrl;

database.js

@@ -1,7 +1,7 @@
 const mongoose = require("mongoose");
 const MONGODB_URI = "mongodb://localhost/pucsd"
 
-mongoose.connect(MONGODB_URI, { useNewUrlParser: true })
+mongoose.connect(MONGODB_URI, {useNewUrlParser: true, useUnifiedTopology: true})
   .then(() => {
     console.log("Successfully connected to MongoDB.");
   }).catch(err => {

public/css/main.css

@@ -39,6 +39,14 @@ body {
 .signBtn{
   color:whitesmoke;
 }
+.signupFrm{
+  border: 1px solid grey;
+  padding: 10px;
+  border-radius: 25px;
+  /*border-radius: 20px 50px;*/
+  box-shadow: 5px 10px;
+}
+
 .navbar{
   background-color: #003749;
   /*background-color: #bfbfbf;*/
@@ -52,6 +60,10 @@ section{
   margin-top: 30px;
 }
 
+.edtCrd{
+  border-radius: 12px;
+  box-shadow: 5px 5px 5px 5px #4d4d4d;
+}
 /* Style the buttons */
 .btn {
   border: none;
@@ -60,6 +72,18 @@ section{
   cursor: pointer;
 }
 
+.mainselection {
+   overflow:hidden;
+   width:200px;
+   height: 30px;
+   -moz-border-radius: 9px 9px 9px 9px;
+   -webkit-border-radius: 9px 9px 9px 9px;
+   border-radius: 12px;
+   box-shadow: 1px 1px 5px #330033;
+   background: no-repeat scroll 319px center;
+}
+
+
 footer{
   height: 35vh;
   margin-top: 70px;
@@ -72,3 +96,6 @@ footer{
   margin-left: 200px;
 }
 
+div.vis-network {
+  background-color: white;
+}

routes/notes.routes.js

@@ -10,7 +10,8 @@ const {
   updateNote,
   deleteNote,
   updateStatus,
-  renderNotesgrids
+  renderNotesgrids,
+  renderNotesNetwork
 } = require("../controllers/notes.controller");
 
 // Helpers
@@ -37,5 +38,6 @@ router.delete("/notes/delete/:id", isAuthenticated, deleteNote);
 router.post("/notes/statusUpdate/:id", isAuthenticated, updateStatus);
 
 router.get("/notesgrid", isAuthenticated, renderNotesgrids);
+router.get("/NotesNetwork", isAuthenticated, renderNotesNetwork);
 
 module.exports = router;

views/index.hbs

@@ -11,7 +11,7 @@
                 <span class="bold-text">VS InfoTech</span> helps you take control of your tasks and saves you time <span class="bold-text">by bringing them all</span> into your preferred task manager.
             </p>
 
-            <a href="/users/signup"><button class="btn btn--red " data-toggle="modal" data-target="#sign-in-modal">Get started  - it’s free </button></a>
+            <a href="/users/signup"><button class="btn btn-success " data-toggle="modal" data-target="#sign-in-modal">Get started  - it’s free </button></a>
           </div>
         </div>
         <div class="col-md-4 col-sm-4  col-xs-12 section__content--right">
@@ -56,7 +56,7 @@
             You <span class="bold-text">always know what’s on top</span> of the list based on due dates and priorities, no matter where the task came from. <br>
         </p>
 
-        <a href="/users/signup"><button data-toggle="modal" data-target="#sign-in-modal" class="btn btn-red ">Get started  - it’s free </button></a>
+        <a href="/users/signup"><button data-toggle="modal" data-target="#sign-in-modal" class="btn btn-success ">Get started  - it’s free </button></a>
       </div>
     </div>
     <div class="col-md-6 col-sm-6 col-xs-12 section__content--right">

views/layouts/main.hbs

@@ -10,6 +10,7 @@
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
     <!-- CUSTOM CSS -->
     <link rel="stylesheet" href="/css/main.css">
+     <script type="text/javascript" src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
     <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
     <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
   </head>
@@ -90,6 +91,7 @@
     });
   </script>
     <!-- Scritps -->
+ 
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

views/notes/edit-note.hbs

@@ -8,7 +8,7 @@
 {{/each}}
 
 <div class="col-md-4 mx-auto">
-  <div class="card">
+  <div class="card edtCrd">
 
     {{!-- <p>{{notes.note}}</p> --}}
 
@@ -20,19 +20,25 @@
       <form action="/notes/edit-note/{{notes.note._id}}?_method=PUT" method="POST">
         <input type="hidden" name="_method" value="PUT">
         <div class="form-group">
+          <b>Title:</b>
           <input type="text" name="title" class="form-control" value="{{notes.note.title}}" />
         </div>
         <div class="form-group">
+          <b>Description:</b>
           <textarea name="description" class="form-control">{{notes.note.description}}</textarea>
         </div>
-        <div class="form-group">
-          <label for="cars">User List:</label>
-          <select id="cars" name="userid">
+
+        
+        <div class="form-group ">
+          <h4>User List</h4>
+          <select class="mainselection" id="cars" name="userid">
             {{#each notes.user}}
             <option value={{_id}}>{{name}}</option>
             {{/each}}
           </select>
-        </div>
+        </div> 
+
+        
         <div class="form-group">
           <button class="btn btn-primary btn-block" type="submit">
             Save

views/notes/notesnetwork.hbs

@@ -0,0 +1,36 @@
+
+
+   <div id="mynetwork" style="height: 500px;"></div>
+
+<script type="text/javascript">
+  // create an array with nodes
+  var nodes = new vis.DataSet([
+    {id: 1, label: 'Node 1'},
+    {id: 2, label: 'Node 2'},
+    {id: 3, label: 'Node 3'},
+    {id: 4, label: 'Node 4'},
+    {id: 5, label: 'Node 5'}
+  ]);
+
+  // create an array with edges
+  var edges = new vis.DataSet([
+    {from: 1, to: 3},
+    {from: 1, to: 2},
+    {from: 2, to: 4},
+    {from: 2, to: 5},
+    {from: 3, to: 3}
+  ]);
+
+  // create a network
+  var container = document.getElementById('mynetwork');
+  var data = {
+    nodes: nodes,
+    edges: edges
+  };
+  var options = {
+      autoResize: true,
+  locale: 'en',
+  clickToUse: false,
+  };
+  var network = new vis.Network(container, data, options);
+</script>

views/partials/navigation.hbs

@@ -19,6 +19,7 @@
             <div class="dropdown-menu" aria-labelledby="navbarDropdown">
               <a class="dropdown-item" href="/notes">All Notes</a>
               <a class="dropdown-item" href="/notesgrid">All Notes List</a>
+              <a class="dropdown-item" href="/NotesNetwork">All Notes network</a>
               <a class="dropdown-item" href="/notes/add">Add A Note</a>
               <div class="dropdown-divider"></div>
               <a class="dropdown-item" href="/users/logout">Logout</a>

views/users/signin.hbs

@@ -1,6 +1,6 @@
 <div class="row">
   <div class="col-md-4 mx-auto">
-    <div class="card mt-4 text-center">
+    <div class="card mt-4 text-center signupFrm">
       <div class="card-header">
         <h1 class="h4">
           Account Login