Skip to content

Lesson notes

Developer From Jokela edited this page Sep 15, 2022 · 2 revisions

Lesson notes in Wilma can be retrieved at /attendance/view.

View uses table and some funky tricks to show lesson notes.

Parsing

Lesson notes visually look like this:

Näyttökuva 2022-9-15 kello 9 55 10

And its structure: Näyttökuva 2022-9-15 kello 9 55 46

In order to parse time, we would need to get all time values from table head (8,9,10, etc.). With the help of all possible times in head, we'll need to get each lesson note's position in the row.

Näyttökuva 2022-9-15 kello 9 57 23 A row consists of empty td elements and notes.


Calculate duration and time

Table's colgroup element contains width of each column.

<colgroup>
    <col width="4%" />
    <col width="11%" />
    <col style="width: 5.63%;" width="6%" />
    <col style="width: 4.22%;" width="5%" />
    <col style="width: 1.41%;" width="2%" />
    <col style="width: 4.22%;" width="5%" />
    <col style="width: 1.41%;" width="2%" />
    <col style="width: 4.22%;" width="4%" />
    <col style="width: 1.41%;" width="1%" />
    <col style="width: 4.22%;" width="4%" />
    <col style="width: 1.41%;" width="1%" />
    <col style="width: 4.22%;" width="4%" />
    <col style="width: 1.41%;" width="1%" />
    <col style="width: 5.63%;" width="5%" />
    <col style="width: 5.63%;" width="5%" />
    <col width="10%" />
    <col width="30%" />
</colgroup>

We don't need first and last two configurations of columns.

Single full hour's width in table configuration is width : 5.63%;.

With math, we can calculate time duration.

Iterating each colgroup configuration in loop and checking if any lesson note exists in its position, we have all necessary ingredients to find out duration and time.

Example:

Näyttökuva 2022-9-15 kello 10 03 06 Green lesson note's position is configured by <col style="width: 4.22%;" width="5%" />.

By dividing 4.22 with 5.63, we end up with float percentage of 1 hour.

(4.22/5.63)*60 = 44,973357016. Round it up (make sure result is an integer without any decimals) and duration is 45 minutes.

Time would be 09:00-09:45, because lesson note started at the beginning of the hour slot.

If lesson note doesn't begin by exact hour, you'll need to subtract the empty space to get correct starting time.

Lesson note type and label

Each lesson note HTML element has a class with type ID (example: at-tp25).

Usually under the lesson note table is visible explanations of all lesson notes.

Example structure of explanation element:

<tr>
   <td class="at-tp25 text-center">01</td>
   <td>Poissaolo (Selvitä)</td>
</tr>

By finding a td element with class at-tp25 text-center, you can find out its code name and full name, which is inside a common parent element.

Getting color

HTML response of lesson notes page contains CSS rules for coloring.

Example CSS rule for lesson note with ID at-tp25:

TR TD.at-tp25,
.legend .at-tp25 {
    background-color: #ff8080 !important;
    color: #000000 !important;
    text-align: center !important;
    border: 2px solid white;
}

Property background-color stores the element color, and color is contrast-corrected text color.

Clone this wiki locally