From 41ab37e425058eab58e640c94b79b3a9e26fb169 Mon Sep 17 00:00:00 2001 From: ulrich Date: Sat, 09 Jan 2021 19:15:13 +0000 Subject: [PATCH] Erste Anpassungen am Rendering bei ui2 --- web/ui2/js/app.js | 384 ++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 253 insertions(+), 131 deletions(-) diff --git a/web/ui2/js/app.js b/web/ui2/js/app.js index 650f4de..d194768 100644 --- a/web/ui2/js/app.js +++ b/web/ui2/js/app.js @@ -1,99 +1,105 @@ function AppVorlage() { var self = this; - var appMenu; - var vorlagen; - var api; + this.appMenu; + this.vorlagen; + this.api; + this.userid; + this.pfad = ''; + this.loc; + this.modus = 'kacheln'; + this.PERS_DIR = "Persoenlich"; + this.PUB_DIR = "Oeffentlich"; + this.DAV_DIR = "Austausch"; + this.BASE_DIR = "$basis"; + this.DATA_DIR = "$daten"; + this.WWW_DIR = "www"; + this.cache = {}; // mustache template cache - this.datei_neuer_text = function() { - self.menu_message("Neuer Text"); + this.datei_neuer_text = function () { + self.meldung_mit_timeout("Neuer Text", 1500); }; /* Funktionen aus App-Vorlage */ - - this.init = function() { - self.vorlagen = new Vorlagen(); + + this.init = function () { + //self.vorlagen = new Vorlagen(); self.appMenu = new AppMenu(); self.appMenu.init( - "data/menu/", - "hauptmenue.json", - "data/tpl/app-menu.tpl", - ".west", - "8em"); - - document.querySelector('.hamburger').addEventListener('click', function(e) { + "data/menu/", + "hauptmenue.json", + "data/tpl/app-menu.tpl", + ".west", + "8em"); + document.querySelector('.hamburger').addEventListener('click', function (e) { self.menue_umschalten(); }); + self.fm_get_login(); + + var parsedUrl = new URL(window.location.href); + var wunschPfad = parsedUrl.searchParams.get("pfad"); + if(wunschPfad !== null && wunschPfad.length > 0) { + self.pfad = wunschPfad; + self.fm_get_list(wunschPfad); + } else { + self.fm_get_list(''); + } + //fm_init_uploader(); + self.loc = window.location.protocol + '//' + window.location.host; + + //self.fm_get_list(''); + //self.loc = window.location.protocol + '//' + window.location.host; }; - this.menue_umschalten = function() { + this.login_zeigen = function() { + self.meldung_mit_timeout("Benutzer: " + self.userid, 1500); + }; + + this.menue_umschalten = function () { var ham = document.querySelector(".hamburger"); ham.classList.toggle("is-active"); // hamburger-icon umschalten self.appMenu.toggle(); // menue oeffnen/schliessen }; - this.info_dialog_zeigen = function() { + this.info_dialog_zeigen = function () { self.dialog_laden_und_zeigen('data/tpl/dlg-info.tpl', ''); self.menue_umschalten(); }; - this.seitenleiste_umschalten = function() { + this.seitenleiste_umschalten = function () { var ostDiv = document.querySelector('.ost'); - if(ostDiv.classList.contains('ost-open')) { + if (ostDiv.classList.contains('ost-open')) { ostDiv.classList.remove('ost-open'); - ostDiv.style.flexBasis = '0em'; + ostDiv.style.flexBasis = '0em'; } else { - ostDiv.classList.add('ost-open'); - ostDiv.style.flexBasis = '6em'; + ostDiv.classList.add('ost-open'); + ostDiv.style.flexBasis = '6em'; } self.menue_umschalten(); }; - this.fusszeile_umschalten = function() { + this.fusszeile_umschalten = function () { var suedDiv = document.querySelector('.sued'); - if(suedDiv.classList.contains('sued-open')) { + if (suedDiv.classList.contains('sued-open')) { suedDiv.classList.remove('sued-open'); - suedDiv.style.height = '0'; + suedDiv.style.height = '0'; } else { suedDiv.classList.add('sued-open'); - suedDiv.style.height = '1.5em'; + suedDiv.style.height = '1.5em'; } self.menue_umschalten(); }; - this.menu_message = function(msg) { - self.meldung_mit_timeout(msg, 1500); - var suedDiv = document.querySelector('.sued'); - if(suedDiv.classList.contains('sued-open')) { - } else { - suedDiv.classList.add('sued-open'); - suedDiv.style.height = '1.5em'; - } - self.menue_umschalten(); - }; - - this.message_1 = function() { - self.menu_message('Eine Mitteilung.'); - }; - - this.message_2 = function() { - self.menu_message('Was wir schon immer sagen wollten.'); - }; - - this.message_3 = function(text) { - self.menu_message(text); - }; - - this.meldung_mit_timeout = function(meldung, timeout) { + this.meldung_mit_timeout = function (meldung, timeout) { var s = document.querySelector('.sued'); s.textContent = meldung; - setTimeout(function() { + setTimeout(function () { s.textContent = 'Bereit.'; - setTimeout(function() { + setTimeout(function () { var suedDiv = document.querySelector('.sued'); - if(suedDiv.classList.contains('sued-open')) { - suedDiv.classList.remove('sued-open'); - suedDiv.style.height = '0'; + if (suedDiv.classList.contains('sued-open')) { + suedDiv.classList.remove('sued-open'); + suedDiv.style.height = '0'; } }, 500); }, timeout); @@ -102,40 +108,40 @@ /* Dialog-Funktionen */ /* - Einen Dialog aus Vorlagen erzeugen - - vurl - URL zur Dialogvorlage - msgTpl - URL mit einer Vorlage eines Mitteilungstextes (optional) - */ - this.dialog_laden_und_zeigen = function(vurl, msgTpl) { - if(msgTpl !== '') { + Einen Dialog aus Vorlagen erzeugen + + vurl - URL zur Dialogvorlage + msgTpl - URL mit einer Vorlage eines Mitteilungstextes (optional) + */ + this.dialog_laden_und_zeigen = function (vurl, msgTpl) { + if (msgTpl !== '') { fetch(msgTpl) - .then(data => { - // Handle data - self.dialog_zeigen(vurl, data); - }).catch(error => { - // Handle error - }); + .then(data => { + // Handle data + self.dialog_zeigen(vurl, data); + }).catch(error => { + // Handle error + }); } else { self.dialog_zeigen(vurl, ''); } }; - this.dialog_zeigen = function(vurl, inhalt) { + this.dialog_zeigen = function (vurl, inhalt) { var dlg = document.querySelector(".dialog"); self.vorlagen.html_erzeugen( - vurl, - inhalt, - function(html) { - //dlg.html(html); - dlg.style.height = '5em'; - dlg.innerHTML = html; - document.querySelector('.close-btn').addEventListener('click', self.dialog_schliessen); - //dlg.slideDown(300); - }); + vurl, + inhalt, + function (html) { + //dlg.html(html); + dlg.style.height = '5em'; + dlg.innerHTML = html; + document.querySelector('.close-btn').addEventListener('click', self.dialog_schliessen); + //dlg.slideDown(300); + }); }; - self.dialog_schliessen = function() { + this.dialog_schliessen = function () { document.querySelector('.close-btn').removeEventListener('click', self.dialog_schliessen); //$('.dialog').slideUp(300); var dlg = document.querySelector('.dialog'); @@ -143,66 +149,182 @@ dlg.style.height = '0'; dlg.innerHTML = ''; }; + + this.html_zeigen = function(html) { + // was mit dem html getan werden soll.. + var elem = document.querySelector('#dateien'); + elem.innerHTML = html; + }; + + this.fm_render_list = function (fl) { + if (self.modus == 'kacheln') { + // Kachelansicht + + // neu bauen + + //html_erzeugen = function(vurl, inhalt, cb) + + self.html_erzeugen("data/tpl/kacheln.tpl", fl, self.html_zeigen); + + /* + var template = $('#tpl-kacheln').html(); + Mustache.parse(template); // optional, speeds up future uses + $('.datei-zeile').attr('onclick', '').unbind('click'); + $('#dateien').empty(); + $('#dateien').html(Mustache.render(template, fl)); + $('.figure').click(fm_dateiwahl); + */ + } else { + // Listenansicht + + // neu bauen + + /* + var template = $('#tpl-liste').html(); + Mustache.parse(template); // optional, speeds up future uses + $('.figure').attr('onclick', '').unbind('click'); + $('#dateien').empty(); + $('#dateien').html(Mustache.render(template, fl)); + $('.datei-zeile').click(fm_dateiwahl); + */ + } + }; + + this.fm_get_path = function (uid) { + //console.log('pfad: ' + pfad); + var restdir; + if (self.pfad.indexOf(self.PUB_DIR) > -1) { + restdir = self.pfad.substr(self.PUB_DIR.length); + } else if (self.pfad.indexOf(self.PERS_DIR) > -1) { + restdir = self.pfad.substr(self.PERS_DIR.length); + } else if (self.pfad.indexOf(self.BASE_DIR) > -1) { + restdir = self.pfad.substr(self.BASE_DIR.length); + } else if (self.pfad.indexOf(self.DATA_DIR) > -1) { + restdir = self.pfad.substr(self.DATA_DIR.length); + } else if (self.pfad.indexOf(self.DAV_DIR) > -1) { + restdir = self.pfad.substr(self.DAV_DIR.length); + } + if (restdir !== undefined && restdir.startsWith('/')) { + restdir = restdir.substr(1); + if (restdir.indexOf(self.WWW_DIR) > -1) { + restdir = restdir.replace(self.WWW_DIR, 'data'); + } + } + var pdir = self.fm_get_base(uid); + // console.log('fm_get_path path: ' + pdir + "/" + restdir); + if (restdir.length > 1) { + return pdir + "/" + restdir; + } else { + return pdir; + } + }; - /* API functions */ + this.fm_get_base = function (uid) { + //console.log('pfad: ' + pfad); + var pdir; + if (self.pfad.indexOf(self.PUB_DIR) > -1) { + pdir = '/data/' + uid; + } else if (self.pfad.indexOf(self.PERS_DIR) > -1) { + pdir = '/home/' + uid; + } else if (self.pfad.indexOf(self.BASE_DIR) > -1) { + pdir = ''; + } else if (self.pfad.indexOf(self.DATA_DIR) > -1) { + pdir = ''; + } + //console.log('fm_get_base base: ' + pdir + uid); + return pdir; + }; - // http://localhost:8079/file-cms/svc?c=de.uhilger.filecms.api.FileMgr&f=JSONNICE&m=list&p= - this.fm_get_list = function(relPfad) { - $('#ansicht').attr('onclick','').unbind('click'); - var m = '?c=de.uhilger.filecms.api.FileMgr&m=list&p=' + relPfad; - var u = '../svc' + m; - self.fm_get(u, "json", function(resp) { - if(resp.List[0].FileRef !== undefined) { - var files = new Array(); - if(resp.List[0].FileRef instanceof Array) { - for(var i = 0; i < resp.List[0].FileRef.length; i++) { - files.push(new FileRef(resp.List[0].FileRef[i])); - } - } else { - files.push(new FileRef(resp.List[0].FileRef)); + /* API functions */ + + // http://localhost:8079/file-cms/svc?c=de.uhilger.filecms.api.FileMgr&f=JSONNICE&m=list&p= + this.fm_get_list = function (relPfad) { + //$('#ansicht').attr('onclick', '').unbind('click'); + var m = '?c=de.uhilger.filecms.api.FileMgr&m=list&p=' + relPfad; + var u = '../svc' + m; + self.fm_get(u, "json", function (respText) { + var resp = JSON.parse(respText); + if (resp.List[0].FileRef !== undefined) { + var files = new Array(); + if (resp.List[0].FileRef instanceof Array) { + for (var i = 0; i < resp.List[0].FileRef.length; i++) { + files.push(new FileRef(resp.List[0].FileRef[i])); } - var fl = new FileList(files); - fm_render_list(fl); } else { - $('#dateien').empty(); + files.push(new FileRef(resp.List[0].FileRef)); } - - }); - }; - -/* -------- ajax helper functions ----------- */ - - this.fm_get = function(u, dtype, scallback) { - $.ajax({ - url: u, - type: "GET", - dataType: dtype, - success: scallback, - error: function (xhr, status, errorThrown) { - alert("Error: " + errorThrown + " Status: " + status + " URL: " + u); - }, - complete: function (xhr, status) { - //console.log( "The request is complete!" ); + var fl = new FileList(files); + self.fm_render_list(fl); + //self.fm_render_list(resp); + } else { + // #dateien leeren + var elems = document.querySelector("#dateien"); + var count = elems[0].childElementCount; + for(var i = count-1; i > -1; i--) { + elems[0].removeChild(i); } + } + }); + }; - }); - }; + /* -------- An- und Abmelden ------------- */ - this.fm_post = function(u, d, dtype, scallback) { - $.ajax({ - url: u, - data: d, - type: "POST", - dataType: dtype, - success: scallback, - error: function (xhr, status, errorThrown) { - $('#fehler').html("Error: " + errorThrown + " Status: " + status); - }, - complete: function (xhr, status) { - //alert( "The request is complete!" ); - } - }); + this.fm_get_login = function() { + var m = '?c=de.uhilger.filecms.pub.SessionManager&m=getSessionUser'; + var u = '../pub' + m; + self.fm_get(u, "text", function (resp) { + self.userid = resp; + self.login_zeigen(); + //document.querySelector("#userMenu").textContent = resp; + }); + }; + + this.fm_logout = function() { + var m = '?c=de.uhilger.filecms.pub.SessionManager&m=expireSession'; + var u = '../pub' + m; + self.fm_get(u, "text", function (resp) { + //$('#userMenu').text('nicht angemeldet'); + window.location.href = '../logout.html'; + }); + }; + + /* ---- Vorlagen ---- */ + + this.html_erzeugen = function(vurl, inhalt, cb) { + var vorlage = self.cache[vurl]; + if(vorlage === undefined) { + self.vorlage_laden_und_fuellen(vurl, inhalt, cb); + } else { + self.vorlage_fuellen(vurl, inhalt, cb); + } + }; + + this.vorlage_fuellen = function(vurl, inhalt, cb) { + cb(Mustache.render(self.cache[vurl], inhalt)); + }; + + this.vorlage_laden_und_fuellen = function(vurl, inhalt, cb) { + self.fm_get(vurl, "text", function(antwort) { + self.cache[vurl] = antwort; + self.vorlage_fuellen(vurl, inhalt, cb); + }); + }; + + + + /* -------- ajax helper functions ----------- */ + + this.fm_get = function (u, dtype, scallback) { + var xmlhttp = new XMLHttpRequest(); + var url = u; + xmlhttp.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + scallback(this.responseText); + } }; - + xmlhttp.open("GET", url, true); + xmlhttp.send(); + }; + } -- Gitblit v1.9.3