Icon

Icon

generateIcon(id, config) rendert ein fest hinterlegtes Inline-SVG mit Titel. Der aktuelle State kommt aus config.value; konkrete Treffer stehen in config.states. Wenn kein Treffer passt, wird config.default verwendet und No-Data-Text angezeigt.

Die verfügbaren IconId Werte und app_color Farben stehen in den Grundlagen unter Icons & Farben.

Felder

Feld	Required	Typ	Default	Beschreibung
generateIcon(id, config)	Ja	(string, IconConfig) => void	-	Entry point.
config.icon	Ja	IconId	meal	Basis-Icon aus dem gemeinsamen Icon-Katalog.
config.title	Ja	string	-	Text unter dem Icon.
config.value	Nein	string | number	-	Aktueller Wert, z.B. $button_1.
config.states	Nein	IconStateItem[]	siehe unten	Konkrete State-Matches.
config.default	Nein	IconDefaultState	siehe unten	Fallback-State mit No-Data-Anzeige.

State Items

config.states enthält nur konkrete Wert-Matches.

Feld	Required	Typ	Default	Beschreibung
states[].value	Ja	string | number	-	Wert, der mit config.value verglichen wird.
states[].color	Nein	number | string	6	Farbe aus dem gemeinsamen app_color Katalog.
states[].icon	Nein	IconId	-	Optionales State-Icon statt config.icon.

Diese Werte werden gleich behandelt: 0, 0.0, '0', '0.0'; ebenso 2, 2.0, '2', '2.0'.

Ein leerer String ('') wird nicht als 0 normalisiert. Er führt wie fehlende Daten in den Default-State.

Default State

Der Default-State wird verwendet, wenn kein states Eintrag passt. Er rendert immer No-Data-Text.

Feld	Required	Typ	Default	Beschreibung
default.color	Nein	number | string	7	Farbe aus dem gemeinsamen app_color Katalog.
default.icon	Nein	IconId	-	Optionales Default-Icon statt config.icon.
default.noDataText	Nein	string	NODATA	Text unter dem Icon.

Wenn config.states fehlt, gelten diese Defaults:

[
  { value: '0', color: 2 },
  { value: '2', color: 1 },
];

Wenn config.default fehlt, gilt dieser Default:

{
  color: 7,
  noDataText: 'No Data',
}

Beispiele

Mahlzeit

var config = {
  icon: 'meal',
  title: 'Mahlzeit',
  value: '$button_1',
  states: [
    { value: '0', color: 2 },
    { value: '2', color: 1 },
  ],
  default: {
    color: 7,
    noDataText: 'No Data',
  },
};

generateIcon('button_1', config);

Alle alten Button-Icons

generateIcon('button_2', {
  icon: 'nurse',
  title: 'med. Personal',
  value: '$button_2',
});

generateIcon('button_3', {
  icon: 'tech',
  title: 'Technik',
  value: '$button_3',
});

generateIcon('button_4', {
  icon: 'drink',
  title: 'Getränk',
  value: '$button_4',
});

generateIcon('button_5', {
  icon: 'toilet',
  title: 'Toilette',
  value: '$button_5',
});

generateIcon('button_6', {
  icon: 'alarm',
  title: 'Alarm',
  value: '$button_6',
  states: [
    { value: '0', color: 8 },
    { value: '2', color: 9 },
  ],
  default: {
    color: 7,
    noDataText: 'No Data',
  },
});

State-spezifisches Icon

var config = {
  icon: 'alarm',
  title: 'Alarm',
  value: initVarGraf('${STATUS}', 0),
  states: [
    { value: '0', color: 2, icon: 'alarm' },
    { value: '2', color: 1, icon: 'tech' },
  ],
  default: {
    color: 7,
    icon: 'alarm',
    noDataText: 'Keine Daten',
  },
};

generateIcon('status_icon', config);