Metainformationen zur Seite
Dies ist eine alte Version des Dokuments!
Stundenplan
Vorraussetzung:
cusotm:button-card mus installiert sein
Als erstes wird der Stundenplan als „Sensor“ in der configuration.yaml angelegt (funktioniert natürlich auch in den untergeordneten Konfig-Dateien), z.B. so:
<pre> <font inherit/inherit;;#3b3b3b;;inherit>-</font> <font inherit/inherit;;#800000;;inherit>sensor</font> <font inherit/inherit;;#3b3b3b;;inherit>:</font> <font inherit/inherit;;#3b3b3b;;inherit>-</font> <font inherit/inherit;;#800000;;inherit>name</font> <font inherit/inherit;;#3b3b3b;;inherit>:</font> <font inherit/inherit;;#a31515;;inherit>„stundenplan_paulina“</font> <font inherit/inherit;;#3b3b3b;;inherit></font> <font inherit/inherit;;#800000;;inherit>state</font> <font inherit/inherit;;#3b3b3b;;inherit>:</font> <font inherit/inherit;;#a31515;;inherit>„</font> <font inherit/inherit;;#ee0000;;inherit>font_font_inherit_inherit</font> <font inherit/inherit;;#a31515;;inherit>“</font> <font inherit/inherit;;#3b3b3b;;inherit></font> <font inherit/inherit;;#800000;;inherit>attributes</font> <font inherit/inherit;;#3b3b3b;;inherit>:</font> <font inherit/inherit;;#3b3b3b;;inherit></font> <font inherit/inherit;;#800000;;inherit>stundenplan</font> <font inherit/inherit;;#3b3b3b;;inherit>:</font> <font inherit/inherit;;#af00db;;inherit»</font> <font inherit/inherit;;#0000ff;;inherit>-</font> <font inherit/inherit;;#a31515;;inherit>[</font> <font inherit/inherit;;#a31515;;inherit>{„block“:1,„start“:„07:40“,„end“:„08:25“,„class“:{„monday“:„Musik“,„tuesday“:„Mathe“,„wednesday“:„NaWi“,„thursday“:„“,„friday“:„WPU“}},</font> <font inherit/inherit;;#a31515;;inherit>{„block“:2,„start“:„08:25“,„end“:„09:10“,„class“:{„monday“:„Musik“,„tuesday“:„Mathe“,„wednesday“:„NaNi“,„thursday“:„NaNi“,„friday“:„WPU“}},</font> <font inherit/inherit;;#a31515;;inherit>{„block“:3,„start“:„09:25“,„end“:„10:10“,„class“:{„monday“:„Religion“,„tuesday“:„Kunst“,„wednesday“:„Sport“,„thursday“:„Englisch“,„friday“:„Englisch“}},</font> <font inherit/inherit;;#a31515;;inherit>{„block“:4,„start“:„10:10“,„end“:„10:55“,„class“:{„monday“:„Religion“,„tuesday“:„Kunst“,„wednesday“:„Sport“,„thursday“:„Englisch“,„friday“:„Englisch“}},</font> <font inherit/inherit;;#a31515;;inherit>{„block“:5,„start“:„11:15“,„end“:„12:00“,„class“:{„monday“:„Deutsch“,„tuesday“:„WPU“,„wednesday“:„Deutsch“,„thursday“:„Weltkunde“,„friday“:„Mathe“}},</font> <font inherit/inherit;;#a31515;;inherit>{„block“:6,„start“:„12:00“,„end“:„12:45“,„class“:{„monday“:„Deutsch“,„tuesday“:„WPU“,„wednesday“:„Deutsch“,„thursday“:„Weltkunde“,„friday“:„Mathe“}},</font> <font inherit/inherit;;#a31515;;inherit>{„block“:7,„start“:„12:55“,„end“:„13:40“,„class“:{„monday“:„“,„tuesday“:„“,„wednesday“:„“,„thursday“:„KR“,„friday“:„“}},</font> <font inherit/inherit;;#a31515;;inherit>{„block“:8,„start“:„13:40“,„end“:„14:25“,„class“:{„monday“:„“,„tuesday“:„“,„wednesday“:„Weltkunde“,„thursday“:„“,„friday“:„“}},</font> <font inherit/inherit;;#a31515;;inherit>{„block“:9,„start“:„14:35“,„end“:„15:20“,„class“:{„monday“:„“,„tuesday“:„“,„wednesday“:„Weltkunde“,„thursday“:„“,„friday“:„“}}</font> <font inherit/inherit;;#a31515;;inherit>]</font>
</pre>
Wie immer, Daei speichern und Konfiguration neu laden.
Als nächstes eine neue custom:button-card anlegen und diesen Inhalt einfügen:
type: custom:button-card
entity: sensor.stundenplan_paulina
name: Paulina
show_icon: false
show_state: false
custom_fields:
table: |
[[[
const plan = JSON.parse(entity.attributes.stundenplan);
const dayNames = ["monday","tuesday","wednesday","thursday","friday"];
const weekdays = ["Mo","Di","Mi","Do","Fr"];
const today = dayNames[new Date().getDay()-1];
let output = `<table style=" width:100%; border-collapse: collapse; font-size: 12px; margin:0; padding:0;">`;
// Header mit hellgrauem Hintergrund und zentriert
output += `<tr><th style="text-align:center; padding:4px; width:15%; background:#f0f0f0;">Zeit</th>`;
weekdays.forEach((d,i) => {
const bg = (dayNames[i] === today) ? "background:#ffcc66;" : "background:#f0f0f0;";
output += `<th style="padding:4px; width:17%; ${bg} text-align:center;">${d}</th>`;
});
output += `</tr>`;
// Stundenplan-Zeilen
plan.forEach(row => {
output += `<tr>`;
// Uhrzeit-Spalte hellgrau
output += `<td style="padding:2px; width:15%; background:#f0f0f0; text-align:center;">${row.start}-${row.end}</td>`;
dayNames.forEach(d => {
const bg = (d === today) ? "background:#ffebcc;" : "";
output += `<td style="padding:2px; width:17%; ${bg} text-align:center;">${row.class[d] || ""}</td>`;
});
output += `</tr>`;
});
output += `</table>`;
return output;
]]]
styles:
card:
- text-align: center
- font-weight: bold
- background: null
custom_fields:
table:
- position: relative
- width: 125%
- left: "-120px"
- top: 10px
entity: sensor.stundenplan_paulina entsprechend verändern, muss zu in der YAML zu - name: „stundenplan_paulina“ passen.
Evtl. mit den Werten speielen: - width: 125% und - left: „-120px“um die Tabelle ittig zu bekommen.