Permalink
Browse files

downgraded to just render a simple list

  • Loading branch information...
1 parent 3940b4c commit 309ba1ac0518cacf0d1661560d96c57fa50be0a5 @seanhess committed Sep 6, 2012
Showing with 13 additions and 287 deletions.
  1. +8 −2 README.md
  2. +0 −5 public/index.html
  3. +3 −215 public/js/app.js
  4. +0 −33 public/partials/issue.html
  5. +2 −20 public/partials/issues.html
  6. +0 −12 public/partials/login.html
View
@@ -137,8 +137,14 @@ Filters let you compose data binding. Assume your dates are in ISO format. We ca
<div class="date">{{post.created | ago}}</div>
-This Application
-----------------
+The Issues: Rendering the List
+------------------------------
+
+* Bootstrapping (index.html)
+* Issues resource
+* IssuesController
+* ng-repeat
+
Concerns
View
@@ -4,16 +4,11 @@
<meta charset="utf-8">
<title>The Issues</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
- <link rel="stylesheet" type="text/css" href="/js/vendor/jquery.easy-pie-chart.css">
</head>
<body>
<div>
<ng-view></ng-view>
</div>
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- <script type="text/javascript" src="/js/vendor/jquery.easy-pie-chart.js"></script>
- <script type="text/javascript" src="/js/vendor/moment.js"></script>
- <script type="text/javascript" src="/js/vendor/underscore.js"></script>
<script type="text/javascript" src="js/vendor/angular.js"></script>
<script type="text/javascript" src="js/vendor/angular-resource.js"></script>
<script type="text/javascript" src="js/app.js"></script>
View
@@ -14,15 +14,9 @@ var app = angular.module('app', ['ngResource'], function($routeProvider) {
controller : IssuesController
})
- $routeProvider.when('/details/:_id', {
- templateUrl : 'partials/issue.html',
- controller : IssueDetailsController
- })
-
$routeProvider.otherwise({
redirectTo : '/'
})
-
})
@@ -33,222 +27,16 @@ var app = angular.module('app', ['ngResource'], function($routeProvider) {
-function IssuesController($scope, Issues, Auth) {
-
- $scope.issues = Issues.pollList(1000)
- $scope.auth = Auth
-
- $scope.create = function(firstOption, secondOption) {
- issue = {first: {name: $scope.firstOption}, second: {name: $scope.secondOption}}
- Issues.save(issue)
- $scope.issues = Issues.query()
- }
+function IssuesController($scope, Issues) {
+ $scope.issues = Issues.query()
};
-
-function IssueDetailsController($scope, Issues, $routeParams, Auth) {
- $scope.issueId = $routeParams._id
- $scope.auth = Auth
-
- $scope.issue = Issues.pollIssue({_id: $routeParams._id}, 1000)
-
- $scope.vote = function(option) {
- Issues.vote($scope.issue, option)
- }
-
- $scope.remove = function() {
- Issues.remove({_id: $routeParams._id})
- window.location = "/"
- }
-}
-
-
-
-function LoginController($scope, Auth) {
- $scope.auth = Auth
-
- $scope.login = function() {
- Auth.login($scope.newUsername)
- }
-
- $scope.logout = function() {
- Auth.logout()
- }
-}
-
-
-
-
-
-
-
-
-
-/// FILTERS ///
-app.filter('ago', function() {
- return function(text) {
- return moment(text).fromNow()
- }
-})
-
-
-
-
-
-
-
-
-
-
-
//// SERVICES ////
-app.factory('Issues', function($http, $resource, Auth) {
+app.factory('Issues', function($resource) {
Issues = $resource("/issues/:_id")
-
- Issues.vote = function(issue, vote, cb) {
- cb = cb || function() {}
- vote.username = Auth.username
- $http.post("/issues/" + issue._id + "/votes", vote).success(cb)
- }
-
- // polls the server for updates, and merges results into these
- Issues.pollList = function(interval) {
- var issues = Issues.query()
-
- // for now, only support updates and adds
- function fetch() {
- newIssues = Issues.query(function() {
- newIssues.forEach(function(newIssue) {
- var matches = _.find(issues, function(issue) {
- return (issue._id == newIssue._id)
- })
-
-
- if (matches)
- _.extend(matches, newIssue)
-
- else
- issues.unshift(newIssue)
- })
- })
- }
-
- interval = setInterval(fetch, interval)
-
- return issues
- }
-
- Issues.pollIssue = function(matching, interval) {
- var issue = Issues.get(matching)
-
- function fetch() {
- newIssue = Issues.get(matching, function() {
- _.extend(issue, newIssue)
- })
- }
-
- interval = setInterval(fetch, interval)
-
- return issue
- }
-
-
return Issues
})
-app.factory('Auth', function() {
- Auth = {
- username: localStorage.username,
- login: function(username) {
- localStorage.username = username
- this.username = username
- this.loggedIn = true
- },
- logout: function() {
- localStorage.removeItem('username')
- delete this.username
- this.loggedIn = false
- }
- }
- Auth.loggedIn = !!Auth.username
- return Auth
-})
-
-
-
-//// DIRECTIVES ////
-app.directive('coloredBar', function() {
- return {
- link: function(scope, element, attrs) {
- var INCREMENTAL_WIDTH = 20
- var MIN_WIDTH = 30
-
- // have a min width?
-
- scope.$watch(attrs.total, function(total) {
- width = Math.max(total * INCREMENTAL_WIDTH, MIN_WIDTH)
- element.css('width', width + 'px')
- })
-
- scope.$watch(attrs.text, function(text) {
- element.text(text)
- })
- }
- }
-})
-
-
-app.directive('pieChart', function() {
- return {
- link: function(scope, element, attrs) {
- var firstTotal = null
- var secondTotal = null
-
- var original = element.clone()
-
- scope.$watch(attrs.first, function(first) {
- firstTotal = first
- render()
- })
-
- scope.$watch(attrs.second, function(second) {
- secondTotal = second
- render()
- })
-
- function render() {
- if (!(firstTotal > -1 && secondTotal > -1)) return
-
- var total = firstTotal + secondTotal
- var percent = 50
-
- if (total > 0)
- percent = Math.floor(firstTotal * 100 / total)
-
- element.data('percent', percent)
-
- if (element.data('easyPieChart')) {
- element.data('easyPieChart').update(percent)
- }
-
- else {
- element.html("<span class='text'></span>")
- element.easyPieChart({
- barColor: "#3A3",
- trackColor: "#CCC",
- scaleColor: false,
- lineWidth: 30,
- lineCap: "butt",
- size: 150,
- animate: 500
- })
- }
-
- element.find('.text').text(firstTotal + " / " + total)
- }
- }
- }
-})
View
@@ -1,33 +0,0 @@
-
- <div class="sidebar">
- <ng-include src="'/partials/login.html'"></ng-include>
- <div><a href="/">Back to Issues</a></div>
- <br />
- <div ng-click="remove()"><button>Delete Issue</button></div>
- </div>
-
- <div class="content issue">
- <h1><span>{{issue.first.name}}</span> VS <span>{{issue.second.name}}</span></h1>
-
- <div class="info">
- <div pie-chart first="issue.first.votes" second="issue.second.votes"></div> <h3 class="chart-label">{{issue.first.name}}</h3>
-
- <div class="castVote" ng-show="auth.loggedIn">
- <button ng-click="vote(issue.first)">Vote {{issue.first.name}}</button>
- <button ng-click="vote(issue.second)">Vote {{issue.second.name}}</button>
- </div>
- </div>
-
- <div class="votes">
- <h2>{{issue.votes.length}} Votes</h2>
- <table class="votes">
- <tr><th>User</th><th>Voted</th><th>When</th></tr>
- <tr class="vote" ng-repeat="vote in issue.votes | orderBy:'-created'">
- <td>{{vote.username}}</td>
- <td>{{vote.name}}</td>
- <td>{{vote.created | ago}}</td>
- </div>
- </table>
- </div>
-
- </div>
@@ -1,27 +1,9 @@
<div class="main">
- <div class="sidebar">
-
- <ng-include src="'/partials/login.html'"></ng-include>
-
- <div class="new_issue" ng-show="auth.loggedIn">
- <h3>Add an Issue</h3>
- <div><input placeholder="something" ng-model="firstOption"></div>
- <div>VS</div>
- <div><input placeholder="else" ng-model="secondOption"></div>
- <div><button ng-click="create()">Create</div>
- </div>
-
- </div>
-
<div class="issues content">
<h1>The Issues</h1>
- <div class="issue" ng-repeat="issue in issues | orderBy:'-created'">
- <a href="#/details/{{issue._id}}">
- <div class="first bar" colored-bar total="issue.first.votes" text="issue.first.name"></div>
- <span>VS</span>
- <div class="second bar" colored-bar total="issue.second.votes" text="issue.second.name"></div>
- </a>
+ <div class="issue" ng-repeat="issue in issues">
+ {{issue.first.name}} VS {{issue.second.name}}
</div>
</div>
</div>
View
@@ -1,12 +0,0 @@
-
- <!-- this partial is used on both pages -->
- <div class="login" ng-controller="LoginController">
- <div class="loggedIn" ng-show="auth.loggedIn">
- <span>Welcome {{auth.username}}. </span>
- <a ng-click="logout()">Logout</a>
- </div>
- <div class="loggedOut" ng-hide="auth.loggedIn">
- <div><input placeholder="username" ng-model="newUsername"></div>
- <div><button ng-click="login()">Login</button></div>
- </div>
- </div>

0 comments on commit 309ba1a

Please sign in to comment.