Hour Table Dev

HLD

The Hour Table Flow:

hourTable.JPG

LLD

Google Feature Used:

  • Using the PubSub Feature in order to listen to published messages, and act accordingly.
  • Using the user prefs to store information.
  • using google remote content fetching to get the not immediate course data.

General Description:

The hour Table itself is built from a big container div, that hold in it a div for every hour in the scheduale. every div holds the data it display.
when moving over a div a mouse event is invoked which make another div visible if there is information to use. this inforamtion is kept in a Map structure for every course.

Functions Description:

loadSavedPrefs

This function is called on load of page.
It creates a new Map for the fetched courses data, goes over all of the saved courses, loads all of the data of each of them, adjust the size of the hourTable according to the current browser and calls calcAndMerge.

updateMsg

The function is called when a message is recieved from the yedion. The message is parsed using Json, into the message structure.
The function checks the format of the message(for details see protocol), and acts accordingly.
if it is a semester/ year message it update the neccesary userPref and returns.
if it is a delete message it callse deleteCourse with it serial number, saves the userprefs and calls calcAdMerge.
Else, it checks if cNum exist. if so it is a course message, so it cleans the previous message with that serial(if exist) using cleanMessage, update and save the prefs after encoding the course name to english, process the message and calls calcAndMerge.

processMessage

params: message, courseName ,courseNum

This function process the data of the message and updates the hour table.
It does that by getting the message containing all of that course data(you can see the structure at the protocol page), spliting the message into groups. Checking if the BubbleMap already contains that course data, if not calling the Fetch function with that course.
Then in a loop over all of that course gropus it update the appropiate divs with their data.

cleanMessage

params: message ,courseNum

This function processes the data of the message and deletes that course from the hour table.
It does that by getting the message containing all of that course data (you can see the structure at the protocol page), splitting the message into groups. Then in a loop over all of that course groups it deletes all of that courses data from the appropriate dives.

fetch

The function post the php request to the php page "getbubble.php". it takes from the saved prefs the semester and year. and build the url for the google fetch content. using the iGoogle _IG_FetchContent and _IG_Callback interfaces.

callback

This function is called by google when the remote content arrived. it stores the received data in a Map structure, using the course number as a key.

moveBubble

params :e

This function takes care in placing the bubble at the correct X, Y location (different between browsers).
It does that by getting the coordination of the mouse event that occurred, then checking if this coordinates with the size of the bubble will exceed the boundaries of the hour table, if so, fixes the position of the bubble to an in range location.

bubbleHandler

params: e, someDiv

This function is called when ever a mouse event happens. It tests if the div in which the event occurred -someDiv contains courses, if so a bubble in the appropriate location (by calling moveBubble) is opened displaying all of the relevant data.
It does that by taking the relevant data from the div (if it contains 2 courses it displays their data from the div fields. Otherwise the data is taken from the bubble Map).

closeBubble

This function closes the bubble, before exiting the hourTable, so the bubble will disappear.

calcAndMerge

This function is called after each change, it calculates the information of free hours, free days, courses hours & merges divs of the same group. it also calls chooseElemStyle to set the div color properties.

It does that by going over all of the divs in the hour table, for each of them it calculates if it is in one of the relevant field (free hours, days or course hours)- only for selected groups. When it finds a course it checks if the next dives contain the same course and group if so, it merges them by changing the color of the border between them.

infoPrint

The function is called when the user presses "הדפס".
It iterate over all the courses in saved status and build a table with all the status about them. The inforamtion is collected from the messages stored in the userPref and from the information in the Map object.
This table is not visible in the browser. this is achived by defining different styleShits for printer and screen.

deleteCourse

params: num

This function deletes the course by its num from the houre Table & from the saved data.

findDay

convert the days from their message format, to the divs name format.

translateDay

convert the days from the message format to their letter represantation in Hebrew.

chooseElemStyle

parameters: elem,border

The function sets to div the apropiate color&lines according to it's status,lecture type and border status(with bottom border or not).

encode

parameters: strIn

The function gets a string in hebrew and encodes it into an english string - in order to reduce the data saved.
It goes over the string and transalets each char in hebrew to english.

decode

parameters: strIn

The function gets a string in english and decodes it back an hebrew string - in order to display hebrew strings to the user.
It is called each time we instract data from the saved courses.

if this is not enough feal free to look at the source Code:

source code

back to main page back to last page

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License