--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/server/src/main/webapp/model-test.html Tue Nov 06 13:23:19 2012 +0100
@@ -0,0 +1,340 @@
+<!doctype html>
+<html class="no-js" lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+ <title>Test Model Renkan</title>
+ <meta name="description" content="">
+ <meta name="author" content="">
+
+ <meta name="viewport" content="width=device-width">
+
+ <link rel="stylesheet" href="css/style.css">
+
+ <script type="text/javascript" src="js/config.js"></script>
+ <script type="text/javascript" src="js/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
+ <script src="lib/jquery.min.js"></script>
+ <script src="lib/underscore-min.js"></script>
+ <script src="js/backbone.js"></script>
+ <script src="js/backbone-relational.js"></script>
+ <script src="js/main_test_models.js"></script>
+ <script src="js/models.js"></script>
+ <script type="text/javascript" src="js/config.js"></script>
+ <script data-main="main" src="js/main_coweb.js"></script>
+ <script type="text/javascript">
+
+ function set_project(project) {
+
+ require(["dojo/dom", "dojo/on", "corenkan"], function(dom, on, corenkan) {
+
+ var template_html = dom.byId("project_disp_template").innerHTML;
+ var el = dom.byId("project_display");
+
+
+ var project_form_view = new FormView({el: dom.byId("form_display"), model: project, template: dom.byId("project_form_template").innerHTML});
+
+ project_view = new ModelView({
+ el:el,
+ model: project,
+ template: template_html,
+ form_view: project_form_view,
+ form_el : dom.byId("form_display_div")
+ });
+
+ var user_list_view = new ColView({
+ el: dom.byId("users_list_base"),
+ collection: project.get("users"),
+ element: {
+ template: dom.byId("user_disp_template").innerHTML
+ },
+ element_form: {
+ tagName: "div",
+ attributes: {
+ id:"form_display",
+ },
+ template: dom.byId("user_form_template").innerHTML
+ },
+ element_form_el : dom.byId("form_display_div")
+ });
+
+ var node_list_view = new ColView({
+ el: dom.byId("nodes_list_base"),
+ collection: project.get("nodes"),
+ element: {
+ template: dom.byId("node_disp_template").innerHTML
+ },
+ element_form: {
+ tagName: "div",
+ attributes: {
+ id:"form_display",
+ },
+ template: dom.byId("node_form_template").innerHTML
+ },
+ element_form_el : dom.byId("form_display_div")
+ });
+
+ var current_user_view = new CurrentUserView({
+ el: dom.byId("users_select"),
+ model: project
+ })
+
+ project_view.render();
+ user_list_view.render();
+ node_list_view.render();
+ current_user_view.render();
+
+ on(dom.byId("add_user"), "click", function() {
+ project.get("users").push(new Rkns.Models.User({}));
+ });
+ on(dom.byId("add_node"), "click", function() {
+ project.get("nodes").push(new Rkns.Models.Node({project: project}));
+ });
+
+ on(dom.byId("users_select"), "change", function(evt) {
+ var val = evt.currentTarget.value;
+ var current_user = null;
+ if(typeof val !== "undefined" && val != "") {
+ current_user = project.get("users").get(val);
+ }
+
+ if(current_user != null) {
+ project.current_user = current_user;
+ dom.byId("current_user").innerHTML = current_user.get("title");
+ }
+ else {
+ project.current_user = null;
+ dom.byId("current_user").innerHTML = "";
+ }
+
+ });
+
+ project.get("users").on("change", function(evt) {
+ if(project.current_user == null) {
+ dom.byId("current_user").innerHTML = "";
+ }
+ else if(evt.id == project.current_user.id) {
+ dom.byId("current_user").innerHTML = project.current_user.get("title");
+ }
+ });
+
+ project.get("users").on("remove", function(evt) {
+ if(typeof project.current_user === "undefined" || project.current_user == null || evt.id == project.current_user.id) {
+ dom.byId("current_user").innerHTML = "";
+ }
+ });
+
+ corenkan.app.setProject(project);
+ });
+ }
+
+ function load_project(project_id) {
+ var project = null;
+
+ if(project_id) {
+ project = new Rkns.Models.Project({_id: project_id});
+ }
+ else {
+ project = new Rkns.Models.Project({});
+ }
+ project.urlRoot = "rest/projects";
+
+ if(project_id) {
+ project.fetch({
+ success: function(project, resp) {
+ set_project(project);
+ }
+ });
+ }
+ else {
+ set_project(project);
+ }
+
+ return project;
+ }
+
+ var current_project = null;
+
+ require(["dojo/dom", "dojo/on", "dojo/domReady!"], function(dom, on) {
+
+ var project_list_item_view = BasicModelView.extend({template: _.template(dom.byId("project_list_item_template").innerHTML), tagName: "li"});
+
+ var project_list_col = new (Backbone.Collection.extend({model: Rkns.Models.Project.extend({idAttribute:'_id', urlRoot:'rest/projects'})}))();
+ project_list_col.url = "rest/projects";
+ project_list_col.on("all", function(){
+ if(!project_list_view) {
+ return;
+ }
+ _(project_list_view.element_views).each(function(ev){
+ if(ev.model.id === current_project.id) {
+ $(".project_load_button",ev.el).attr('disabled','disabled');
+ $(".project_delete_button",ev.el).attr('disabled','disabled');
+ }
+ else {
+ $(".project_load_button",ev.el).removeAttr('disabled');
+ $(".project_delete_button",ev.el).removeAttr('disabled');
+ }
+ });
+ });
+
+ var project_list_view = null;
+
+ project_list_col.fetch({
+ success:function(collection, response) {
+ project_list_view = new (BasicListView.extend({events: {
+ "click .project_load_button" : function(evt) {
+ var proj_id = $(evt.target).val();
+ if(current_project && current_project.id == proj_id) {
+ return;
+ }
+ current_project = load_project($(evt.target).val());
+ project_list_col.trigger("sync");
+ },
+ "click .project_delete_button": function(evt) {
+ var delete_id = $(evt.target).val();
+ if(!current_project || delete_id != current_project.id) {
+ _(project_list_col.where({_id: delete_id})).each(function(proj) {
+ proj.destroy();
+ });
+ }
+ }
+ }}))({collection: collection, element_view_constructor: project_list_item_view, el: dom.byId("project_list")});
+ project_list_view.render();
+ }
+ });
+
+ on(dom.byId("project_save_button"), "click", function(evt){
+ if(current_project) {
+ current_project.save({}, {success: function(model, response) {
+ if(project_list_view != null) {
+ project_list_col.fetch({
+ success:function(collection, response) {
+ project_list_view.render();
+ }
+ });
+ }
+ }});
+ }
+ });
+
+ on(dom.byId("new_project_button"), "click", function(evt) {
+ current_project = load_project();
+ });
+
+ });
+ </script>
+</head>
+<body>
+<header>
+</header>
+
+<div>
+<div class="project_current_user"><span class="project_label project_user_label">User: </span><span id="current_user"></span></div>
+<select id="users_select">
+ <option value="">None</option>
+</select>
+</div>
+
+<button type="button" id="new_project_button">New Project</button>
+
+<div id="project_list_div">
+<ul id="project_list">
+</ul>
+</div>
+
+<div role="main" id="project_display">
+</div>
+<button type="button" id="project_save_button" value="save">Save</button>
+
+<div id="users_list_div">
+ <button id="add_user">Add user</button>
+ <ul id="users_list_base">
+ </ul>
+</div>
+
+<div id="nodes_list_div">
+ <button id="add_node">Add node</button>
+ <ul id="nodes_list_base">
+ </ul>
+</div>
+
+
+<div id="form_display_div">
+</div>
+
+<footer>
+</footer>
+
+<script type="text/template" id="current_user_template">
+</script>
+
+<script type="text/template" id="project_disp_template">
+ <div class="show_form">
+ <h2 class="project_title">Project <%= _id %>: <%= title %></h2>
+ <div class="project_desc"><span class="project_label project_desc_label">Desc: </span><%= description %></div>
+ <div class="project_uri"><span class="project_label project_uri_label">Uri: </span><%= uri %></div>
+ </div>
+</script>
+<script type="text/template" id="project_form_template">
+ <table class="project_form">
+ <thead>
+ <tr><th>Field</th><th>Value</th></tr>
+ </thead>
+ <tbody>
+ <tr><td>Title:</td><td><input type="text" name="title" id="project_form_title" class="form_field" value="<%= title %>"></input></td></tr>
+ <tr><td>Uri :</td><td><input type="text" name="uri" id="project_form_text" class="form_field" value="<%= uri %>"></input></td></tr>
+ <tr><td>Desc :</td><td><textarea name="description" id="project_form_description" class="form_field"><%= description %></textarea></td></tr>
+ </tbody>
+ </table>
+</script>
+<script type="text/template" id="user_disp_template">
+ <div class="show_form">
+ <h2 class="user_title">User <%= _id %>: <%= title %></h2>
+ <div class="user_desc"><span class="user_label user_desc_label">Desc: </span><%= description %></div>
+ <div class="user_uri"><span class="user_label user_uri_label">Uri: </span><%= uri %></div>
+ <div class="user_color"><span class="user_label user_color_label">Color: </span><%= color %></div>
+ </div>
+ <button type="button" class="remove_button" value="<%= _id %>">Remove<button>
+</script>
+<script type="text/template" id="user_form_template">
+ <table class="user_form">
+ <thead>
+ <tr><th>Field</th><th>Value</th></tr>
+ </thead>
+ <tbody>
+ <tr><td>Title:</td><td><input type="text" name="title" class="form_field" value="<%= title %>"></input></td></tr>
+ <tr><td>Uri :</td><td><input type="text" name="uri" class="form_field" value="<%= uri %>"></input></td></tr>
+ <tr><td>Color :</td><td><input type="text" name="color" class="form_field" value="<%= color %>"></input></td></tr>
+ <tr><td>Desc :</td><td><textarea name="description" class="form_field"><%= description %></textarea></td></tr>
+ </tbody>
+ </table>
+</script>
+<script type="text/template" id="node_disp_template">
+ <div class="show_form">
+ <h2 class="user_title">Node <%= _id %>: <%= title %></h2>
+ <div class="user_desc"><span class="user_label user_desc_label">Desc: </span><%= description %></div>
+ <div class="user_uri"><span class="user_label user_uri_label">Uri: </span><%= uri %></div>
+ <div class="user_creator"><span class="user_label user_uri_label">Creator: </span><%= created_by.title %></div>
+ </div>
+ <button type="button" class="remove_button" value="<%= _id %>">Remove<button>
+</script>
+<script type="text/template" id="node_form_template">
+ <table class="node_form">
+ <thead>
+ <tr><th>Field</th><th>Value</th></tr>
+ </thead>
+ <tbody>
+ <tr><td>Node title:</td><td><input type="text" name="title" class="form_field" value="<%= title %>"></input></td></tr>
+ <tr><td>Node uri :</td><td><input type="text" name="uri" class="form_field" value="<%= uri %>"></input></td></tr>
+ <tr><td>Node creator :</td><td><input type="text" name="created_by" class="form_field" value="<%= created_by.title %>" readonly="readonly"></input></td></tr>
+ <tr><td>Node desc :</td><td><textarea name="description" class="form_field"><%= description %></textarea></td></tr>
+ </tbody>
+ </table>
+</script>
+<script type="text/template" id="project_list_item_template">
+ <span class="title"><%= title %></span> <button type="button" class="project_load_button" value="<%= _id %>">Load</button><button type="button" class="project_delete_button" value="<%= _id %>">Delete</button>
+</script>
+
+
+</body>
+</html>
\ No newline at end of file