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>
|
||||
<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
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';
|
||||
|
||||
/* 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';
|
||||
}]
|
||||
);
|
||||
|
||||
|
|
|
@ -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>
|
|
@ -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"})
|
||||
],
|
||||
|
|
Loading…
Reference in a new issue