first stabilization of editing a renkan.
No collaborative capacities yet.
<!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>