[FTUI][Widget Calview] Warn icon oder farbliche Markierung möglich?

[yersinia]

Cool @OdfFhem, das ging ja fix!
Es sieht soweit gut aus. Insbesondere das Definieren von CSS Klassen ist genial. Zumal man durch die ftui_custom.css durchaus eigene Klassen bilden kann.

Ich hatte für meinen Hintergrund des hbox-div-Containers noch border-radius: 4px; für die abgerundeten Ecken verwendet, man könnte noch padding-left: 1px; setzen, dann ist es links nicht so dran geklatscht (wirkt sich allerdings aber auf die Gesamtbreite aus).

Leider kann ich es nocht nicht im FTUI Umfeld testen - aber Klugscheißen.

Wichtig ist die CSS Hierarchie wenn man Klassen nutzt. Inline CSS (style=" ... ") überschreibt alles andere (Zeilen 226 bis 230).
Es macht auch einen Unterschied ob man <div class="bigger left-align">...</div> oder <div class="left-align bigger">...</div> schreibt je nachdem welche Attribute in den Klassen hinterlegt sind.

In Zeile 224 würde ich das data-type="label" weglassen. Das Label-Widget wird hier nicht benötigt (es werden keine Device Daten über dieses Widget ausgelesen sondern durch das Calview Widget bereitgestellt):

Code Auswählen Erweitern

text4spalte += "<div data---type=\"label\""zu

Code Auswählen Erweitern

text4spalte += "<div"

In Zeilen 253 bis 271 würde ich den Code von

Code Auswählen Erweitern

                  if (spalte == 'age')          {mytext += getText4Spalte(spalte,"",null,null);}
                  if (spalte == 'bdate')        {mytext += getText4Spalte(spalte,"",datesubstr,null);}
                  if (spalte == 'bdatetimeiso') {mytext += getText4Spalte(spalte,"",null,null);}
                  if (spalte == 'btime')        {mytext += getText4Spalte(spalte,"",null,timesubstr);}
                  if (spalte == 'categories')   {mytext += getText4Spalte(spalte,"",null,null);}
                  if (spalte == 'daysleft')     {mytext += getText4Spalte(spalte,"",null,null);}
                  if (spalte == 'daysleftLong') {mytext += getText4Spalte(spalte,"",null,null);}
                  if (spalte == 'description')  {mytext += getText4Spalte(spalte,"",null,null);}
                  if (spalte == 'duration')     {mytext += getText4Spalte(spalte,"",null,null);}
                  if (spalte == 'edate')        {mytext += getText4Spalte(spalte,"",datesubstr,null);}
                  if (spalte == 'edatetimeiso') {mytext += getText4Spalte(spalte,"",null,null);}
                  if (spalte == 'etime')        {mytext += getText4Spalte(spalte,"",null,timesubstr);}
                  if (spalte == 'location')     {mytext += getText4Spalte(spalte,"",null,null);}
                  if (spalte == 'source')       {mytext += getText4Spalte(spalte,"",null,null);}
                  if (spalte == 'sourcecolor')  {}
                  if (spalte == 'summary')      {mytext += getText4Spalte(spalte,"",null,null);}
                  if (spalte == 'timeshort')    {mytext += getText4Spalte(spalte,"",null,null);}
                  if (spalte == 'weekday')      {mytext += getText4Spalte(spalte,"",null,null);}
                  if (spalte == 'weekdayname')  {mytext += getText4Spalte(spalte,"",null,null);}
auf folgendes kürzen (müsste gleiche Ergebnisse liefern bei kürzerer Laufzeit):

Code Auswählen Erweitern

                  if ((spalte == 'bdate') || (spalte == 'edate'))        {mytext += getText4Spalte(spalte,"",datesubstr,null);}
                  else if ((spalte == 'btime') || (spalte == 'etime'))        {mytext += getText4Spalte(spalte,"",null,timesubstr);}
  else if (spalte == 'sourcecolor')  {}
                  else {mytext += getText4Spalte(spalte,"",null,null);}

Analog dazu Zeilen 293 bis 304 ändern zu:

Code Auswählen Erweitern

