|
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> |