web: get all thoughts, user page

7 years ago · 0278360eeb
57 changed files with 283 additions and 5 deletions
--- a/controllers/thoughtController.js
+++ b/controllers/thoughtController.js
@ -2,13 +2,53 @@
 var mongoose = require('mongoose');
 var thoughtModel  = mongoose.model('thoughtModel');

 var userModel  = mongoose.model('userModel');

 //GET - Return all tvshows in the DB
 exports.findAllThoughts = function(req, res) {

 	thoughtModel.find(function(err, thoughts) {
    if(err) res.send(500, err.message);
 	    if(err) res.send(500, err.message);

 		console.log(thoughts.length);
 		thoughts=JSON.parse(JSON.stringify(thoughts));

 		thoughts.forEach(function(thought, index, array){

 array=JSON.parse(JSON.stringify(array));

 			userModel.find({
 		      username: thought.authorname
 			  }, function(err, user) {

 			      if (err) throw err;

 			      if (!user) {

 			    } else if (user) {

 						/*console.log(thought);
 						console.log(user);*/
 			        array[index].usericon=user[0].icon;

 				console.log("icon: " + array[index].usericon);
 					//thought.set('icon', user.icon);
 					//console.log(thought);


 			      }

 				  if(index === array.length-1)
 				  {
 					  console.log('GET /thoughts');
 					  console.log(array);
 					  res.status(200).jsonp(array);
 				  }
 			    });


 		});

    console.log('GET /thoughts');
 		res.status(200).jsonp(thoughts);
 	});
 };

