Dateiverwaltung für die WebBox
ulrich
2017-02-25 a3d410776dcaf84ab2a0cb22eebb6e75a3251033
commit | author | age
723bf7 1 /*
U 2     Dateiverwaltung - File management in your browser
3     Copyright (C) 2017 Ulrich Hilger, http://uhilger.de
4
5     This program is free software: you can redistribute it and/or modify
6     it under the terms of the GNU Affero General Public License as
7     published by the Free Software Foundation, either version 3 of the
8     License, or (at your option) any later version.
9
10     This program is distributed in the hope that it will be useful,
11     but WITHOUT ANY WARRANTY; without even the implied warranty of
12     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
13     GNU Affero General Public License for more details.
14
15     You should have received a copy of the GNU Affero General Public License
16     along with this program.  If not, see <http://www.gnu.org/licenses/>.
17 */
18
a4d3b5 19 var cm;
5dfab6 20 var pfad = '';
10d3d3 21 var modus = 'kacheln';
5ebb8e 22 var openFileName = '';
c7c502 23
U 24 function fm_init() {
a4d3b5 25   $('.codeeditor-space').hide();
U 26   $('.code-editor-container').hide();
bef5c6 27   //$('.ost').attr('flex-basis', 0);
a4d3b5 28   $('#newTextFile').on('click', fm_menu_neue_textdatei);
adf812 29   $('#newFolder').on('click', fm_get_new_folder);
3ad4db 30   $('#editTextFile').on('click', fm_get_file_content);
e5ff42 31   $('#saveFile').on('click', fm_menu_datei_speichern);
5ebb8e 32   $('#saveFileAs').on('click', fm_menu_datei_speichern_unter);
a4d3b5 33   $('#closeFile').on('click', fm_menu_datei_schliessen);
fc1897 34   $('#m-del').on('click', fm_menu_delete);
bef5c6 35   $('#m-test').on('click', fm_menu_test);
c509a0 36   $('#saveModal').on('hidden.bs.modal', function (e) {
915927 37     $('#modal_ok').attr('onclick','').unbind('click');
b7475d 38   });
U 39   $('#logout').click(fm_logout);  
e5ff42 40   fm_get_login();
7342b1 41   fm_get_list('');
7aa566 42   fm_init_uploader();
10d3d3 43 }
7aa566 44
U 45 /* ----- Uploader Anfang ----------*/
46
47 var dateien = new Array();
48
49 function fm_init_uploader() {
50   var dropzone = document.getElementById("dateien");  
51   dropzone.ondragover = dropzone.ondragenter = function(event) {  
52     event.stopPropagation();  
53     event.preventDefault();  
54   };
55
56   dropzone.ondrop = function(event) {  
57     event.stopPropagation();  
58     event.preventDefault();  
7ebde1 59     var fileList = event.dataTransfer.files;  
U 60     for (var i=0; i<fileList.length; i++) {  
61       dateien.push(fileList[i]);
62     }
63     sendFile(dateien.pop());
7aa566 64   };
U 65 }
66
67 function sendFile(datei) {
7ebde1 68   var uri = "../api/upload";
7aa566 69   var xhr = new XMLHttpRequest();  
U 70   var fd = new FormData();  
71   xhr.open("POST", uri, true);  
72   xhr.onreadystatechange = function() {  
73     if (xhr.readyState == 4 && xhr.status == 200) {  
74       fm_get_list(pfad);
7ebde1 75       if(dateien.length > 0) {
U 76         sendFile(dateien.pop());
77       }
7aa566 78     }  
U 79   };  
7ebde1 80   fd.append('dateiauswahlfeld', datei);  
7aa566 81   xhr.send(fd);          
U 82 }
83
84 /* ----- Uploader Ende --------------- */
10d3d3 85
fc1897 86 function fm_menu_delete() {
U 87   $('#confirmOk').click(function() {
88     // hier loeschen
89     fm_del_files();
90   });
957b51 91   $('#confirmModalTitle').text("Löschen");
U 92   $('#confirmModalBody').text("Wirklich löschen?");
fc1897 93   
U 94   /*var fname = $('.datei-gewaehlt').text();
95   if(fname !== undefined) {
96     $('#dateiname').val(fname);
97   } else {
98     $('#dateiname').val('');
99   }*/
100   //$('#dateiname').attr('placeholder', 'Dateiname');
101   $('#confirmModal').modal({
102     keyboard: false,
103     show: true
104   });
105 }
106
bef5c6 107 function fm_menu_test() {
U 108   var w = $('.ost').width();
109   if(w == 0) {
110     $('.ost').width('20%');
111     $('.ost').text('Hallo Welt!');
112   } else {
113     $('.ost').empty();
114     $('.ost').width(0);
115   }
116 }
117
10d3d3 118 function fm_ansicht_umschalten() {
U 119   if($('#ansicht').children(0).hasClass('fa-th-list')) {
120     $('#ansicht').children(0).addClass('fa-th-large');
121     $('#ansicht').children(0).removeClass('fa-th-list');
122     modus = 'liste';
123   } else {
124     $('#ansicht').children(0).addClass('fa-th-list');    
125     $('#ansicht').children(0).removeClass('fa-th-large');
126     modus = 'kacheln';
127   }
128   fm_get_list(pfad);
129 }
130
131 function fm_set_modus() {
132   if(modus == 'kacheln') {
133     $('#ansicht').children(0).addClass('fa-th-list');    
134     $('#ansicht').children(0).removeClass('fa-th-large');  
135   } else {
136     $('#ansicht').children(0).addClass('fa-th-large');
137     $('#ansicht').children(0).removeClass('fa-th-list');    
138   }
a4d3b5 139 }
U 140
141 function fm_menu_neue_textdatei() {
adf812 142   fm_text_edit('Neue Datei');
a4d3b5 143 }
U 144
145 function fm_menu_datei_schliessen() {
146   $('.codeeditor-space').hide();
147   $('.code-editor-container').hide();
148   cm.toTextArea();
f5505f 149   $('#bcnav').show();
U 150   $('#dateien').show();
5ebb8e 151   openFileName = '';
adf812 152   fm_get_list(pfad);
e5ff42 153 }
U 154
17919c 155 function fm_dateiwahl(ev) {
5dfab6 156   var elem = this;
17919c 157   //console.log('dateiwahl nach click, event shift: ' + ev.shiftKey + ", event ctrl: " + ev.ctrlKey);
10d3d3 158   if(modus == 'kacheln') {
957b51 159     // Kacheln
10d3d3 160     if($(elem).children(0).hasClass('fa-folder')) {
957b51 161       if(/*ev.shiftKey || */ ev.ctrlKey) {
U 162         $(elem).find('.dateiname').addClass('datei-gewaehlt');
10d3d3 163       } else {
957b51 164         var ordner = $(elem).text().trim();
U 165         if(pfad.length > 0) {
166           pfad = pfad + '/' + ordner;
167         } else {
168           pfad = ordner;
169         }
170         fm_get_list(pfad);
10d3d3 171       }
U 172     } else if($(elem).children(0).hasClass('fa-file')) {
17919c 173       if(/*ev.shiftKey || */ ev.ctrlKey) {
U 174         // mehrere Dateien sollen gewaehlt werden
175       } else {
176         $('.datei-gewaehlt').removeClass('datei-gewaehlt');        
177       }
957b51 178       $(elem).find('.dateiname').addClass('datei-gewaehlt');
5dfab6 179     } else {
10d3d3 180       //console.log('kein folder oder file...');
5dfab6 181     }
U 182   } else {
957b51 183     // Liste
10d3d3 184     if($(elem).find('.datei-elem').children(0).hasClass('fa-file-o')) {
957b51 185       // Datei
17919c 186       if(/*ev.shiftKey || */ ev.ctrlKey) {
U 187         // mehrere Dateien sollen gewaehlt werden
188       } else {
189         $('.table-info').removeClass('table-info');
957b51 190         $('.datei-gewaehlt').removeClass('datei-gewaehlt');
17919c 191       }
10d3d3 192       $(elem).addClass('table-info');
U 193       $(elem).find('.dateiname').addClass('datei-gewaehlt');
194     } else {
957b51 195       // Ordner
U 196       if(/*ev.shiftKey || */ ev.ctrlKey) {
197         $(elem).children(0).addClass('datei-gewaehlt');
10d3d3 198       } else {
957b51 199         var ordner = $(elem).find('.dateiname').text();
U 200         if(pfad.length > 0) {
201           pfad = pfad + '/' + ordner;
202         } else {
203           pfad = ordner;
204         }
205         fm_get_list(pfad);
10d3d3 206       }
U 207     }   
5dfab6 208   }
c509a0 209 }
U 210
a94216 211 function fm_bc_click() {
U 212   var elem = this;
213   var bcPfad = $(elem).attr('rpath');
214   if(bcPfad !== undefined) {
c509a0 215     pfad = bcPfad;
a94216 216     fm_get_list(bcPfad);
U 217   } else {
218     pfad = '';
219     fm_get_list('');
220   }
221 }
222
3ad4db 223 function fm_text_edit(content) {
f5505f 224   $('#bcnav').hide();
U 225   $('#dateien').hide();
3ad4db 226   $('.codeeditor-space').show();
U 227   $('.code-editor-container').show();
228   fm_code_edit(content);  
229 }
230
b7475d 231 /* ----- API Calls ------------- */
U 232
e5ff42 233 function fm_get_login() {
3ad4db 234   var m = '?c=de.uhilger.filecms.pub.SessionManager&m=getSessionUser';
U 235   var u = '../pub' + m;
236   fm_get(u, "text", function(resp) {
237     $('#userMenu').text(resp);
7342b1 238   });  
c509a0 239 }
U 240
241 function fm_get_new_folder() {
242   $('#modal_ok').click(function() {
243     // hier speichern
244     var m = '?c=de.uhilger.filecms.api.FileMgr&m=newFolder&p=' + pfad + '&p=' + $('#dateiname').val();
245     var u = '../svc' + m;
246     fm_get(u, "json", function(resp) {
adf812 247       fm_get_list(pfad);
c509a0 248     });
U 249   });
957b51 250   $('#saveModalTitle').text('Neuer Ordner');
c509a0 251   $('#dialogfrage').text("Name?");
U 252   $('#dateiname').val('');
253   $('#dateiname').attr('placeholder', 'Ordnername');
254   $('#saveModal').modal({
255     keyboard: false,
256     show: true
257   });
7342b1 258 }
U 259
2121cc 260 function fm_get_file_content() {
fc1897 261   var gewaehlte = $('.datei-gewaehlt');
957b51 262   //var fname = $(gewaehlte).find('.dateiname').text();
U 263   
264   var fname = $(gewaehlte[0]).text();
5ebb8e 265   openFileName = fname;
3ad4db 266   var m = '?c=de.uhilger.filecms.api.FileMgr&m=getCode&p=' + pfad + '&p=' + fname;
2121cc 267   var u = '../svc' + m;
3ad4db 268   fm_get(u, "text", function(resp) {
U 269     fm_text_edit(resp);
2121cc 270   });
3ad4db 271   
2121cc 272 }
U 273
fc1897 274 function fm_del_files() {
U 275   var gewaehlte = $('.datei-gewaehlt');
276   //console.log('anzahl: ' + gewaehlte.length);
277   var fnames = new Array();
957b51 278   var i = 0;
fc1897 279   while(i < gewaehlte.length) {
U 280     var str = { "java.lang.String": $(gewaehlte[i]).text()};
281     fnames.push(str);
282     //console.log('loeschen ' + pfad + ' ' + $(gewaehlte[i]).text());
957b51 283     //i += 2;
U 284     i++;
fc1897 285   }
U 286   
287   var liste = '{"List":' + JSON.stringify(fnames) + '}';
288   // 'liste' enthaelt:
289   // {"List":[{"java.lang.String":"test3.txt"},{"java.lang.String":"Test1.txt"},{"java.lang.String":"Test2.txt"}]}
957b51 290   // und wird auf dem Server zu einer List[ArrayList<String>] bei der jede ArrayList<String> nur ein Element hat 
fc1897 291   
U 292   var m = '?c=de.uhilger.filecms.api.FileMgr&m=deleteFiles&p=' + pfad + '&p=' + encodeURIComponent(liste);
293   var u = '../svc' + m;
294   fm_get(u, "text", function(resp) {
295     // console.log('deleteFiles gab folgendes zurueck: ' + resp);
296     fm_get_list(pfad);
297   });
298   
299 }
300
10d3d3 301 function fm_render_list(fl) {
U 302   if(modus == 'kacheln') {
303     // Kachelansicht
a3d410 304     $.get('tpl-kacheln.txt', function(template) {
U 305       $('#dateien').empty();
306       $('#dateien').html(Mustache.render(template, fl));
307       $('.figure').click(fm_dateiwahl);
308     });
10d3d3 309     $('.datei-zeile').attr('onclick','').unbind('click');
U 310   } else {
311     // Listenansicht
a3d410 312     $.get('tpl-liste.txt', function(template) {
U 313       $('#dateien').empty();
314       $('#dateien').html(Mustache.render(template, fl));
315       $('.datei-zeile').click(fm_dateiwahl);
316     });
10d3d3 317     $('.figure').attr('onclick','').unbind('click');
U 318   }
319 }
320
7342b1 321 // http://localhost:8079/file-cms/svc?c=de.uhilger.filecms.api.FileMgr&f=JSONNICE&m=list&p=
a94216 322 function fm_get_list(relPfad) {
10d3d3 323   $('#ansicht').attr('onclick','').unbind('click');
a94216 324   var m = '?c=de.uhilger.filecms.api.FileMgr&m=list&p=' + relPfad;
7342b1 325   var u = '../svc' + m;
U 326   fm_get(u, "json", function(resp) {
10d3d3 327     
2121cc 328     if(resp.List[0].FileRef !== undefined) {
U 329       var files = new Array();
c509a0 330       if(resp.List[0].FileRef instanceof Array) {
U 331         for(var i = 0; i < resp.List[0].FileRef.length; i++) {
332           files.push(new FileRef(resp.List[0].FileRef[i]));
333         }
334       } else {
335         files.push(new FileRef(resp.List[0].FileRef));
2121cc 336       }
U 337       var fl = new FileList(files);
10d3d3 338       fm_render_list(fl);
2121cc 339     } else {
U 340       $('#dateien').empty();
7342b1 341     }
5dfab6 342     
10d3d3 343     // Breadcrumb-Ansicht
a3d410 344     //var template;
a94216 345     $('.breadcrumb-item').attr('onclick','').unbind('click');
2315a0 346     $('#bcnav').empty();
5dfab6 347     var dirList = new Array();
U 348     var rp = '';
a94216 349     //console.log("'" + relPfad + "'");
U 350     var dirs = relPfad.split('/');
351     //console.log(dirs.length);
2121cc 352     dirList.push(new BcrFile(rp, 'Home'));
a94216 353     if(relPfad.length > 0) {
2315a0 354       for(var i = 0; i < dirs.length - 1; i++) {
5dfab6 355         if(rp.length > 0 ) {
U 356           dirList.push(new BcrFile(rp + '/' + dirs[i], dirs[i]));
2315a0 357           rp = rp + '/' + dirs[i];
5dfab6 358         } else {
U 359           dirList.push(new BcrFile(dirs[i], dirs[i]));
2315a0 360           rp = dirs[i];
5dfab6 361         }
U 362       }
363       var bl = new BcrFiles(dirList);
2315a0 364
a3d410 365       if(dirList.length > 0) {        
U 366         $.get('tpl-bcr.txt', function(template) {
367           $('#bcnav').html(Mustache.render(template, bl));
368           if(dirs.length > 0) {
369             dirList.push(new BcrFile(rp + '/' + dirs[dirs.length-1], dirs[dirs.length-1]));
370             $.get('tpl-bcr2.txt', function(template) {
371               $('#bcnav').append(Mustache.render(template, dirList[dirList.length-1]));  
372               $('#bcnav').append($('#tpl-bcr3').html());
373               fm_bcr_end();
374             });
375             //template = $('#tpl-bcr2').html();
376             //Mustache.parse(template);   // optional, speeds up future uses
377             //$('#bcnav').append(Mustache.render(template, dirList[dirList.length-1]));        
378           } else {
379             $.get('tpl-bcr2.txt', function(template) {
380               $('#bcnav').append(Mustache.render(template, dirList[0]));
381               $('#bcnav').append($('#tpl-bcr3').html());
382               fm_bcr_end();
383         });
384             //template = $('#tpl-bcr2').html();
385             //Mustache.parse(template);   // optional, speeds up future uses
386             //$('#bcnav').append(Mustache.render(template, dirList[0]));        
387           }
388         });
2315a0 389       } else {
a3d410 390         if(dirs.length > 0) {
U 391           dirList.push(new BcrFile(rp + '/' + dirs[dirs.length-1], dirs[dirs.length-1]));
392           $.get('tpl-bcr2.txt', function(template) {
393             $('#bcnav').append(Mustache.render(template, dirList[dirList.length-1]));  
394             $('#bcnav').append($('#tpl-bcr3').html());
395             fm_bcr_end();
396           });
397           //template = $('#tpl-bcr2').html();
398           //Mustache.parse(template);   // optional, speeds up future uses
399           //$('#bcnav').append(Mustache.render(template, dirList[dirList.length-1]));        
400         } else {
401           $.get('tpl-bcr2.txt', function(template) {
402             $('#bcnav').append(Mustache.render(template, dirList[0]));
403             $('#bcnav').append($('#tpl-bcr3').html());
404             fm_bcr_end();
405           });
406           //template = $('#tpl-bcr2').html();
407           //Mustache.parse(template);   // optional, speeds up future uses
408           //$('#bcnav').append(Mustache.render(template, dirList[0]));        
409         }
2315a0 410       }
U 411     } else {
a94216 412       pfad = '';
a3d410 413       $.get('tpl-bcr2.txt', function(template) {
U 414         $('#bcnav').append(Mustache.render(template, dirList[0]));
415         $('#bcnav').append($('#tpl-bcr3').html());
416         fm_bcr_end();
417       });
418       //template = $('#tpl-bcr2').html();
419       //Mustache.parse(template);   // optional, speeds up future uses
420       //$('#bcnav').append(Mustache.render(template, dirList[0]));   
421       //$('#bcnav').append($('#tpl-bcr3').html());
5dfab6 422     }
a3d410 423     //$('.breadcrumb-item').click(fm_bc_click);
U 424     //$('#ansicht').click(fm_ansicht_umschalten);
425     //fm_set_modus();
e5ff42 426   });  
a3d410 427 }
U 428
429 function fm_bcr_end() {
430   $('.breadcrumb-item').click(fm_bc_click);
431   $('#ansicht').click(fm_ansicht_umschalten);
432   fm_set_modus();
e5ff42 433 }
U 434
435 function fm_menu_datei_speichern() {
5ebb8e 436   //var fname = $('.datei-gewaehlt').text();
U 437   var fname = openFileName;
438   if(fname !== undefined && fname !== '') {
439     fm_save_file(fname);
440   } else {
441     fm_menu_datei_speichern_unter();
442   }
443 }
444
445 function fm_save_file(saveFileName) {
446   var m = '?c=de.uhilger.filecms.api.FileMgr&m=saveTextFile';
447   var u = '../svc' + m;
448   fm_post(u, {p1: pfad, p2: saveFileName, p3: cm.getValue()}, function(resp) {
449     openFileName = saveFileName;
450   });
451 }
452
453 function fm_menu_datei_speichern_unter() {
e5ff42 454   
915927 455   $('#modal_ok').click(function() {
U 456     // hier speichern
5ebb8e 457     fm_save_file($('#dateiname').val());
U 458     /*
915927 459     var m = '?c=de.uhilger.filecms.api.FileMgr&m=saveTextFile';
U 460     var u = '../svc' + m;
2121cc 461     fm_post(u, {p1: pfad, p2: $('#dateiname').val(), p3: cm.getValue()}, function(resp) {
915927 462
U 463     });
5ebb8e 464     */
915927 465   });
957b51 466   $('#saveModalTitle').text('Datei speichern');
c509a0 467   $('#dialogfrage').text("Dateiname?");
3ad4db 468   
U 469   var fname = $('.datei-gewaehlt').text();
470   if(fname !== undefined) {
471     $('#dateiname').val(fname);
472   } else {
473     $('#dateiname').val('');
474   }
c509a0 475   $('#dateiname').attr('placeholder', 'Dateiname');
915927 476   $('#saveModal').modal({
U 477     keyboard: false,
478     show: true
479   });
a4d3b5 480 }
U 481
b7475d 482 function fm_logout() {
U 483   var m = '?c=de.uhilger.filecms.pub.SessionManager&m=expireSession';
484   var u = '../pub' + m;
485   
486   fm_get(u, "text", function(resp) {
487     $('#userMenu').text('nicht angemeldet');
488     window.location.href = '../logout.html';
489   });
490 }
491
492
a4d3b5 493 /* ---- codemirror editor handling -------- */
U 494
495 function fm_code_edit(content) {
496   cm = CodeMirror.fromTextArea(document.getElementById("editspace"), {
497     lineNumbers: true,
498     mode: "xml",
499     viewportMargin : Infinity,
500     extraKeys: {
915927 501         "F9": function(cm) {
U 502         cm.setOption("fullScreen", !cm.getOption("fullScreen"));
503       },
504         "Esc": function(cm) {
505         if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
506       }
a4d3b5 507     }
U 508   });
509   cm.setValue(content);
915927 510 }
a4d3b5 511
U 512
513
514 /* -------- helper functions ----------- */
515
b7475d 516 function fm_get(u, dtype, scallback) {
a4d3b5 517   $.ajax({
U 518     url: u,
519     type: "GET",
b7475d 520     dataType: dtype,
a4d3b5 521     success: scallback,
U 522     error: function (xhr, status, errorThrown) {
523       alert("Error: " + errorThrown + " Status: " + status + " URL: " + u);
524     },
525     complete: function (xhr, status) {
526       //console.log( "The request is complete!" );
527     }
528
529   });
915927 530 }
a4d3b5 531
U 532 function fm_post(u, d, scallback) {
533   $.ajax({
534     url: u,
535     data: d,
536     type: "POST",
537     dataType: "json",
538     success: scallback,
539     error: function (xhr, status, errorThrown) {
540       $('#fehler').html("Error: " + errorThrown + " Status: " + status);
541     },
542     complete: function (xhr, status) {
543       //alert( "The request is complete!" );
544     }
545   });
915927 546 }
a4d3b5 547
e5ff42 548 function fm_serialise(obj) {
U 549   return '{"' + obj.constructor.name + '":' + JSON.stringify(obj) + '}';
915927 550 }
e5ff42 551
7342b1 552 /* ----- Objekte ----- */
U 553
554 function FileList(fl) {
555   this.files = fl;
556 }
557
558 function FileRef(obj) {
559   var self = this;
560   this.fr = obj;
561   
562   this.typeClass = function() {
10d3d3 563     if(modus == 'kacheln') {
U 564       if(self.fr.isDirectory) {
a3d410 565         return 'fa-folder ordner';
10d3d3 566       } else {
a3d410 567         return 'fa-file datei';
10d3d3 568       }
7342b1 569     } else {
10d3d3 570       if(self.fr.isDirectory) {
a3d410 571         return 'fa-folder ordner';
10d3d3 572       } else {
a3d410 573         return 'fa-file-o datei';
10d3d3 574       }
7342b1 575     }
2121cc 576   };
U 577   
578   this.fileName = function() {
579     var namen = self.fr.absolutePath.split('/');
580     if(namen.length > 0) {
581       return namen[namen.length - 1];
582     } else {
583       return self.fr.absolutePath;
584     }
585   };
7342b1 586 }
5dfab6 587
U 588 function BcrFiles(fl) {
589   this.files = fl;
590 }
591
592 function BcrFile(rp, n) {
593   this.relPath = rp;
594   this.fName = n;
7aa566 595 }
U 596