mytext += "<div class=\"\" style=\"color:"+foregroundColor4data+";width:"+$width+"%;\">";
if (spalte == 'sourcecolor')  {}
else {mytext += elem.getReading(readingPrefix+'_'+num+'_'+spalte).val;}
mytext += "</div>";
Im Swiper wird die Breite der Spalten noch in Abhängigkeit von der Anzahl der Spalten berechnet. Das könnte hässlich werden wenn alle gleich breit sind (Zeile 287).

Ich möchte trotzdem nochmals betonen: großartige Arbeit!

[yersinia]

Ich habe es jetzt getestet und es funktioniert bei mir gut. Danke.

Einbindung wie folgt:

Code Auswählen Erweitern

                <div data-type="calview"
                        data-device="Geburtstage"
                        data-get="all"
                        data-max="3"
                        data-detail='["daysleft","bdate","summary","age"]'
                        data-detailwidth='["8","20","64","8"]'
                        data-daysleft-values='[1,3,8]'
                        data-daysleft-classes='["left-align big calview-lt1d","left-align large calview-lt3d","left-align normal calview-lt8d"]'
                        data-showempty="true"
                        data-onelinesum="yes"
                        data-sourcecolor="no"
                        data-dateformat="short"
                        data-timeformat="short"
                        data-dayname="yes"
                        data-oneline="yes"
                        data-class="left-align large">
                </div>

In meiner ftui_custom.css hab ich folgendes:

Code Auswählen Erweitern

div.calview-lt1d {
  border-radius: 4px;
  padding-left: 1px;
  background-color: crimson;
}

div.calview-lt3d {
  border-radius: 4px;
  padding-left: 1px;
  background-color: orange;
}

div.calview-lt8d {
  border-radius: 4px;
  padding-left: 1px;
  background-color: green;
}

Was zum angehängten Ergebnis führt.
Dabei fällt auf, dass die CSS Klassen bei jeder Spalte gesetzt werden. Da mMn die Fromatierung Zeilenweise geschieht, sollte es auch zeilenweise sein. In CodeZeile 247 sollte dann die CSS Klasse hinzuggefügt werden:

Code Auswählen Erweitern

mytext += "<div class=\"hbox cell\" style=\"height:auto;\">";
in etwa so:

Code Auswählen Erweitern

mytext += "<div class=\"hbox cell " + class4i + "\" style=\"height:auto;\">";

[OdfFhem]

In den letzten Tagen habe ich noch ein wenig an diesem Widget gearbeitet und folgende Änderungen vorgenommen:

• 
  Das Widget abonniert sehr viele Readings und bei jedem Event wurde bislang die komplette Kalender-Darstellung aufbereitet. Die Zahl der Aufbereitungen wurde deutlich reduziert, was in einer kürzeren Ladezeit resultieren sollte.
  
• 
  Die Swiper-Funktionalität wurde an die aktuell mit FTUI ausgelieferte Swiper-Version (3.4.2) angepasst. Desweiteren wurden - soweit sinnvoll - alle Darstellungsmöglichkeiten der Tabellenansicht auch für die Swiperansicht bereitgestellt. Zusätzlich wurden noch einige Attribute zur Steuerung der Swiperansicht eingeführt.
  
• 
  Letztlich wurden auch noch einige Code-Optimierungen durchgeführt.
  

Im Folgenden sind die derzeit zur Verfügung stehenden Attribute bzgl. Swiperansicht zusammengefasst:

Code Auswählen Erweitern


  data-swiperstyle="yes"
  data-swiper-autoplay="2000"
  data-swiper-effect="slide"
  data-swiper-pagination="yes"

data-swiperstyle schaltet die Swiperansicht frei - jeder Kalendereintrag ist eine eigene Seite; es wird immer nur eine Seite aktiv dargestellt.
data-swiper-autoplay aktiviert den automatischen Wechsel der Kalendereinträge/Seiten (alle 2000ms).
data-swiper-effect legt fest, mit welcher Animation der Wechsel durchgeführt wird (derzeit sinnvoll nutzbar: slide bzw. flip)
data-swiper-pagination steuert, ob zusätzlich am unteren Rand eine Seitenübersicht eingeblendet wird (mit Umschaltmöglichkeit).


