Displaying generated timetables

[kyukyukyu]

As soon as timetables are generated with classes in course cart, they should be displayed in 'result' view in 'create' section. The view is capable of displaying these things:

• List of generated timetables
• Currently selected timetable
• Detail of currently selected timetable

The Layout of 'Result' View

The view consists of two columns, too. The left column, which is wider than the right one, is dedicated to displaying currently selected timetable. On the other hand, the right column is where the list of generated timetables and the detail of currently selected timetable are displayed interaction with the user mainly takes place.

Left Column

Left column just displays currently selected timetable. This could be implemented easily using <ds-timetable> directive. The time-range is computed automatically based on the classes in timetable. (i.e. auto-fit attribute is set.)

Right Column

'Generated Timetables' View

The transition to 'result' view means pushing 'generated timetables' view into the view stack which has 'course cart' view at its top already. 'Generated timetables' view displays the list of generated timetables. Each cell in the list provides only brief information of corresponding timetable. 'Brief information' means these things:

• Total credits (just like '17 credits')
• Number of class days (just like '4 class days')
• Total free hours (just like '6 free hours')

At first, thumbnail of timetable was considered to be contained in each cell. The simplicity of UI and the difficulty of implementation considered first, however, this was discouraged. Maybe an alternative view of the list which displays them in the form of thumbnails can be provided in the future.

Each cell in the list has one of two states: 'selected', and 'deselected'. The cell which corresponds to currently selected timetable has 'selected' state, otherwise 'deselected'. The style of cell varies based on its state. (e.g. the background color of cell and color of text inside the cell) Right after the transition to new view, if there is any generated timetable, the first cell has 'selected' state.

When a cell is hovered, an icon in circle shape with 'i' inside of it is appeared on the right side of the cell. You may have noticed that this icon is for detail of corresponding timetable. When a cell is pressed, the state of view is changed to select the corresponding timetable. Right after that, the left column displays the timetable. When the ℹ️ icon (yes, in a circle) inside a cell is pressed, the cell now has 'selected' state and 'detail' view is pushed into the view stack.

'Detail' View

As the name says, 'detail' view displays the detail of currently selected timetable. This view has a button on the right side of navigation bar. When it is pressed, a menu which contains available actions appears. On the bottom of navigation bar, brief information of the timetable is displayed in large font, and the list of classes in the timetable is displayed. Each of the classes is displayed using <ds-subject> element with the list of classes unfold. The vertical bar of element does not show the state of subject in course cart. Rather, it is just a color tag for the subject.

At the moment when this issue is written, such features like setting whether the list of classes is unfold and color-tagging is not implemented on <ds-subject> directive. The implementation of these features should be documented in another issue.

Well, this note might be helpful...