Dateiverwaltung für die WebBox
ulrich
2021-01-12 8ba358fc936b9d3721aa1fea64a4c00eaaa347a4
commit | author | age
05e9c4 1 function AppVorlage() {
U 2   var self = this;
41ab37 3   this.appMenu;
U 4   this.vorlagen;
5   this.api;
6   this.userid;
7   this.pfad = '';
8   this.loc;
9   this.modus = 'kacheln';
10   this.PERS_DIR = "Persoenlich";
11   this.PUB_DIR = "Oeffentlich";
12   this.DAV_DIR = "Austausch";
13   this.BASE_DIR = "$basis";
14   this.DATA_DIR = "$daten";
15   this.WWW_DIR = "www";
16   this.cache = {}; // mustache template cache
05e9c4 17
94b871 18   this.datei_neuer_text = function () {
58bcbd 19     self.meldung_mit_timeout("Neuer Text", 1500);
05e9c4 20   };
U 21
22   /* Funktionen aus App-Vorlage */
94b871 23
U 24   this.init = function () {
41ab37 25     //self.vorlagen = new Vorlagen();
05e9c4 26     self.appMenu = new AppMenu();
U 27     self.appMenu.init(
94b871 28             "data/menu/",
U 29             "hauptmenue.json",
30             "data/tpl/app-menu.tpl",
31             ".west",
32             "8em");
33     document.querySelector('.hamburger').addEventListener('click', function (e) {
05e9c4 34       self.menue_umschalten();
U 35     });
58bcbd 36     self.fm_get_login();
41ab37 37     
U 38     var parsedUrl = new URL(window.location.href);
39     var wunschPfad = parsedUrl.searchParams.get("pfad");
40
41     if(wunschPfad !== null && wunschPfad.length > 0) {
42       self.pfad = wunschPfad;
43       self.fm_get_list(wunschPfad);
44     } else {
45       self.fm_get_list('');
46     }
47     //fm_init_uploader();
58bcbd 48     self.loc = window.location.protocol + '//' + window.location.host;
41ab37 49     
U 50     //self.fm_get_list('');
51     //self.loc = window.location.protocol + '//' + window.location.host;
05e9c4 52   };
U 53
58bcbd 54   this.login_zeigen = function() {
U 55     self.meldung_mit_timeout("Benutzer: " + self.userid, 1500);
56   };
57   
94b871 58   this.menue_umschalten = function () {
05e9c4 59     var ham = document.querySelector(".hamburger");
U 60     ham.classList.toggle("is-active"); // hamburger-icon umschalten
61     self.appMenu.toggle(); // menue oeffnen/schliessen
62   };
63
94b871 64   this.info_dialog_zeigen = function () {
05e9c4 65     self.dialog_laden_und_zeigen('data/tpl/dlg-info.tpl', '');
U 66     self.menue_umschalten();
67   };
68
94b871 69   this.seitenleiste_umschalten = function () {
05e9c4 70     var ostDiv = document.querySelector('.ost');
94b871 71     if (ostDiv.classList.contains('ost-open')) {
05e9c4 72       ostDiv.classList.remove('ost-open');
94b871 73       ostDiv.style.flexBasis = '0em';
05e9c4 74     } else {
94b871 75       ostDiv.classList.add('ost-open');
U 76       ostDiv.style.flexBasis = '6em';
05e9c4 77     }
U 78     self.menue_umschalten();
79   };
80
94b871 81   this.fusszeile_umschalten = function () {
05e9c4 82     var suedDiv = document.querySelector('.sued');
94b871 83     if (suedDiv.classList.contains('sued-open')) {
05e9c4 84       suedDiv.classList.remove('sued-open');
94b871 85       suedDiv.style.height = '0';
05e9c4 86     } else {
U 87       suedDiv.classList.add('sued-open');
94b871 88       suedDiv.style.height = '1.5em';
05e9c4 89     }
U 90     self.menue_umschalten();
91   };
92
94b871 93   this.meldung_mit_timeout = function (meldung, timeout) {
05e9c4 94     var s = document.querySelector('.sued');
U 95     s.textContent = meldung;
94b871 96     setTimeout(function () {
05e9c4 97       s.textContent = 'Bereit.';
94b871 98       setTimeout(function () {
05e9c4 99         var suedDiv = document.querySelector('.sued');
94b871 100         if (suedDiv.classList.contains('sued-open')) {
U 101           suedDiv.classList.remove('sued-open');
102           suedDiv.style.height = '0';
05e9c4 103         }
U 104       }, 500);
105     }, timeout);
106   };
107
108   /* Dialog-Funktionen */
109
110   /*
94b871 111    Einen Dialog aus Vorlagen erzeugen
U 112    
113    vurl - URL zur Dialogvorlage
114    msgTpl - URL mit einer Vorlage eines Mitteilungstextes (optional)
115    */
116   this.dialog_laden_und_zeigen = function (vurl, msgTpl) {
117     if (msgTpl !== '') {
05e9c4 118       fetch(msgTpl)
94b871 119               .then(data => {
U 120                 // Handle data
121                 self.dialog_zeigen(vurl, data);
122               }).catch(error => {
123         // Handle error
124       });
05e9c4 125     } else {
U 126       self.dialog_zeigen(vurl, '');
127     }
128   };
129
94b871 130   this.dialog_zeigen = function (vurl, inhalt) {
05e9c4 131     var dlg = document.querySelector(".dialog");
U 132     self.vorlagen.html_erzeugen(
94b871 133             vurl,
U 134             inhalt,
135             function (html) {
136               //dlg.html(html);
137               dlg.style.height = '5em';
138               dlg.innerHTML = html;
139               document.querySelector('.close-btn').addEventListener('click', self.dialog_schliessen);
140               //dlg.slideDown(300);
141             });
05e9c4 142   };
U 143
58bcbd 144   this.dialog_schliessen = function () {
05e9c4 145     document.querySelector('.close-btn').removeEventListener('click', self.dialog_schliessen);
U 146     //$('.dialog').slideUp(300);
147     var dlg = document.querySelector('.dialog');
148     //dlg.style.display = "none";
149     dlg.style.height = '0';
150     dlg.innerHTML = '';
151   };
58bcbd 152   
6648a8 153   /*
41ab37 154   this.html_zeigen = function(html) {
U 155         // was mit dem html getan werden soll..
156         var elem = document.querySelector('#dateien');
157         elem.innerHTML = html;
6648a8 158         $('.figure').click(fm_dateiwahl);
41ab37 159   };
6648a8 160   */
U 161  
162   this.fm_dateiwahl = function(ev) {
163     var elem = ev.target;
164     //console.log(elem.nodeName);
165     //var elem = this;
166     //console.log('dateiwahl nach click, event shift: ' + ev.shiftKey + ", event ctrl: " + ev.ctrlKey);
167     if(self.modus == 'kacheln') {
168       // Kacheln
169       if(elem.classList.contains("icon-folder")) {
170         //console.log('contains icon-folder');
171         if(/*ev.shiftKey || */ ev.ctrlKey) {
172           //$(elem).find('.dateiname').addClass('datei-gewaehlt');
173           elem.querySelector('.dateiname').classList.add('datei-gewaehlt');
174         } else {
175           var ordner = elem.parentElement.querySelector('.dateiname').textContent.trim();
176           //console.log('ordner ' + ordner);
177           if(self.pfad.length > 0) {
178             self.pfad = self.pfad + '/' + ordner;
179           } else {
180             self.pfad = ordner;
181           }
182           self.fm_get_list(self.pfad);
183         }
184       } else if(elem.classList.contains('datei')) {
185         //console.log('contains datei');
186         if(/*ev.shiftKey || */ ev.ctrlKey) {
187           // mehrere Dateien sollen gewaehlt werden
188         } else {
189           var gew = document.querySelector('.datei-gewaehlt');
190           if(gew != undefined) {
191             gew.classList.remove('datei-gewaehlt');
192           }        
193         }
194         //$(elem).find('.dateiname').addClass('datei-gewaehlt');
195         var par = elem.parentElement;
196         //console.log(par.nodeName);
197         par.querySelector('.dateiname').classList.add('datei-gewaehlt');
198       } else {
199         //console.log('kein folder oder file...');
200       }
201     } else {
202       // Liste NOCH NEU MACHEN OHNE jQuery, wenn Liste implementiert ist
203       if(elem.querySelector('.datei-elem').children(0).hasClass('icon-doc-text-inv')) {
204         // Datei
205         if(/*ev.shiftKey || */ ev.ctrlKey) {
206           // mehrere Dateien sollen gewaehlt werden
207         } else {
208           document.querySelector('.table-info').classList.remove('table-info');
209           document.querySelector('.datei-gewaehlt').classList.remove('datei-gewaehlt');
210         }
211         elem.classList.add('table-info');
212         elem.querySelector('.dateiname').classList.add('datei-gewaehlt');
213       } else {
214         // Ordner
215         if(/*ev.shiftKey || */ ev.ctrlKey) {
216           elem.children[0].classList.add('datei-gewaehlt');
217         } else {
218           var ordner = elem.querySelector('.dateiname').textContent;
219           if(self.pfad.length > 0) {
220             self.pfad = self.pfad + '/' + ordner;
221           } else {
222             self.pfad = ordner;
223           }
224           self.fm_get_list(pfad);
225         }
226       }   
227     }
228   };
229  
41ab37 230   
58bcbd 231   this.fm_render_list = function (fl) {
U 232     if (self.modus == 'kacheln') {
233       // Kachelansicht
234       
235       // neu bauen
41ab37 236       
U 237       //html_erzeugen = function(vurl, inhalt, cb)       
238       
6648a8 239       self.html_erzeugen("data/tpl/kacheln.tpl", fl, function(html) {
U 240         var elem = document.querySelector('#dateien');
241         elem.innerHTML = html;
242         //$('.figure').click(fm_dateiwahl);
243         self.addEvtListener('.figure', 'click', self.fm_dateiwahl);
244         
245         
246       });
58bcbd 247       
U 248       /*
249       var template = $('#tpl-kacheln').html();
250       Mustache.parse(template);   // optional, speeds up future uses
251       $('.datei-zeile').attr('onclick', '').unbind('click');
252       $('#dateien').empty();
253       $('#dateien').html(Mustache.render(template, fl));
254       $('.figure').click(fm_dateiwahl);
255       */
256     } else {
257       // Listenansicht
258       
259       // neu bauen
260       
261       /*
262       var template = $('#tpl-liste').html();
263       Mustache.parse(template);   // optional, speeds up future uses
264       $('.figure').attr('onclick', '').unbind('click');
265       $('#dateien').empty();
266       $('#dateien').html(Mustache.render(template, fl));
267       $('.datei-zeile').click(fm_dateiwahl);
268       */
269     }
270   };
271   
272   this.fm_get_path = function (uid) {
273     //console.log('pfad: ' + pfad);
274     var restdir;
275     if (self.pfad.indexOf(self.PUB_DIR) > -1) {
276       restdir = self.pfad.substr(self.PUB_DIR.length);
277     } else if (self.pfad.indexOf(self.PERS_DIR) > -1) {
278       restdir = self.pfad.substr(self.PERS_DIR.length);
279     } else if (self.pfad.indexOf(self.BASE_DIR) > -1) {
280       restdir = self.pfad.substr(self.BASE_DIR.length);
281     } else if (self.pfad.indexOf(self.DATA_DIR) > -1) {
282       restdir = self.pfad.substr(self.DATA_DIR.length);
283     } else if (self.pfad.indexOf(self.DAV_DIR) > -1) {
284       restdir = self.pfad.substr(self.DAV_DIR.length);
285     }
286     if (restdir !== undefined && restdir.startsWith('/')) {
287       restdir = restdir.substr(1);
288       if (restdir.indexOf(self.WWW_DIR) > -1) {
289         restdir = restdir.replace(self.WWW_DIR, 'data');
290       }
291     }
41ab37 292     var pdir = self.fm_get_base(uid);
58bcbd 293     // console.log('fm_get_path path: ' + pdir + "/" + restdir);
U 294     if (restdir.length > 1) {
295       return pdir + "/" + restdir;
296     } else {
297       return pdir;
298     }
299   };
300
301   this.fm_get_base = function (uid) {
302     //console.log('pfad: ' + pfad);
303     var pdir;
304     if (self.pfad.indexOf(self.PUB_DIR) > -1) {
305       pdir = '/data/' + uid;
306     } else if (self.pfad.indexOf(self.PERS_DIR) > -1) {
307       pdir = '/home/' + uid;
308     } else if (self.pfad.indexOf(self.BASE_DIR) > -1) {
309       pdir = '';
310     } else if (self.pfad.indexOf(self.DATA_DIR) > -1) {
311       pdir = '';
312     }
313     //console.log('fm_get_base base: ' + pdir + uid);
314     return pdir;
315   };
316
05e9c4 317
94b871 318   /* API functions */
05e9c4 319
94b871 320   // http://localhost:8079/file-cms/svc?c=de.uhilger.filecms.api.FileMgr&f=JSONNICE&m=list&p=
U 321   this.fm_get_list = function (relPfad) {
58bcbd 322     //$('#ansicht').attr('onclick', '').unbind('click');
94b871 323     var m = '?c=de.uhilger.filecms.api.FileMgr&m=list&p=' + relPfad;
U 324     var u = '../svc' + m;
58bcbd 325     self.fm_get(u, "json", function (respText) {
U 326       var resp = JSON.parse(respText);
94b871 327       if (resp.List[0].FileRef !== undefined) {
U 328         var files = new Array();
329         if (resp.List[0].FileRef instanceof Array) {
330           for (var i = 0; i < resp.List[0].FileRef.length; i++) {
331             files.push(new FileRef(resp.List[0].FileRef[i]));
05e9c4 332           }
U 333         } else {
94b871 334           files.push(new FileRef(resp.List[0].FileRef));
05e9c4 335         }
94b871 336         var fl = new FileList(files);
58bcbd 337         self.fm_render_list(fl);
41ab37 338         //self.fm_render_list(resp);
94b871 339       } else {
58bcbd 340         // #dateien leeren
8ba358 341         var elem = document.querySelector("#dateien");
U 342         elem.innerHTML = '';
94b871 343       }
8ba358 344       
U 345       // Breadcrumb
346
347       // Breadcrumb-Ansicht
348       //$('.breadcrumb-item').attr('onclick','').unbind('click');
349       //$('#bcnav').empty();
350       var dirList = new Array();
351       var rp = '';
352       //console.log("'" + relPfad + "'");
353       var dirs = relPfad.split('/');
354       //console.log(dirs.length);
355       dirList.push(new BcrFile(rp, 'Home'));
356       if(relPfad.length > 0) {
357         for(var i = 0; i < dirs.length - 1; i++) {
358           if(rp.length > 0 ) {
359             dirList.push(new BcrFile(rp + '/' + dirs[i], dirs[i]));
360             rp = rp + '/' + dirs[i];
361           } else {
362             dirList.push(new BcrFile(dirs[i], dirs[i]));
363             rp = dirs[i];
364           }
365         }
366         var bl = new BcrFiles(dirList);
367
368         if(dirList.length > 0) {
369           //template = $('#tpl-bcr').html();
370           //Mustache.parse(template);   // optional, speeds up future uses
371           //$('#bcnav').html(Mustache.render(template, bl));
372           
373           self.html_erzeugen("data/tpl/bcr.tpl", bl, function(html) {
374                   var elem = document.querySelector('.breadcrumb');
375                   elem.innerHTML = html;
376                   //self.addEvtListener('.figure', 'click', self.fm_dateiwahl);
377                 });          
378           
379         }
380
381         if(dirs.length > 0) {
382           dirList.push(new BcrFile(rp + '/' + dirs[dirs.length-1], dirs[dirs.length-1]));
383           //template = $('#tpl-bcr2').html();
384           //Mustache.parse(template);   // optional, speeds up future uses
385           //$('#bcnav').append(Mustache.render(template, dirList[dirList.length-1]));        
386           self.html_erzeugen("data/tpl/bcr2.tpl", dirList[dirList.length-1], function(html) {
387                   var elem = document.querySelector('.breadcrumb');
388                   elem.innerHTML += html;
389                   //self.addEvtListener('.figure', 'click', self.fm_dateiwahl);
390                 });          
391         } else {
392           //template = $('#tpl-bcr2').html();
393           //Mustache.parse(template);   // optional, speeds up future uses
394           //$('#bcnav').append(Mustache.render(template, dirList[0]));        
395           self.html_erzeugen("data/tpl/bcr2.tpl", dirList[0], function(html) {
396                   var elem = document.querySelector('.breadcrumb');
397                   elem.innerHTML += html;
398                   //self.addEvtListener('.figure', 'click', self.fm_dateiwahl);
399                 });          
400         }
401
402         //$('#bcnav').append($('#tpl-bcr3').html());
403         self.html_erzeugen("data/tpl/bcr3.tpl", bl, function(html) {
404                 var elem = document.querySelector('.breadcrumb');
405                 elem.innerHTML += html;
406                 //self.addEvtListener('.figure', 'click', self.fm_dateiwahl);
407               });          
408       } else {
409         //self.pfad = '';
410         //template = $('#tpl-bcr2').html();
411         //Mustache.parse(template);   // optional, speeds up future uses
412         //$('#bcnav').append(Mustache.render(template, dirList[0]));   
413         //$('#bcnav').append($('#tpl-bcr3').html());
414         self.html_erzeugen("data/tpl/bcr2.tpl", dirList[0], function(html) {
415                 var elem = document.querySelector('.breadcrumb');
416                 elem.innerHTML += html;
417                 //self.addEvtListener('.figure', 'click', self.fm_dateiwahl);
418               });          
419         self.html_erzeugen("data/tpl/bcr3.tpl", dirList[0], function(html) {
420                 var elem = document.querySelector('.breadcrumb');
421                 elem.innerHTML += html;
422                 //self.addEvtListener('.figure', 'click', self.fm_dateiwahl);
423               });          
424       }
425       
426       /*
427       $('.breadcrumb-item').click(fm_bc_click);
428       $('#ansicht').click(fm_ansicht_umschalten);
429       fm_set_modus();
430
431       if(fm_slideshow) {
432         $("[data-fancybox]").fancybox({
433           loop: true,
434           idleTime: 2
435         });
436       }
437       */
438       
439       // Breadcrumb
440       
94b871 441     });
U 442   };
05e9c4 443
94b871 444   /* -------- An- und Abmelden ------------- */
05e9c4 445
94b871 446   this.fm_get_login = function() {
U 447     var m = '?c=de.uhilger.filecms.pub.SessionManager&m=getSessionUser';
448     var u = '../pub' + m;
449     self.fm_get(u, "text", function (resp) {
450       self.userid = resp;
58bcbd 451       self.login_zeigen();
U 452       //document.querySelector("#userMenu").textContent = resp;
94b871 453     });
U 454   };
05e9c4 455
94b871 456   this.fm_logout = function() {
U 457     var m = '?c=de.uhilger.filecms.pub.SessionManager&m=expireSession';
458     var u = '../pub' + m;
459     self.fm_get(u, "text", function (resp) {
460       //$('#userMenu').text('nicht angemeldet');
461       window.location.href = '../logout.html';
462     });
463   };
41ab37 464   
6648a8 465   /* ----- Hilfsfunktionen ----- */
U 466
467   this.serialisieren = function(obj) {
468     return '{"' + obj.constructor.name + '":' + JSON.stringify(obj) + '}';
469   };
470   
471   this.addEvtListener = function(selector, eventName, func) {
472     
473     document.querySelectorAll(selector).forEach(elem => { elem.addEventListener(eventName, func); });
474     
475     /*
476     var elems = document.querySelectorAll(selector);
477     var index;
478     for (index = 0; index < elems.length; index++) {
479       elems[index].addEventListener(eventName, func);
480     }
481     */
482   };
483   
484   this.removeAllListeners = function(id) {
485     var el = document.getElementById(id);
486     elClone = el.cloneNode(true);
487     el.parentNode.replaceChild(elClone, el);
488   }; // https://stackoverflow.com/questions/19469881/remove-all-event-listeners-of-specific-type
489
41ab37 490   /* ---- Vorlagen ---- */
U 491
492   this.html_erzeugen = function(vurl, inhalt, cb) {
493     var vorlage = self.cache[vurl];
494     if(vorlage === undefined) {
495       self.vorlage_laden_und_fuellen(vurl, inhalt, cb);
496     } else {
497       self.vorlage_fuellen(vurl, inhalt, cb);
498     }
499   };
500
501   this.vorlage_fuellen = function(vurl, inhalt, cb) {
502     cb(Mustache.render(self.cache[vurl], inhalt));
503   };
504
505   this.vorlage_laden_und_fuellen = function(vurl, inhalt, cb) {
506     self.fm_get(vurl, "text", function(antwort) {
507       self.cache[vurl] = antwort;
508       self.vorlage_fuellen(vurl, inhalt, cb);
509     });
510   };
511
512
94b871 513
U 514   /* -------- ajax helper functions ----------- */
515
58bcbd 516   this.fm_get = function (u, dtype, scallback) {    
U 517     var xmlhttp = new XMLHttpRequest();
518     var url = u;
519     xmlhttp.onreadystatechange = function() {
520       if (this.readyState == 4 && this.status == 200) {
521         scallback(this.responseText);
94b871 522       }
58bcbd 523     };
U 524     xmlhttp.open("GET", url, true);
525     xmlhttp.send();
94b871 526   };
U 527
05e9c4 528 }