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.

(c) Copyright 2016, Jarmo Juujärvi, Sami Kallio, Kai Korhonen, Juha Moisio and Ilari Paananen. (c) Copyright 2019, Visa Nykänen, Tuomas Moisio, Petra Puumala and Karoliina Lappalainen.

back to top ⇧

CategoryItem

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.
back to top ⇧

Clock

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.
back to top ⇧

Observer

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.
back to top ⇧

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
back to top ⇧

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.
back to top ⇧

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
back to top ⇧

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.
back to top ⇧

locales

PrimeFaces localization file.
Properties:
Name Type Description
PrimeFaces.locales.fi object Finnish localization.
Author:
  • Juha Moisio <juha.pa.moisio at student.jyu.fi>
back to top ⇧

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.
back to top ⇧

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.