web/ui/index.html | ●●●●● patch | view | raw | blame | history | |
web/ui/stile.css | ●●●●● patch | view | raw | blame | history | |
web/ui/ui.js | ●●●●● patch | view | raw | blame | history |
web/ui/index.html
@@ -11,12 +11,34 @@ <link rel="stylesheet" type="text/css" href="stile.css"> <script id="tpl-kacheln" type="x-tmpl-mustache"> {{#files}} <figure class="figure datei-figure text-center text-warning align-top"> <figure class="figure datei-figure text-center text-warning align-top datei-elem"> <i class="fa {{ typeClass }} fa-3x"></i> <figcaption class="figure-caption">{{ fileName }}</figcaption> <figcaption class="figure-caption dateiname">{{ fileName }}</figcaption> </figure> {{/files}} </script> <script id="tpl-liste" type="x-tmpl-mustache"> <table class="table table-hover table-sm table-responsive tableBodyScroll"> <thead> <tr> <th colspan="2">Name</th> <th>Größe</th> <th>Art</th> <th>geändert</th> </tr> </thead> <tbody> {{#files}} <tr class="datei-zeile"> <td class="datei-elem"><i class="fa {{ typeClass }}"></i></td> <td class="dateiname">{{ fileName }}</td> <td>{{ fr.length }}</td> <td> </td> <td>{{ fr.lastModified }}</td> </tr> {{/files}} </tbody> </table> </script> <script id="tpl-bcr" type="x-tmpl-mustache"> {{#files}} @@ -27,8 +49,8 @@ <span class="breadcrumb-item active">{{ fName }}</span> </script> <script id="tpl-bcr3" type="x-tmpl-mustache"> <div class="pull-right align-middle"> <i class="fa fa-th-large"></i> <div id="ansicht" class="pull-right align-middle"> <i class="fa fa-th-list"></i> </div> </script> </head> @@ -42,14 +64,14 @@ <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Datei</a> <div class="dropdown-menu"> <a id="newTextFile" class="dropdown-item" href="#">Neue Text-Datei..</a> <a class="dropdown-item" href="#">Neues Dokument..</a> <a class="dropdown-item disabled" href="#">Neues Dokument..</a> <a id="newFolder" class="dropdown-item" href="#">Neuer Ordner..</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Ansehen als Code</a> <a class="dropdown-item" href="#">Ansehen als Dokument</a> <a class="dropdown-item disabled" href="#">Ansehen als Code</a> <a class="dropdown-item disabled" href="#">Ansehen als Dokument</a> <div class="dropdown-divider"></div> <a id="editTextFile" class="dropdown-item" href="#">Bearbeiten als Code</a> <a class="dropdown-item" href="#">Bearbeiten als Dokument</a> <a class="dropdown-item disabled" href="#">Bearbeiten als Dokument</a> <div class="dropdown-divider"></div> <a id="saveFile" class="dropdown-item" href="#">Speichern</a> <div class="dropdown-divider"></div> @@ -118,7 +140,9 @@ <div id="dateiansicht"> <!-- Breadcrumb Start --> <div class="zentrum-bc"> <nav class="breadcrumb" id="bcnav"> <nav class="breadcrumb mr-5" id="bcnav"> <!-- <a class="breadcrumb-item" href="#">Home</a> <a class="breadcrumb-item" href="#">Library</a> <a class="breadcrumb-item" href="#">Data</a> @@ -126,11 +150,15 @@ <div class="pull-right align-middle"> <i class="fa fa-th-large"></i> </div> --> </nav> </div> <!-- Breadcrumb Ende --> <!-- Dateikacheln Start --> <div class="zentrum-liste" id="dateien"> <!-- <figure class="figure datei-figure text-center text-warning align-top"> <i class="fa fa-folder fa-3x"></i> <figcaption class="figure-caption">Kurzer Text</figcaption> @@ -155,6 +183,8 @@ <i class="fa fa-folder fa-3x"></i> <figcaption class="figure-caption">Wort3</figcaption> </figure> --> </div> <!-- Dateikacheln Ende --> </div> web/ui/stile.css
@@ -75,8 +75,13 @@ } .datei-figure { width: 6em; cursor: pointer; } .datei-gewaehlt { color: darkslateblue; } #ansicht { cursor: pointer; } web/ui/ui.js
@@ -1,5 +1,6 @@ var cm; var pfad = ''; var modus = 'kacheln'; function fm_init() { $('.codeeditor-space').hide(); @@ -15,6 +16,31 @@ $('#logout').click(fm_logout); fm_get_login(); fm_get_list(''); } function fm_ansicht_umschalten() { //console.log('hat th-list: ' + $('#ansicht').children(0).hasClass('fa-th-list')); //console.log('hat th-large: ' + $('#ansicht').children(0).hasClass('fa-th-large')); if($('#ansicht').children(0).hasClass('fa-th-list')) { $('#ansicht').children(0).addClass('fa-th-large'); $('#ansicht').children(0).removeClass('fa-th-list'); modus = 'liste'; } else { $('#ansicht').children(0).addClass('fa-th-list'); $('#ansicht').children(0).removeClass('fa-th-large'); modus = 'kacheln'; } fm_get_list(pfad); } function fm_set_modus() { if(modus == 'kacheln') { $('#ansicht').children(0).addClass('fa-th-list'); $('#ansicht').children(0).removeClass('fa-th-large'); } else { $('#ansicht').children(0).addClass('fa-th-large'); $('#ansicht').children(0).removeClass('fa-th-list'); } } function fm_menu_neue_textdatei() { @@ -36,7 +62,10 @@ function fm_dateiwahl() { var elem = this; //console.log('datei gewaehlt ' + $(elem).text().trim()); //console.log('kachel datei gewaehlt ' + $(elem).text().trim()); //console.log('liste datei gewaehlt ' + $(elem).children(1).text()); //console.log('dateiname: ' + $(elem).find('.dateiname').text()); if(modus == 'kacheln') { if($(elem).children(0).hasClass('fa-folder')) { var ordner = $(elem).text().trim(); if(pfad.length > 0) { @@ -50,6 +79,22 @@ $(elem).children(0).addClass('datei-gewaehlt'); } else { //console.log('kein folder oder file...'); } } else { if($(elem).find('.datei-elem').children(0).hasClass('fa-file-o')) { $('.table-info').removeClass('table-info'); $(elem).addClass('table-info'); $('.datei-gewaehlt').removeClass('datei-gewaehlt'); $(elem).find('.dateiname').addClass('datei-gewaehlt'); } else { var ordner = $(elem).find('.dateiname').text(); if(pfad.length > 0) { pfad = pfad + '/' + ordner; } else { pfad = ordner; } fm_get_list(pfad); } } } @@ -137,11 +182,34 @@ } function fm_render_list(fl) { //if($('#ansicht').children(0).hasClass('fa-th-list')) { if(modus == 'kacheln') { // Kachelansicht 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 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); } } // http://localhost:8079/file-cms/svc?c=de.uhilger.filecms.api.FileMgr&f=JSONNICE&m=list&p= function fm_get_list(relPfad) { $('#ansicht').attr('onclick','').unbind('click'); var m = '?c=de.uhilger.filecms.api.FileMgr&m=list&p=' + relPfad; var u = '../svc' + m; fm_get(u, "json", function(resp) { if(resp.List[0].FileRef !== undefined) { var files = new Array(); if(resp.List[0].FileRef instanceof Array) { @@ -152,16 +220,12 @@ files.push(new FileRef(resp.List[0].FileRef)); } var fl = new FileList(files); var template = $('#tpl-kacheln').html(); Mustache.parse(template); // optional, speeds up future uses $('.figure').attr('onclick','').unbind('click'); $('#dateien').empty(); $('#dateien').html(Mustache.render(template, fl)); $('.figure').click(fm_dateiwahl); fm_render_list(fl); } else { $('#dateien').empty(); } // Breadcrumb-Ansicht var template; $('.breadcrumb-item').attr('onclick','').unbind('click'); $('#bcnav').empty(); @@ -206,9 +270,11 @@ template = $('#tpl-bcr2').html(); Mustache.parse(template); // optional, speeds up future uses $('#bcnav').append(Mustache.render(template, dirList[0])); $('#bcnav').append($('#tpl-bcr3').html()); } $('.breadcrumb-item').click(fm_bc_click); $('#ansicht').click(fm_ansicht_umschalten); fm_set_modus(); }); } @@ -338,11 +404,19 @@ this.fr = obj; this.typeClass = function() { if(modus == 'kacheln') { if(self.fr.isDirectory) { return 'fa-folder'; } else { return 'fa-file'; } } else { if(self.fr.isDirectory) { return 'fa-folder'; } else { return 'fa-file-o'; } } }; this.fileName = function() {