@yersinia
Das zeilenweise Setzen der Klasse hatte ich mal ausprobiert. Funktionierte eigentlich auch erwartungsgemäß gut, sorgte dann aber im weiteren Testverlauf für einige unschöne Nebeneffekte. Beispielsweise wurden die align-Angaben nicht mehr in sichtbare Resultate umgesetzt ... daher bin ich erst mal bei der aktuellen, spaltenorientierten Theorie geblieben. Deine restlichen Anregungen sollten - sofern nach der Modulumstellung noch relevant - eingeflossen sein.
Falls Du Zeit und Lust hast, kannst Du ja noch mal ein Auge auf den neuen Modulstand werfen.


Zu Testzwecken habe ich den neuen Modulstand hier temporär weiter unten angehangen.

[yersinia]

Danke @OdfFhem!

Sieht super aus. Hab es jetzt mit meiner Definiton (s.o.) getestet: funktionierte auf Anhieb. Und läuft auch gefühlt schneller.
Swiper habe ich auch getestet - funktioniert, auch mit anderen Swipern auf der Seite.
Ausgezeichnet!

Vielen Dank!

Das zeilenweise Setzen der Klasse hatte ich mal ausprobiert. Funktionierte eigentlich auch erwartungsgemäß gut, sorgte dann aber im weiteren Testverlauf für einige unschöne Nebeneffekte. Beispielsweise wurden die align-Angaben nicht mehr in sichtbare Resultate umgesetzt ... daher bin ich erst mal bei der aktuellen, spaltenorientierten Theorie geblieben. Deine restlichen Anregungen sollten - sofern nach der Modulumstellung noch relevant - eingeflossen sein.
Falls Du Zeit und Lust hast, kannst Du ja noch mal ein Auge auf den neuen Modulstand werfen.

Ja, das hatte ich auch festgestellt und dann auch etwas experimentiert. Ich habe dann in Zeile 317 (auch in deiner neusten Version vom Vorpost) den else Zweig ersetzt (anstelle von class4i nun class4data):

Code Auswählen Erweitern

var class4spalte = (header) ? class4header : class4data;
Und dann weiter unten (Zeile 369):

Code Auswählen Erweitern

mytext += "<div class=\"hbox cell " + class4i + "\" style=\"height:auto;\">";

class4data zieht sich ja die Zellendefiniton aus dem class-Attribut des div-Containers (Zeile 269: var class4data = elem.data('class');)
class4i übernimmt class4data (Zeile 298) und wird überschrieben wenn daysleftclasses gesetzt ist (Zeile 307).

Müsste also eigentlich passen - jdfs bei mir funktioniert es.

Für den Swiper wäre dann Zeile 349 analog:

Code Auswählen Erweitern

mytext += "<div class=\"hbox " + class4i + "\" style=\"" + ((elem.data('swiper-navbuttons') == "yes") ? "width:95%;" : "")+ "\">";

Was mir noch auffiel ist Zeile 136:

Code Auswählen Erweitern

elemContainer = $('<div/>')
Ist der HTML Tag hier richtig gesetzt? Entweder <div> oder </div>, oder? (Oder ist es eine Maskeirung?)

Edit:
Zeile 149 fehlt ein Semikolon hinter dem position:static:

Code Auswählen Erweitern

elemPagination = $('<div style=\"position:static;\"></div>')

Danke nochmals für deine Arbeit, sieht gut aus!

[yersinia]

Ja, das hatte ich auch festgestellt und dann auch etwas experimentiert. Ich habe dann in Zeile 317 (auch in deiner neusten Version vom Vorpost) den else Zweig ersetzt (anstelle von class4i nun class4data):

Code Auswählen Erweitern

var class4spalte = (header) ? class4header : class4data;
Und dann weiter unten (Zeile 369):

Code Auswählen Erweitern

mytext += "<div class=\"hbox cell " + class4i + "\" style=\"height:auto;\">";

class4data zieht sich ja die Zellendefiniton aus dem class-Attribut des div-Containers (Zeile 269: var class4data = elem.data('class');)
class4i übernimmt class4data (Zeile 298) und wird überschrieben wenn daysleftclasses gesetzt ist (Zeile 307).

Müsste also eigentlich passen - jdfs bei mir funktioniert es.

Mir ist noch eingefallen, dass class4i leer sein muss, wenn daysleftclasses nicht gesetzt ist. Im Code wird class4i automatisch gefüllt (Zeile 298), das könnte man ggf Abhängig von der Prüfung in Zeile 307 machen, oder?

