From 6648a811dfdb4cbe432dae59f373b5a9df28e513 Mon Sep 17 00:00:00 2001
From: ulrich
Date: Mon, 11 Jan 2021 17:25:22 +0000
Subject: [PATCH] ui2: Ordner oeffnen und Datei waehlen hinzugefuegt

---
 web/ui2/js/app.js  |  106 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/ui2/index.html |    1 
 web/ui2/stile.css  |   11 +++++
 3 files changed, 116 insertions(+), 2 deletions(-)

diff --git a/web/ui2/index.html b/web/ui2/index.html
index 58ea97b..15f4a3a 100644
--- a/web/ui2/index.html
+++ b/web/ui2/index.html
@@ -61,7 +61,6 @@
     <script src="/jslib/moment/moment-with-locales.min.js"></script>
     <script src="/jslib/numeral/numeral.min.js"></script>    
     <script src="js/app-menu.js"></script>
-    <script src="js/vorlagen.js"></script>
     <script src="js/data.js"></script>
     <script src="js/app.js"></script>
     <script>
diff --git a/web/ui2/js/app.js b/web/ui2/js/app.js
index d194768..c618b1d 100644
--- a/web/ui2/js/app.js
+++ b/web/ui2/js/app.js
@@ -150,11 +150,83 @@
     dlg.innerHTML = '';
   };
   
+  /*
   this.html_zeigen = function(html) {
         // was mit dem html getan werden soll..
         var elem = document.querySelector('#dateien');
         elem.innerHTML = html;
+        $('.figure').click(fm_dateiwahl);
   };
+  */
+ 
+  this.fm_dateiwahl = function(ev) {
+    var elem = ev.target;
+    //console.log(elem.nodeName);
+    //var elem = this;
+    //console.log('dateiwahl nach click, event shift: ' + ev.shiftKey + ", event ctrl: " + ev.ctrlKey);
+    if(self.modus == 'kacheln') {
+      // Kacheln
+      if(elem.classList.contains("icon-folder")) {
+        //console.log('contains icon-folder');
+        if(/*ev.shiftKey || */ ev.ctrlKey) {
+          //$(elem).find('.dateiname').addClass('datei-gewaehlt');
+          elem.querySelector('.dateiname').classList.add('datei-gewaehlt');
+        } else {
+          var ordner = elem.parentElement.querySelector('.dateiname').textContent.trim();
+          //console.log('ordner ' + ordner);
+          if(self.pfad.length > 0) {
+            self.pfad = self.pfad + '/' + ordner;
+          } else {
+            self.pfad = ordner;
+          }
+          self.fm_get_list(self.pfad);
+        }
+      } else if(elem.classList.contains('datei')) {
+        //console.log('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');
+          }        
+        }
+        //$(elem).find('.dateiname').addClass('datei-gewaehlt');
+        var par = elem.parentElement;
+        //console.log(par.nodeName);
+        par.querySelector('.dateiname').classList.add('datei-gewaehlt');
+      } else {
+        //console.log('kein folder oder file...');
+      }
+    } else {
+      // Liste NOCH NEU MACHEN OHNE jQuery, wenn Liste implementiert ist
+      if(elem.querySelector('.datei-elem').children(0).hasClass('icon-doc-text-inv')) {
+        // Datei
+        if(/*ev.shiftKey || */ ev.ctrlKey) {
+          // mehrere Dateien sollen gewaehlt werden
+        } else {
+          document.querySelector('.table-info').classList.remove('table-info');
+          document.querySelector('.datei-gewaehlt').classList.remove('datei-gewaehlt');
+        }
+        elem.classList.add('table-info');
+        elem.querySelector('.dateiname').classList.add('datei-gewaehlt');
+      } else {
+        // Ordner
+        if(/*ev.shiftKey || */ ev.ctrlKey) {
+          elem.children[0].classList.add('datei-gewaehlt');
+        } else {
+          var ordner = elem.querySelector('.dateiname').textContent;
+          if(self.pfad.length > 0) {
+            self.pfad = self.pfad + '/' + ordner;
+          } else {
+            self.pfad = ordner;
+          }
+          self.fm_get_list(pfad);
+        }
+      }   
+    }
+  };
+ 
   
   this.fm_render_list = function (fl) {
     if (self.modus == 'kacheln') {
@@ -164,7 +236,14 @@
       
       //html_erzeugen = function(vurl, inhalt, cb)       
       
-      self.html_erzeugen("data/tpl/kacheln.tpl", fl, self.html_zeigen);
+      self.html_erzeugen("data/tpl/kacheln.tpl", fl, function(html) {
+        var elem = document.querySelector('#dateien');
+        elem.innerHTML = html;
+        //$('.figure').click(fm_dateiwahl);
+        self.addEvtListener('.figure', 'click', self.fm_dateiwahl);
+        
+        
+      });
       
       /*
       var template = $('#tpl-kacheln').html();
@@ -289,6 +368,31 @@
     });
   };
   
+  /* ----- Hilfsfunktionen ----- */
+
+  this.serialisieren = function(obj) {
+    return '{"' + obj.constructor.name + '":' + JSON.stringify(obj) + '}';
+  };
+  
+  this.addEvtListener = function(selector, eventName, func) {
+    
+    document.querySelectorAll(selector).forEach(elem => { elem.addEventListener(eventName, func); });
+    
+    /*
+    var elems = document.querySelectorAll(selector);
+    var index;
+    for (index = 0; index < elems.length; index++) {
+      elems[index].addEventListener(eventName, func);
+    }
+    */
+  };
+  
+  this.removeAllListeners = function(id) {
+    var el = document.getElementById(id);
+    elClone = el.cloneNode(true);
+    el.parentNode.replaceChild(elClone, el);
+  }; // https://stackoverflow.com/questions/19469881/remove-all-event-listeners-of-specific-type
+
   /* ---- Vorlagen ---- */
 
   this.html_erzeugen = function(vurl, inhalt, cb) {
diff --git a/web/ui2/stile.css b/web/ui2/stile.css
index e3ee310..9152d5b 100644
--- a/web/ui2/stile.css
+++ b/web/ui2/stile.css
@@ -79,6 +79,12 @@
   padding: 0.5em;
 }
 
+.zentrum-liste {
+  display: flex;
+  flex-flow: row;
+  flex-wrap: wrap;
+}
+
 /*
   Anmerkungen:
   1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl.
@@ -136,6 +142,11 @@
   color: #b8b8b8;
 }
 
+.datei-gewaehlt {
+  background-color: lightblue;
+}
+
+
 /* für app-menu */
 
 

--
Gitblit v1.9.3