From 10d3d35ec5891c1f7d549ef49b9831394db2d792 Mon Sep 17 00:00:00 2001 From: ulrich <not disclosed> Date: Tue, 21 Feb 2017 15:44:39 +0000 Subject: [PATCH] Kacheln / Liste umschaltbar --- web/ui/index.html | 54 ++++++++++++++---- web/ui/stile.css | 5 + web/ui/ui.js | 118 ++++++++++++++++++++++++++++++++------- 3 files changed, 143 insertions(+), 34 deletions(-) diff --git a/web/ui/index.html b/web/ui/index.html index b26a150..5c3eb16 100644 --- a/web/ui/index.html +++ b/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}} - + {{/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> + --> + + </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> diff --git a/web/ui/stile.css b/web/ui/stile.css index 45a42ec..7bcc830 100644 --- a/web/ui/stile.css +++ b/web/ui/stile.css @@ -75,8 +75,13 @@ } .datei-figure { width: 6em; + cursor: pointer; } .datei-gewaehlt { color: darkslateblue; +} + +#ansicht { + cursor: pointer; } \ No newline at end of file diff --git a/web/ui/ui.js b/web/ui/ui.js index f4dcedf..e24ebdb 100644 --- a/web/ui/ui.js +++ b/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,20 +62,39 @@ function fm_dateiwahl() { var elem = this; - //console.log('datei gewaehlt ' + $(elem).text().trim()); - if($(elem).children(0).hasClass('fa-folder')) { - var ordner = $(elem).text().trim(); - if(pfad.length > 0) { - pfad = pfad + '/' + ordner; + //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) { + pfad = pfad + '/' + ordner; + } else { + pfad = ordner; + } + fm_get_list(pfad); + } else if($(elem).children(0).hasClass('fa-file')) { + $('.datei-gewaehlt').removeClass('datei-gewaehlt'); + $(elem).children(0).addClass('datei-gewaehlt'); } else { - pfad = ordner; + //console.log('kein folder oder file...'); } - fm_get_list(pfad); - } else if($(elem).children(0).hasClass('fa-file')) { - $('.datei-gewaehlt').removeClass('datei-gewaehlt'); - $(elem).children(0).addClass('datei-gewaehlt'); } else { - //console.log('kein folder oder file...'); + 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(); @@ -205,10 +269,12 @@ pfad = ''; template = $('#tpl-bcr2').html(); Mustache.parse(template); // optional, speeds up future uses - $('#bcnav').append(Mustache.render(template, dirList[0])); + $('#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,10 +404,18 @@ this.fr = obj; this.typeClass = function() { - if(self.fr.isDirectory) { - return 'fa-folder'; + if(modus == 'kacheln') { + if(self.fr.isDirectory) { + return 'fa-folder'; + } else { + return 'fa-file'; + } } else { - return 'fa-file'; + if(self.fr.isDirectory) { + return 'fa-folder'; + } else { + return 'fa-file-o'; + } } }; -- Gitblit v1.9.3