Dateiverwaltung für die WebBox
ulrich
2021-01-13 4f01b813c127607a7025faff4ac693e049ea4101
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   };
6648a8 152  
U 153   this.fm_dateiwahl = function(ev) {
154     var elem = ev.target;
155     if(self.modus == 'kacheln') {
156       // Kacheln
157       if(elem.classList.contains("icon-folder")) {
158         if(/*ev.shiftKey || */ ev.ctrlKey) {
4f01b8 159           var par = elem.parentElement;
U 160           par.querySelector('.dateiname').classList.add('datei-gewaehlt');
6648a8 161         } else {
U 162           var ordner = elem.parentElement.querySelector('.dateiname').textContent.trim();
163           if(self.pfad.length > 0) {
164             self.pfad = self.pfad + '/' + ordner;
165           } else {
166             self.pfad = ordner;
167           }
168           self.fm_get_list(self.pfad);
169         }
170       } else if(elem.classList.contains('datei')) {
171         if(/*ev.shiftKey || */ ev.ctrlKey) {
172           // mehrere Dateien sollen gewaehlt werden
173         } else {
174           var gew = document.querySelector('.datei-gewaehlt');
175           if(gew != undefined) {
176             gew.classList.remove('datei-gewaehlt');
177           }        
178         }
179         var par = elem.parentElement;
180         par.querySelector('.dateiname').classList.add('datei-gewaehlt');
181       } else {
182         //console.log('kein folder oder file...');
183       }
184     } else {
4f01b8 185       // Liste
U 186       var pElem = elem.closest('.datei-zeile');
187       var dElem = pElem.querySelector('.datei-elem');
188       if(dElem.getElementsByTagName("i")[0].classList.contains('icon-doc-text-inv')) {
6648a8 189         // Datei
U 190         if(/*ev.shiftKey || */ ev.ctrlKey) {
191           // mehrere Dateien sollen gewaehlt werden
192         } else {
4f01b8 193           var ti = document.querySelector('.table-info');
U 194           if(ti !== null) {
195             ti.classList.remove('table-info');
196           }
197           var dg = document.querySelector('.datei-gewaehlt');
198           if(dg !== null) {
199             dg.classList.remove('datei-gewaehlt');
200           }
6648a8 201         }
4f01b8 202         pElem.classList.add('table-info');
U 203         pElem.querySelector('.dateiname').classList.add('datei-gewaehlt');
6648a8 204       } else {
U 205         // Ordner
206         if(/*ev.shiftKey || */ ev.ctrlKey) {
4f01b8 207           //elem.children[0].classList.add('datei-gewaehlt');
U 208           pElem.querySelector('.dateiname').classList.add('datei-gewaehlt');
6648a8 209         } else {
4f01b8 210           var ordner = pElem.querySelector('.dateiname').textContent;
6648a8 211           if(self.pfad.length > 0) {
U 212             self.pfad = self.pfad + '/' + ordner;
213           } else {
214             self.pfad = ordner;
215           }
4f01b8 216           self.fm_get_list(self.pfad);
6648a8 217         }
U 218       }   
219     }
220   };
221  
41ab37 222   
58bcbd 223   this.fm_render_list = function (fl) {
4f01b8 224     if (self.modus === 'kacheln') {
58bcbd 225       // Kachelansicht
6648a8 226       self.html_erzeugen("data/tpl/kacheln.tpl", fl, function(html) {
U 227         var elem = document.querySelector('#dateien');
228         elem.innerHTML = html;
229         self.addEvtListener('.figure', 'click', self.fm_dateiwahl);
230       });
58bcbd 231     } else {
U 232       // Listenansicht
4f01b8 233       self.html_erzeugen("data/tpl/liste.tpl", fl, function(html) {
U 234         var elem = document.querySelector('#dateien');
235         elem.innerHTML = html;
236         self.addEvtListener('.datei-zeile', 'click', self.fm_dateiwahl);
237       });
58bcbd 238     }
U 239   };
240   
241   this.fm_get_path = function (uid) {
242     var restdir;
243     if (self.pfad.indexOf(self.PUB_DIR) > -1) {
244       restdir = self.pfad.substr(self.PUB_DIR.length);
245     } else if (self.pfad.indexOf(self.PERS_DIR) > -1) {
246       restdir = self.pfad.substr(self.PERS_DIR.length);
247     } else if (self.pfad.indexOf(self.BASE_DIR) > -1) {
248       restdir = self.pfad.substr(self.BASE_DIR.length);
249     } else if (self.pfad.indexOf(self.DATA_DIR) > -1) {
250       restdir = self.pfad.substr(self.DATA_DIR.length);
251     } else if (self.pfad.indexOf(self.DAV_DIR) > -1) {
252       restdir = self.pfad.substr(self.DAV_DIR.length);
253     }
254     if (restdir !== undefined && restdir.startsWith('/')) {
255       restdir = restdir.substr(1);
256       if (restdir.indexOf(self.WWW_DIR) > -1) {
257         restdir = restdir.replace(self.WWW_DIR, 'data');
258       }
259     }
41ab37 260     var pdir = self.fm_get_base(uid);
58bcbd 261     if (restdir.length > 1) {
U 262       return pdir + "/" + restdir;
263     } else {
264       return pdir;
265     }
266   };
267
268   this.fm_get_base = function (uid) {
269     var pdir;
270     if (self.pfad.indexOf(self.PUB_DIR) > -1) {
271       pdir = '/data/' + uid;
272     } else if (self.pfad.indexOf(self.PERS_DIR) > -1) {
273       pdir = '/home/' + uid;
274     } else if (self.pfad.indexOf(self.BASE_DIR) > -1) {
275       pdir = '';
276     } else if (self.pfad.indexOf(self.DATA_DIR) > -1) {
277       pdir = '';
278     }
279     return pdir;
280   };
2864b2 281   
U 282   /**
283    * Aus einem relativen Pfad ein Array aus BcrFile Objekten 
284    * machen
285    * 
286    * @param {String} relPfad  der relative Pfad
287    * @returns {Array}  die BcrFile-Objekte zum Pfad als Array
288    */
289   this.fm_buildBreadcrumb = function(relPfad) {
290     var rp = '';
291     var dirList = new Array();
292     dirList.push(new BcrFile(rp, 'Home'));
293     if(relPfad.length > 1) {
294       var dirs = relPfad.split('/');
295       for(var i = 0; i < dirs.length; i++) {
296         if(rp.length > 0 ) {
297           // weitere Einträge
298           dirList.push(new BcrFile(rp + '/' + dirs[i], dirs[i]));
299           rp = rp + '/' + dirs[i];
300         } else {
301           // erster Eintrag
302           dirList.push(new BcrFile(dirs[i], dirs[i]));
303           rp = dirs[i];
304         }
305       }
306     }
307     return dirList;
308   };
309   
4f01b8 310   /*
U 311    * icon-th-large
312    * icon-th-list
313    * @returns {undefined}
314    */
315   this.fm_ansicht_umschalten = function() {
316     var elem = document.querySelector('#ansicht');
317     var iElem = elem.getElementsByTagName("i")[0];
318     if(iElem.classList.contains('icon-th-list')) {
319       iElem.classList.add('icon-th-large');
320       iElem.classList.remove('icon-th-list');
321       self.modus = 'liste';
322     } else {
323       iElem.classList.add('icon-th-list');
324       iElem.classList.remove('icon-th-large');
325       self.modus = 'kacheln';
326     }
327     self.fm_get_list(self.pfad);    
328   };
329
330   this.fm_set_modus = function() {
331     var elem = document.querySelector('#ansicht');
332     var iElem = elem.getElementsByTagName("i")[0];
333     if(self.modus === 'kacheln') {
334       iElem.classList.add('icon-th-list');    
335       iElem.classList.remove('icon-th-large');
336     } else {
337       iElem.classList.add('icon-th-large');
338       iElem.classList.remove('icon-th-list');
339     }    
340   };
341
342   
2864b2 343   /**
U 344    * Der letzte Eintrag in dirs ist der aktuelle Ordner und 
345    * deshalb ausgegraut.
346    * 
347    * Wenn nur ein Ordner in dirs enthalten ist, dann sind wir 
348    * an der obersten Ebene (Home).
349    * 
350    * @param {Array} dirList ein Array aus BcrFile-Objekten
351    * @returns nichts 
352    */
353   this.fm_renderBreadcrumb = function(dirList) {
354     var elem = document.querySelector('.breadcrumb');
355     if(dirList.length > 1) {
356       var last = dirList.pop();
357       var bcList = new BcrFiles(dirList);
4f01b8 358       
2864b2 359       self.html_erzeugen("data/tpl/bcr.tpl", bcList, function(html) {
4f01b8 360         var htmlGesamt = html;
2864b2 361         self.html_erzeugen("data/tpl/bcr2.tpl", last, function(html) {
4f01b8 362           htmlGesamt += html;          
U 363           self.html_erzeugen("data/tpl/bcr3.tpl", dirList[0], function(html) {
364             htmlGesamt += html;
365             elem.innerHTML = htmlGesamt;
366             self.addEvtListener('.bc-link', 'click', self.fm_bc_click);
367             self.addEvtListener('#ansicht', 'click', self.fm_ansicht_umschalten);
368             self.fm_set_modus();
369           });
370           
2864b2 371         });                  
U 372       });            
373     } else {
374       // oberste Ebene
4f01b8 375       var htmla;
U 376       var htmlb;
2864b2 377       self.html_erzeugen("data/tpl/bcr2.tpl", dirList[0], function(html) {
4f01b8 378         htmla = html;        
U 379         self.html_erzeugen("data/tpl/bcr3.tpl", dirList[0], function(html) {
380           htmlb = html;
381           elem.innerHTML = htmla + htmlb;
382           self.addEvtListener('.bc-link', 'click', self.fm_bc_click);
383           self.addEvtListener('#ansicht', 'click', self.fm_ansicht_umschalten);
384           self.fm_set_modus();
385         });
2864b2 386       });            
U 387     }
388   };
389   
390   /**
391    * Auf den Klick auf ein Breadcrumb-Element reagieren:
392    * Den Ordner-Inhalt des geklickten Elements anzeigen
393    * @returns nichts
394    */
395   this.fm_bc_click = function() {
396     var elem = this;
397     var bcPfad = elem.getAttribute("rpath");
398     if(bcPfad !== undefined) {
399       self.pfad = bcPfad;
400       self.fm_get_list(bcPfad);
401     } else {
402       pfad = '';
403       self.fm_get_list('');
404     }
405   };
406
94b871 407   /* API functions */
05e9c4 408
94b871 409   // http://localhost:8079/file-cms/svc?c=de.uhilger.filecms.api.FileMgr&f=JSONNICE&m=list&p=
U 410   this.fm_get_list = function (relPfad) {
411     var m = '?c=de.uhilger.filecms.api.FileMgr&m=list&p=' + relPfad;
412     var u = '../svc' + m;
58bcbd 413     self.fm_get(u, "json", function (respText) {
U 414       var resp = JSON.parse(respText);
94b871 415       if (resp.List[0].FileRef !== undefined) {
U 416         var files = new Array();
417         if (resp.List[0].FileRef instanceof Array) {
418           for (var i = 0; i < resp.List[0].FileRef.length; i++) {
419             files.push(new FileRef(resp.List[0].FileRef[i]));
05e9c4 420           }
U 421         } else {
94b871 422           files.push(new FileRef(resp.List[0].FileRef));
05e9c4 423         }
94b871 424         var fl = new FileList(files);
58bcbd 425         self.fm_render_list(fl);
94b871 426       } else {
58bcbd 427         // #dateien leeren
8ba358 428         var elem = document.querySelector("#dateien");
U 429         elem.innerHTML = '';
94b871 430       }
8ba358 431       
U 432       // Breadcrumb
433       
2864b2 434       var dirList = self.fm_buildBreadcrumb(relPfad);
4f01b8 435       self.fm_renderBreadcrumb(dirList);     
94b871 436     });
U 437   };
05e9c4 438
94b871 439   /* -------- An- und Abmelden ------------- */
05e9c4 440
94b871 441   this.fm_get_login = function() {
U 442     var m = '?c=de.uhilger.filecms.pub.SessionManager&m=getSessionUser';
443     var u = '../pub' + m;
444     self.fm_get(u, "text", function (resp) {
445       self.userid = resp;
58bcbd 446       self.login_zeigen();
U 447       //document.querySelector("#userMenu").textContent = resp;
94b871 448     });
U 449   };
05e9c4 450
94b871 451   this.fm_logout = function() {
U 452     var m = '?c=de.uhilger.filecms.pub.SessionManager&m=expireSession';
453     var u = '../pub' + m;
454     self.fm_get(u, "text", function (resp) {
455       //$('#userMenu').text('nicht angemeldet');
456       window.location.href = '../logout.html';
457     });
458   };
41ab37 459   
6648a8 460   /* ----- Hilfsfunktionen ----- */
U 461
462   this.serialisieren = function(obj) {
463     return '{"' + obj.constructor.name + '":' + JSON.stringify(obj) + '}';
464   };
465   
466   this.addEvtListener = function(selector, eventName, func) {
467     document.querySelectorAll(selector).forEach(elem => { elem.addEventListener(eventName, func); });
468   };
469   
470   this.removeAllListeners = function(id) {
471     var el = document.getElementById(id);
472     elClone = el.cloneNode(true);
473     el.parentNode.replaceChild(elClone, el);
474   }; // https://stackoverflow.com/questions/19469881/remove-all-event-listeners-of-specific-type
475
41ab37 476   /* ---- Vorlagen ---- */
U 477
478   this.html_erzeugen = function(vurl, inhalt, cb) {
479     var vorlage = self.cache[vurl];
480     if(vorlage === undefined) {
481       self.vorlage_laden_und_fuellen(vurl, inhalt, cb);
482     } else {
483       self.vorlage_fuellen(vurl, inhalt, cb);
484     }
485   };
486
487   this.vorlage_fuellen = function(vurl, inhalt, cb) {
488     cb(Mustache.render(self.cache[vurl], inhalt));
489   };
490
491   this.vorlage_laden_und_fuellen = function(vurl, inhalt, cb) {
492     self.fm_get(vurl, "text", function(antwort) {
493       self.cache[vurl] = antwort;
494       self.vorlage_fuellen(vurl, inhalt, cb);
495     });
496   };
94b871 497
U 498   /* -------- ajax helper functions ----------- */
499
58bcbd 500   this.fm_get = function (u, dtype, scallback) {    
U 501     var xmlhttp = new XMLHttpRequest();
502     var url = u;
503     xmlhttp.onreadystatechange = function() {
504       if (this.readyState == 4 && this.status == 200) {
505         scallback(this.responseText);
94b871 506       }
58bcbd 507     };
U 508     xmlhttp.open("GET", url, true);
509     xmlhttp.send();
94b871 510   };
U 511
05e9c4 512 }