From b18ac3ad3201a2844fc7a3dbbb48f6fa7d9f329e Mon Sep 17 00:00:00 2001 From: Dorian Pula Date: Sun, 8 Dec 2013 01:08:49 -0500 Subject: [PATCH] Ported task list prototype to Angular Dart. Migrating client codebase to Dart. --- .gitignore | 1 + rookeries/core/views.py | 14 +-- rookeries/static/dart/controllers.dart | 4 +- rookeries/static/dart/pubspec.yaml | 7 +- rookeries/static/dart/rookeries.dart | 11 ++ rookeries/static/dart/tasks.dart | 106 ++++++++++++++++++ rookeries/static/js/rookeries-controllers.js | 13 --- rookeries/static/js/rookeries-services.js | 38 ------- rookeries/static/partials/task-details.html | 9 +- rookeries/tasks/views.py | 8 +- rookeries/templates/base.html | 6 +- rookeries/templates/body_content.html | 46 +++++++- .../{static/partials => templates}/error.html | 0 rookeries/templates/legacy_base.html | 23 ---- rookeries/templates/page_header.html | 4 +- 15 files changed, 188 insertions(+), 102 deletions(-) create mode 100644 rookeries/static/dart/tasks.dart rename rookeries/{static/partials => templates}/error.html (100%) delete mode 100644 rookeries/templates/legacy_base.html diff --git a/.gitignore b/.gitignore index aafebee..7ac3bfc 100644 --- a/.gitignore +++ b/.gitignore @@ -4,6 +4,7 @@ passenger_wsgi.py rookeries_webapp_config.cfg rookeries/static/node_modules rookeries/static/css/penguin-*-theme.css +rookeries/static/dart/rookeries.dart.*js* rookeries/static/dart/packages rookeries/static/dart/test/packages rookeries/static/dart/pubspec.lock diff --git a/rookeries/core/views.py b/rookeries/core/views.py index 2560243..50c8401 100644 --- a/rookeries/core/views.py +++ b/rookeries/core/views.py @@ -35,8 +35,8 @@ from rookeries.core import decorators @app.route("/") def serve_landing_page(): - # TODO Get rid of this. - return serve_static_file("index.html") + nav_menu = generate_menu(bool(session.get('logged_in'))) + return render_template("base.html", navigation_menu=nav_menu) @app.route("/tasks") @@ -45,13 +45,6 @@ def serve_tasks(): return render_template("base.html", navigation_menu=nav_menu) -@app.route("/legacy") -def serve_legacy_js(): - # TODO This is deprecated. - nav_menu = generate_menu(bool(session.get('logged_in'))) - return render_template("legacy_base.html", navigation_menu=nav_menu) - - @app.before_request def before_session(): g.db_session = database.init_db_session(app.config["DATABASE_URI"]) @@ -66,8 +59,7 @@ def generate_menu(logged_in): # TODO Make this generated from the "activated" modules. menu = [{'name': "Home", 'url': "/"}, {'name': "Tasks", 'url': "/tasks"}, - {'name': "FAQ", 'url': "/docs/faq"}, - {'name': "License", 'url': "/docs/license"}] + {'name': "About", 'url': "/about"}] if logged_in: menu.append({'name': "Your Profile", 'url': "/user_profile"}) diff --git a/rookeries/static/dart/controllers.dart b/rookeries/static/dart/controllers.dart index 5240377..5b4760d 100644 --- a/rookeries/static/dart/controllers.dart +++ b/rookeries/static/dart/controllers.dart @@ -1,5 +1,5 @@ /** - * Rookeries frontend - Controllers + * Rookeries frontend - CSS theme switcher. * * (c) Copyright 2013 Dorian Pula * @license: AGPL v3 @@ -8,6 +8,8 @@ part of rookeries; +// TODO Document and test. +// TODO Consider changing this controller into a directive or component. /** * Toggle between themes. * Based off : http://stackoverflow.com/questions/16514330/angularjs-switch-stylesheets-based-on-user-input diff --git a/rookeries/static/dart/pubspec.yaml b/rookeries/static/dart/pubspec.yaml index 29c26c9..a109502 100644 --- a/rookeries/static/dart/pubspec.yaml +++ b/rookeries/static/dart/pubspec.yaml @@ -1,13 +1,16 @@ name: rookeries_client version: 0.0.2 -environment: - sdk: '>=0.8.10+6 <2.0.0' +#environment: +# sdk: '>=0.8.10+6 <2.0.0' dependencies: angular: any browser: any js: any +# markdown: any +# bootjack: any +# ice_code_editor: 0.0.12 # angular: # git: https://github.com/angular/angular.dart.git diff --git a/rookeries/static/dart/rookeries.dart b/rookeries/static/dart/rookeries.dart index 1a472f4..92eacc1 100644 --- a/rookeries/static/dart/rookeries.dart +++ b/rookeries/static/dart/rookeries.dart @@ -8,16 +8,27 @@ library rookeries; +import 'dart:async'; +import 'dart:convert'; +import 'dart:html'; + +import 'package:intl/intl.dart'; + import 'package:angular/angular.dart'; import 'package:di/di.dart'; import 'package:logging/logging.dart'; part 'controllers.dart'; +part 'tasks.dart'; // Rookeries app. class RookeriesApp extends Module { RookeriesApp() { type(SwitchThemeController); + type(TaskListController); + type(TaskDetailsController); + type(CheckmarkFilter); + type(DateFormatFilter); } } diff --git a/rookeries/static/dart/tasks.dart b/rookeries/static/dart/tasks.dart new file mode 100644 index 0000000..2e3f4e6 --- /dev/null +++ b/rookeries/static/dart/tasks.dart @@ -0,0 +1,106 @@ +/** + * Rookeries frontend - Tasks app + * + * (c) Copyright 2013 Dorian Pula + * @license: AGPL v3 + * @author: Dorian Pula [dorian.pula@amber-penguin-software.ca] + */ + +part of rookeries; + +class Task { + + int id; + String state; + String description; + String priority; + DateTime due_date; + String icon; + bool checked; + + Task(this.id, this.state, this.description, this.priority, this.due_date, this.icon, this.checked); + + factory Task.fromJsonMap(Map json) { + return new Task(json['id'], json['state'], json['description'], json['priority'], + DateTime.parse(json['due_date']), json['icon'], json['checked']); + } + +} + +// Controls the task list. +@NgController( + selector: '[task-list]', + publishAs: 'task_list') +class TaskListController { + + Http _http; + List task_list =[]; + + TaskListController(Http this._http) { + _fetchTasks(); + } + + void _fetchTasks() { + _http.get('/api/tasks') + .then((HttpResponse response) { + for (Map task in response.data) { + task_list.add(new Task.fromJsonMap(task)); + } + + }, onError: (Object obj) { + print('Oops. Didn\'t get the list of tasks.'); + print(obj); + }); + } + + void popup(Task task) { + var task_id = task.id; + document.window.alert('I am task #$task_id'); + } + +} + +@NgFilter(name: 'checkmark') +class CheckmarkFilter { + call(input) { + if (input is bool) { + return input ? "\u2713" : "\u2718"; + } + } +} + +@NgFilter(name: 'date_format') +class DateFormatFilter { + call(date) { + if (date is DateTime) { + DateFormat formatter = new DateFormat("yyyy-MMM-dd"); + return formatter.format(date); + } + } +} + +// Controls the task details +@NgController( + selector: '[task-details]', + publishAs: 'task') +class TaskDetailsController { + + Http _http; + Task task; + + TaskDetailsController(Http this._http) { + _fetchTask(); + } + + void _fetchTask() { + _http.get('/api/tasks') + .then((HttpResponse response) { + task = new Task.fromJsonMap(response.body); + + }, onError: (Object obj) { + print('Oops. Didn\'t get the list of tasks.'); + print(obj); + }); + } + +} diff --git a/rookeries/static/js/rookeries-controllers.js b/rookeries/static/js/rookeries-controllers.js index 0338921..f97f919 100644 --- a/rookeries/static/js/rookeries-controllers.js +++ b/rookeries/static/js/rookeries-controllers.js @@ -59,19 +59,6 @@ rookeriesApp.controller( }]); -// Toggle between themes. -// Based off : http://stackoverflow.com/questions/16514330/angularjs-switch-stylesheets-based-on-user-input -rookeriesApp.controller( - "SwitchThemeCtrl", ["$scope", "Theme", function ($scope, Theme) { - - // Use a nice theme object here. - $scope.theme = Theme.init("daytime"); - - $scope.switchTheme = function() { - $scope.theme.switch_theme(); - } - }]); - rookeriesApp.controller( "NavMenuCtrl", ["$scope", "$state", "NavMenu", function($scope, $state, NavMenu) { diff --git a/rookeries/static/js/rookeries-services.js b/rookeries/static/js/rookeries-services.js index 4fe4a8f..23f7951 100644 --- a/rookeries/static/js/rookeries-services.js +++ b/rookeries/static/js/rookeries-services.js @@ -23,44 +23,6 @@ rookeriesApp }); }]) - // Gets the theme dependent on the type of theme being used. - .factory("Theme", function() { - - var Theme = { - name: "", - alternative_theme: "", - icon_colour_flag: "", - - // Initialize the theme object. - init: function(theme_name) { - "use strict"; - - if (theme_name === "daytime") { - Theme.name = "daytime"; - Theme.alternative_theme = "evening"; - Theme.icon_colour_flag = " "; - } else { - Theme.name = "evening"; - Theme.alternative_theme = "daytime"; - Theme.icon_colour_flag = "icon-white"; - } - - return Theme; - }, - - // Allow for switching the themes. - switch_theme: function() { - "use strict"; - - Theme.init(Theme.alternative_theme); - } - - }; - - return Theme.init("daytime"); - - } ) - // Setup for the navigation menu. .factory("NavMenu", ["$state", function($state) { diff --git a/rookeries/static/partials/task-details.html b/rookeries/static/partials/task-details.html index 871e603..a93b961 100644 --- a/rookeries/static/partials/task-details.html +++ b/rookeries/static/partials/task-details.html @@ -1,4 +1,7 @@ -
- My task ID is {{ task.id }}...