--- a/controllers/userController.js
+++ b/controllers/userController.js
@ -22,7 +22,7 @@ exports.findAllUsers = function(req, res) {

 //GET - Return a TVShow with specified ID
 exports.findById = function(req, res) {
 	ActivityModel.findById(req.params.id, function(err, user) {
 	userModel.findById(req.params.id, function(err, user) {
    if(err) return res.send(500, err.message);

    console.log('GET /users/' + req.params.id);
@ -30,6 +30,25 @@ exports.findById = function(req, res) {
 	});
 };

 exports.findUserByUsername = function(req, res) {
    userModel.find({
      username: req.params.username
  }, function(err, user) {

      if (err) throw err;

      if (!user) {
        res.json({ success: false, message: 'no user found' });
    } else if (user) {
        console.log(user);
          // return the information including token as JSON
          res.jsonp(user);


      }

    });
 };

 //POST - Insert a new TVShow in the DB
 exports.addUser = function(req, res) {
--- a/server.js
+++ b/server.js
@ -46,6 +46,10 @@ var apiRoutes = express.Router();
 apiRoutes.route('/users')
  .get(userCtrl.findAllUsers)
  .post(userCtrl.addUser);
 apiRoutes.route('/users/:id')
    .get(userCtrl.findById);
 apiRoutes.route('/users/byusername/:username')
    .get(userCtrl.findUserByUsername);
 apiRoutes.route('/thoughts/user/:userid')
    .get(thoughtCtrl.findAllThoughtsFromUsername);

@ -91,7 +95,6 @@ apiRoutes.use(function(req, res, next) {
 });

 apiRoutes.route('/users/:id')
  .get(userCtrl.findById)
  .put(userCtrl.updateActivity)
  .delete(userCtrl.deleteActivity);

--- a/web/img/icons/animals/anteater.png
+++ b/web/img/icons/animals/anteater.png
--- a/web/img/icons/animals/bat.png
+++ b/web/img/icons/animals/bat.png
--- a/web/img/icons/animals/beetle.png
+++ b/web/img/icons/animals/beetle.png
--- a/web/img/icons/animals/bulldog.png
+++ b/web/img/icons/animals/bulldog.png
--- a/web/img/icons/animals/butterfly.png
+++ b/web/img/icons/animals/butterfly.png
--- a/web/img/icons/animals/camel.png
+++ b/web/img/icons/animals/camel.png
--- a/web/img/icons/animals/cat.png
+++ b/web/img/icons/animals/cat.png
--- a/web/img/icons/animals/chameleon.png
+++ b/web/img/icons/animals/chameleon.png
--- a/web/img/icons/animals/clown-fish.png
+++ b/web/img/icons/animals/clown-fish.png
--- a/web/img/icons/animals/cobra.png
+++ b/web/img/icons/animals/cobra.png
--- a/web/img/icons/animals/cow.png
+++ b/web/img/icons/animals/cow.png
--- a/web/img/icons/animals/crab.png
+++ b/web/img/icons/animals/crab.png
--- a/web/img/icons/animals/crocodile.png
+++ b/web/img/icons/animals/crocodile.png
--- a/web/img/icons/animals/duck.png
+++ b/web/img/icons/animals/duck.png
--- a/web/img/icons/animals/elephant.png
+++ b/web/img/icons/animals/elephant.png
--- a/web/img/icons/animals/frog.png
+++ b/web/img/icons/animals/frog.png
--- a/web/img/icons/animals/giraffe.png
+++ b/web/img/icons/animals/giraffe.png
--- a/web/img/icons/animals/hen.png
+++ b/web/img/icons/animals/hen.png
--- a/web/img/icons/animals/hippopotamus.png
+++ b/web/img/icons/animals/hippopotamus.png
--- a/web/img/icons/animals/kangaroo.png
+++ b/web/img/icons/animals/kangaroo.png
--- a/web/img/icons/animals/lion.png
+++ b/web/img/icons/animals/lion.png
--- a/web/img/icons/animals/llama.png
+++ b/web/img/icons/animals/llama.png
--- a/web/img/icons/animals/macaw.png
+++ b/web/img/icons/animals/macaw.png
--- a/web/img/icons/animals/monkey.png
+++ b/web/img/icons/animals/monkey.png
--- a/web/img/icons/animals/moose.png
+++ b/web/img/icons/animals/moose.png
--- a/web/img/icons/animals/mouse.png
+++ b/web/img/icons/animals/mouse.png
--- a/web/img/icons/animals/octopus.png
+++ b/web/img/icons/animals/octopus.png
--- a/web/img/icons/animals/ostrich.png
+++ b/web/img/icons/animals/ostrich.png
--- a/web/img/icons/animals/owl.png
+++ b/web/img/icons/animals/owl.png
--- a/web/img/icons/animals/panda.png
+++ b/web/img/icons/animals/panda.png
--- a/web/img/icons/animals/pelican.png
+++ b/web/img/icons/animals/pelican.png
--- a/web/img/icons/animals/penguin.png
+++ b/web/img/icons/animals/penguin.png
--- a/web/img/icons/animals/pig.png
+++ b/web/img/icons/animals/pig.png
--- a/web/img/icons/animals/rabbit.png
+++ b/web/img/icons/animals/rabbit.png
--- a/web/img/icons/animals/racoon.png
+++ b/web/img/icons/animals/racoon.png
--- a/web/img/icons/animals/ray.png
+++ b/web/img/icons/animals/ray.png
--- a/web/img/icons/animals/rhinoceros.png
+++ b/web/img/icons/animals/rhinoceros.png
--- a/web/img/icons/animals/sea-cow.png
+++ b/web/img/icons/animals/sea-cow.png
--- a/web/img/icons/animals/shark.png
+++ b/web/img/icons/animals/shark.png
--- a/web/img/icons/animals/sheep.png
+++ b/web/img/icons/animals/sheep.png
--- a/web/img/icons/animals/siberian-husky.png
+++ b/web/img/icons/animals/siberian-husky.png
--- a/web/img/icons/animals/sloth.png
+++ b/web/img/icons/animals/sloth.png
--- a/web/img/icons/animals/snake.png
+++ b/web/img/icons/animals/snake.png
--- a/web/img/icons/animals/spider.png
+++ b/web/img/icons/animals/spider.png
--- a/web/img/icons/animals/squirrel.png
+++ b/web/img/icons/animals/squirrel.png
--- a/web/img/icons/animals/swan.png
+++ b/web/img/icons/animals/swan.png
--- a/web/img/icons/animals/tiger.png
+++ b/web/img/icons/animals/tiger.png
--- a/web/img/icons/animals/toucan.png
+++ b/web/img/icons/animals/toucan.png
--- a/web/img/icons/animals/turtle.png
+++ b/web/img/icons/animals/turtle.png
--- a/web/img/icons/animals/whale.png
+++ b/web/img/icons/animals/whale.png
--- a/web/index.html
+++ b/web/index.html
@ -0,0 +1,64 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>thoughts - main</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">



    <link href="own.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body onload='OnLoadIndex()'>


      <nav class="navbar navbar-default">
       <div class="container-fluid">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
           <a class="navbar-brand" href="index.html">Thoughts</a>
         </div>
         <div class="collapse navbar-collapse" id="myNavbar">
             <ul class="nav navbar-nav">
               <li class="active"><a href="index.html">Home</a></li>
               <li><a href="crearActivity.html">Users</a></li>
               <li><a href="editActivities.html">Contact</a></li>
             </ul>
           <ul class="nav navbar-nav navbar-right">
             <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
             <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
           </ul>
         </div>
       </div>
      </nav>


    <div class='container'>
        <div id='listThoughtsHtml'></div>

    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

    <script src="index.js"></script>
    </body>
 </html>
--- a/web/index.js
+++ b/web/index.js
@ -0,0 +1,89 @@
 var listThoughts;


 var urlapi = "http://localhost:3000/api";

 function OnLoadIndex(){
    listThoughts=getAllThoughts();
 }
 function getAllThoughts(){
    $.ajax({
        type: "GET",
        dataType: "json",
        url: urlapi + "/thoughts",
        success: function(data){
            listThoughts=data;

            document.getElementById('listThoughtsHtml').innerHTML=generateHtmlListThoughts();
        }
    });
 }
 function generateHtmlListThoughts(){
    var html="";
    html+="<div class='list'>";
    html+="</div>";
    html+="<ul class='list-group'>";
    for(var i=0; i<listThoughts.length; i++)
    {
        html+=" <li class='list-group-item'>";
        html+="<img src='"+listThoughts[i].usericon+"' width='30px' />";
        html+="<a href='/userpage.html?value="+listThoughts[i].authorname+"'>" + listThoughts[i].authorname + ":</a>";
        html+="<br>";
        html+= listThoughts[i].content;
        html+="</li>";
    }

    html+="</ul>";


    return(html);
 }


















 /*
 ##############################
 userpage.html
 ##############################
 */

 function OnLoadUserPage(){
    var username=window.location.href.split("?value=")[1];
    $.ajax({
        type: "GET",
        dataType: "json",
        url: urlapi + "/users/byusername/" + username,
        success: function(data){

            document.getElementById('userpagehtml').innerHTML=generateHtmlUserPage(data[0]);
        }
    });
 }
 function generateHtmlUserPage(user){
    var html="";
    html+="<div class='well'>";
    html+="<h3>" + user.username + "</h3>";
    html+="description: " + user.description;

    html+="<br>mail: " + user.mail;
    html+="";
    html+="";
    html+="";
    html+="</div>";
    return(html);
 }
--- a/web/own.css
+++ b/web/own.css
@ -0,0 +1 @@

--- a/web/userpage.html
+++ b/web/userpage.html
@ -0,0 +1,62 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>thoughts - main</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">



    <link href="own.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body onload='OnLoadUserPage()'>

      <nav class="navbar navbar-default">
       <div class="container-fluid">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
           <a class="navbar-brand" href="index.html">Thoughts</a>
         </div>
         <div class="collapse navbar-collapse" id="myNavbar">
             <ul class="nav navbar-nav">
               <li><a href="index.html">Home</a></li>
               <li><a href="crearActivity.html">Users</a></li>
               <li><a href="editActivities.html">Contact</a></li>
             </ul>
           <ul class="nav navbar-nav navbar-right">
             <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
             <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
           </ul>
         </div>
       </div>
      </nav>

    <div class='container'>
        <div id='userpagehtml'></div>

    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

    <script src="index.js"></script>
    </body>
 </html>