Hallo zusammen,
beim Implementieren meiner Übersichtsseite für die Heizung fand ich es sehr Aufwändig für jeden Heizkreis mehrere basic.text Widgets zu platzieren, um den Betriebsmodus als Text anzuzeigen. Ein Widget, das einen Text anhand eines Items aus einer Liste auswählt, fehlte mir hier. Da sowas sicherlich auch für andere Dinge hilfreich ist, habe ich mal eins gemacht. Ich habe es basic.textselect genannt.
und das zugehörige js
Nun kann der Betriebsmodus einfach angezeigt werden:
beim Implementieren meiner Übersichtsseite für die Heizung fand ich es sehr Aufwändig für jeden Heizkreis mehrere basic.text Widgets zu platzieren, um den Betriebsmodus als Text anzuzeigen. Ein Widget, das einen Text anhand eines Items aus einer Liste auswählt, fehlte mir hier. Da sowas sicherlich auch für andere Dinge hilfreich ist, habe ich mal eins gemacht. Ich habe es basic.textselect genannt.
HTML-Code:
/**
* A dymanic text selected from a list of texts depending on a gad/item
*
* @param unique id for this widget
* @param a gad/item
* @param list of texts for the item. Array form [ Text-0, Text-1, ...]
* @param default text, used if list of texts does not contain a matching item (optional, default '')
*
* @author Thomas Ernst
*/
{% macro textselect(id, gad, values, val_default) %}
<span id="{{ uid(page, id) }}" data-widget="basic.textselect" data-item="{{ gad }}"
data-values="{{ implode(values) }}" data-default="{{ val_default|default('') }}"
class="text">
</span>
{% endmacro %}
Code:
// ----- basic.textselect -----------------------------------------------------------
$(document).delegate('[data-widget="basic.textselect"]', {
'update': function (event, response) {
var values = $(this).attr('data-values').explode();
$('#' + this.id).html((response < values.length) ? values[response] : $(this).attr('data-default'));
}
});
HTML-Code:
{{ basic.textselect('arbeit.heizung.betriebsmodus', 'arbeit.heizung.betriebsmodus',['Auto', 'Komfort', 'Standby', 'Nacht', 'Frostschutz']) }}
Kommentar