introduce events list page

This commit is contained in:
Davide Alberani 2015-03-15 18:00:08 +01:00
parent ed8c037109
commit 3aa2e057b6
6 changed files with 112 additions and 32 deletions

View file

@ -0,0 +1,25 @@
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
Search: <input ng-model="query2">
Sort by:
<select ng-model="orderProp">
<option value="title">Alphabetical</option>
<option value="begin-datetime">Date</option>
</select>
</div>
<div class="col-md-10">
<ul class="events">
<li ng-repeat="event in events | filter:query2 | orderBy:orderProp">
<span>{{event.title}}</span>
<p>{{event['begin-datetime']}}</p>
</li>
</ul>
</div>
</div>
</div>

View file

@ -1,16 +1,21 @@
<!doctype html> <!doctype html>
<html ng-app> <html ng-app="eventManApp">
<head> <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/static/js/angular.min.js"></script> <script src="/static/js/angular.min.js"></script>
<script src="/static/js/angular-route.js"></script>
<script src="/js/app.js"></script>
<script src="/js/controllers.js"></script>
<title>Event Man(ager)</title> <title>Event Man(ager)</title>
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
</head> </head>
<body> <body>
<div> <div ng-view></div>
<p>1 + 2 = {{ 1 + 2 }}</p>
<label>Name:</label> <script src="/static/js/jquery-2.1.3.min.js"></script>
<input type="text" ng-model="yourName" placeholder="Enter a name here"> <script src="/static/js/bootstrap.min.js"></script>
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body> </body>
</html> </html>

29
angular_app/js/app.js vendored Normal file
View file

@ -0,0 +1,29 @@
var eventManApp = angular.module('eventManApp', [
'ngRoute',
'eventManControllers'
]);
eventManApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/persons', {
templateUrl: 'persons-list.html',
controller: 'PersonsListCtrl'
}).
when('/persons/:personId', {
templateUrl: 'person-detail.html',
controller: 'PersonDetailCtrl'
}).
when('/events', {
templateUrl: 'events-list.html',
controller: 'EventsListCtrl'
}).
when('/events/:eventId', {
templateUrl: 'event-detail.html',
controller: 'EventDetailCtrl'
}).
otherwise({
redirectTo: '/events'
});
}]);

View file

@ -1,15 +1,25 @@
'use strict'; 'use strict';
/* Controllers */ /* Controllers */
var eventManControllers = angular.module('eventManControllers', []);
var eventManApp = angular.module('eventManApp', []);
eventManApp.controller('PersonsListCtrl', ['$scope', '$http', eventManControllers.controller('EventsListCtrl', ['$scope', '$http',
function ($scope, $http) { function ($scope, $http) {
$http.get('/persons').success(function(data) { $http.get('/events').success(function(data) {
$scope.persons = data.persons; $scope.events = data.events;
$scope.orderProp = 'name';
}); });
$scope.orderProp = 'begin-datetime';
}]
);
eventManControllers.controller('PersonsListCtrl', ['$scope', '$http',
function ($scope, $http) {
$http.get('/persons').success(function(data) {
$scope.persons = data.persons;
});
$scope.orderProp = 'name';
}] }]
); );

View file

@ -1,17 +1,3 @@
<!doctype html>
<html ng-app="eventManApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/static/js/angular.min.js"></script>
<script src="/js/controllers.js"></script>
<title>Event Man(ager)</title>
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="PersonsListCtrl">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-md-2"> <div class="col-md-2">
@ -37,7 +23,3 @@
</div> </div>
</div> </div>
<script src="/static/js/jquery-2.1.3.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
</body>
</html>

View file

@ -11,7 +11,7 @@ import tornado.ioloop
import tornado.options import tornado.options
from tornado.options import define, options from tornado.options import define, options
import tornado.web import tornado.web
from tornado import gen from tornado import gen, escape
class RootHandler(tornado.web.RequestHandler): class RootHandler(tornado.web.RequestHandler):
angular_app_path = os.path.join(os.path.dirname(__file__), "angular_app") angular_app_path = os.path.join(os.path.dirname(__file__), "angular_app")
@ -31,12 +31,40 @@ MOCKUP_PERSONS = [
'email': 'hackinbo.it@gmail.com', 'email': 'hackinbo.it@gmail.com',
'id': 3}] 'id': 3}]
import datetime
MOCKUP_EVENTS = [
{'title': 'HackInBo 2015', 'begin-datetime': datetime.datetime(2015, 5, 23, 9, 0),
'end-datetime': datetime.datetime(2015, 5, 24, 17, 0),
'location': 'Bologna', 'id': 1},
{'title': 'La fiera del carciofo', 'begin-datetime': datetime.datetime(2015, 6, 23, 9, 0),
'end-datetime': datetime.datetime(2015, 6, 24, 17, 0),
'location': 'Gatteo a mare', 'id': 2},
]
import json
class ImprovedEncoder(json.JSONEncoder):
def default(self, o):
if isinstance(o, datetime.datetime):
return str(o)
return json.JSONEncoder.default(self, o)
json._default_encoder = ImprovedEncoder()
class PersonsHandler(tornado.web.RequestHandler): class PersonsHandler(tornado.web.RequestHandler):
@gen.coroutine @gen.coroutine
def get(self, id_=None): def get(self, id_=None):
self.write({'persons': MOCKUP_PERSONS}) self.write({'persons': MOCKUP_PERSONS})
class EventsHandler(tornado.web.RequestHandler):
@gen.coroutine
def get(self, id_=None):
self.write({'events': MOCKUP_EVENTS})
def main(): def main():
define("port", default=5242, help="run on the given port", type=int) define("port", default=5242, help="run on the given port", type=int)
define("data", default=os.path.join(os.path.dirname(__file__), "data"), define("data", default=os.path.join(os.path.dirname(__file__), "data"),
@ -48,6 +76,7 @@ def main():
application = tornado.web.Application([ application = tornado.web.Application([
(r"/persons/?(?P<id_>\d+)?", PersonsHandler), (r"/persons/?(?P<id_>\d+)?", PersonsHandler),
(r"/events/?(?P<id_>\d+)?", EventsHandler),
(r"/(?:index.html)?", RootHandler), (r"/(?:index.html)?", RootHandler),
(r'/(.*)', tornado.web.StaticFileHandler, {"path": "angular_app"}) (r'/(.*)', tornado.web.StaticFileHandler, {"path": "angular_app"})
], ],