From b655126533976a98c2852dfb4016afab741982cc Mon Sep 17 00:00:00 2001 From: ulrich Date: Sun, 17 Jan 2021 12:03:06 +0000 Subject: [PATCH] Schaltflaechen im Kopf hinzugefuegt, funktionalitaet noch in Arbeit --- web/ui2/js/app.js | 321 +++++++++++++++++++++++++++++++++++++++++++++++------ 1 files changed, 282 insertions(+), 39 deletions(-) diff --git a/web/ui2/js/app.js b/web/ui2/js/app.js index 3e08ec4..be047e9 100644 --- a/web/ui2/js/app.js +++ b/web/ui2/js/app.js @@ -20,6 +20,9 @@ this.WWW_DIR = "www"; this.openEditor; this.openFileName; + this.cutCopyOperation; + this.cutCopySrcDir; + this.cutCopyFiles; this.cache = {}; // mustache template cache this.datei_neuer_text = function () { @@ -105,6 +108,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 () { @@ -232,35 +237,93 @@ self.removeAllListeners('#cancel-btn'); self.removeAllListeners('#speichern-btn'); }; - + + this.fm_auswahl_marke_entfernen = function() { + var gew = document.querySelector('.datei-gewaehlt'); + if(gew !== null) { + gew.classList.remove('datei-gewaehlt'); + } + }; + + this.datei_ansehen_oder_bearbeiten = function() { + console.log('datei_ansehen_oder_bearbeiten'); + self.meldung_mit_timeout('datei_ansehen_oder_bearbeiten noch nicht implementiert.', 1500); + }; + + /** + * 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 + * + * @param {type} ev Klick-Event + * @returns {undefined} nichts + */ this.fm_dateiwahl = function(ev) { var elem = ev.target; if(self.modus == 'kacheln') { // Kacheln if(elem.classList.contains("icon-folder")) { - if(/*ev.shiftKey || */ ev.ctrlKey) { - var par = elem.parentElement; - par.querySelector('.dateiname').classList.add('datei-gewaehlt'); - } else { - var ordner = elem.parentElement.querySelector('.dateiname').textContent.trim(); - if(self.pfad.length > 0) { - self.pfad = self.pfad + '/' + ordner; + // Ordner + var par = elem.parentElement; + var istGewaehlt = par.querySelector('.dateiname').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'); } else { - self.pfad = ordner; + // Ordner oeffnen + var ordner = elem.parentElement.querySelector('.dateiname').textContent.trim(); + if(self.pfad.length > 0) { + self.pfad = self.pfad + '/' + ordner; + } else { + self.pfad = ordner; + } + self.fm_get_list(self.pfad); } - self.fm_get_list(self.pfad); + } else { + // Ordner auswaehlen + if(/*ev.shiftKey || */ ev.ctrlKey) { + // Mehrfachauswahl + } else { + self.fm_auswahl_marke_entfernen(); + } + par.querySelector('.dateiname').classList.add('datei-gewaehlt'); } } else if(elem.classList.contains('datei')) { - if(/*ev.shiftKey || */ ev.ctrlKey) { - // mehrere Dateien sollen gewaehlt werden - } else { - var gew = document.querySelector('.datei-gewaehlt'); - if(gew != undefined) { - gew.classList.remove('datei-gewaehlt'); - } - } + // Datei var par = elem.parentElement; - par.querySelector('.dateiname').classList.add('datei-gewaehlt'); + var istGewaehlt = par.querySelector('.dateiname').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'); + } else { + // Datei zum Bearbeiten oeffnen + self.datei_ansehen_oder_bearbeiten(); + } + } else { + if(/*ev.shiftKey || */ ev.ctrlKey) { + // mehrere Dateien sollen gewaehlt werden + } else { + self.fm_auswahl_marke_entfernen(); + } + par.querySelector('.dateiname').classList.add('datei-gewaehlt'); + } } else { //console.log('kein folder oder file...'); } @@ -268,35 +331,54 @@ // Liste var pElem = elem.closest('.datei-zeile'); var dElem = pElem.querySelector('.datei-elem'); + var istGewaehlt = pElem.querySelector('.dateiname').classList.contains('datei-gewaehlt'); if(dElem.getElementsByTagName("i")[0].classList.contains('icon-doc-text-inv')) { // Datei - if(/*ev.shiftKey || */ ev.ctrlKey) { - // mehrere Dateien sollen gewaehlt werden + if(istGewaehlt) { + if(/*ev.shiftKey || */ ev.ctrlKey) { + // mehrere Dateien sind gewaehlt, diese eine wieder entfernen + pElem.querySelector('.dateiname').classList.remove('datei-gewaehlt'); + } else { + // gewaehlte Datei ohne [Strg] geklickt: ansehen oder oeffnen + self.datei_ansehen_oder_bearbeiten(); + } } else { - var ti = document.querySelector('.table-info'); - if(ti !== null) { - ti.classList.remove('table-info'); + if(/*ev.shiftKey || */ ev.ctrlKey) { + // mehrere Dateien sollen gewaehlt werden, Auswahl ist weiter unten + } else { + var ti = document.querySelector('.table-info'); + if(ti !== null) { + ti.classList.remove('table-info'); + } + self.fm_auswahl_marke_entfernen(); } - var dg = document.querySelector('.datei-gewaehlt'); - if(dg !== null) { - dg.classList.remove('datei-gewaehlt'); - } + pElem.classList.add('table-info'); + pElem.querySelector('.dateiname').classList.add('datei-gewaehlt'); } - pElem.classList.add('table-info'); - pElem.querySelector('.dateiname').classList.add('datei-gewaehlt'); } else { // Ordner - if(/*ev.shiftKey || */ ev.ctrlKey) { - //elem.children[0].classList.add('datei-gewaehlt'); - pElem.querySelector('.dateiname').classList.add('datei-gewaehlt'); - } else { - var ordner = pElem.querySelector('.dateiname').textContent; - if(self.pfad.length > 0) { - self.pfad = self.pfad + '/' + ordner; + if(istGewaehlt) { + if(/*ev.shiftKey || */ ev.ctrlKey) { + // ein gewaehlter Ordner ist mit [Strg] geklickt, Auswahl entfernen + pElem.querySelector('.dateiname').classList.remove('datei-gewaehlt'); } else { - self.pfad = ordner; + // Ordner oeffnen + var ordner = pElem.querySelector('.dateiname').textContent; + if(self.pfad.length > 0) { + self.pfad = self.pfad + '/' + ordner; + } else { + self.pfad = ordner; + } + self.fm_get_list(self.pfad); } - self.fm_get_list(self.pfad); + } else { + if(/*ev.shiftKey || */ ev.ctrlKey) { + // nicht gewaehlter Ordner und [Strg]: zu Mehrfachauswahl hinzufuegen + } else { + // 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'); } } } @@ -487,6 +569,138 @@ } }; + /* ------- Dateifunktionen Start ----------- */ + + this.fm_menu_cut = function() { + console.log('fm_menu_cut'); + self.fm_cut_files(); + }; + this.fm_menu_copy = function() { + console.log('fm_menu_kopie'); + self.fm_copy_files(); + }; + this.fm_menu_paste = function() { + console.log('fm_menu_paste'); + self.fm_paste_files(); + }; + this.fm_menu_delete = function() { + self.dialog_laden_und_zeigen('data/tpl/dlg-ask-del.tpl', '', function() { + // wenn dialog da ist, hier events verknuepfen + document.querySelector('#cancel-btn').addEventListener('click', function() { + //self.fm_do_close(); + self.dialog_schliessen(); + }); + document.querySelector('#speichern-btn').addEventListener('click', function() { + //self.fm_menu_datei_speichern(function() { + self.fm_del_files(); + self.dialog_schliessen(); + //}); + }); + }); + /* + $('#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 + }); + */ + }; + + /* + * Hier merkt sich die Dateiverwalting die markierten Dateien fuer + * eine Dateioperation. Bei cut wird in der 'paste' Operation auf dem Server + * fuer die 'gemerkten' Dateien ein Move gemacht. Die Dateien werden + * vom gewaehlten Ort zum Zielort verschoben. + * + * @returns {undefined} + */ + this.fm_cut_files = function() { + console.log('fm_cut_files'); + self.cutCopySrcDir = self.pfad; + self.cutCopyFiles = self.fm_gewaehlte_dateien(); + self.cutCopyOperation = 'cut'; + }; + + /* + * Hier merkt sich die Dateiverwalting die markierten Dateien fuer + * eine Dateioperation. Bei copy wird in der 'paste' Operation auf dem Server + * fuer die 'gemerkten' Dateien eine Kopie gemacht. Die Dateien werden + * am gewaehlten Ort behalten und am Zielort wird eine Kopier der + * gewaehlten DAteien erstellt + * + * @returns {undefined} + */ + this.fm_copy_files = function() { + console.log('fm_copy_files'); + self.cutCopySrcDir = self.pfad; + self.cutCopyFiles = self.fm_gewaehlte_dateien(); + self.cutCopyOperation = 'copy'; + }; + + + + /* + * Gewaehlte Dateien feststellen + * + * @returns {String} eine per JSON.stringify schon vorbereitete List zum + * 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); + }; + + this.fm_dateiliste_bilden = function(gewaehlte) { + var fnames = new Array(); + var i = 0; + while(i < gewaehlte.length) { + var str = { "java.lang.String": gewaehlte[i].innerText}; + 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 + console.log(liste); + return liste; + }; + + this.fm_menu_html_export = function() { + self.fm_export_html(); + }; + + /* --------- Dateifunktionen Ende ---------- */ + /* API functions */ // http://localhost:8079/file-cms/svc?c=de.uhilger.filecms.api.FileMgr&f=JSONNICE&m=list&p= @@ -596,7 +810,36 @@ } }; + /* + * Hier wird fuer eine zuvor markierte Liste von Dateien, fuer die + * Cut oder Copy gewaehlt wurde, die Operations ausgefuehrt (move oder copy) + * @returns {undefined} + */ + this.fm_paste_files = function() { + var m; + if(self.cutCopyOperation === 'cut') { + //m = '?c=de.uhilger.filecms.api.FileMgr&m=moveFiles'; //&p=' + cutCopySrcDir + '&p=' + pfad + '&p=' + encodeURIComponent(liste); + m = '?c=de.uhilger.filecms.api.FileMgr&m=moveFiles&p=' + self.cutCopySrcDir + '&p=' + self.pfad + '&p=' + encodeURIComponent(self.cutCopyFiles); + } else { + //m = '?c=de.uhilger.filecms.api.FileMgr&m=copyFiles'; //&p=' + cutCopySrcDir + '&p=' + pfad + '&p=' + encodeURIComponent(liste); + m = '?c=de.uhilger.filecms.api.FileMgr&m=copyFiles&p=' + self.cutCopySrcDir + '&p=' + self.pfad + '&p=' + encodeURIComponent(self.cutCopyFiles); + } + var u = '../svc' + m; + self.fm_get(u, "text", function(resp) { + // console.log('deleteFiles gab folgendes zurueck: ' + resp); + self.fm_get_list(self.pfad); + }); + }; + this.fm_del_files = function() { + var liste = self.fm_gewaehlte_dateien(); + var m = '?c=de.uhilger.filecms.api.FileMgr&m=deleteFiles&p=' + self.pfad + '&p=' + encodeURIComponent(liste); + var u = '../svc' + m; + self.fm_get(u, "text", function(resp) { + // console.log('deleteFiles gab folgendes zurueck: ' + resp); + self.fm_get_list(self.pfad); + }); + }; /* ---- codemirror editor handling -------- */ -- Gitblit v1.9.3