From 9350c960b07404690ed747ed7725e94313c629fb Mon Sep 17 00:00:00 2001 From: ulrich Date: Wed, 20 Jan 2021 22:48:25 +0000 Subject: [PATCH] Upload und Bildbetrachtung fertig uebertragen --- web/ui2/js/app.js | 315 +++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 239 insertions(+), 76 deletions(-) diff --git a/web/ui2/js/app.js b/web/ui2/js/app.js index bb04b7b..d9e4050 100644 --- a/web/ui2/js/app.js +++ b/web/ui2/js/app.js @@ -23,6 +23,8 @@ this.cutCopyOperation; this.cutCopySrcDir; this.cutCopyFiles; + this.fm_slideshow = false; + this.dateien; this.cache = {}; // mustache template cache this.datei_neuer_text = function () { @@ -45,6 +47,9 @@ document.querySelector('.hamburger').addEventListener('click', function (e) { self.menue_umschalten(); }); + document.querySelector('#top-neuer-text-btn').addEventListener('click', self.datei_neuer_text); + document.querySelector('#top-neuer-ordner-btn').addEventListener('click', self.datei_neuer_ordner); + document.querySelector('#top-close-btn').addEventListener('click', self.fm_menu_datei_schliessen); self.fm_get_login(); var parsedUrl = new URL(window.location.href); @@ -58,9 +63,35 @@ } self.seitenleiste_umschalten(); - //fm_init_uploader(); + self.fm_init_uploader(); self.loc = window.location.protocol + '//' + window.location.host; }; + + /* ----- Uploader Anfang ----------*/ + + this.fm_init_uploader = function() { + //console.log('init_uploader'); + self.dateien = new Array(); + var dropzone = document.getElementById("upload-target"); + dropzone.ondragover = dropzone.ondragenter = function(event) { + event.stopPropagation(); + event.preventDefault(); + }; + + dropzone.ondrop = function(event) { + //console.log('dateien ondrop'); + event.stopPropagation(); + event.preventDefault(); + var fileList = event.dataTransfer.files; + for (var i=0; i<fileList.length; i++) { + self.dateien.push(fileList[i]); + //console.log('upload ' + fileList[i]); + } + self.sendFile(self.dateien.pop()); + }; + }; + + /* ----- Uploader Ende --------------- */ this.login_zeigen = function() { self.meldung_mit_timeout("Benutzer: " + self.userid, 1500); @@ -70,6 +101,41 @@ window.open('/file-cms/ui2/?pfad=' + self.pfad, '_blank'); }; + this.fm_hilfe = function() { + window.open('/data/dok/wbx-doku.html#wbx-bedienung', '_blank'); + }; + + this.fm_toggle_show_slideshow = function() { + if(self.fm_slideshow) { + //$('#m-toggle-slideshow').text('Diashow einschalten'); + self.fm_slideshow = false; + } else { + //$('#m-toggle-slideshow').text('Diashow ausschalten'); + self.fm_slideshow = true; + } + }; + + this.fm_view_slideshow = function() { + + // https://localhost:8443/file-cms/fotos/?o=ulrich/bilder/diashow/ordnername + + + var userid = self.userid; // $('#userMenu').text(); + //var gewaehlte = $('.datei-gewaehlt'); + //var gewaehlte = document.querySelector('.datei-gewaehlt'); + //var fname = gewaehlte.textContent; + + var path = self.fm_get_path(userid); + var restdir = path; + if(path.indexOf('/data/') > -1) { + restdir = path.substr('/data/'.length); + } + + //window.open('/file-cms/fotos/?o=' + userid + '/' + path + '/' + fname, '_blank'); + window.open('/file-cms/fotos/?o=' + restdir + '/' /*+ fname*/, '_blank'); + }; + + this.menue_umschalten = function () { var ham = document.querySelector(".hamburger"); ham.classList.toggle("is-active"); // hamburger-icon umschalten @@ -78,7 +144,7 @@ this.info_dialog_zeigen = function () { self.dialog_laden_und_zeigen('data/tpl/dlg-info.tpl', ''); - self.menue_umschalten(); + //self.menue_umschalten(); }; this.seitenleiste_umschalten = function () { @@ -108,6 +174,8 @@ this.meldung_mit_timeout = function (meldung, timeout) { var s = document.querySelector('.sued'); s.textContent = meldung; + s.classList.add('sued-open'); + s.style.height = '1.5em'; setTimeout(function () { s.textContent = 'Bereit.'; setTimeout(function () { @@ -157,6 +225,7 @@ var fname = self.openFileName; if(fname !== undefined && fname !== '') { self.fm_save_file(fname, 'saveTextFile', callback); + self.meldung_mit_timeout(fname + ' gespeichert.', 1500); } else { self.fm_menu_datei_speichern_unter(callback); } @@ -171,9 +240,11 @@ document.querySelector('#speichern-btn').addEventListener('click', function() { //self.fm_menu_datei_speichern(function() { //console.log(document.querySelector('#datei-name-in').value); - self.fm_save_file(document.querySelector('#datei-name-in').value, 'saveTextFileAs', callback); + var fname = document.querySelector('#datei-name-in').value; + self.fm_save_file(fname, 'saveTextFileAs', callback); + self.meldung_mit_timeout(fname + ' gespeichert.', 1500); if(typeof(callback) !== 'function') { - self.fm_do_close(); + //self.fm_do_close(); self.dialog_schliessen(); } //}); @@ -242,41 +313,65 @@ gew.classList.remove('datei-gewaehlt'); } }; + + this.fm_view_file = function() { + var fname = document.querySelector('.datei-gewaehlt').textContent; + var path = self.fm_get_path(self.userid); + window.open(path + '/' + fname, '_blank'); + }; - this.datei_ansehen_oder_bearbeiten = function() { - console.log('datei_ansehen_oder_bearbeiten'); - self.meldung_mit_timeout("datei_ansehen_oder_bearbeiten ist noch nicht implementiert", 500); + this.datei_ansehen_oder_bearbeiten = function(dateiname) { + if(dateiname.endsWith('htmi')) { + self.fm_get_file_content('doc', dateiname); + } else if(dateiname.endsWith('jpg') || dateiname.endsWith('png') || + dateiname.endsWith('gif') || dateiname.endsWith('pdf') ) { + self.fm_view_file(); + } else { + self.fm_get_file_content('text', dateiname); + } }; /** - * Es gibt vier Fälle: - * 1. Datei, nicht ausgewählt - * 2. Datei, ausgewählt - * 3. Ordner, nicht ausgewählt - * 4. Ordner, gewählt + * Hier werden die folgenden Faelle einer Datei- + * bzw. Ordnerauswahl ausgefuehrt: + * + * geklickt, nicht gewaehlt: + * auswaehlen, evtl. bestehende andere Auswahl entfernen + * + * geklickt, ausgewaehlt: + * Datei ansehen oder oeffnen bzw. Ordner oeffnen + * + * geklickt mit [Strg], nicht gewahlt: + * auswaehlen, bestehende Auswahl beibehalten (Mehrfachauswahl) + * + * geklickt mit [Strg], gewaehlt: + * Auswahl bei diesem Element entfernen * * Diese Fälle sind unterteilt in - * 1. Kachel-Modus - * 2. Listenmodus + * 1. Kachel-Modus + * 2. Listenmodus * - * @param {type} ev - * @returns {undefined} + * @param {type} ev Klick-Event + * @returns {undefined} nichts */ this.fm_dateiwahl = function(ev) { var elem = ev.target; if(self.modus == 'kacheln') { // Kacheln + //var par = elem.parentElement; + var par = elem.closest('.datei-figure'); + var dElem = par.querySelector('.dateiname'); if(elem.classList.contains("icon-folder")) { // Ordner - var par = elem.parentElement; - var istGewaehlt = par.querySelector('.dateiname').classList.contains('datei-gewaehlt'); + //var par = elem.parentElement; + var istGewaehlt = dElem.classList.contains('datei-gewaehlt'); if(istGewaehlt) { if(/*ev.shiftKey || */ ev.ctrlKey) { // mehrere Ordner sind gewaehlt, diese eine wieder entfernen - par.querySelector('.dateiname').classList.remove('datei-gewaehlt'); + dElem.classList.remove('datei-gewaehlt'); } else { // Ordner oeffnen - var ordner = elem.parentElement.querySelector('.dateiname').textContent.trim(); + var ordner = dElem.textContent.trim(); if(self.pfad.length > 0) { self.pfad = self.pfad + '/' + ordner; } else { @@ -291,19 +386,20 @@ } else { self.fm_auswahl_marke_entfernen(); } - par.querySelector('.dateiname').classList.add('datei-gewaehlt'); + dElem.classList.add('datei-gewaehlt'); } } else if(elem.classList.contains('datei')) { // Datei - var par = elem.parentElement; - var istGewaehlt = par.querySelector('.dateiname').classList.contains('datei-gewaehlt'); + //var par = elem.parentElement; + //var dElem = par.querySelector('.dateiname'); + var istGewaehlt = dElem.classList.contains('datei-gewaehlt'); if(istGewaehlt) { if(/*ev.shiftKey || */ ev.ctrlKey) { // mehrere Dateien sind gewaehlt, diese eine wieder entfernen - par.querySelector('.dateiname').classList.remove('datei-gewaehlt'); + dElem.classList.remove('datei-gewaehlt'); } else { // Datei zum Bearbeiten oeffnen - self.datei_ansehen_oder_bearbeiten(); + self.datei_ansehen_oder_bearbeiten(dElem.textContent); } } else { if(/*ev.shiftKey || */ ev.ctrlKey) { @@ -311,7 +407,7 @@ } else { self.fm_auswahl_marke_entfernen(); } - par.querySelector('.dateiname').classList.add('datei-gewaehlt'); + dElem.classList.add('datei-gewaehlt'); } } else { //console.log('kein folder oder file...'); @@ -320,16 +416,17 @@ // Liste var pElem = elem.closest('.datei-zeile'); var dElem = pElem.querySelector('.datei-elem'); - var istGewaehlt = pElem.querySelector('.dateiname').classList.contains('datei-gewaehlt'); + var dnElem = pElem.querySelector('.dateiname'); + var istGewaehlt = dnElem.classList.contains('datei-gewaehlt'); if(dElem.getElementsByTagName("i")[0].classList.contains('icon-doc-text-inv')) { // Datei if(istGewaehlt) { if(/*ev.shiftKey || */ ev.ctrlKey) { // mehrere Dateien sind gewaehlt, diese eine wieder entfernen - pElem.querySelector('.dateiname').classList.remove('datei-gewaehlt'); + dnElem.classList.remove('datei-gewaehlt'); } else { // gewaehlte Datei ohne [Strg] geklickt: ansehen oder oeffnen - self.datei_ansehen_oder_bearbeiten(); + self.datei_ansehen_oder_bearbeiten(dnElem.textContent); } } else { if(/*ev.shiftKey || */ ev.ctrlKey) { @@ -342,17 +439,17 @@ self.fm_auswahl_marke_entfernen(); } pElem.classList.add('table-info'); - pElem.querySelector('.dateiname').classList.add('datei-gewaehlt'); + dnElem.classList.add('datei-gewaehlt'); } } else { // Ordner if(istGewaehlt) { if(/*ev.shiftKey || */ ev.ctrlKey) { // ein gewaehlter Ordner ist mit [Strg] geklickt, Auswahl entfernen - pElem.querySelector('.dateiname').classList.remove('datei-gewaehlt'); + dnElem.classList.remove('datei-gewaehlt'); } else { // Ordner oeffnen - var ordner = pElem.querySelector('.dateiname').textContent; + var ordner = dnElem.textContent; if(self.pfad.length > 0) { self.pfad = self.pfad + '/' + ordner; } else { @@ -367,7 +464,7 @@ // nicht gewaehlter Ordner ohne [Strg]: andere Auswhalen entfernen und weiter unten Ordner auswaehlen self.fm_auswahl_marke_entfernen(); } - pElem.querySelector('.dateiname').classList.add('datei-gewaehlt'); + dnElem.classList.add('datei-gewaehlt'); } } } @@ -565,7 +662,7 @@ self.fm_cut_files(); }; this.fm_menu_copy = function() { - console.log('fm_menu_kopie'); + //console.log('fm_menu_kopie'); self.fm_copy_files(); }; this.fm_menu_paste = function() { @@ -586,22 +683,6 @@ //}); }); }); - /* - $('#confirmOk').click(function() { - $('#confirmOk').attr('onclick','').unbind('click'); - fm_del_files(); - }); - $('#confirmOk').text("Loeschen"); - $('#confirmOk').removeClass('btn-primary'); - $('#confirmOk').addClass('btn-danger'); - $('#confirmClose').hide(); - $('#confirmModalTitle').text("Löschen"); - $('#confirmModalBody').text("Wirklich löschen?"); - $('#confirmModal').modal({ - keyboard: false, - show: true - }); - */ }; /* @@ -617,6 +698,7 @@ self.cutCopySrcDir = self.pfad; self.cutCopyFiles = self.fm_gewaehlte_dateien(); self.cutCopyOperation = 'cut'; + self.meldung_mit_timeout('zum Ausschneiden in Zwischenablage', 1500); }; /* @@ -629,10 +711,11 @@ * @returns {undefined} */ this.fm_copy_files = function() { - console.log('fm_copy_files'); + //console.log('fm_copy_files'); self.cutCopySrcDir = self.pfad; self.cutCopyFiles = self.fm_gewaehlte_dateien(); self.cutCopyOperation = 'copy'; + self.meldung_mit_timeout('in Zwischenablage kopiert', 1500); }; @@ -644,25 +727,7 @@ * Absenden als Parameter an den Server */ this.fm_gewaehlte_dateien = function() { - //var gewaehlte = $('.datei-gewaehlt'); var gewaehlte = document.querySelectorAll('.datei-gewaehlt'); - /* - //console.log('anzahl: ' + gewaehlte.length); - var fnames = new Array(); - var i = 0; - while(i < gewaehlte.length) { - var str = { "java.lang.String": $(gewaehlte[i]).text()}; - fnames.push(str); - //console.log('loeschen ' + pfad + ' ' + $(gewaehlte[i]).text()); - //i += 2; - i++; - } - var liste = '{"List":' + JSON.stringify(fnames) + '}'; - // 'liste' enthaelt: - // {"List":[{"java.lang.String":"test3.txt"},{"java.lang.String":"Test1.txt"},{"java.lang.String":"Test2.txt"}]} - // und wird auf dem Server zu einer List[ArrayList<String>] bei der jede ArrayList<String> nur ein Element hat - return liste; - */ return self.fm_dateiliste_bilden(gewaehlte); }; @@ -684,6 +749,40 @@ return liste; }; + this.fm_menu_datei_umbenennen = function() { + //var gewaehlte = $('.datei-gewaehlt'); + var gewaehlte = document.querySelector('.datei-gewaehlt'); + var fname = gewaehlte.textContent; + + self.dialog_laden_und_zeigen('data/tpl/dlg-rename.tpl', '', function() { + document.querySelector('#cancel-btn').addEventListener('click', function() { + self.dialog_schliessen(); + }); + document.querySelector('#speichern-btn').addEventListener('click', function() { + self.fm_rename_file(fname, self.pfad, document.querySelector('#datei-name-in').value); + self.dialog_schliessen(); + }); + }); + + /* + $('#modal_ok').click(function() { + // hier umbenennen + fm_rename_file(fname, pfad, $('#dateiname').val()); + }); + $('#saveModalTitle').text('Datei umbenennen'); + $('#dialogfrage').text("Neuer Dateiname?"); + + if(fname !== undefined) { + $('#dateiname').val(fname); + $('#dateiname').attr('placeholder', 'Dateiname'); + $('#saveModal').modal({ + keyboard: false, + show: true + }); + } + */ + }; + this.fm_menu_html_export = function() { self.fm_export_html(); }; @@ -739,20 +838,45 @@ }); }); }; + + this.fm_open_file = function() { + var gewaehlte = document.querySelector('.datei-gewaehlt'); + var fname = gewaehlte.textContent; + self.datei_ansehen_oder_bearbeiten(fname); + /* + if(fname.endsWith('htmi')) { + //self.fm_edit_as_doc(); + self.fm_get_file_content('doc', fname); + } else { + //self.fm_edit_as_text(); + self.fm_get_file_content('text', fname); + } + */ + }; + /* this.fm_edit_as_text = function() { - self.fm_get_file_content('text'); + self.fm_get_sel_for_file_content('text'); }; this.fm_edit_as_doc = function() { - self.fm_get_file_content('doc'); + self.fm_get_sel_for_file_content('doc'); }; - this.fm_get_file_content = function(typ) { + this.fm_get_sel_for_file_content = function(typ) { var gewaehlte = document.querySelector('.datei-gewaehlt'); //var fname = $(gewaehlte).find('.dateiname').text(); var fname = gewaehlte.textContent; + self.fm_get_file_content(typ, fname); + }; + */ + + this.fm_get_file_content = function(typ, fname) { + //var gewaehlte = document.querySelector('.datei-gewaehlt'); + //var fname = $(gewaehlte).find('.dateiname').text(); + + //var fname = gewaehlte.textContent; //console.log('fname: ' + fname); self.openFileName = fname; var m = '?c=de.uhilger.filecms.api.FileMgr&m=getCode&p=' + self.pfad + '&p=' + fname; @@ -787,7 +911,14 @@ } var m = '?c=de.uhilger.filecms.api.FileMgr&m=' + method; var u = '../svc' + m; - var data = '&p=' + self.pfad + '&p=' + saveFileName + '&p=' + encodeURIComponent(content); + //var data = '&p=' + self.pfad + '&p=' + saveFileName + '&p=' + + // encodeURIComponent(content); + var data = '&p=' + self.pfad + '&p=' + saveFileName + '&p=' + + encodeURIComponent(content); + // '{"foo": "bar"}' + + //var data = '{"p1": "' + self.pfad + '", "p2": "' + saveFileName + + // '", "p3": "' + encodeURIComponent(self.escapeHtml(content)) + '"}'; self.fm_post(u, data, "text", function(resp) { // ... }); @@ -830,7 +961,39 @@ }); }; -/* ---- codemirror editor handling -------- */ + this.fm_rename_file = function(fn, p, neuerName) { + var m = '?c=de.uhilger.filecms.api.FileMgr&m=renameFile'; + m = m + '&p=' + p; + m = m + '&p=' + fn; + m = m + '&p=' + neuerName; + var u = '../svc' + m; + self.fm_get(u, "text", function(resp) { + self.fm_get_list(self.pfad); + }); + }; + + /* -------- upload ----------- */ + + this.sendFile = function(datei) { + //console.log('sendFile ' + datei); + var uri = "../api/upload"; + var xhr = new XMLHttpRequest(); + var fd = new FormData(); + xhr.open("POST", uri, true); + xhr.onreadystatechange = function() { + if (xhr.readyState === 4 && xhr.status === 200) { + self.fm_get_list(self.pfad); + if(self.dateien.length > 0) { + self.sendFile(self.dateien.pop()); + } + } + }; + fd.append('dateiauswahlfeld', datei); + fd.append('pfad', self.pfad); + xhr.send(fd); + }; + + /* ---- codemirror editor handling -------- */ /* function htmlDecode(value){ @@ -871,7 +1034,7 @@ } }); //cm.setValue(htmlDecode(content)); - //cm.setValue(content); + //self.cm.setValue(content); self.cm.setValue(self.unescapeHtml(content)); self.cm.getDoc().markClean(); self.cm.on("gutterClick", function(theEditor, lineNumber) { @@ -1126,7 +1289,7 @@ } }; xmlhttp.open("POST", url, true); - xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); + xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8'); xmlhttp.send(d); }; -- Gitblit v1.9.3