[OdfFhem]

@yersinia

In Deinem Anwendungsfall aus Beitrag #16 (23 April 2019, 17:19:23) verwendest Du zwei Attribute, die es nicht mehr gibt ...

Code Auswählen Erweitern


  data-onelinesum="yes"
  data-dayname="yes"


Code Auswählen Erweitern


elemContainer = $('<div/>')

Ist eine jQuery-Anweisung und erzeugt ein vollständiges div-Tag als DOM-Element. Für jQuery sind $("<div/>") und $("<div></div>") gleichwertig.
Solch ein selbstschließendes Tag direkt in einem HTML-Dokument angewendet, wird zwar in der Regel akzeptiert, führt aber offiziell zu invalidem HTML.


Das fehlende Semikolon habe ich ergänzt ...


class4i wird initial auf class4data gesetzt und nur dann überschrieben, wenn der resultierende Wert von daysleftClasses nicht leer ist. Das heißt, wer keine neue class für den daysleft-Fall definiert hat, "erbt" einfach die für den Normalfall vorgesehene class; wäre dies nicht so, müsste jeder, der daysleftValues nutzt auch daysleftClasses mit Werten füllen. Gleiches gilt übrigens auch für daysleftColors und daysleftBackgroundColors.

Ich steuere z.B. das Aussehen (Ausrichtung, Größe, ... ohne Farben) zentral über data-class und die Farben ausschließlich über data-color/data-background-color. Um nun im daysleft-Fall eine andere Farbdarstellung zu erzielen, reicht die Angabe von data-daysleft-color/data-daysleft-background-color; das restliche Aussehen kommt aus dem zentralen data-class. Will man aber im daysleft-Fall z.B. blinkende Einträge oder andere Schriftgrößen, kommt man um die Nutzung von data-daysleft-classes nicht herum und muss evtl. den kompletten Inhalt oder Teile von data-class duplizieren.


Vielen Dank nochmals für Test sowie Anmerkungen

[yersinia]

In Deinem Anwendungsfall aus Beitrag #16 (23 April 2019, 17:19:23) verwendest Du zwei Attribute, die es nicht mehr gibt ...

Code Auswählen Erweitern


  data-onelinesum="yes"
  data-dayname="yes"


Danke für den Hinweis, zeigt aber auch: es wird ignoriert und beeinträchtigt (in meinem Fall) das erwartete Ergebnis nicht.

Code Auswählen Erweitern


elemContainer = $('<div/>')

Ist eine jQuery-Anweisung und erzeugt ein vollständiges div-Tag als DOM-Element. Für jQuery sind $("<div/>") und $("<div></div>") gleichwertig.
Solch ein selbstschließendes Tag direkt in einem HTML-Dokument angewendet, wird zwar in der Regel akzeptiert, führt aber offiziell zu invalidem HTML.

Wieder was gelernt. Bedankt.

class4i wird initial auf class4data gesetzt und nur dann überschrieben, wenn der resultierende Wert von daysleftClasses nicht leer ist. Das heißt, wer keine neue class für den daysleft-Fall definiert hat, "erbt" einfach die für den Normalfall vorgesehene class; wäre dies nicht so, müsste jeder, der daysleftValues nutzt auch daysleftClasses mit Werten füllen. Gleiches gilt übrigens auch für daysleftColors und daysleftBackgroundColors.

Ich steuere z.B. das Aussehen (Ausrichtung, Größe, ... ohne Farben) zentral über data-class und die Farben ausschließlich über data-color/data-background-color. Um nun im daysleft-Fall eine andere Farbdarstellung zu erzielen, reicht die Angabe von data-daysleft-color/data-daysleft-background-color; das restliche Aussehen kommt aus dem zentralen data-class. Will man aber im daysleft-Fall z.B. blinkende Einträge oder andere Schriftgrößen, kommt man um die Nutzung von data-daysleft-classes nicht herum und muss evtl. den kompletten Inhalt oder Teile von data-class duplizieren.

