Bearbeiten-Menue fertig, Stile verfeinert, Dateiauswahl vereinheitlicht, in...

ulrich

2021-01-17 39e714a17a2f21c37d5c3228eb8d563b3621eb8e

Bearbeiten-Menue fertig, Stile verfeinert, Dateiauswahl vereinheitlicht, in Arbeit: Ansehen oder Bearbeiten

 web/ui2/data/menu/datei.json

@@ -66,16 +66,6 @@
        "titel": "Schliessen",
        "umenue": false,
        "funktion": "app.fm_menu_datei_schliessen"
      },
      {
        "titel": "Nachricht 2",
        "umenue": false,
        "funktion": "app.message_2"
      },
      {
        "titel": "Info-Dialog zeigen",
        "umenue": false,
        "funktion": "app.info_dialog_zeigen"
      }
    ]
  }

 web/ui2/data/menu/edit.json

@@ -15,7 +15,7 @@
      {
        "titel": "Kopieren",
        "umenue": false,
        "verweis": "app.fm_menu_kopie"
        "funktion": "app.fm_menu_copy"
      },
      {
        "titel": "Einfügen",
@@ -30,7 +30,7 @@
      {
        "titel": "Löschen",
        "umenue": false,
        "verweis": "app.fm_menu_delete"
        "funktion": "app.fm_menu_delete"
      }
    ]
  }

 web/ui2/data/menu/nutzer.json

@@ -8,20 +8,20 @@
    },
    "inhalt": [
      {
        "titel": "Benachrichtigung 1",
        "umenue": false,
        "funktion": "app.message_1"
      },
      {
        "titel": "noch mehr",
        "umenue": true,
        "verweis": "untermenue-2.json"
      },
      {
        "titel": "Abmelden",
        "umenue": false,
        "funktion": "app.fm_logout"
      }
      },
      {
        "titel": "",
        "umenue": false,
        "funktion": ""
      },      
      {
        "titel": "Über..",
        "umenue": false,
        "funktion": "app.info_dialog_zeigen"
      }      
    ]
  }
}

 web/ui2/data/tpl/dlg-info.tpl

@@ -1,8 +1,8 @@
<div class="dlg-info">
  <span class="close-btn pointer-cursor">&#10006;</span>
  <div class="dlg-behaelter">
    <div class="dlg-info-app-titel">app-vorlage</div>
    <div class="dlg-info-app-info">Eine Vorlage f&uuml;r Apps von <a href='https://uhilger.de'>Ulrich Hilger</a>.</div>
    <div class="dlg-info-app-info">Weitere Infos im <a href='/gitblit/docs/web!app-vorlage.git'>Code-Repository</a>.</div>
    <div class="dlg-info-app-titel">Dateiverwaltung</div>
    <div class="dlg-info-app-info">Eine Anwendung von <a href='https://uhilger.de'>Ulrich Hilger</a>.</div>
    <div class="dlg-info-app-info">Weitere Infos im <a href='https://uhilger.de/gitblit/docs/file-cms.git'>Code-Repository</a>.</div>
  </div>
</div>

 web/ui2/data/tpl/liste.tpl

@@ -1,6 +1,6 @@
      <table class="table table-hover table-sm table-responsive tableBodyScroll">
        <thead>
          <tr>
          <tr class="datei-zeile-ueberschrift">
            <th colspan="2">Name</th>
            <th>Gr&ouml;&szlig;e</th>
            <th>Art</th>

 web/ui2/js/app.js

@@ -235,35 +235,84 @@
    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 ist noch nicht implementiert", 500);
  };
  
  /**
   * Es gibt vier Fälle:
   * 1. Datei, nicht ausgewählt
   * 2. Datei, ausgewählt
   * 3. Ordner, nicht ausgewählt
   * 4. Ordner, gewählt
   * 
   * Diese Fälle sind unterteilt in 
   * 1. Kachel-Modus
   * 2. Listenmodus
   * 
   * @param {type} ev
   * @returns {undefined}
   */
  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...');
      }
@@ -271,35 +320,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');
        }
      }   
    }
@@ -496,7 +564,7 @@
    console.log('fm_menu_cut');
    self.fm_cut_files();
  };
  this.fm_menu_kopie = function() {
  this.fm_menu_copy = function() {
    console.log('fm_menu_kopie');
    self.fm_copy_files();
  };
@@ -512,10 +580,10 @@
        self.dialog_schliessen();
      });
      document.querySelector('#speichern-btn').addEventListener('click', function() {
        self.fm_menu_datei_speichern(function() {
        //self.fm_menu_datei_speichern(function() {
          self.fm_del_files();
          self.dialog_schliessen();
        });
        //});
      });
    });
    /*

 web/ui2/stile.css

@@ -138,11 +138,13 @@
.dlg-behaelter {
  line-height: 1.6;
  padding: 0.4em;
  font-size: 1em;
}

.dlg-info {
  background-color: #dcf2fb; /* blau */ 
  /* background-color: #f5fbe3; */
  padding: 0.4em;
  font-size: 0.9em;  
}

/*
@@ -182,6 +184,19 @@
  text-align: center;
}

.datei-zeile {
  font-size: smaller;  
  cursor: pointer;
}

.datei-zeile:hover {
  background-color: #e5e5e5;
}

.datei-zeile-ueberschrift {
  font-size: smaller;  
}

.datei-gewaehlt {
  background-color: lightblue;
}