Moveatis JavaScript Class Documentation

Software version 2.0.0

Documentation version 1.0.0

Moveatis is a web application designed to help the analysis of teaching situations by means of systematic observation. It was developed for the Department of Sport Pedagogy at University of Jyväskylä. Moveatis was written in Java and JavaScript programming languages. The JavaScript classes are documented here and the Java classes are described in a separate class documentation.

new CategoryItem(name, type, index) → {CategoryItem}

The class acts as a category button. It creates the HTML elements it needs and responds to the click events it gets.

Parameters:

Name	Type	Description
`name`	String	The name to be displayed on the button.
`type`	number	The type of the category (TIMED or COUNTED).
`index`	number	The index of the category button.

Methods (3)

(inner) initCountedCategory(this_)

The private method initializes the category button to behave as a category that counts the click events it gets.

Parameters:

Name	Type	Description
`this_`	CategoryItem	The category button.

(inner) initTimedCategory(this_)

The private method initializes the category button to behave as a time interval category.

Parameters:

Name	Type	Description
`this_`	CategoryItem	The category button.

(inner) updateValueDiv(this_, text)

The private method replaces the contents of the HTML element that displays the value of the category button.

Parameters:

Name	Type	Description
`this_`	CategoryItem	The category button.
`text`	String	The text to replace the contents of the element with.

new Clock()

The observation clock that can be paused and resumed. The individual categories get their time from the observation clock.

Methods (4)

getElapsedTime(now)

Returns the total time the observation clock has been running in milliseconds.

Parameters:

Name	Type	Description
`now`	number	The time in milliseconds when the elapsed time was wanted.

isPaused()

Returns true if the observation clock is paused, otherwise false.

pause(now)

Pauses the observation clock.

Parameters:

Name	Type	Description
`now`	number	The time in milliseconds when the observation clock was paused.

resume(now)

Resumes the observation clock.

Parameters:

Name	Type	Description
`now`	number	The time in milliseconds when the observation clock was resumed.

new Observer(category_sets) → {Observer}

The class does the actual observation. It keeps the records made during the observation and sends them to the backend after the observation is stopped.

Parameters:

Name	Type	Description
`category_sets`		The array of the category sets to be used in the observation.

Methods (8)

categoryClick(index)

Delegates the click of a category button to the correct category. It adds the (possible) record returned by the category to the list of all the records made during the observation.

Parameters:

Name	Type	Description
`index`	number	The index of the category button that was clicked.

continueClick()

The event handler continues the observation.

pauseClick()

The event handler pauses the observation.

startClick()

The event handler starts the observation. It sends an AJAX notification to the backend when the observation is started.

stopClick()

The event handler stops the observation. It disables the continue, pause and category buttons. If some categories were still on, it stops them and creates records accordingly. It sends the recorded information to the backend with AJAX and redirects the user to the summary page (on success).

tick()

Updates the observation clock and all the categories based on it.

(inner) addRecord(record)

The private method adds the record to the records list if it's not undefined. The method is used by categoryClick() and stopClick().

Parameters:

Name	Type	Description
`record`		The record or undefined if there is nothing to be added.

(inner) initialize(this_)

The private method initializes the observer. It creates the category buttons and adds them to the HTML element tree.

Parameters:

Name	Type	Description
`this_`	Observer	The observer to be initialized.

analysisrecordtable

JavaScript methods for report view.

Author:

Visa Nykänen
Tuomas Moisio

Methods (2)

(inner) sendData(URI, page)

Sends the given data to the given page through ajax

Parameters:

Name	Type	Description
`URI`		the data to be sent
`page`		the page to which the data should be sent, currently either csv or image

(inner) sendImageAndCSV()

Creates the csv using table2csv.js, sends the csv and the image of the report page to the server via AJAX

control

JavaScript methods for control view.

Author:

Juha Moisio <juha.pa.moisio at student.jyu.fi>

Methods (3)

(inner) focusDataTableEditInput(table)

Sets the last editable data table row into edit mode and sets the focus to it's first editable input.

Parameters:

Name	Type	Description
`table`	string	The identifier, id or class name of the data table.

(inner) onDialogSuccess(args, dialogWidgetVar, message)

Hides the dialog on succesfull submit and displays the given message.

Parameters:

Name	Type	Description
`args`	object	Containing the validationFailed attribute.
`dialogWidgetVar`	string	The widget variable of the dialog.
`message`	string	The given message.

(inner) submitDataTableEditInputs(table)

Submits the data table rows in edit mode.

Parameters:

Name	Type	Description
`table`	string	The identifier, id or class name of the data table.

feedbackanalysissummary

JavaScript methods for feedbackanalysis summary view.

Author:

Tuomas Moisio
Visa Nykänen

Methods (2)

(inner) sendImage(URI)

Sends an image through ajax to the servlet that handles images.

Parameters:

Name	Type	Description
`URI`		the base64-encoded image to be sent

(inner) sendImages()

Sends all the images created on the summary-page to the servlet that handles them

frontpage

Javascript methods for the front page

Author:

Visa Nykänen
Juha Moisio

Methods (3)

(inner) getDaylightSaving()

Gets the daylight saving time offset in milliseconds.

(inner) getTimeZoneOffset()

Gets the offset of the time zone in milliseconds (in JAVA format).

(inner) sendTimezone()

Sends the timezone information to the server that stores it in a session.

locales

PrimeFaces localization file.

Properties:

Name	Type	Description
`PrimeFaces.locales.fi`	object	Finnish localization.

Author:

Juha Moisio <juha.pa.moisio at student.jyu.fi>

observer

JavaScript logic for observation view.

