|
45
|
1 |
<!doctype html> |
|
|
2 |
<html class="no-js" lang="en"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8"> |
|
|
5 |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
|
|
6 |
|
|
|
7 |
<title>Test Model Renkan</title> |
|
|
8 |
<meta name="description" content=""> |
|
|
9 |
<meta name="author" content=""> |
|
|
10 |
|
|
|
11 |
<meta name="viewport" content="width=device-width"> |
|
|
12 |
|
|
|
13 |
<link rel="stylesheet" href="css/style.css"> |
|
|
14 |
|
|
|
15 |
<script type="text/javascript" src="js/config.js"></script> |
|
|
16 |
<script type="text/javascript" src="js/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script> |
|
|
17 |
<script src="lib/jquery.min.js"></script> |
|
|
18 |
<script src="lib/underscore-min.js"></script> |
|
|
19 |
<script src="js/backbone.js"></script> |
|
|
20 |
<script src="js/backbone-relational.js"></script> |
|
|
21 |
<script src="js/main_test_models.js"></script> |
|
|
22 |
<script src="js/models.js"></script> |
|
|
23 |
<script type="text/javascript" src="js/config.js"></script> |
|
|
24 |
<script data-main="main" src="js/main_coweb.js"></script> |
|
|
25 |
<script type="text/javascript"> |
|
|
26 |
|
|
|
27 |
function set_project(project) { |
|
|
28 |
|
|
|
29 |
require(["dojo/dom", "dojo/on", "corenkan"], function(dom, on, corenkan) { |
|
|
30 |
|
|
|
31 |
var template_html = dom.byId("project_disp_template").innerHTML; |
|
|
32 |
var el = dom.byId("project_display"); |
|
|
33 |
|
|
|
34 |
|
|
|
35 |
var project_form_view = new FormView({el: dom.byId("form_display"), model: project, template: dom.byId("project_form_template").innerHTML}); |
|
|
36 |
|
|
|
37 |
project_view = new ModelView({ |
|
|
38 |
el:el, |
|
|
39 |
model: project, |
|
|
40 |
template: template_html, |
|
|
41 |
form_view: project_form_view, |
|
|
42 |
form_el : dom.byId("form_display_div") |
|
|
43 |
}); |
|
|
44 |
|
|
|
45 |
var user_list_view = new ColView({ |
|
|
46 |
el: dom.byId("users_list_base"), |
|
|
47 |
collection: project.get("users"), |
|
|
48 |
element: { |
|
|
49 |
template: dom.byId("user_disp_template").innerHTML |
|
|
50 |
}, |
|
|
51 |
element_form: { |
|
|
52 |
tagName: "div", |
|
|
53 |
attributes: { |
|
|
54 |
id:"form_display", |
|
|
55 |
}, |
|
|
56 |
template: dom.byId("user_form_template").innerHTML |
|
|
57 |
}, |
|
|
58 |
element_form_el : dom.byId("form_display_div") |
|
|
59 |
}); |
|
|
60 |
|
|
|
61 |
var node_list_view = new ColView({ |
|
|
62 |
el: dom.byId("nodes_list_base"), |
|
|
63 |
collection: project.get("nodes"), |
|
|
64 |
element: { |
|
|
65 |
template: dom.byId("node_disp_template").innerHTML |
|
|
66 |
}, |
|
|
67 |
element_form: { |
|
|
68 |
tagName: "div", |
|
|
69 |
attributes: { |
|
|
70 |
id:"form_display", |
|
|
71 |
}, |
|
|
72 |
template: dom.byId("node_form_template").innerHTML |
|
|
73 |
}, |
|
|
74 |
element_form_el : dom.byId("form_display_div") |
|
|
75 |
}); |
|
|
76 |
|
|
|
77 |
var current_user_view = new CurrentUserView({ |
|
|
78 |
el: dom.byId("users_select"), |
|
|
79 |
model: project |
|
|
80 |
}) |
|
|
81 |
|
|
|
82 |
project_view.render(); |
|
|
83 |
user_list_view.render(); |
|
|
84 |
node_list_view.render(); |
|
|
85 |
current_user_view.render(); |
|
|
86 |
|
|
|
87 |
on(dom.byId("add_user"), "click", function() { |
|
|
88 |
project.get("users").push(new Rkns.Models.User({})); |
|
|
89 |
}); |
|
|
90 |
on(dom.byId("add_node"), "click", function() { |
|
|
91 |
project.get("nodes").push(new Rkns.Models.Node({project: project})); |
|
|
92 |
}); |
|
|
93 |
|
|
|
94 |
on(dom.byId("users_select"), "change", function(evt) { |
|
|
95 |
var val = evt.currentTarget.value; |
|
|
96 |
var current_user = null; |
|
|
97 |
if(typeof val !== "undefined" && val != "") { |
|
|
98 |
current_user = project.get("users").get(val); |
|
|
99 |
} |
|
|
100 |
|
|
|
101 |
if(current_user != null) { |
|
|
102 |
project.current_user = current_user; |
|
|
103 |
dom.byId("current_user").innerHTML = current_user.get("title"); |
|
|
104 |
} |
|
|
105 |
else { |
|
|
106 |
project.current_user = null; |
|
|
107 |
dom.byId("current_user").innerHTML = ""; |
|
|
108 |
} |
|
|
109 |
|
|
|
110 |
}); |
|
|
111 |
|
|
|
112 |
project.get("users").on("change", function(evt) { |
|
|
113 |
if(project.current_user == null) { |
|
|
114 |
dom.byId("current_user").innerHTML = ""; |
|
|
115 |
} |
|
|
116 |
else if(evt.id == project.current_user.id) { |
|
|
117 |
dom.byId("current_user").innerHTML = project.current_user.get("title"); |
|
|
118 |
} |
|
|
119 |
}); |
|
|
120 |
|
|
|
121 |
project.get("users").on("remove", function(evt) { |
|
|
122 |
if(typeof project.current_user === "undefined" || project.current_user == null || evt.id == project.current_user.id) { |
|
|
123 |
dom.byId("current_user").innerHTML = ""; |
|
|
124 |
} |
|
|
125 |
}); |
|
|
126 |
|
|
|
127 |
corenkan.app.setProject(project); |
|
|
128 |
}); |
|
|
129 |
} |
|
|
130 |
|
|
|
131 |
function load_project(project_id) { |
|
|
132 |
var project = null; |
|
|
133 |
|
|
|
134 |
if(project_id) { |
|
|
135 |
project = new Rkns.Models.Project({_id: project_id}); |
|
|
136 |
} |
|
|
137 |
else { |
|
|
138 |
project = new Rkns.Models.Project({}); |
|
|
139 |
} |
|
|
140 |
project.urlRoot = "rest/projects"; |
|
|
141 |
|
|
|
142 |
if(project_id) { |
|
|
143 |
project.fetch({ |
|
|
144 |
success: function(project, resp) { |
|
|
145 |
set_project(project); |
|
|
146 |
} |
|
|
147 |
}); |
|
|
148 |
} |
|
|
149 |
else { |
|
|
150 |
set_project(project); |
|
|
151 |
} |
|
|
152 |
|
|
|
153 |
return project; |
|
|
154 |
} |
|
|
155 |
|
|
|
156 |
var current_project = null; |
|
|
157 |
|
|
|
158 |
require(["dojo/dom", "dojo/on", "dojo/domReady!"], function(dom, on) { |
|
|
159 |
|
|
|
160 |
var project_list_item_view = BasicModelView.extend({template: _.template(dom.byId("project_list_item_template").innerHTML), tagName: "li"}); |
|
|
161 |
|
|
|
162 |
var project_list_col = new (Backbone.Collection.extend({model: Rkns.Models.Project.extend({idAttribute:'_id', urlRoot:'rest/projects'})}))(); |
|
|
163 |
project_list_col.url = "rest/projects"; |
|
|
164 |
project_list_col.on("all", function(){ |
|
|
165 |
if(!project_list_view) { |
|
|
166 |
return; |
|
|
167 |
} |
|
|
168 |
_(project_list_view.element_views).each(function(ev){ |
|
|
169 |
if(ev.model.id === current_project.id) { |
|
|
170 |
$(".project_load_button",ev.el).attr('disabled','disabled'); |
|
|
171 |
$(".project_delete_button",ev.el).attr('disabled','disabled'); |
|
|
172 |
} |
|
|
173 |
else { |
|
|
174 |
$(".project_load_button",ev.el).removeAttr('disabled'); |
|
|
175 |
$(".project_delete_button",ev.el).removeAttr('disabled'); |
|
|
176 |
} |
|
|
177 |
}); |
|
|
178 |
}); |
|
|
179 |
|
|
|
180 |
var project_list_view = null; |
|
|
181 |
|
|
|
182 |
project_list_col.fetch({ |
|
|
183 |
success:function(collection, response) { |
|
|
184 |
project_list_view = new (BasicListView.extend({events: { |
|
|
185 |
"click .project_load_button" : function(evt) { |
|
|
186 |
var proj_id = $(evt.target).val(); |
|
|
187 |
if(current_project && current_project.id == proj_id) { |
|
|
188 |
return; |
|
|
189 |
} |
|
|
190 |
current_project = load_project($(evt.target).val()); |
|
|
191 |
project_list_col.trigger("sync"); |
|
|
192 |
}, |
|
|
193 |
"click .project_delete_button": function(evt) { |
|
|
194 |
var delete_id = $(evt.target).val(); |
|
|
195 |
if(!current_project || delete_id != current_project.id) { |
|
|
196 |
_(project_list_col.where({_id: delete_id})).each(function(proj) { |
|
|
197 |
proj.destroy(); |
|
|
198 |
}); |
|
|
199 |
} |
|
|
200 |
} |
|
|
201 |
}}))({collection: collection, element_view_constructor: project_list_item_view, el: dom.byId("project_list")}); |
|
|
202 |
project_list_view.render(); |
|
|
203 |
} |
|
|
204 |
}); |
|
|
205 |
|
|
|
206 |
on(dom.byId("project_save_button"), "click", function(evt){ |
|
|
207 |
if(current_project) { |
|
|
208 |
current_project.save({}, {success: function(model, response) { |
|
|
209 |
if(project_list_view != null) { |
|
|
210 |
project_list_col.fetch({ |
|
|
211 |
success:function(collection, response) { |
|
|
212 |
project_list_view.render(); |
|
|
213 |
} |
|
|
214 |
}); |
|
|
215 |
} |
|
|
216 |
}}); |
|
|
217 |
} |
|
|
218 |
}); |
|
|
219 |
|
|
|
220 |
on(dom.byId("new_project_button"), "click", function(evt) { |
|
|
221 |
current_project = load_project(); |
|
|
222 |
}); |
|
|
223 |
|
|
|
224 |
}); |
|
|
225 |
</script> |
|
|
226 |
</head> |
|
|
227 |
<body> |
|
|
228 |
<header> |
|
|
229 |
</header> |
|
|
230 |
|
|
|
231 |
<div> |
|
|
232 |
<div class="project_current_user"><span class="project_label project_user_label">User: </span><span id="current_user"></span></div> |
|
|
233 |
<select id="users_select"> |
|
|
234 |
<option value="">None</option> |
|
|
235 |
</select> |
|
|
236 |
</div> |
|
|
237 |
|
|
|
238 |
<button type="button" id="new_project_button">New Project</button> |
|
|
239 |
|
|
|
240 |
<div id="project_list_div"> |
|
|
241 |
<ul id="project_list"> |
|
|
242 |
</ul> |
|
|
243 |
</div> |
|
|
244 |
|
|
|
245 |
<div role="main" id="project_display"> |
|
|
246 |
</div> |
|
|
247 |
<button type="button" id="project_save_button" value="save">Save</button> |
|
|
248 |
|
|
|
249 |
<div id="users_list_div"> |
|
|
250 |
<button id="add_user">Add user</button> |
|
|
251 |
<ul id="users_list_base"> |
|
|
252 |
</ul> |
|
|
253 |
</div> |
|
|
254 |
|
|
|
255 |
<div id="nodes_list_div"> |
|
|
256 |
<button id="add_node">Add node</button> |
|
|
257 |
<ul id="nodes_list_base"> |
|
|
258 |
</ul> |
|
|
259 |
</div> |
|
|
260 |
|
|
|
261 |
|
|
|
262 |
<div id="form_display_div"> |
|
|
263 |
</div> |
|
|
264 |
|
|
|
265 |
<footer> |
|
|
266 |
</footer> |
|
|
267 |
|
|
|
268 |
<script type="text/template" id="current_user_template"> |
|
|
269 |
</script> |
|
|
270 |
|
|
|
271 |
<script type="text/template" id="project_disp_template"> |
|
|
272 |
<div class="show_form"> |
|
|
273 |
<h2 class="project_title">Project <%= _id %>: <%= title %></h2> |
|
|
274 |
<div class="project_desc"><span class="project_label project_desc_label">Desc: </span><%= description %></div> |
|
|
275 |
<div class="project_uri"><span class="project_label project_uri_label">Uri: </span><%= uri %></div> |
|
|
276 |
</div> |
|
|
277 |
</script> |
|
|
278 |
<script type="text/template" id="project_form_template"> |
|
|
279 |
<table class="project_form"> |
|
|
280 |
<thead> |
|
|
281 |
<tr><th>Field</th><th>Value</th></tr> |
|
|
282 |
</thead> |
|
|
283 |
<tbody> |
|
|
284 |
<tr><td>Title:</td><td><input type="text" name="title" id="project_form_title" class="form_field" value="<%= title %>"></input></td></tr> |
|
|
285 |
<tr><td>Uri :</td><td><input type="text" name="uri" id="project_form_text" class="form_field" value="<%= uri %>"></input></td></tr> |
|
|
286 |
<tr><td>Desc :</td><td><textarea name="description" id="project_form_description" class="form_field"><%= description %></textarea></td></tr> |
|
|
287 |
</tbody> |
|
|
288 |
</table> |
|
|
289 |
</script> |
|
|
290 |
<script type="text/template" id="user_disp_template"> |
|
|
291 |
<div class="show_form"> |
|
|
292 |
<h2 class="user_title">User <%= _id %>: <%= title %></h2> |
|
|
293 |
<div class="user_desc"><span class="user_label user_desc_label">Desc: </span><%= description %></div> |
|
|
294 |
<div class="user_uri"><span class="user_label user_uri_label">Uri: </span><%= uri %></div> |
|
|
295 |
<div class="user_color"><span class="user_label user_color_label">Color: </span><%= color %></div> |
|
|
296 |
</div> |
|
|
297 |
<button type="button" class="remove_button" value="<%= _id %>">Remove<button> |
|
|
298 |
</script> |
|
|
299 |
<script type="text/template" id="user_form_template"> |
|
|
300 |
<table class="user_form"> |
|
|
301 |
<thead> |
|
|
302 |
<tr><th>Field</th><th>Value</th></tr> |
|
|
303 |
</thead> |
|
|
304 |
<tbody> |
|
|
305 |
<tr><td>Title:</td><td><input type="text" name="title" class="form_field" value="<%= title %>"></input></td></tr> |
|
|
306 |
<tr><td>Uri :</td><td><input type="text" name="uri" class="form_field" value="<%= uri %>"></input></td></tr> |
|
|
307 |
<tr><td>Color :</td><td><input type="text" name="color" class="form_field" value="<%= color %>"></input></td></tr> |
|
|
308 |
<tr><td>Desc :</td><td><textarea name="description" class="form_field"><%= description %></textarea></td></tr> |
|
|
309 |
</tbody> |
|
|
310 |
</table> |
|
|
311 |
</script> |
|
|
312 |
<script type="text/template" id="node_disp_template"> |
|
|
313 |
<div class="show_form"> |
|
|
314 |
<h2 class="user_title">Node <%= _id %>: <%= title %></h2> |
|
|
315 |
<div class="user_desc"><span class="user_label user_desc_label">Desc: </span><%= description %></div> |
|
|
316 |
<div class="user_uri"><span class="user_label user_uri_label">Uri: </span><%= uri %></div> |
|
|
317 |
<div class="user_creator"><span class="user_label user_uri_label">Creator: </span><%= created_by.title %></div> |
|
|
318 |
</div> |
|
|
319 |
<button type="button" class="remove_button" value="<%= _id %>">Remove<button> |
|
|
320 |
</script> |
|
|
321 |
<script type="text/template" id="node_form_template"> |
|
|
322 |
<table class="node_form"> |
|
|
323 |
<thead> |
|
|
324 |
<tr><th>Field</th><th>Value</th></tr> |
|
|
325 |
</thead> |
|
|
326 |
<tbody> |
|
|
327 |
<tr><td>Node title:</td><td><input type="text" name="title" class="form_field" value="<%= title %>"></input></td></tr> |
|
|
328 |
<tr><td>Node uri :</td><td><input type="text" name="uri" class="form_field" value="<%= uri %>"></input></td></tr> |
|
|
329 |
<tr><td>Node creator :</td><td><input type="text" name="created_by" class="form_field" value="<%= created_by.title %>" readonly="readonly"></input></td></tr> |
|
|
330 |
<tr><td>Node desc :</td><td><textarea name="description" class="form_field"><%= description %></textarea></td></tr> |
|
|
331 |
</tbody> |
|
|
332 |
</table> |
|
|
333 |
</script> |
|
|
334 |
<script type="text/template" id="project_list_item_template"> |
|
|
335 |
<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> |
|
|
336 |
</script> |
|
|
337 |
|
|
|
338 |
|
|
|
339 |
</body> |
|
|
340 |
</html> |