Ja, das verstehe ich und hab das auch im Code so verstanden. Das funktioniert ja soweit auch.
Was ich als nachteilig sehe ist die SpaltenZellenweise Definition der class, demnach kann ich nicht Zeilenweise die Ansicht definieren (was zB bei border-radius: 4px; komisch aussieht) - zumal ich ja eh die Werte eigentlich indirekt nur pro Zeile setzen kann (für jede Spalte/Zelle die gleiche class). Von daher mein Gedankengang die optionalen classes gleich für das Zeilen-Div zu nutzen anstelle für jede Zelle einzeln. Oder irr' ich?

Vielen Dank nochmals für Test sowie Anmerkungen

Gerne. Ist ja auch nicht Uneigenützig. Dank dir vielmehr dass du dich der Sache annimmst und es umsetzt.

[OdfFhem]

@yersinia

Da man das Verhalten bzgl. class-Anwendung nicht wirklich allgemeingültig in den Griff bekommen kann, habe ich noch zwei Erweiterungen am Modul vorgenommen.

Es gibt ein neues Attribut data-class-usage - gültige Werte: col bzw. row. Hierüber kann man steuern, ob die angegebenen Werte für data-header-class, data-class bzw. data-daysleft-classes einer kompletten Zeile einmalig oder jeder Spalte einzeln zugewiesen werden sollen.
Hierüber kann z.B. erreicht werden, dass eine ganze Zeile blinkt - inklusive Hintergrund; oder aber eben nur der Vordergrund.

Für alle, die noch mehr wollen, habe ich jedem calview-Element automatisch Klassen zugeordnet.

• calview gilt für den ganzen Kalender

• calview-row-header gilt für die komplette Headerzeile
• calview-col-header gilt für eine einzelne Headerspalte

• calview-row gilt für eine komplette Zeile eines Kalendereintrags, falls kein daysleft-Fall vorliegt
• calview-col gilt für eine einzelne Spalte eines Kalendereintrags, falls kein daysleft-Fall vorliegt

• calview-row-daysleft-<n> gilt für eine komplette Zeile eines Kalendereintrags, falls ein daysleft-Fall vorliegt
• calview-col-daysleft-<n> gilt für eine einzelne Spalte eines Kalendereintrags, falls ein daysleft-Fall vorliegt
• <n> entspricht dem Eintrag im daysleft-Array - beginnend mit 1 (calview-row-daysleft-1, calview-row-daysleft-2, ...)

Eine beispielhafte, nicht optimierte CSS-Definition könnte folgendermaßen aussehen:

Code Auswählen Erweitern


.calview {
  background-color: #99ccff;
  border-radius: 8px;
  padding: 4px;
  color: black;
}

.calview-row-header {
  border-radius: 8px;
  font-size:125%;
  font-weight: bold;
}

.calview-col-header {
  text-align: left;
}

.calview-row {
  background-color: #c0c0c0;
  border-radius: 8px;
  padding-left: 4px;
  padding-right: 4px;
}

.calview-col {
  text-align: left;
}

.calview-row-daysleft-1 {
  background-color: #ff8080;
  border-radius: 8px;
  padding-left: 4px;
  padding-right: 4px;
}

.calview-col-daysleft-1 {
  text-align: left;
}

.calview-row-daysleft-2 {
  background-color: #ffffb3;
  border-radius: 8px;
  padding-left: 4px;
  padding-right: 4px;
}

.calview-col-daysleft-2 {
  text-align: left;
}

.calview-row-daysleft-3 {
  background-color: #99ff99;
  border-radius: 8px;
  padding-left: 4px;
  padding-right: 4px;
}

.calview-col-daysleft-3 {
  text-align: left;
}

Über CSS-Selektoren kann man sich hier nach Herzenslust austoben ...


Zu Testzwecken habe ich den neuen Modulstand hier temporär angehangen.

[yersinia]

@OdfFhem: DAS ist ja mal genial (insbesondere die dynamischen CSS Selektoren  ). Danke. Läuft bei mir.

Einbindung bei mir:

Code Auswählen Erweitern

<div data-type="calview"
                        data-device="Geburtstage"
                        data-get="all"
                        data-max="3"
                        data-detail='["bdate","summary","age"]'
                        data-detailwidth='["20","72","8"]'
                        data-class-usage="row"
                        data-daysleft-values='[1,3,8]'
                        data-daysleft-classes='["left-align big","left-align large","left-align normal"]'
                        data-showempty="true"
                        data-sourcecolor="no"
                        data-dateformat="short"
                        data-timeformat="short"
                        data-oneline="yes">
                </div>


