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>
<html ng-app>
<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="/static/js/angular-route.js"></script>
<script src="/js/app.js"></script>
<script src="/js/controllers.js"></script>
<title>Event Man(ager)</title>
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div>
<p>1 + 2 = {{ 1 + 2 }}</p>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
<div ng-view></div>
<script src="/static/js/jquery-2.1.3.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
</body>
</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';
/* Controllers */
var eventManControllers = angular.module('eventManControllers', []);
var eventManApp = angular.module('eventManApp', []);
eventManApp.controller('PersonsListCtrl', ['$scope', '$http',
eventManControllers.controller('EventsListCtrl', ['$scope', '$http',
function ($scope, $http) {
$http.get('/persons').success(function(data) {
$scope.persons = data.persons;
$scope.orderProp = 'name';
$http.get('/events').success(function(data) {
$scope.events = data.events;
});
$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="row">
<div class="col-md-2">
@ -37,7 +23,3 @@
</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
from tornado.options import define, options
import tornado.web
from tornado import gen
from tornado import gen, escape
class RootHandler(tornado.web.RequestHandler):
angular_app_path = os.path.join(os.path.dirname(__file__), "angular_app")
@ -31,12 +31,40 @@ MOCKUP_PERSONS = [
'email': 'hackinbo.it@gmail.com',
'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):
@gen.coroutine
def get(self, id_=None):
self.write({'persons': MOCKUP_PERSONS})
class EventsHandler(tornado.web.RequestHandler):
@gen.coroutine
def get(self, id_=None):
self.write({'events': MOCKUP_EVENTS})
def main():
define("port", default=5242, help="run on the given port", type=int)
define("data", default=os.path.join(os.path.dirname(__file__), "data"),
@ -48,6 +76,7 @@ def main():
application = tornado.web.Application([
(r"/persons/?(?P<id_>\d+)?", PersonsHandler),
(r"/events/?(?P<id_>\d+)?", EventsHandler),
(r"/(?:index.html)?", RootHandler),
(r'/(.*)', tornado.web.StaticFileHandler, {"path": "angular_app"})
],