Dateiverwaltung für die WebBox
ulrich
2017-02-25 fc1897413a5142e53ddd71944e6acd08dd183869
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   });
91   $('.modal-title').text("Löschen");
92   $('.modal-body').text("Wirklich löschen?");
93   
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') {
U 159     if($(elem).children(0).hasClass('fa-folder')) {
160       var ordner = $(elem).text().trim();
161       if(pfad.length > 0) {
162         pfad = pfad + '/' + ordner;
163       } else {
164         pfad = ordner;
165       }
166       fm_get_list(pfad);
167     } else if($(elem).children(0).hasClass('fa-file')) {
17919c 168       if(/*ev.shiftKey || */ ev.ctrlKey) {
U 169         // mehrere Dateien sollen gewaehlt werden
170       } else {
171         $('.datei-gewaehlt').removeClass('datei-gewaehlt');        
172       }
10d3d3 173       $(elem).children(0).addClass('datei-gewaehlt');
5dfab6 174     } else {
10d3d3 175       //console.log('kein folder oder file...');
5dfab6 176     }
U 177   } else {
10d3d3 178     if($(elem).find('.datei-elem').children(0).hasClass('fa-file-o')) {
17919c 179       if(/*ev.shiftKey || */ ev.ctrlKey) {
U 180         // mehrere Dateien sollen gewaehlt werden
181       } else {
182         $('.table-info').removeClass('table-info');
183       }
10d3d3 184       $(elem).addClass('table-info');
U 185       $('.datei-gewaehlt').removeClass('datei-gewaehlt');
186       $(elem).find('.dateiname').addClass('datei-gewaehlt');
187     } else {
188       var ordner = $(elem).find('.dateiname').text();
189       if(pfad.length > 0) {
190         pfad = pfad + '/' + ordner;
191       } else {
192         pfad = ordner;
193       }
194       fm_get_list(pfad);
195     }   
5dfab6 196   }
c509a0 197 }
U 198
a94216 199 function fm_bc_click() {
U 200   var elem = this;
201   var bcPfad = $(elem).attr('rpath');
202   if(bcPfad !== undefined) {
c509a0 203     pfad = bcPfad;
a94216 204     fm_get_list(bcPfad);
U 205   } else {
206     pfad = '';
207     fm_get_list('');
208   }
209 }
210
3ad4db 211 function fm_text_edit(content) {
f5505f 212   $('#bcnav').hide();
U 213   $('#dateien').hide();
3ad4db 214   $('.codeeditor-space').show();
U 215   $('.code-editor-container').show();
216   fm_code_edit(content);  
217 }
218
b7475d 219 /* ----- API Calls ------------- */
U 220
e5ff42 221 function fm_get_login() {
3ad4db 222   var m = '?c=de.uhilger.filecms.pub.SessionManager&m=getSessionUser';
U 223   var u = '../pub' + m;
224   fm_get(u, "text", function(resp) {
225     $('#userMenu').text(resp);
7342b1 226   });  
c509a0 227 }
U 228
229 function fm_get_new_folder() {
230   $('#modal_ok').click(function() {
231     // hier speichern
232     var m = '?c=de.uhilger.filecms.api.FileMgr&m=newFolder&p=' + pfad + '&p=' + $('#dateiname').val();
233     var u = '../svc' + m;
234     fm_get(u, "json", function(resp) {
adf812 235       fm_get_list(pfad);
c509a0 236     });
U 237   });
238   $('.modal-title').text('Neuer Ordner');
239   $('#dialogfrage').text("Name?");
240   $('#dateiname').val('');
241   $('#dateiname').attr('placeholder', 'Ordnername');
242   $('#saveModal').modal({
243     keyboard: false,
244     show: true
245   });
7342b1 246 }
U 247
2121cc 248 function fm_get_file_content() {
fc1897 249   var gewaehlte = $('.datei-gewaehlt');
U 250   var fname = $(gewaehlte[1]).text();
5ebb8e 251   openFileName = fname;
3ad4db 252   var m = '?c=de.uhilger.filecms.api.FileMgr&m=getCode&p=' + pfad + '&p=' + fname;
2121cc 253   var u = '../svc' + m;
3ad4db 254   fm_get(u, "text", function(resp) {
U 255     fm_text_edit(resp);
2121cc 256   });
3ad4db 257   
2121cc 258 }
U 259
fc1897 260 function fm_del_files() {
U 261   var gewaehlte = $('.datei-gewaehlt');
262   //console.log('anzahl: ' + gewaehlte.length);
263   var fnames = new Array();
264   var i = 1;
265   while(i < gewaehlte.length) {
266     var str = { "java.lang.String": $(gewaehlte[i]).text()};
267     fnames.push(str);
268     //console.log('loeschen ' + pfad + ' ' + $(gewaehlte[i]).text());
269     i += 2;
270   }
271   
272   var liste = '{"List":' + JSON.stringify(fnames) + '}';
273   // 'liste' enthaelt:
274   // {"List":[{"java.lang.String":"test3.txt"},{"java.lang.String":"Test1.txt"},{"java.lang.String":"Test2.txt"}]}
275   // und wird auf dem Server zu einer List[ArrayList<String>]  
276   
277   var m = '?c=de.uhilger.filecms.api.FileMgr&m=deleteFiles&p=' + pfad + '&p=' + encodeURIComponent(liste);
278   var u = '../svc' + m;
279   fm_get(u, "text", function(resp) {
280     // console.log('deleteFiles gab folgendes zurueck: ' + resp);
281     fm_get_list(pfad);
282   });
283   
284 }
285
10d3d3 286 function fm_render_list(fl) {
U 287   if(modus == 'kacheln') {
288     // Kachelansicht
289     var template = $('#tpl-kacheln').html();
290     Mustache.parse(template);   // optional, speeds up future uses
291     $('.datei-zeile').attr('onclick','').unbind('click');
292     $('#dateien').empty();
293     $('#dateien').html(Mustache.render(template, fl));
294     $('.figure').click(fm_dateiwahl);
295   } else {
296     // Listenansicht
297     var template = $('#tpl-liste').html();
298     Mustache.parse(template);   // optional, speeds up future uses
299     $('.figure').attr('onclick','').unbind('click');
300     $('#dateien').empty();
301     $('#dateien').html(Mustache.render(template, fl));
302     $('.datei-zeile').click(fm_dateiwahl);
303   }
304 }
305
7342b1 306 // http://localhost:8079/file-cms/svc?c=de.uhilger.filecms.api.FileMgr&f=JSONNICE&m=list&p=
a94216 307 function fm_get_list(relPfad) {
10d3d3 308   $('#ansicht').attr('onclick','').unbind('click');
a94216 309   var m = '?c=de.uhilger.filecms.api.FileMgr&m=list&p=' + relPfad;
7342b1 310   var u = '../svc' + m;
U 311   fm_get(u, "json", function(resp) {
10d3d3 312     
2121cc 313     if(resp.List[0].FileRef !== undefined) {
U 314       var files = new Array();
c509a0 315       if(resp.List[0].FileRef instanceof Array) {
U 316         for(var i = 0; i < resp.List[0].FileRef.length; i++) {
317           files.push(new FileRef(resp.List[0].FileRef[i]));
318         }
319       } else {
320         files.push(new FileRef(resp.List[0].FileRef));
2121cc 321       }
U 322       var fl = new FileList(files);
10d3d3 323       fm_render_list(fl);
2121cc 324     } else {
U 325       $('#dateien').empty();
7342b1 326     }
5dfab6 327     
10d3d3 328     // Breadcrumb-Ansicht
2315a0 329     var template;
a94216 330     $('.breadcrumb-item').attr('onclick','').unbind('click');
2315a0 331     $('#bcnav').empty();
5dfab6 332     var dirList = new Array();
U 333     var rp = '';
a94216 334     //console.log("'" + relPfad + "'");
U 335     var dirs = relPfad.split('/');
336     //console.log(dirs.length);
2121cc 337     dirList.push(new BcrFile(rp, 'Home'));
a94216 338     if(relPfad.length > 0) {
2315a0 339       for(var i = 0; i < dirs.length - 1; i++) {
5dfab6 340         if(rp.length > 0 ) {
U 341           dirList.push(new BcrFile(rp + '/' + dirs[i], dirs[i]));
2315a0 342           rp = rp + '/' + dirs[i];
5dfab6 343         } else {
U 344           dirList.push(new BcrFile(dirs[i], dirs[i]));
2315a0 345           rp = dirs[i];
5dfab6 346         }
U 347       }
348       var bl = new BcrFiles(dirList);
2315a0 349
U 350       if(dirList.length > 0) {
351         template = $('#tpl-bcr').html();
352         Mustache.parse(template);   // optional, speeds up future uses
353         $('#bcnav').html(Mustache.render(template, bl));
354       }
355       
356       if(dirs.length > 0) {
357         dirList.push(new BcrFile(rp + '/' + dirs[dirs.length-1], dirs[dirs.length-1]));
358         template = $('#tpl-bcr2').html();
359         Mustache.parse(template);   // optional, speeds up future uses
360         $('#bcnav').append(Mustache.render(template, dirList[dirList.length-1]));        
361       } else {
362         template = $('#tpl-bcr2').html();
363         Mustache.parse(template);   // optional, speeds up future uses
364         $('#bcnav').append(Mustache.render(template, dirList[0]));        
365       }
366       
5dfab6 367       $('#bcnav').append($('#tpl-bcr3').html());
2315a0 368     } else {
a94216 369       pfad = '';
2315a0 370       template = $('#tpl-bcr2').html();
U 371       Mustache.parse(template);   // optional, speeds up future uses
10d3d3 372       $('#bcnav').append(Mustache.render(template, dirList[0]));   
U 373       $('#bcnav').append($('#tpl-bcr3').html());
5dfab6 374     }
a94216 375     $('.breadcrumb-item').click(fm_bc_click);
10d3d3 376     $('#ansicht').click(fm_ansicht_umschalten);
U 377     fm_set_modus();
e5ff42 378   });  
U 379 }
380
381 function fm_menu_datei_speichern() {
5ebb8e 382   //var fname = $('.datei-gewaehlt').text();
U 383   var fname = openFileName;
384   if(fname !== undefined && fname !== '') {
385     fm_save_file(fname);
386   } else {
387     fm_menu_datei_speichern_unter();
388   }
389 }
390
391 function fm_save_file(saveFileName) {
392   var m = '?c=de.uhilger.filecms.api.FileMgr&m=saveTextFile';
393   var u = '../svc' + m;
394   fm_post(u, {p1: pfad, p2: saveFileName, p3: cm.getValue()}, function(resp) {
395     openFileName = saveFileName;
396   });
397 }
398
399 function fm_menu_datei_speichern_unter() {
e5ff42 400   
915927 401   $('#modal_ok').click(function() {
U 402     // hier speichern
5ebb8e 403     fm_save_file($('#dateiname').val());
U 404     /*
915927 405     var m = '?c=de.uhilger.filecms.api.FileMgr&m=saveTextFile';
U 406     var u = '../svc' + m;
2121cc 407     fm_post(u, {p1: pfad, p2: $('#dateiname').val(), p3: cm.getValue()}, function(resp) {
915927 408
U 409     });
5ebb8e 410     */
915927 411   });
c509a0 412   $('.modal-title').text('Datei speichern');
U 413   $('#dialogfrage').text("Dateiname?");
3ad4db 414   
U 415   var fname = $('.datei-gewaehlt').text();
416   if(fname !== undefined) {
417     $('#dateiname').val(fname);
418   } else {
419     $('#dateiname').val('');
420   }
c509a0 421   $('#dateiname').attr('placeholder', 'Dateiname');
915927 422   $('#saveModal').modal({
U 423     keyboard: false,
424     show: true
425   });
a4d3b5 426 }
U 427
b7475d 428 function fm_logout() {
U 429   var m = '?c=de.uhilger.filecms.pub.SessionManager&m=expireSession';
430   var u = '../pub' + m;
431   
432   fm_get(u, "text", function(resp) {
433     $('#userMenu').text('nicht angemeldet');
434     window.location.href = '../logout.html';
435   });
436 }
437
438
a4d3b5 439 /* ---- codemirror editor handling -------- */
U 440
441 function fm_code_edit(content) {
442   cm = CodeMirror.fromTextArea(document.getElementById("editspace"), {
443     lineNumbers: true,
444     mode: "xml",
445     viewportMargin : Infinity,
446     extraKeys: {
915927 447         "F9": function(cm) {
U 448         cm.setOption("fullScreen", !cm.getOption("fullScreen"));
449       },
450         "Esc": function(cm) {
451         if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
452       }
a4d3b5 453     }
U 454   });
455   cm.setValue(content);
915927 456 }
a4d3b5 457
U 458
459
460 /* -------- helper functions ----------- */
461
b7475d 462 function fm_get(u, dtype, scallback) {
a4d3b5 463   $.ajax({
U 464     url: u,
465     type: "GET",
b7475d 466     dataType: dtype,
a4d3b5 467     success: scallback,
U 468     error: function (xhr, status, errorThrown) {
469       alert("Error: " + errorThrown + " Status: " + status + " URL: " + u);
470     },
471     complete: function (xhr, status) {
472       //console.log( "The request is complete!" );
473     }
474
475   });
915927 476 }
a4d3b5 477
U 478 function fm_post(u, d, scallback) {
479   $.ajax({
480     url: u,
481     data: d,
482     type: "POST",
483     dataType: "json",
484     success: scallback,
485     error: function (xhr, status, errorThrown) {
486       $('#fehler').html("Error: " + errorThrown + " Status: " + status);
487     },
488     complete: function (xhr, status) {
489       //alert( "The request is complete!" );
490     }
491   });
915927 492 }
a4d3b5 493
e5ff42 494 function fm_serialise(obj) {
U 495   return '{"' + obj.constructor.name + '":' + JSON.stringify(obj) + '}';
915927 496 }
e5ff42 497
7342b1 498 /* ----- Objekte ----- */
U 499
500 function FileList(fl) {
501   this.files = fl;
502 }
503
504 function FileRef(obj) {
505   var self = this;
506   this.fr = obj;
507   
508   this.typeClass = function() {
10d3d3 509     if(modus == 'kacheln') {
U 510       if(self.fr.isDirectory) {
511         return 'fa-folder';
512       } else {
513         return 'fa-file';
514       }
7342b1 515     } else {
10d3d3 516       if(self.fr.isDirectory) {
U 517         return 'fa-folder';
518       } else {
519         return 'fa-file-o';
520       }
7342b1 521     }
2121cc 522   };
U 523   
524   this.fileName = function() {
525     var namen = self.fr.absolutePath.split('/');
526     if(namen.length > 0) {
527       return namen[namen.length - 1];
528     } else {
529       return self.fr.absolutePath;
530     }
531   };
7342b1 532 }
5dfab6 533
U 534 function BcrFiles(fl) {
535   this.files = fl;
536 }
537
538 function BcrFile(rp, n) {
539   this.relPath = rp;
540   this.fName = n;
7aa566 541 }
U 542