WDI-DTLA-41 · yeahbq · Jan 17, 2017 · Jan 17, 2017 · Jan 17, 2017 · Jan 17, 2017
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/home-page-wireframe.png b/home-page-wireframe.png
diff --git a/package.json b/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "project_02_crud_app",
+  "version": "1.0.0",
+  "description": "#### Overview",
+  "main": "server.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node server.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yeahbq/project_02_crud_app.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/yeahbq/project_02_crud_app/issues"
+  },
+  "homepage": "https://github.com/yeahbq/project_02_crud_app#readme",
+  "dependencies": {
+    "body-parser": "^1.15.2",
+    "ejs": "^2.5.5",
+    "express": "^4.14.0",
+    "express-handlebars": "^3.0.0",
+    "handlebars": "^4.0.6",
+    "mongodb": "^2.2.21",
+    "morgan": "^1.7.0"
+  }
+}
diff --git a/project3-screenshot.png b/project3-screenshot.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/images/starlings_orig.jpg b/public/images/starlings_orig.jpg
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Sports Team Manager</title>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Proj 2 crud</title>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
+  <script
+        src="https://code.jquery.com/jquery-3.1.1.js"
+      integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
+      crossorigin="anonymous">
+  </script>
+  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <div class="header">
+    <ul class="nav nav-pills">
+      <li role="presentation" class="active"><a href="/">Home</a></li>
+      <li role="presentation"><a href="/teams.html">Teams</a></li>
+      <li role="presentation"><a href="/roster.html">Roster</a></li>
+    </ul>
+    <h1>Starlings San Gabriel Team Manager</h1>
+  </div>
+
+
+  <form accept-charset="utf-8">
+    <input type="text" placeholder="Enter Team (12s, 14s)" id="teamName">
+    <input type="text" placeholder="Enter Roster" id="roster">
+  </form>
+  <button id="createPost">Add Team Info</button>
+
+  <div class="dynamicContent">
+    <div id="posts">
+      <script id="posts-template" type="text/template">
+        <ul id="teamslist">
+          <% posts.forEach(function(post) { %>
+            <li class="list" id="<%=post._id %>"><%= post.name %>:<%= post.roster %>
+              <button type="button" class="edit" aria-label="Left Align">
+                <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
+              </button>
+              <button type="button" class="x" aria-label="Left Align"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
+              </li>
+          <% }) %>
+        </ul>
+      </script>
+    </div>
+
+   <p>Enter your team's <b>name</b> and <b>roster</b> (seperated by a comma). To edit, click the pencil icon. To delete, click the 'X' button</p>
+    </div>
+  <div class="bgimg">
+  </div>
+
+  <script src="main.js"></script>
+</body>
+</html>
diff --git a/public/main.js b/public/main.js
@@ -0,0 +1,103 @@
+//~~VARIABLES~~//
+
+var teamInput = '<input type="text" placeholder="Enter Team (12s, 14s)" id="teamName">'
+var rosterInput = '<input type="text" placeholder="Enter Roster" id="roster">'
+var submit = '<button id="createPost">Add Team Info</button>'
+var editButton = '<button type="button" class="edit" aria-label="Left Align"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></button>';
+var xButton = '<button type="button" class="x" aria-label="Left Align"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>'
+
+
+//~~FUNCTIONS//
+
+//when the add team info button is clicked, the data from the two input forms is
+//created on db and appended to page
+$('#createPost').on('click', function(evt) {
+  var teamName = $('#teamName');
+  var roster = $('#roster');
+  var obj = {};
+  obj.name = teamName.val();
+  obj.roster = roster.val();
+  if(teamName.val() === '' || roster.val() === '') return;
+  else {
+    $.post('/posts', obj, function(res) {
+      if (res.status === 200) {
+        var makeId = "id:" + res.id;
+        obj.id = makeId;
+      $('#teamslist').append('<li class="list" ' + 'id="' + makeId + '">' + teamName.val() + ": " + roster.val() + editButton + xButton +  '</li>');
+      document.querySelector('#teamName').value = "";
+      document.querySelector('#roster').value = "";
+      } else {
+        console.log('server error, returning')
+        return;
+      }
+    });
+  }
+});
+
+//takes no parameters and used when combined with an event listener listening on the entire document
+//When edit team info button is clicked, does a post request to /posts/edit
+
+function editPost (evt) {
+  var btn = this;
+  var form = this.previousElementSibling;
+  var li = this.parentElement;
+  var editName = form.children[0].value;
+  var changeName = editName;
+  var editRoster = form.children[1].value;
+  var obj = {};
+  obj.name = editName;
+  obj.roster = editRoster;
+  obj.id = this.parentNode.getAttribute('id');
+  li.innerHTML = editName + ": " + editRoster + editButton + xButton;
+    $.post('/posts/edit', obj, function(res) {
+      console.log(obj, 'edited and saved')
+    });
+
+  if ($('#renderTable')){
+    window.location.reload();
+  }
+}
+
+//turns the list items into two input fields to edit
+function editClick (evt) {
+  var target = this;
+  var team = target.parentElement.textContent;
+  roster = team.split(':')[1];
+  teamName = team.split(':')[0];
+  var objId = this.parentElement.getAttribute('id');
+  this.parentNode.innerHTML = '<form id="'+ objId + '"><input type="text" placeholder="Edit Team (12s, 14s)" id="editName">' + ' ' + '<input type="text" placeholder="Edit Roster" id="editRoster"></form>' + ' ' + '<button id="editPost">Edit Team Info</button>';
+  document.querySelector('#editName').value = teamName;
+  document.querySelector('#editRoster').value = roster;
+}
+
+//deletes list item from page and also from database
+function xClick (evt) {
+  var target = this;
+  var team = target.parentElement.textContent;
+  var teamName = team.split(':')[0];
+  var obj = {};
+  obj.name = teamName;
+
+  $.post('/posts/delete', obj, function(res) {
+    console.log('object containing', obj, 'deleted')
+  })
+
+    if ($('#renderTable')){
+    window.location.reload();
+  }
+  this.parentNode.remove()
+}
+
+//EVENT LISTENERS search entire document for elements created after load
+$(document).on('click', '.edit', editClick);
+$(document).on('click', '.x', xClick);
+$(document).on('click', '#editPost', editPost);
+
+//AJAX REQUESTS
+//creates html from /posts and saves it to id #posts which gets loaded up by ejs
+$.get('/posts', function(res) {
+  var template = $('#posts-template').html() ;
+  var compiled = _.template(template);
+  var html = compiled({posts: res.posts});
+  $('#posts').html(html);
+});
diff --git a/public/results.html b/public/results.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Proj 2 crud</title>
+  <script
+      src="https://code.jquery.com/jquery-3.1.1.js"
+    integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
+    crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
+  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+<div class="header">
+  <ul class="nav nav-pills">
+  <li role="presentation"><a href="/">Home</a></li>
+  <li role="presentation"><a href="/teams.html">Teams</a></li>
+  <li role="presentation"><a href="/roster.html">Roster</a></li>
+  <li role="presentation" class="active"><a href="/results.html">Results</a></li>
+  <li role="presentation"><a href="/schedule.html">Schedule</a></li>
+</ul>
+</div>
+
+
+  <h1>Results</h1>
+
+<!--   <input type="text" placeholder="Enter Results (3-0)" id="results">
+  <button id="createPost">Create</button>
+ -->
+
+  <div id="posts">
+    <script id="posts-template" type="text/template">
+    <ul>
+      <% posts.forEach(function(post) { %>
+      <% var teams = post.teams %>
+        <li><%= teams.teamName + ": " + teams.roster + editButton + xButton%></li>
+      <% }) %>
+    </ul>
+  </div>
+
+ <p>Enter your team's Results (for example Q1: 3-0, 1st Place)</p>
+
+
+  </script>
+  <script src ="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+  <script src="main.js"></script>
+</body>
+</html>
diff --git a/public/roster.html b/public/roster.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Sports Team Manager</title>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Proj 2 crud</title>
+  <script
+      src="https://code.jquery.com/jquery-3.1.1.js"
+    integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
+    crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
+  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="header">
+    <ul class="nav nav-pills">
+    <li role="presentation"><a href="/">Home</a></li>
+    <li role="presentation"><a href="/teams.html">Teams</a></li>
+    <li role="presentation" class="active"><a href="/roster.html">Roster</a></li>
+  </ul>
+  </div>
+ <h1>Roster</h1>
+  <p>Starlings '16-'17 Team Rosters</p>
+
+  <div id="posts">
+    <script id="posts-template" type="text/template">
+      <ul id="teamslist">
+        <% var editButton = '<button type="button" class="edit" aria-label="Left Align"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></button>'%>
+        <% var xButton = '<button type="button" class="x" aria-label="Left Align"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>' %>
+        <% var html; %>
+        <% posts.forEach(function(post) { %>
+            <% html ='<li class="list" id="' + post._id + '">' + post.name + ": " + post.roster + editButton + xButton + '</li>' %>
+          <%= html %>
+        <% }) %>
+      </ul>
+
+  <table id="renderTable" class="table table-striped table-bordered">
+    <caption class="tableTeam">Make sure members in roster are seperated by a comma when editing</caption>
+    <thead>
+      <tr>
+        <th>Team Name</th><th>Name</th>
+      </tr>
+    </thead>
+    <tbody>
+    <% console.log(posts) %>
+    <% posts.forEach(function(post) { %>
+      <% var html; %>
+      <% var rosterArr = post.roster.split(',') %>
+      <% console.log(rosterArr) %>
+      <% rosterArr.forEach(function(roster) { %>
+        <% html ='<tr><td>' + post.name + '</td>' %>
+        <% html += '<td>' + roster + '</td><tr>' %>
+        <%= html %>
+       <% }) %>
+    <% }) %>
+    </tbody>
+  </table>
+    </script>
+  </div>
+
+  <div class="bgimg">
+  </div>
+
+  <script src ="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+  <script src="main.js"></script>
+</body>
+</html>
diff --git a/public/schedule.html b/public/schedule.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Proj 2 crud</title>
+  <script
+      src="https://code.jquery.com/jquery-3.1.1.js"
+    integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
+    crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
+  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+<div class="header">
+  <ul class="nav nav-pills">
+  <li role="presentation"><a href="/">Home</a></li>
+  <li role="presentation"><a href="/teams.html">Teams</a></li>
+  <li role="presentation"><a href="/roster.html">Roster</a></li>
+  <li role="presentation"><a href="/results.html">Results</a></li>
+  <li role="presentation" class="active"><a href="/schedule.html">Schedule</a></li>
+</ul>
+</div>
+
+
+  <h1>Schedule</h1>
+
+  <!-- <input type="text" placeholder="Enter Schdule" id="sch">
+  <button id="createSch">Create Schedule</button> -->
+
+  <div id="posts">
+    <script id="posts-template" type="text/template">
+    <ul>
+      <% posts.forEach(function(post) { %>
+      <% var teams = post.teams %>
+        <li><%= teams.teamName + ": " + teams.roster + editButton + xButton%></li>
+      <% }) %>
+    </ul>
+    </script>
+  </div>
+
+ <p>Enter your teams Schedule (Mandatory 1: 2/4/17)</p>
+
+
+  <script src ="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+  <script src="main.js"></script>
+</body>
+</html>