##// END OF EJS Templates
Fix some bugs in deleting notebooks from the dashboard
Thomas Kluyver -
Show More
@@ -1,469 +1,469 b''
1 1 // Copyright (c) IPython Development Team.
2 2 // Distributed under the terms of the Modified BSD License.
3 3
4 4 define([
5 5 'base/js/namespace',
6 6 'jquery',
7 7 'base/js/utils',
8 8 'base/js/dialog',
9 9 ], function(IPython, $, utils, dialog) {
10 10 "use strict";
11 11
12 12 var NotebookList = function (selector, options) {
13 13 // Constructor
14 14 //
15 15 // Parameters:
16 16 // selector: string
17 17 // options: dictionary
18 18 // Dictionary of keyword arguments.
19 19 // session_list: SessionList instance
20 20 // element_name: string
21 21 // base_url: string
22 22 // notebook_path: string
23 23 // contents: Contents instance
24 24 var that = this;
25 25 this.session_list = options.session_list;
26 26 // allow code re-use by just changing element_name in kernellist.js
27 27 this.element_name = options.element_name || 'notebook';
28 28 this.selector = selector;
29 29 if (this.selector !== undefined) {
30 30 this.element = $(selector);
31 31 this.style();
32 32 this.bind_events();
33 33 }
34 34 this.notebooks_list = [];
35 35 this.sessions = {};
36 36 this.base_url = options.base_url || utils.get_body_data("baseUrl");
37 37 this.notebook_path = options.notebook_path || utils.get_body_data("notebookPath");
38 38 this.contents = options.contents;
39 39 if (this.session_list && this.session_list.events) {
40 40 this.session_list.events.on('sessions_loaded.Dashboard',
41 41 function(e, d) { that.sessions_loaded(d); });
42 42 }
43 43 };
44 44
45 45 NotebookList.prototype.style = function () {
46 46 var prefix = '#' + this.element_name;
47 47 $(prefix + '_toolbar').addClass('list_toolbar');
48 48 $(prefix + '_list_info').addClass('toolbar_info');
49 49 $(prefix + '_buttons').addClass('toolbar_buttons');
50 50 $(prefix + '_list_header').addClass('list_header');
51 51 this.element.addClass("list_container");
52 52 };
53 53
54 54
55 55 NotebookList.prototype.bind_events = function () {
56 56 var that = this;
57 57 $('#refresh_' + this.element_name + '_list').click(function () {
58 58 that.load_sessions();
59 59 });
60 60 this.element.bind('dragover', function () {
61 61 return false;
62 62 });
63 63 this.element.bind('drop', function(event){
64 64 that.handleFilesUpload(event,'drop');
65 65 return false;
66 66 });
67 67 };
68 68
69 69 NotebookList.prototype.handleFilesUpload = function(event, dropOrForm) {
70 70 var that = this;
71 71 var files;
72 72 if(dropOrForm =='drop'){
73 73 files = event.originalEvent.dataTransfer.files;
74 74 } else
75 75 {
76 76 files = event.originalEvent.target.files;
77 77 }
78 78 for (var i = 0; i < files.length; i++) {
79 79 var f = files[i];
80 80 var name_and_ext = utils.splitext(f.name);
81 81 var file_ext = name_and_ext[1];
82 82
83 83 var reader = new FileReader();
84 84 if (file_ext === '.ipynb') {
85 85 reader.readAsText(f);
86 86 } else {
87 87 // read non-notebook files as binary
88 88 reader.readAsArrayBuffer(f);
89 89 }
90 90 var item = that.new_item(0);
91 91 item.addClass('new-file');
92 92 that.add_name_input(f.name, item, file_ext == '.ipynb' ? 'notebook' : 'file');
93 93 // Store the list item in the reader so we can use it later
94 94 // to know which item it belongs to.
95 95 $(reader).data('item', item);
96 96 reader.onload = function (event) {
97 97 var item = $(event.target).data('item');
98 98 that.add_file_data(event.target.result, item);
99 99 that.add_upload_button(item);
100 100 };
101 101 reader.onerror = function (event) {
102 102 var item = $(event.target).data('item');
103 103 var name = item.data('name');
104 104 item.remove();
105 105 dialog.modal({
106 106 title : 'Failed to read file',
107 107 body : "Failed to read file '" + name + "'",
108 108 buttons : {'OK' : { 'class' : 'btn-primary' }}
109 109 });
110 110 };
111 111 }
112 112 // Replace the file input form wth a clone of itself. This is required to
113 113 // reset the form. Otherwise, if you upload a file, delete it and try to
114 114 // upload it again, the changed event won't fire.
115 115 var form = $('input.fileinput');
116 116 form.replaceWith(form.clone(true));
117 117 return false;
118 118 };
119 119
120 120 NotebookList.prototype.clear_list = function (remove_uploads) {
121 121 // Clears the navigation tree.
122 122 //
123 123 // Parameters
124 124 // remove_uploads: bool=False
125 125 // Should upload prompts also be removed from the tree.
126 126 if (remove_uploads) {
127 127 this.element.children('.list_item').remove();
128 128 } else {
129 129 this.element.children('.list_item:not(.new-file)').remove();
130 130 }
131 131 };
132 132
133 133 NotebookList.prototype.load_sessions = function(){
134 134 this.session_list.load_sessions();
135 135 };
136 136
137 137
138 138 NotebookList.prototype.sessions_loaded = function(data){
139 139 this.sessions = data;
140 140 this.load_list();
141 141 };
142 142
143 143 NotebookList.prototype.load_list = function () {
144 144 var that = this;
145 145 this.contents.list_contents(that.notebook_path, {
146 146 success: $.proxy(this.draw_notebook_list, this),
147 147 error: function(error) {
148 148 that.draw_notebook_list({content: []}, "Server error: " + error.message);
149 149 }
150 150 });
151 151 };
152 152
153 153 /**
154 154 * Draw the list of notebooks
155 155 * @method draw_notebook_list
156 156 * @param {Array} list An array of dictionaries representing files or
157 157 * directories.
158 158 * @param {String} error_msg An error message
159 159 */
160 160 NotebookList.prototype.draw_notebook_list = function (list, error_msg) {
161 161 var message = error_msg || 'Notebook list empty.';
162 162 var item = null;
163 163 var model = null;
164 164 var len = list.content.length;
165 165 this.clear_list();
166 166 var n_uploads = this.element.children('.list_item').length;
167 167 if (len === 0) {
168 168 item = this.new_item(0);
169 169 var span12 = item.children().first();
170 170 span12.empty();
171 171 span12.append($('<div style="margin:auto;text-align:center;color:grey"/>').text(message));
172 172 }
173 173 var path = this.notebook_path;
174 174 var offset = n_uploads;
175 175 if (path !== '') {
176 176 item = this.new_item(offset);
177 177 model = {
178 178 type: 'directory',
179 179 name: '..',
180 180 path: utils.url_path_split(path)[0],
181 181 };
182 182 this.add_link(model, item);
183 183 offset += 1;
184 184 }
185 185 for (var i=0; i<len; i++) {
186 186 model = list.content[i];
187 187 item = this.new_item(i+offset);
188 188 this.add_link(model, item);
189 189 }
190 190 };
191 191
192 192
193 193 NotebookList.prototype.new_item = function (index) {
194 194 var item = $('<div/>').addClass("list_item").addClass("row");
195 195 // item.addClass('list_item ui-widget ui-widget-content ui-helper-clearfix');
196 196 // item.css('border-top-style','none');
197 197 item.append($("<div/>").addClass("col-md-12").append(
198 198 $('<i/>').addClass('item_icon')
199 199 ).append(
200 200 $("<a/>").addClass("item_link").append(
201 201 $("<span/>").addClass("item_name")
202 202 )
203 203 ).append(
204 204 $('<div/>').addClass("item_buttons btn-group pull-right")
205 205 ));
206 206
207 207 if (index === -1) {
208 208 this.element.append(item);
209 209 } else {
210 210 this.element.children().eq(index).after(item);
211 211 }
212 212 return item;
213 213 };
214 214
215 215
216 216 NotebookList.icons = {
217 217 directory: 'folder_icon',
218 218 notebook: 'notebook_icon',
219 219 file: 'file_icon',
220 220 };
221 221
222 222 NotebookList.uri_prefixes = {
223 223 directory: 'tree',
224 224 notebook: 'notebooks',
225 225 file: 'files',
226 226 };
227 227
228 228
229 229 NotebookList.prototype.add_link = function (model, item) {
230 230 var path = model.path,
231 231 name = model.name;
232 232 item.data('name', name);
233 233 item.data('path', path);
234 234 item.find(".item_name").text(name);
235 235 var icon = NotebookList.icons[model.type];
236 236 var uri_prefix = NotebookList.uri_prefixes[model.type];
237 237 item.find(".item_icon").addClass(icon).addClass('icon-fixed-width');
238 238 var link = item.find("a.item_link")
239 239 .attr('href',
240 240 utils.url_join_encode(
241 241 this.base_url,
242 242 uri_prefix,
243 243 path
244 244 )
245 245 );
246 246 // directory nav doesn't open new tabs
247 247 // files, notebooks do
248 248 if (model.type !== "directory") {
249 249 link.attr('target','_blank');
250 250 }
251 251 var path_name = utils.url_path_join(path, name);
252 252 if (model.type == 'file') {
253 253 this.add_delete_button(item);
254 254 } else if (model.type == 'notebook') {
255 255 if(this.sessions[path_name] === undefined){
256 256 this.add_delete_button(item);
257 257 } else {
258 258 this.add_shutdown_button(item, this.sessions[path_name]);
259 259 }
260 260 }
261 261 };
262 262
263 263
264 264 NotebookList.prototype.add_name_input = function (name, item, icon_type) {
265 265 item.data('name', name);
266 266 item.find(".item_icon").addClass(NotebookList.icons[icon_type]).addClass('icon-fixed-width');
267 267 item.find(".item_name").empty().append(
268 268 $('<input/>')
269 269 .addClass("filename_input")
270 270 .attr('value', name)
271 271 .attr('size', '30')
272 272 .attr('type', 'text')
273 273 .keyup(function(event){
274 274 if(event.keyCode == 13){item.find('.upload_button').click();}
275 275 else if(event.keyCode == 27){item.remove();}
276 276 })
277 277 );
278 278 };
279 279
280 280
281 281 NotebookList.prototype.add_file_data = function (data, item) {
282 282 item.data('filedata', data);
283 283 };
284 284
285 285
286 286 NotebookList.prototype.add_shutdown_button = function (item, session) {
287 287 var that = this;
288 288 var shutdown_button = $("<button/>").text("Shutdown").addClass("btn btn-xs btn-danger").
289 289 click(function (e) {
290 290 var settings = {
291 291 processData : false,
292 292 cache : false,
293 293 type : "DELETE",
294 294 dataType : "json",
295 295 success : function () {
296 296 that.load_sessions();
297 297 },
298 298 error : utils.log_ajax_error,
299 299 };
300 300 var url = utils.url_join_encode(
301 301 that.base_url,
302 302 'api/sessions',
303 303 session
304 304 );
305 305 $.ajax(url, settings);
306 306 return false;
307 307 });
308 308 // var new_buttons = item.find('a'); // shutdown_button;
309 309 item.find(".item_buttons").text("").append(shutdown_button);
310 310 };
311 311
312 312 NotebookList.prototype.add_delete_button = function (item) {
313 313 var notebooklist = this;
314 314 var delete_button = $("<button/>").text("Delete").addClass("btn btn-default btn-xs").
315 315 click(function (e) {
316 316 // $(this) is the button that was clicked.
317 317 var that = $(this);
318 318 // We use the filename from the parent list_item element's
319 319 // data because the outer scope's values change as we iterate through the loop.
320 320 var parent_item = that.parents('div.list_item');
321 var name = parent_item.data('nbname');
321 var name = parent_item.data('name');
322 322 var path = parent_item.data('path');
323 323 var message = 'Are you sure you want to permanently delete the file: ' + name + '?';
324 324 dialog.modal({
325 325 title : "Delete file",
326 326 body : message,
327 327 buttons : {
328 328 Delete : {
329 329 class: "btn-danger",
330 330 click: function() {
331 331 notebooklist.contents.delete(path, {
332 332 success: function() {
333 333 notebooklist.notebook_deleted(path);
334 334 }
335 335 });
336 336 }
337 337 },
338 338 Cancel : {}
339 339 }
340 340 });
341 341 return false;
342 342 });
343 343 item.find(".item_buttons").text("").append(delete_button);
344 344 };
345 345
346 346 NotebookList.prototype.notebook_deleted = function(path) {
347 347 // Remove the deleted notebook.
348 $( ":data(nbname)" ).each(function() {
348 $( ":data(path)" ).each(function() {
349 349 var element = $(this);
350 350 if (element.data("path") == path) {
351 351 element.remove();
352 352 }
353 353 });
354 354 };
355 355
356 356
357 357 NotebookList.prototype.add_upload_button = function (item) {
358 358 var that = this;
359 359 var upload_button = $('<button/>').text("Upload")
360 360 .addClass('btn btn-primary btn-xs upload_button')
361 361 .click(function (e) {
362 362 var filename = item.find('.item_name > input').val();
363 363 var path = utils.url_path_join(that.notebook_path, filename);
364 364 var filedata = item.data('filedata');
365 365 var format = 'text';
366 366 if (filename.length === 0 || filename[0] === '.') {
367 367 dialog.modal({
368 368 title : 'Invalid file name',
369 369 body : "File names must be at least one character and not start with a dot",
370 370 buttons : {'OK' : { 'class' : 'btn-primary' }}
371 371 });
372 372 return false;
373 373 }
374 374 if (filedata instanceof ArrayBuffer) {
375 375 // base64-encode binary file data
376 376 var bytes = '';
377 377 var buf = new Uint8Array(filedata);
378 378 var nbytes = buf.byteLength;
379 379 for (var i=0; i<nbytes; i++) {
380 380 bytes += String.fromCharCode(buf[i]);
381 381 }
382 382 filedata = btoa(bytes);
383 383 format = 'base64';
384 384 }
385 385 var model = {};
386 386
387 387 var name_and_ext = utils.splitext(filename);
388 388 var file_ext = name_and_ext[1];
389 389 var content_type;
390 390 if (file_ext === '.ipynb') {
391 391 model.type = 'notebook';
392 392 model.format = 'json';
393 393 try {
394 394 model.content = JSON.parse(filedata);
395 395 } catch (e) {
396 396 dialog.modal({
397 397 title : 'Cannot upload invalid Notebook',
398 398 body : "The error was: " + e,
399 399 buttons : {'OK' : {
400 400 'class' : 'btn-primary',
401 401 click: function () {
402 402 item.remove();
403 403 }
404 404 }}
405 405 });
406 406 return false;
407 407 }
408 408 content_type = 'application/json';
409 409 } else {
410 410 model.type = 'file';
411 411 model.format = format;
412 412 model.content = filedata;
413 413 content_type = 'application/octet-stream';
414 414 }
415 415 filedata = item.data('filedata');
416 416
417 417 var settings = {
418 418 success : function () {
419 419 item.removeClass('new-file');
420 420 that.add_link(model, item);
421 421 that.add_delete_button(item);
422 422 that.session_list.load_sessions();
423 423 },
424 424 };
425 425
426 426 var exists = false;
427 427 $.each(that.element.find('.list_item:not(.new-file)'), function(k,v){
428 428 if ($(v).data('name') === filename) { exists = true; return false; }
429 429 });
430 430
431 431 if (exists) {
432 432 dialog.modal({
433 433 title : "Replace file",
434 434 body : 'There is already a file named ' + filename + ', do you want to replace it?',
435 435 buttons : {
436 436 Overwrite : {
437 437 class: "btn-danger",
438 438 click: function () {
439 439 that.contents.save(path, model, settings);
440 440 }
441 441 },
442 442 Cancel : {
443 443 click: function() { item.remove(); }
444 444 }
445 445 }
446 446 });
447 447 } else {
448 448 that.contents.save(path, model, settings);
449 449 }
450 450
451 451 return false;
452 452 });
453 453 var cancel_button = $('<button/>').text("Cancel")
454 454 .addClass("btn btn-default btn-xs")
455 455 .click(function (e) {
456 456 item.remove();
457 457 return false;
458 458 });
459 459 item.find(".item_buttons").empty()
460 460 .append(upload_button)
461 461 .append(cancel_button);
462 462 };
463 463
464 464
465 465 // Backwards compatability.
466 466 IPython.NotebookList = NotebookList;
467 467
468 468 return {'NotebookList': NotebookList};
469 469 });
General Comments 0
You need to be logged in to leave comments. Login now