Author:

Ilari Paananen <ilari.k.paananen at student.jyu.fi>

Methods (7)

(inner) countToString(count)

Returns the given count as a string with abbreviation, e.g. "13 ct.".

Parameters:

Name	Type	Description
`count`	number	The count to make the string from.

(inner) getDaylightSaving()

Gets the daylight saving time offset in milliseconds.

(inner) getTimeZoneOffset()

Gets the offset of the time zone in milliseconds (in JAVA format).

(inner) keepAlive()

Sends an AJAX keep-alive signal to the backend.

(inner) showError(error_msg)

Shows an error message in a PrimeFaces growl.

Parameters:

Name	Type	Description
`error_msg`	String	The error message to be shown.

(inner) stopObservation()

The function will call observer.stop(). It is needed if the stopping of the observation has to be confirmed.

(inner) timeToString(ms)

Converts milliseconds to a string representing time. The time format is hh:mm:ss if the given time is at least one hour and mm:ss otherwise.

Parameters:

Name	Type	Description
`ms`	number	The time in milliseconds.

summary

Javascript methods for the summary page.

Author:

Juha Moisio <juha.pa.moisio at student.jyu.fi>

Methods (24)

(inner) checkCheckBoxes()

Checks what checkboxes user has selected and performs action if specific checkbox is selected

(inner) convertMsToStr(ms) → {string}

Converts the time in milliseconds to a string hh:mm:ss.

Parameters:

Name	Type	Description
`ms`	number	The time in milliseconds.

(inner) convertMsToUnits(ms) → {string}

Converts the time in milliseconds to a string with the time units e.g. 1h 2m 0s.

Parameters:

Name	Type	Description
`ms`	number	The time in milliseconds.

(inner) convertStrToMs(str) → {number}

Converts the time string in the form hh:mm:ss to milliseconds.

Parameters:

Name	Type	Description
`str`	string	The time in a string as hh:mm:ss.

(inner) createRecordRow(record) → {object}

Creates a HTML element containing the data of a record.

Parameters:

Name	Type	Description
`record`	object	The object contains record data in the form: {name, count, countPercentage, duration, durationPercentage}

(inner) encodeHTML(str) → {str}

Encodes HTML markup characters to HTML entities.

Parameters:

Name	Type	Description
`str`	string	The string to be encoded.

(inner) getDurationOfCategories(records, timeframe) → {number}

Get total duration of records of all categories in given time frame.

Parameters:

Name	Type	Description
`records`	object	object containing the records.
`timeframe`	object	The selected start and end time.

(inner) getDurationOfRecords(records) → {number}

Gets the total duration of the records in the given time frame.

Parameters:

Name	Type	Description
`records`	object	The object containing the records.

(inner) getLocalZeroDate() → {date}

Gets the "zero" date with the time zone offset.

(inner) getRecordDetails(record) → {string}

Gets the record details as a string.

Parameters:

Name	Type	Description
`record`	object	The record object from the timeline component.

(inner) getRecordsInTimeframe(records, timeframe) → {object}

Gets all the records that are fully or partially in the given time frame.

Parameters:

Name	Type	Description
`records`	object	The object containing the records.
`timeframe`	object	The selected start and end time.

(inner) getTimeframeDuration(timeframe) → {number}

Gets the duration of the given time frame.

Parameters:

Name	Type	Description
`timeframe`	object	The selected start and end time.

(inner) hideMessages(timeline, growl)

Hides all growl messages and removes timeline selection.

Parameters:

Name	Type	Description
`timeline`	object	The timeline component.
`growl`	object	The growl component.

(inner) isBottomOfDocument(padding) → {boolean}

Checks if the user has scrolled to the bottom of the page.

Parameters:

Name	Type	Description
`padding`	number	An extra padding to be checked.

(inner) leadingZero(n) → {string}

Returns the given number as a string and appends a leading zero to it if the number is a single digit number.

Parameters:

Name	Type	Description
`n`	number	The given number.

(inner) percentOf(a, b) → {number}

Calculates the percentage of two values.

Parameters:

Name	Type	Description
`a`	number	The number of share.
`b`	number	The number of total quantity.

(inner) saveAsImage()

Saves the canvas as png.

(inner) saveImage()

Creates canvas element where the timeline and datatable are inserted sends the created image through ajax to Java

(inner) sendImage(URI)

Sends the given string to the servlet that expects a base64-encoded png

Parameters:

Name	Type	Description
`URI`		The base64-encoded png-file

(inner) showRecordDetails(timeline, growl)

Shows a PrimeFaces growl message with details of the selected record.

Parameters:

Name	Type	Description
`timeline`	object	The timeline component.
`growl`	object	The growl component.

(inner) spanPercentOf(a, b) → {string}

Gets the percentage of two values as a span element string.

Parameters:

Name	Type	Description
`a`	number	The number of share.
`b`	number	The number of total quantity.

(inner) toTimelineTime(date) → {number}

Converts the date object to the timeline component time.

Parameters:

Name	Type	Description
`date`	date	The date object of the time to be converted.

(inner) updateRecordsTable(timeline, timeframe)

Updates the records table information according to the given time frame.

Parameters:

Name	Type	Description
`timeline`	object	The timeline component.
`timeframe`	object	The selected start and end time.

(inner) updateTimelineTimeframe(timeline, strStart, strEnd) → {boolean}

Updates the time frame of the timeline to the given start and end times.

Parameters:

Name	Type	Description
`timeline`	object	The timeline component.
`strStart`	string	The time frame starting time in hh:mm:ss format.
`strEnd`	string	The time frame ending time in hh:mm:ss format.