Ankündigung

Einklappen
Keine Ankündigung bisher.

Alles Müll ...

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    [Codebeispiel] Alles Müll ...

    Hallo,

    da ich derzeit über den Kalender in der smartVISU hauptsächlich die Mülltermine anzeige, aber das 'lange' Anzeigeformat schon immer als störend empfunden habe, habe ich eben mal 'quick & dirty' eine alternative Anzeige programmiert:

    muell.png

    Der Code ist sicher nicht schön, aber funktional (jQuery und ich sind immer noch keine Freunde).

    Wer es verwenden möchte:
    • muell.html entweder im Deinem Pages-Verzeichnis oder unter Widgets erstellen, Code siehe unten.
    • Aufruf wie folgt:
      Code:
      	{% import "muell.html" as muell %}
      	{{ muell.list('muelltermine', 'Mülltermine', 50, 5, 3) }}
    • Parameter (Nr. 2 bis 5 können auch weggelassen werden, dann wird der Standard genommen):
      1/ Eindeutige ID
      2/ Überschrift ("")
      3/ Anzahl der insgesamt aus dem Kalender zu lesenden Termine (50)
      4/ Anzahl der anzuzeigenden Mülltermine (5)
      5/ Refresh-Intervall (1h)
    • Es werden genau die Termine gelistet, die im Kalender die folgenden Titel/Namen haben: Gelbe Tonne, Braune Tonne, Grüne Tonne, Blaue Tonne, Schwarze Tonne.
    Was noch zu tun ist:
    • Herausfinden, ob/wie statt einer festen Anzahl von Terminen ein bestimmter Zeitraum ausgelesen werden kann (z.B.: Hole die nächsten zwei Wochen statt der nächsten 50 Termine). Das calendar-Plugin scheint immerhin standardmäßig die nächsten 4 Wochen zu holen, egal wie viele Termine angegeben werden.
    • Mit den Limitierungen des calendar-Plugins beschäftigen:
      - scheinbar keine Übertragung des Kalendernamens eines Termins
      (über Kalendernamen könnte man anzuzeigende Termine ein-/ausschließen),
      - scheinbar keine Übertragung der am Termin hängenden Kategorien
      (könnte ebenfalls zum Filtern von Terminen benutzt werden).
    Wie gesagt: Falls noch jemand anders obiges als brauchbar empfindet - frohes Kopieren!

    UND (grins, den kann ich mir nicht verkneifen): Der Code muss sicher erweitert werden, wenn das hier durchsetzt.

    /tom


    Edit 05.01.2017: .zip-Attachment für widgets/muell.html gelöscht, Code des Widgets nach letztem Bearbeitungsstand wie folgt:

    HTML-Code:
    /**
    * -----------------------------------------------------------------------------
    * @package     smartVISU
    * @author      Martin Gleiß
    * @copyright   2012 - 2015
    * @modifier    (2016) Tom Bombadil of KNX User Forum, aka René Jahncke
    * @license     GPL [http://www.gnu.de]
    * -----------------------------------------------------------------------------
    */
    
    /**
    * Displays a tiny trash list
    *
    * @param unique id for this widget
    * @param a title to display
    * @param the number of calendar-entries to parse, default 100
    * @param the number of displayed columns, default 5
    * @param the refresh interval for this widget (using relative time format), default 1h
    */
    {% macro list(id, title, count, cols, repeat) %}
    
        {% set uid = uid(page, id) %}
    
        <div id="{{ uid }}" data-widget="calendar.list" class="calendarlist" data-repeat="{{ repeat|default('1h') }}">
            {% if title %} <h2>{{ title }}</h2> {% endif %}
            <ul data-role="listview" style='width:100%;align:center;overflow:hidden;'>
            </ul>
        </div>
    
        <script type="text/javascript">
    
            $('#{{ page }}').on('pagecreate', function (event, ui) {
                $('#{{ uid }}').on( {
                    'init' : function (event) {
    
                        var uid = this.id;
    
                        var heute = new Date();
                        var morgen = new Date(heute.getTime()+(1000 * 60 * 60 * 24 * 1));
    
                        var spalte = 0;
                        var muell_html = "<table class ='ui-btn-up-a' style='width:100%;text-align:center;overflow:hidden;'><tr>";
    
                        var heute_tag = heute.getDate();
                        if (heute_tag < 10) heute_tag = "0" + heute_tag;                  
                        var heute_monat = heute.getMonth() + 1;
                        if (heute_monat < 10) heute_monat = "0" + heute_monat;                
                        heute = heute_tag + '.' + heute_monat + '.';                  
    
                        var morgen_tag = morgen.getDate();
                        if (morgen_tag < 10) morgen_tag = "0" + morgen_tag;                
                        var morgen_monat = morgen.getMonth() + 1;
                        if (morgen_monat < 10) morgen_monat = "0" + morgen_monat;                  
                        morgen = morgen_tag + '.' + morgen_monat + '.';                
    
                        $.getJSON('lib/calendar/service/{{ config_calendar_service }}.php?url={{ config_calendar_url|url_encode() }}&count={{ count|default(25) }}', function (data) {
    
                            for (var i in data) {
    
                                if (spalte === {{ cols|default(5) }}) break;
    
                                switch (data[i].title) {
                                    case 'Gelbe Tonne':     data[i].color='#FFFF00'; break;
                                    case 'Blaue Tonne':     data[i].color='#0000FF'; break;
                                    case 'Schwarze Tonne':  data[i].color='#000000'; break;
                                    case 'Braune Tonne':    data[i].color='#993300'; break;
                                    case 'Grüne Tonne':     data[i].color='#008000'; break;
                                    default:                data[i].color='#FF0000';
                                }
    
                                if (data[i].color != '#FF0000') {
                                    data[i].weekday = data[i].weekday.substring(0,2);
                                    data[i].date = data[i].period.substring(0,6);
                                    muell_html += "<td";
                                    if (data[i].date == heute)  muell_html += " style='border-bottom: red 10px inset; overflow: hidden;'";
                                    if (data[i].date == morgen) muell_html += " style='border-bottom: orange 10px inset; overflow: hidden;'";
                                    muell_html += "><svg xmlns='http://www.w3.org/2000/svg' viewBox='260 100 250 220' width='64px' height='64px'><g><path d='m316 129l124-12 0 26 -124 5Z' fill='" + data[i].color + "'/>"
                                    muell_html += "<path d='m329 242l14 0c30-10 70 18 47 50l0 8 31 0 7-147 -99 0' fill='" + data[i].color + "'/>"
                                    muell_html += "<ellipse cx='356' cy='275' rx='28' ry='26' style='stroke-width:0.5;stroke:#333;fill:" + data[i].color + "'/></g></svg>"
                                    muell_html += "<div class='ui-li-heading'>" + data[i].weekday + ' ' + data[i].date + '</div></td>';
                                    spalte += 1;
                                }
    
                            }
    
                            muell_html += '</tr></table>';
    
                            $('#' + uid + ' ul').html(muell_html).trigger('prepare').listview('refresh').trigger('redraw');
    
                        })
                        .error(notify.json);
                    },
    
                    'repeat': function(event) {
                        $('#{{ uid }}').trigger('init');
                    }
                });
            });
        </script>
    {% endmacro %}
    Zuletzt geändert von Tom Bombadil; 05.01.2017, 22:02.

    #2
    Hallo,

    ich habe dein Widget erweitert. Ich möchte, das am Vortag ein oranger Balken unter dem Termin erscheint, am Abholtag selber ein roter.
    Das Ergebnis schaut bei mir folgendermaßen aus: Abfallkalender.png


    Bei zwei Terminen an direkt aufeinander folgenden Tagen, wird nur der erste Balken sauber angezeigt.
    Woran kann das liegen?

    hier mein Code:
    Code:
    <script type = "text/javascript">
    
        $('#{{ page }}').on('pagecreate', function (event, ui) {
            $('#{{ uid }}').on({
                'init': function (event) {
    
                    var uid = this.id;
    
                    var heute = new Date();
                    var heute_tag = heute.getDate();
                    var heute_monat = heute.getMonth() + 1;
                    var morgen = new Date(heute.getTime() + (1000 * 60 * 60 * 24 * 1));
                    var morgen_tag = morgen.getDate();
                    var morgen_monat = morgen.getMonth() + 1;
                    var spalte = 0;
                    var muell_html = "<table class ='ui-btn-up-a' width=100% align=center><tr>";
    
                    if (heute_tag < 10)
                        heute_tag = "0" + heute_tag;
                    if (heute_monat < 10)
                        heute_monat = "0" + heute_monat;
                    heute = heute_tag + '.' + heute_monat + '.';
    
                    if (morgen_tag < 10)
                        morgen_tag = "0" + morgen_tag;
                    if (morgen_monat < 10)
                        morgen_monat = "0" + morgen_monat;
                    morgen = morgen_tag + '.' + morgen_monat + '.';
    
                    $.getJSON('lib/calendar/service/{{ config_calendar_service }}.php?url={{ config_calendar_url|url_encode() }}&count={{ count|default(25) }}', function (data) {
    
                        for (var i in data) {
    
                            if (spalte === { {
                                    cols | default(5)
                                }
                            })
                                break;
    
                            switch (data[i].title) {
                            case 'Gelber Sack':
                                data[i].color = '#FFFF00';
                                break;
                            case 'Papiertonne':
                                data[i].color = '#0000FF';
                                break;
                            case 'Restmüll':
                                data[i].color = '#000000';
                                break;
                            case 'Biotonne':
                                data[i].color = '#088A08';
                                break;
                            case 'Sperrmüll':
                                data[i].color = '#B404AE';
                                break;
                            case 'Problemmüll':
                                data[i].color = '#FF8000';
                                break;
                            default:
                                data[i].color = '#FF0000';
                            }
    
                            if (data[i].color != '#FF0000') {
                                data[i].weekday = data[i].weekday.substring(0, 2);
                                data[i].date = data[i].period.substring(0, 6);
                                if (data[i].date == morgen)
                                    muell_html += "<td style='border-bottom: orange 15px inset;'>";
                                if (data[i].date == heute)
                                    muell_html += "<td style='border-bottom: red 15px inset;'>";
                                else
                                    muell_html += "<td>";
                                muell_html += "<svg xmlns='http://www.w3.org/2000/svg' viewBox='260 100 250 220' width='64px' height='64px'><g><path d='m316 129l124-12 0 26 -124 5Z' fill='" + data[i].color + "'/>"
                                muell_html += "<path d='m329 242l14 0c30-10 70 18 47 50l0 8 31 0 7-147 -99 0' fill='" + data[i].color + "'/>"
                                muell_html += "<ellipse cx='356' cy='275' rx='28' ry='26' style='stroke-width:0.5;stroke:#333;fill:" + data[i].color + "'/></g></svg>"
                                muell_html += "<div class='ui-li-heading'>" + data[i].weekday + ' ' + data[i].date + '</div></td>';
                                spalte += 1;
                            }
    
                        }
    
                        muell_html += '</tr></table>';
    
                        $('#' + uid + ' ul').html(muell_html).trigger('prepare').listview('refresh').trigger('redraw');
    
                    })
                    .error(notify.json);
                },
    
                'repeat': function (event) {
                    $('#{{ uid }}').trigger('init');
                }
            });
        });
    </script>
    Würde mich sehr freuen, wenn mir jemand helfen kann.

    Grüße
    Thomas
    Zuletzt geändert von bmx; 02.01.2017, 16:34.

    Kommentar


      #3
      Gute Frage - zwei hintereinander befindliche Zellen rot unterstreichen geht auf alle Fälle, hatte diesen Fall hier neulich. Ich schau es mir heute Abend mal etwas detaillierter an ...
      /tom

      Kommentar


        #4
        Hier mal ein vorher/nachher Bild: vorher_nachher.png



        Recht so?

        Code:
        /**
        * Displays the trash list
        *
        * @param unique id for this widget
        * @param a title to display
        * @param the number of calendar-entries to parse, default 100
        * @param the number of displayed columns, default 5
        * @param the refresh interval for this widget (using relative time format), default 1h
        */
        {% macro list(id, title, count, cols, repeat) %}
        
            {% set uid = uid(page, id) %}
        
            <div id="{{ uid }}" data-widget="calendar.list" class="calendarlist" data-repeat="{{ repeat|default('1h') }}">
                {% if title %} <h2>{{ title }}</h2> {% endif %}
                <ul data-role="listview" style='width:100%;align:center;overflow:hidden;'>
                </ul>
            </div>
        
            <script type="text/javascript">
        
                $('#{{ page }}').on('pagecreate', function (event, ui) {
                    $('#{{ uid }}').on( {
                        'init' : function (event) {
        
                            var uid = this.id;
        
                            var heute = new Date();
                            var morgen = new Date(heute.getTime()+(1000 * 60 * 60 * 24 * 1));
        
                            var spalte = 0;
                            var muell_html = "<table class ='ui-btn-up-a' style='width:100%;align:center;overflow:hidden;'><tr>";
        
                            var heute_tag = heute.getDate();
                            if (heute_tag < 10) heute_tag = "0" + heute_tag;                    
                            var heute_monat = heute.getMonth() + 1;
                            if (heute_monat < 10) heute_monat = "0" + heute_monat;                    
                            heute = heute_tag + '.' + heute_monat + '.';                    
        
                            var morgen_tag = morgen.getDate();
                            if (morgen_tag < 10) morgen_tag = "0" + morgen_tag;                    
                            var morgen_monat = morgen.getMonth() + 1;
                            if (morgen_monat < 10) morgen_monat = "0" + morgen_monat;                    
                            morgen = morgen_tag + '.' + morgen_monat + '.';                    
        
                            $.getJSON('lib/calendar/service/{{ config_calendar_service }}.php?url={{ config_calendar_url|url_encode() }}&count={{ count|default(25) }}', function (data) {
        
                            for (var i in data) {
        
                                if (spalte === {{ cols|default(5) }}) break;
        
                                switch (data[i].title) {
                                    case 'Gelbe Tonne':        data[i].color='#FFFF00'; break;
                                    case 'Blaue Tonne':     data[i].color='#0000FF'; break;
                                    case 'Schwarze Tonne':     data[i].color='#000000'; break;
                                    case 'Braune Tonne':     data[i].color='#993300'; break;
                                    case 'Grüne Tonne':     data[i].color='#008000'; break;
                                    default:                data[i].color='#FF0000';
                                }
        
                                if (data[i].color != '#FF0000') {
                                    data[i].weekday = data[i].weekday.substring(0,2);
                                    data[i].date = data[i].period.substring(0,6);
                                    muell_html += "<td";
                                    if (data[i].date == heute)    muell_html += " style='border-bottom: red 10px inset; width: 100% !important; overflow: hidden;'";
                                    if (data[i].date == morgen) muell_html += " style='border-bottom: orange 10px inset; width: 100% !important; overflow: hidden;'";
                                    muell_html += "><svg xmlns='http://www.w3.org/2000/svg' viewBox='260 100 250 220' width='64px' height='64px'><g><path d='m316 129l124-12 0 26 -124 5Z' fill='" + data[i].color + "'/>"
                                    muell_html += "<path d='m329 242l14 0c30-10 70 18 47 50l0 8 31 0 7-147 -99 0' fill='" + data[i].color + "'/>"
                                    muell_html += "<ellipse cx='356' cy='275' rx='28' ry='26' style='stroke-width:0.5;stroke:#333;fill:" + data[i].color + "'/></g></svg>"
                                    muell_html += "<div class='ui-li-heading'>" + data[i].weekday + ' ' + data[i].date + '</div></td>';
                                    spalte += 1;
                                }
        
                            }
        
                            muell_html += '</tr></table>';
        
                            $('#' + uid + ' ul').html(muell_html).trigger('prepare').listview('refresh').trigger('redraw');
        
                            })
                                .error(notify.json);
                        },
        
                        'repeat': function(event) {
                            $('#{{ uid }}').trigger('init');
                        }
                    });
                });
            </script>
        {% endmacro %}


        Viel Spass! (wäre schön, wenn es noch jemand testet, hier läuft's)

        /tom

        Edit: Danke für's Nachformatieren bei #2, Bernd - ich hab's heute in der Pause mangels Einrückungen aufgegeben.
        Angehängte Dateien
        Zuletzt geändert von Tom Bombadil; 02.01.2017, 18:54.

        Kommentar


          #5
          Hallo,

          vielen Dank für die Mühe!
          Ja genau so wollte ich es.
          Bei mir hat es aber mit deinem Code etwas komisch ausgesehen. Der erste Termin war riesig, etwas 5 mal so groß wie die anderen. Ich habe diesen Teil
          width: 100% !important
          entfernt. Jetzt passt alles.
          Grüße Thomas


          Kommentar


            #6
            Kann an meinem Skin liegen, ich verwende ein weiter angepasstes 'Quad' Layout. Danke für den Hinweis!
            /tom

            Kommentar


              #7
              Kann ich bestätigen, musste auch den Teil
              Code:
              width: 100% !important
              entfernen damit die Anzeige passt.
              Ausserdem hab ich die folgende Zeile ebenfalls noch abgeändert:
              Code:
              var muell_html = "<table class ='ui-btn-up-a' style='width:100%;align:center;overflow:hidden;'><tr>";
              zu:
              Code:
              var muell_html = "<table class ='ui-btn-up-a' style='width:100%;text-align:center;overflow:hidden;'><tr>";
              damit die Symbole mittig ausgerichtet werden.

              Was mir noch aufgefallen ist, bei den Fotos von Tom Bombadil sind die Unterstriche in Rot und Orange kräftiger, bei mir sehen die Farben eher aus wie Rosa und Gelb,
              Hab mit den Farbcode bereits experimentiert, aber ohne erfolg, wird das mit einer CSS übersteuert ?
              Angehängte Dateien

              Kommentar


                #8
                Nein, hab nur original 'red' und 'orange' verwendet, siehe Quellcode. Könnte aber auch mit dem Hintergrund im Quad-Design zusammenhängen. Notfalls in den beiden IF-Anweisungen einfach RGB verwenden, sollte auch klappen:

                Code:
                if (data[i].date == heute) muell_html += " style='border-bottom: red 10px inset; width: 100% !important; overflow: hidden;'";
                if (data[i].date == morgen) muell_html += " style='border-bottom: orange 10px inset; width: 100% !important; overflow: hidden;'";


                /tom

                Kommentar


                  #9
                  Danke, liegt wohl am Firefox. Beim chrome browser werden die Farben richtig angezeigt.

                  Kommentar


                    #10
                    Gibt es da eine Steueranweisung á la mozilla-xxx, einen anderen Farbcode zu verwenden? Wollte zwar eigentlich kein extra css, aber wenn's denn sein muss ...

                    /tom

                    Edit: Habe mal den Code in #1 angepasst, er enthält jetzt den letzten Bearbeitungsstand inkl. Eurer Kommentare - Danke Thomas & Mike!
                    Zuletzt geändert von Tom Bombadil; 05.01.2017, 22:03.

                    Kommentar


                      #11
                      Moin Tom,

                      danke für das super Widget.
                      Läuft direkt out-of-the-box.

                      Zitat von Tom Bombadil Beitrag anzeigen
                      [*]Mit den Limitierungen des calendar-Plugins beschäftigen:
                      - scheinbar keine Übertragung des Kalendernamens eines Termins
                      (über Kalendernamen könnte man anzuzeigende Termine ein-/ausschließen),
                      - scheinbar keine Übertragung der am Termin hängenden Kategorien
                      (könnte ebenfalls zum Filtern von Terminen benutzt werden).
                      Mit diesem Problem habe ich mich auch etwas beschäftigt und eine für mich tragbare Lösung gefunden.
                      Mich hat es nämlich gestört, das in der Liste der nächsten Termine die Mülltonnen drin stehen. Dafür gibt es ja dein tolles Widget. Da brauche ich die Mülltonnen nicht zusätzlich in der Terminübersicht.
                      Erst mal die Randbedingungen:
                      1) Ich nutze das OwnCloud / NextCloud Plugin von nextCloud (ownCloud) Kalender per CalDAV einbinden
                      2) Ich habe in OwnCloud einen eigenen Benutzer "muell" für den Müllkalender angelegt.
                      3) Der Benutzer hat seinen eigenen Kalender der "personal" (default in OwnCloud 9) heißt.
                      Dann die Anpassungen in der SmartVISU:
                      Zeile 56 in deinem Widget geändert auf
                      Code:
                      $.getJSON('lib/calendar/service/{{ config_calendar_service }}.php?url={{ config_calendar_muell_url|url_encode() }}&count={{ count|default(25) }}', function (data) {
                      config.php im smartVISU Hauptverzeichnis um folgende Zeile erweitert:
                      Code:
                      define('config_calendar_muell_url', 'http://muell:Passwort@domain.tld/owncloud/remote.php/dav/calendars/muell/');
                      config.php den zusätzlichen Kalendernamen mitteilen:
                      Code:
                          define('config_calendar_name', 'personal,persönlich,pers%C3%B6nlich_shared_by_Benutzer1,pers%C3%B6nlich_shared_by_Benutzer2');
                      Die Funktionsweise dahinter scheint folgende zu sein.
                      Das NextCloud Widget ignoriert Benutzername und Passwort aus der config.php (jedenfalls wenn Benutzer und Passwort im Link übergeben werden.
                      Daher können der Benutzer für den eigentlichen Kalender und der für den Müllkalender unterschiedliche sein.
                      In der Variable config_calendar_name muss der Kalendername des Müllbenutzers mit aufgerufen werden.
                      Optimierungsbedarf:
                      Über den Benutzer Muell werden jetzt auch die anderen in config_calendar_name definierten Kalender abgefragt. Da dies natürlich durch fehlende Berechtigungen schief geht, werden in OwnCloud jedes mal Fehler ins Log geschrieben. Der Kalender auf den es ankommt (personal) wird allerdings sauber abgefragt. Daher kann ich bisher gut mit den Fehlermeldungen im Log leben.

                      Gruß, Sebastian
                      Zuletzt geändert von Bainit; 31.01.2017, 14:21.
                      Baustelle 2.0 (Detailprogrammierung und Restarbeiten)
                      Ruhri? -> Komm zum Stammtisch

                      Kommentar


                        #12
                        Cool, muss ich ausprobieren - klingt alles sehr plausibel und sehr schön 'um die Ecke gedacht'. Zum 'Optimierungsbedarf' hab ich ein paar Ideen, muss die aber erstmal ausprobieren. Ganz vielen Dank, Sebastian!!!

                        /tom

                        Kommentar


                          #13
                          Hallo,

                          ich habe auf einem Testsystem begonnen auf 2.9 umzusteigen.
                          Da scheint das widget nicht mehr zu funktionieren.
                          Muss etwas angepasst werden?

                          Danke für die Rückmeldung.

                          Kommentar


                            #14
                            Stefan hat eine überarbeitete/verbesserte Version in die 2.9 als 'calendar.waste' aufgenommen.
                            Es wird jetzt also kein separates Widget mehr benötigt.
                            /tom

                            Kommentar


                              #15
                              Prima. Hab's gefunden.
                              DANKE

                              Kommentar

                              Lädt...
                              X