introduce events list page
This commit is contained in:
parent
ed8c037109
commit
3aa2e057b6
6 changed files with 112 additions and 32 deletions
25
angular_app/events-list.html
Normal file
25
angular_app/events-list.html
Normal 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>
|
||||||
|
|
|
@ -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
29
angular_app/js/app.js
vendored
Normal 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'
|
||||||
|
});
|
||||||
|
}]);
|
||||||
|
|
20
angular_app/js/controllers.js
vendored
20
angular_app/js/controllers.js
vendored
|
@ -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';
|
||||||
}]
|
}]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -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>
|
|
|
@ -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"})
|
||||||
],
|
],
|
||||||
|
|
Loading…
Reference in a new issue