Skip to content

Commit

Permalink
downgraded to just render a simple list
Browse files Browse the repository at this point in the history
  • Loading branch information
@seanhess
seanhess committed Sep 6, 2012
1 parent 3940b4c commit 309ba1a
Show file tree
Hide file tree
Showing 6 changed files with 13 additions and 287 deletions.
10 changes: 8 additions & 2 deletions README.md
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -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> <div class="date">{{post.created | ago}}</div>




This Application The Issues: Rendering the List
---------------- ------------------------------

* Bootstrapping (index.html)
* Issues resource
* IssuesController
* ng-repeat





Concerns Concerns
Expand Down
5 changes: 0 additions & 5 deletions public/index.html
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -4,16 +4,11 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>The Issues</title> <title>The Issues</title>
<link rel="stylesheet" type="text/css" href="css/style.css"> <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> </head>
<body> <body>
<div> <div>
<ng-view></ng-view> <ng-view></ng-view>
</div> </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.js"></script>
<script type="text/javascript" src="js/vendor/angular-resource.js"></script> <script type="text/javascript" src="js/vendor/angular-resource.js"></script>
<script type="text/javascript" src="js/app.js"></script> <script type="text/javascript" src="js/app.js"></script>
Expand Down
218 changes: 3 additions & 215 deletions public/js/app.js
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -14,15 +14,9 @@ var app = angular.module('app', ['ngResource'], function($routeProvider) {
controller : IssuesController controller : IssuesController
}) })


$routeProvider.when('/details/:_id', {
templateUrl : 'partials/issue.html',
controller : IssueDetailsController
})

$routeProvider.otherwise({ $routeProvider.otherwise({
redirectTo : '/' redirectTo : '/'
}) })

}) })




Expand All @@ -33,222 +27,16 @@ var app = angular.module('app', ['ngResource'], function($routeProvider) {






function IssuesController($scope, Issues, Auth) { function IssuesController($scope, Issues) {

$scope.issues = Issues.query()
$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 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 //// //// SERVICES ////
app.factory('Issues', function($http, $resource, Auth) { app.factory('Issues', function($resource) {
Issues = $resource("/issues/:_id") 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 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)
}
}
}
})
33 changes: 0 additions & 33 deletions public/partials/issue.html
View file

This file was deleted.

22 changes: 2 additions & 20 deletions public/partials/issues.html
View file
Original file line number Original file line Diff line number Diff line change
@@ -1,27 +1,9 @@
<div class="main"> <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"> <div class="issues content">
<h1>The Issues</h1> <h1>The Issues</h1>
<div class="issue" ng-repeat="issue in issues | orderBy:'-created'"> <div class="issue" ng-repeat="issue in issues">
<a href="#/details/{{issue._id}}"> {{issue.first.name}} VS {{issue.second.name}}
<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> </div>
</div> </div>
</div> </div>
12 changes: 0 additions & 12 deletions public/partials/login.html
View file

This file was deleted.

0 comments on commit 309ba1a

Please sign in to comment.