- I talk about {{ task.description }}. +
+
    +
  • My task ID is {{ task.id }}.
    • +
  • I talk about {{ task.description }}.
    • +
  • I am due on {{ task.due_date | date_format }}
    • +
\ No newline at end of file diff --git a/rookeries/tasks/views.py b/rookeries/tasks/views.py index ed4463a..f394137 100644 --- a/rookeries/tasks/views.py +++ b/rookeries/tasks/views.py @@ -47,15 +47,15 @@ def task_experiment(task_id): def generate_experimental_task_list(): task_list = [{ "id": 1, "state": "Done", "description": "Build out basic ui layout for tasks.", "priority": "Normal", - "due_date": "2013 July 05", "icon": "icon-android", "checked": False + "due_date": "2013-07-05", "icon": "icon-android", "checked": False }, { "id": 2, "state": "In Progress", "description": "Add Angular JS application for tasks.", - "priority": "Urgent", "due_date": "2013 July 05", "icon": "icon-linux", "checked": True + "priority": "Urgent", "due_date": "2013-07-05", "icon": "icon-linux", "checked": True }, { "id": 3, "state": "Not Started", "description": "Profit ???", - "priority": "Normal", "due_date": "2013 July 05", "icon": "icon-bug", "checked": False + "priority": "Normal", "due_date": "2013-07-05", "icon": "icon-bug", "checked": False }, { "id": 4, "state": "Done", "description": "Should be the last task", "priority": "Normal", - "due_date": "2013 December 05", "icon": "icon-save", "checked": True + "due_date": "2013-12-05", "icon": "icon-save", "checked": True }] return task_list diff --git a/rookeries/templates/base.html b/rookeries/templates/base.html index 49089f0..dee58d9 100644 --- a/rookeries/templates/base.html +++ b/rookeries/templates/base.html @@ -2,13 +2,13 @@ {# TODO Figure out how to get rid of scope in Angular directive. #} - {% include "page_header.html" %} + {% block page_headers %}{% include "page_header.html" %}{% endblock %} {% block scripts %} - - + + {% endblock %} {% include "header.html" %} diff --git a/rookeries/templates/body_content.html b/rookeries/templates/body_content.html index 092becb..21f12b1 100644 --- a/rookeries/templates/body_content.html +++ b/rookeries/templates/body_content.html @@ -1,6 +1,48 @@ {# Body content section #} -
+
{% block body_content %} - {# Insert in Angular apps and regular Jinja2 templates here. -->#} + {# Insert in Angular apps and regular Jinja2 templates here. #} + + {# TODO Move out into partial or something. #} + {% raw %} + +
+

Tasks

+ Add New Project +

Project Name

+

Project description here.

+ Add New Task + + + + + + + + + + + + + + + + + + + + + + + + +
StateTaskPriorityDue DateDetails [XP]Actions
{{ task.state }}{{ task.description }}{{ task.priority }} - {{ task.due_date | date_format }} - {{ task.checked | checkmark }}Details
+
+ + {% endraw %} {% endblock %}
\ No newline at end of file diff --git a/rookeries/static/partials/error.html b/rookeries/templates/error.html similarity index 100% rename from rookeries/static/partials/error.html rename to rookeries/templates/error.html diff --git a/rookeries/templates/legacy_base.html b/rookeries/templates/legacy_base.html deleted file mode 100644 index 848f0ad..0000000 --- a/rookeries/templates/legacy_base.html +++ /dev/null @@ -1,23 +0,0 @@ -{# TODO Purge out legacy AngularJS code #} -{% extends "base.html" %} -{% body scripts %} - - - - - - - - - - - - -{% endbody %} -{% body content %} - -
- - -
-{% endbody %} diff --git a/rookeries/templates/page_header.html b/rookeries/templates/page_header.html index cf4728e..2e0932d 100644 --- a/rookeries/templates/page_header.html +++ b/rookeries/templates/page_header.html @@ -14,6 +14,6 @@ {% endraw %} - + \ No newline at end of file