Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fixed small type-o #8

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

fixed small type-o #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
986e99c
fixed small type-o
cbejensen Oct 23, 2015
de12691
steps 1-4 done
cbejensen Oct 24, 2015
471036d
merge
cbejensen Oct 24, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 20 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,29 @@
<body ng-controller="mainCtrl">
<div class="main-container">
<h1> DevMountain Chat Room </h1>

<form ng-submit="postData()">
<input class="form-control text-box" type="text" ng-model="message" placeholder="Message">
<input class="form-control text-box" type="text" ng-model="message" placeholder="Message" />
</form>
<input class="form-control text-box" type="text" ng-model="filter" placeholder="Filter" />

<select ng-model="sortAttribute">
<option value="">None</option>
<option value="text">Message</option>
<option value="createdAt">Time</option>
</select>
<select ng-model="sortDirection">
<option value="true">Ascending</option>
<option value="">Descending</option>
</select>

<div class="messages-container">
<p ng-repeat="message in messages"> {{message.text}} </p>
<p ng-repeat="message in messages
| filter: filter
| orderBy:sortAttribute:sortDirection">
{{message.text}}<br>
{{message.createdAt}}
</p>
</div>
</div>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.19.min.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@ var app = angular.module('chatroom', []);

app.config(function($httpProvider){
$httpProvider.interceptors.push('httpRequestInterceptor');
});
});
26 changes: 19 additions & 7 deletions js/mainCtrl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,33 @@ var app = angular.module('chatroom');

app.controller('mainCtrl', function($scope, parseService){
//In your controller you'll have a getParseData function and a postData function, but should be placed on $scope.

//The getParseData function will call the getData method on the parseService object. You'll then save the result of that request to
//your controllers $scope as messages ($scope.messages)


$scope.messageTime = '';

$scope.getParseData = function() {
parseService.getData().then(function(result) {
$scope.messages = result.data.results;
var messageTime = '';
$scope.messages.forEach(function(e, i) {
var time = e.createdAt;
console.log(time);
})
});
};

//The postData function will take whatever the user typed in (hint: look at the html and see what ng-model correlates to on the input box),
//pass that text to the postData method on the parseService object which will then post it to the parse backend.



$scope.postData = function() {
parseService.postData($scope.message);
};

//uncomment this code when your getParseData function is finished
//This goes and gets new data every second, which mimicking a chat room experience.
// setInterval(function(){
// $scope.getParseData();
// }, 1500)
setInterval(function(){
$scope.getParseData();
}, 1500)
})
21 changes: 14 additions & 7 deletions js/parseService.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,28 @@ var app = angular.module('chatroom');

app.service('parseService', function($http){
//Here you'll need to create two methods. One called postData and the other called getData.

//On the lines below create a getData method. This method will retrieve data from the parse backend.
//The url for the get request should be 'https://api.parse.com/1/classes/chat?order=-createdAt'
//Be sure to return whatever gets returned from $http so you can call .then in your controller.



this.getData = function() {
return $http.get('https://api.parse.com/1/classes/chat?order=-createdAt');
};

//On the line below create the postData method. This method will add data to the parse backend.
//The url for the request needs to be 'https://api.parse.com/1/classes/chat'
//Because we're making a POST request, we need a way to tell parse the data we want to give it,
//in your $http call (along with url and method) have a data property which has a value that is equal to another object which a key of text and a value of the message being passed to parse. IE data: {text: yourMessage}
//in your $http call (along with url and method) have a data property which has a value that is equal to another object with a key of text and a value of the message being passed to parse. IE data: {text: yourMessage}
//Also, remember that $http returns a promise. So if you return the whole $http call (return $http(...)), you can then use .then in your controller.

//postData method here

this.postData = function(yourMessage) {
return $http({
method: 'POST',
url: 'https://api.parse.com/1/classes/chat',
data: {
text: yourMessage
}
});s
};

//getData method here
});
4 changes: 4 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@ body {
text-align: center;
}

select {
margin: auto;
}

.text-box {
margin: 0px auto;
width: 40%;
Expand Down