Meine dazugehörige CSS:

Code Auswählen Erweitern

div.calview-col {
  text-align: left;
}

div.calview-row-daysleft-1 {
  border-radius: 4px;
  padding-left: 1px;
  background-color: crimson;
}

div.calview-col-daysleft-1 {
  text-align: left;
}

div.calview-row-daysleft-2 {
  border-radius: 4px;
  padding-left: 1px;
  background-color: yellow;
  color: black;
}

div.calview-col-daysleft-2 {
  text-align: left;
}

div.calview-row-daysleft-3 {
  border-radius: 4px;
  padding-left: 1px;
  background-color: green;
}

div.calview-col-daysleft-3 {
  text-align: left;
}

Es ist zwar etwas nervig, dass man die col einzeln nochmal definieren muss, dafür hat man aber maximale Flexibilität. Gefällt mir sehr gut.

Besten Dank!

(Wann geht das ins offizielle repository?)

[somansch]

Ich nutze derzeit "fullcalview", möchte aber auf "calview" umsteigen. Ich bin erstaunt, wieviel Änderungen bzw. neue Attribute hier gegenüber dem Wiki-Eintrag hinzugekommen sind. Gibt es für den aktuellen Stand eine Gesamtübersicht aller Attribute?

Damit würde sich Jeder bestimmt einfacher tun, als im gesamten Thread alles rauszupicken 

Danke und Gruß
Andreas

[OdfFhem]

@somansch

Die Wiki-Seite wird in Kürze aktualisiert, da die Änderungen seit Mitte der Woche auch mit dem offiziellen FTUI-Update ausgeliefert werden.

Viele Grüße

[OdfFhem]

Wiki-Seite wurde aktualisiert.

Anregungen/Kritik dazu sind willkommen ...

Viele Grüße

[neyzen]

Hallo,

ich habe folgende Config im FTUI

Code Auswählen Erweitern

<div data-type="calview"
data-device="MeinKalender"
data-get="all"
data-detail='["weekdayname","btime","summary"]'
data-detailwidth='["28","16","60"]'
data-max="7"
data-class="left-align bigger"
data-showempty="Keine Termine"
data-class-usage="row"
data-daysleft-values='[1,2,3,8]'
data-daysleft-classes='["blink","blink",""]'
></div>

Allerdings blinken bei mir die Termine nicht, die 1,2,3,8 Tage verbleiben.
Was mach ich falsch?

[yersinia]

Ist die Klasse blink eine Animation?

[OdfFhem]

@neyzen

Ich habe Dein div-Tag mal ausprobiert und bei mir blinken Termine, die heute bzw. in 1 oder 2 Tagen anstehen.

Anmerkung: Die beiden Arrays ...-values bzw. ...-classes enthalten nicht die gleiche Anzahl von Elementen (4 <> 3).

Code Auswählen Erweitern


  data-daysleft-values='[1,2,3,8]'
  data-daysleft-classes='["blink","blink",""]'


• Deine Angabe heisst übersetzt: Alle Termine <=1 sollen blinken
• Deine Angabe heisst übersetzt: Alle Termine >1 und <=2 sollen blinken
• Deine Angabe heisst übersetzt: Alle Termine >2 und <=3 blinken nicht
• Deine Angabe heisst übersetzt: Alle Termine >3 und <=8 blinken nicht
• Deine Angabe heisst übersetzt: Alle Termine >8 blinken nicht

Angenommen, ich habe verstanden was Du machen willst, dann könnte es z.B. so aussehen:

Code Auswählen Erweitern


  data-daysleft-values='[3,7,8]'
  data-daysleft-classes='["blink","","blink"]'


• Angabe heisst übersetzt: Alle Termine <=3 sollen blinken
• Angabe heisst übersetzt: Alle Termine >3 und <=7 blinken nicht
• Angabe heisst übersetzt: Alle Termine >7 und <=8 sollen blinken
• Angabe heisst übersetzt: Alle Termine >8 blinken nicht

Anmerkung: Die aufaddierten Werte im Array ...-detailwidth sollten 100 ergeben (104 > 100)

Code Auswählen Erweitern


  data-detailwidth='["28","16","60"]'



@yersinia

blink ist eine mit FTUI2 ausgelieferte Animation ...