Timetable / Class Schedule

In order to provide another feature on the HABpanel, we have created a simple view on the class schedule for my kids.

Nothing fancy in OpenHAB as the HABpanel is loading a simple html file into a Frame.
The script itself is loading the data from a plain text file.
The current day of the week is highlighted.

<html>
  <head>
    <meta charset="UTF-8">
    <script>
      async function setStundenplan(plan){
        const DEFAULT_PLAN_FILE = 'Stundenplan.txt';

        // no plan set -> load default plan
        if(!plan){
          function excelPlanToJSArray(excelString) {
            return excelString.split('\n').map(x => x.split('\t'));
          }
          let response = await fetch(DEFAULT_PLAN_FILE);
          let text = await response.text();
          plan = excelPlanToJSArray(text);
        }

        let day = new Date().getDay();
        if(day>5) day = 0;

        let domPlan = document.getElementById('stundenplan');
        let headers = plan.shift();
        let thead = document.createElement('tr');
        headers.forEach((x,i)=>{
          let th = document.createElement('th');
          th.innerText = x;
          if(i == day && day != 0) th.classList.add('activeDay');
          thead.appendChild(th);
        });
        domPlan.appendChild(thead);
        plan.forEach(row=>{
          let tr = document.createElement('tr');
          row.forEach((x,i) => {
            let td = document.createElement('td');
            td.innerText = x;
            if (i == day && day != 0) td.classList.add('activeDay');
            tr.appendChild(td);
          });
          domPlan.appendChild(tr);
        });
      }

      // init stundenplan after load
      window.addEventListener('load',_=>setStundenplan());
    </script>
    <style>

      #stundenplan{
        width: 100%;
        border-collapse: collapse;
        background-color: #ffffff;
		font-size: 1.5rem;
      }

      #stundenplan th{
        text-align: left;
        background-color: #000000;
        color: #ffffff;
      }

      #stundenplan tr:nth-child(odd){
        background-color: rgba(0,0,0,0.2);
      }

      #stundenplan th, #stundenplan td{
        padding: 0.5rem;
      }

      #stundenplan .activeDay{
        background-color: rgba(0,0,0,0.1);
      }
      
      #stundenplan th.activeDay{
        background-color: rgba(0,0,0,0.7);
      }

    </style>
  </head>
  <body>
    <table id="stundenplan" />
  </body>
</html>

The textfile looks like this:

Stunde	Mo	Di	Mi	Do	Fr
7:40 - 8:40	Chemie	Mathe	Deutsch	GL	Mathe
8:45 - 9:45	Englisch	Deutsch	AWI	Ergänzung	AWI
10:05 - 11:05	Schwimmen	GL	Ergänzung	Physik	Musik
11:10 - 12:10	Latein	Religion	Latein	Englisch	Chemie
12:35 - 13:35	OA	English	OA	OA	Deutsch
13:15 - 14:15	GL		Sport	Mathe	
14:20 - 15:20			AG	AG	

This is low profile but may be a useful application for others.

7 Likes

Thanks for your work. A Studenplan is exactly what my wife wants for our board :slight_smile:

But do you really need to include tags there? it is already embedded into a html document. But i am a new here. if this is wrong please correct me