Chapter 2

Front End

You will find here the javascript documentation from the frontend. Documentation has been generated with jsdoc2md

Subsections of Front End

app.table.component.js

Functions

renderRecommendationLine(item)

Render recommendation line adding elements to the DOM

ParamTypeDescription
itemRecommendationRecommendation retrieve by the back

generateButtonRadio(line, id) ⇒ HTMLElement

Generate button radio and fill it from local storage

Returns: HTMLElement - th element containing a element with radio.

ParamTypeDescription
lineRecommendationRecommendation line HTML
idstringID Item

unSavedIdSelected(id)

Unsave id from the local storage

ParamTypeDescription
idstringID Item

renderInventoryLine(host)

Render inventory line adding elements to the DOM

ParamTypeDescription
hostInventoryHost from inventory

renderCell(textDisplayed)

Render cell

ParamTypeDescription
textDisplayedRecommendationText added in the celle

app.selection.component.js

Functions

fillSelector(type, values, verificationFunction)

Fill selector with values and bind verification function

ParamTypeDescription
typetypename of the selector
valuestypevalues
verificationFunctiontypevalues

loadDataFromStorage(select_item, selectorId)

Load data of the selector from storage

ParamTypeDescription
select_itemM.FormSelectSelect element
selectorIdstringid of the selector

storeInLocalStorage(value, selectorId)

Store data of the selector into storage

ParamTypeDescription
valuestringvalue to store
selectorIdstringid of the selector

removeValidButtonAttribute(attributeName)

Remove an attribute to valid button

ParamTypeDescription
attributeNamestringName of the attribute

setValidButtonDisabledAttribute(bool, attributeName)

Change disabled attribute in validation button

ParamTypeDescription
boolbooleanvalue of disabled attribute
attributeNamestringName of the attribute

reinitSelector(selector)

Reinit selector options, remove all options except the first one.

Summary: Remove all options in the dom except the first because in our case this first option is used as a placeholder for the moment

ParamTypeDescription
selectorM.FormSelectselector to clean

resetChildSelector(childName)

Reset child

Summary: In our workflow reset a child selector has to reinit a child ONLY if the child is already visible

ParamTypeDescription
childNamestringchild name selector

app.question.component.js

Functions

renderQuestion(_id)

If the modal template is already instatiated, the function open it else it creates the modal. It takes the configuration of the question to choose which elements need to be added to the modal (select, input, chips, …)

Summary: Display a modal template and fill it from config question

ParamTypeDescription
_id_idquestion UUID

getAnswersValues(id, indexQuestion) ⇒ answer

Get answer value by id recommendation and index question from local storage

Returns: answer - answer - if exists or null

ParamTypeDescription
idstringid of recommendation
indexQuestionnumberindex of the question

initializeMaterializeComponent()

Initialize Material components. This function need to be called after adding components to the DOM. This method is useful because in our case, our components are returned by our functions before adding them to the DOM. Some errors appears with Select component with this workflow. It’s base on global scope variable ‘MATERIALIZE_FIFO’

Summary: Initialize Material components wich need to be added to the DOM before init

renderQuestionBtn()

Create validation button and bind it with the click event.

renderQuestionField(_id, index, one_field, answerStored) ⇒ HTMLElement

Render question from ‘render_field_str’ method in case of ‘str’ : input Render question from ‘render_field_list_str’ method in case of ’list’ : chips Render question from ‘render_field_choice_str’ method in case of ‘choice’ : select

Summary: Render question depending on the answer type
Returns: HTMLElement - HTMLElement - Brief description of the returning value here.

ParamTypeDescription
_id_idUUID of the recommendation
indexindexIndex of question
one_fieldone_fieldconfiguration of the answer
answerStoredanswerStoredanswer if exists or null

renderFieldStr(_id, index, one_field, answerStored) ⇒ HTMLElement

Render question method in case of ‘str’ : it creates an input

Returns: HTMLElement - HTMLElement - Brief description of the returning value here.

ParamTypeDescription
_id_idUUID of the recommendation
indexindexIndex of question
one_fieldone_fieldconfiguration of the answer
answerStoredanswerStoredanswer if exists or null

renderFieldListStr(_id, index, one_field, answerStored) ⇒ HTMLElement

Render question method in case of ’list’ : it creates a chips element

Returns: HTMLElement - HTMLElement - Brief description of the returning value here.

ParamTypeDescription
_id_idUUID of the recommendation
indexindexIndex of question
one_fieldone_fieldconfiguration of the answer
answerStoredanswerStoredanswer if exists or null

renderFieldChoiceStr(_id, index, one_field, answerStored) ⇒ HTMLElement

Render question method in case of ‘choice’ : it creates a select element The Select element is an

Returns: HTMLElement - HTMLElement - Brief description of the returning value here.

ParamTypeDescription
_id_idUUID of the recommendation
indexindexIndex of question
one_fieldone_fieldconfiguration of the answer
answerStoredanswerStoredanswer if exists or null

retrieveListStrData(inputComponent, configType)

Get data from chips in case of ’list’, it takes values from a chips elements and add it to the local storage

ParamTypeDescription
inputComponentinput_componentChips element
configTypeconfigTypeConfiguration of the field

retrieveStr(inputComponent, configType)

Get data from input in case of ‘str’, it takes valueand add it to the local storage

ParamTypeDescription
inputComponentinput_componentChips element
configTypeconfigTypeConfiguration of the field

storeAnswerInLocalStorage(inputComponent, dataToSave, configType)

Update local storage with a new value. If the answer value is empty, it’s remove from local storage. If there’s already a value present, we update this value.

Summary: Update local storage with a new value.

ParamTypeDescription
inputComponentinputComponentinputComponent is a DOM Element, it has an id : UUIDRecommendation-index
dataToSavedataToSaveData already process for the back, this value will be sent
configTypeconfigTypeconfig type of the question

storeSelectedIds(id)

Manage selected IDS. Based on verification about storage item with UUID of the recommendation. If an item with the same id does not exists, we remove the id from the data We also check the local storage to create it if it’s not exists.

Summary: Manage selected IDS stored in store

ParamTypeDescription
idParamDataTypeHereID of recommendation

storeAnswerData(id, valueFormat, dataToSave)

Store answer data to localStorage

ParamTypeDescription
idinputComponentId of recommendation
valueFormatinputComponentData formated by our function to be store
dataToSaveinputComponentdata to check if it’s not empty in order to remove local storage

formatValueToStore(inputComponent, dataToSave, configType) ⇒ string

Format a value in order to be store in local storage. It’s a JSON format with three keys : value, formatType, index

Returns: string - Object - id, valueFormat

ParamTypeDescription
inputComponentinputComponentInput component is needed to retrieve the index of answer and id recommendation
dataToSaveinputComponentData in value
configTypeinputComponentConfiguration of this answer to send type answer to the back