\r\n );\r\n }\r\n\r\n}\r\n\r\nexport default TransformationModifier;","\r\n/* eslint-disable react/jsx-no-bind */\r\nimport React from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport * as imageUtils from '../../../utils/imageUtils';\r\nimport * as widgetUtils from '../../../utils/widgetUtils';\r\nimport * as widgetConstants from '../../../constants/widgetConstants';\r\nimport _ from 'lodash';\r\nimport DeleteConfirmationModal from '../../common/DeleteConfirmationModal';\r\nimport { withModalContext } from '../../../services/modalService';\r\nimport TemplateModifier from './modifiers/TemplateModifier';\r\nimport FormattingModifier from './modifiers/FormattingModifier';\r\nimport AggregateModifier from './modifiers/AggregateModifier';\r\nimport CalculationModifier from './modifiers/CalculationModifier';\r\nimport ToastrService from '../../../services/toastrService';\r\nimport SortingModifier from './modifiers/SortingModifier';\r\nimport FlattenModifier from './modifiers/FlattenModifier';\r\nimport IterationModifier from './modifiers/IterationModifier';\r\nimport FilterModifier from './modifiers/FilterModifier';\r\nimport FieldSelectionModifier from './modifiers/FieldSelectionModifier';\r\nimport JoinModifier from './modifiers/JoinModifier';\r\nimport GroupingModifier from './modifiers/GroupingModifier';\r\nimport TransformationModifier from './modifiers/TransformationModifier';\r\n\r\nclass NewTaskModal extends React.Component {\r\n constructor(props, context) {\r\n super(props, context);\r\n this.getInputOptions = this.getInputOptions.bind(this);\r\n this.createModifier = this.createModifier.bind(this);\r\n this.saveTask = this.saveTask.bind(this);\r\n this.showTaskNameOverlay = this.showTaskNameOverlay.bind(this);\r\n this.hideTaskNameOverlay = this.hideTaskNameOverlay.bind(this);\r\n this.getModifierName = this.getModifierName.bind(this);\r\n this.setModifierName = this.setModifierName.bind(this);\r\n this.saveModifierName = this.saveModifierName.bind(this);\r\n this.modifierNameKeyPress = this.modifierNameKeyPress.bind(this);\r\n this.taskInputTypes = widgetConstants.taskInputTypes;\r\n if(this.props.dashboard && this.props.dashboard.PlayerMode !== 'Single') {\r\n //update the name from Player to Players\r\n const playerType = this.taskInputTypes.find(t => t.type === 'Player');\r\n if(playerType) {\r\n const playerTypeIndex = this.taskInputTypes.indexOf(playerType);\r\n playerType.name = 'Players';\r\n this.taskInputTypes[playerTypeIndex] = playerType;\r\n }\r\n } \r\n this.variableTypes = widgetConstants.variableTypes; \r\n\r\n this.state = {\r\n taskName: this.props.task.Name,\r\n inlineEditingEnabledIDs: [],\r\n temporaryModifierNames: {}\r\n };\r\n \r\n }\r\n\r\n componentDidMount() { \r\n \r\n } \r\n\r\n componentWillUpdate(nextProps) {\r\n if(this.props.task.Name !== nextProps.task.Name) {\r\n this.setState({ taskName: nextProps.task.Name });\r\n }\r\n }\r\n\r\n toggleInlineEditing(id) {\r\n const inlineEditingEnabledIDs = [...this.state.inlineEditingEnabledIDs];\r\n if(inlineEditingEnabledIDs.includes(id)) {\r\n _.pull(inlineEditingEnabledIDs, id);\r\n }\r\n else {\r\n inlineEditingEnabledIDs.push(id);\r\n window.setTimeout(() => {\r\n window.$(`#inline-${id}`).focus();\r\n }, 300);\r\n }\r\n this.setState({ inlineEditingEnabledIDs });\r\n }\r\n\r\n modifierNameKeyPress(event, id) {\r\n if (event.key === \"Enter\") {\r\n this.saveModifierName(id);\r\n }\r\n }\r\n\r\n getModifierName(id) {\r\n return this.state.temporaryModifierNames[id] || '';\r\n }\r\n\r\n setModifierName(id, value) {\r\n const temporaryModifierNames = {...this.state.temporaryModifierNames};\r\n temporaryModifierNames[id] = value;\r\n this.setState({ temporaryModifierNames });\r\n }\r\n\r\n saveModifierName(id) {\r\n const value = this.getModifierName(id);\r\n const haveDuplicateModifierName = this.props.task.Variables.find(v => v.ID !== id && v.Name === value) != null;\r\n if(!haveDuplicateModifierName) {\r\n if(value) {\r\n const modifier = {...this.props.task.Variables.find(v => v.ID === id)};\r\n modifier.Name = value;\r\n this.props.updateModifier(modifier);\r\n }\r\n this.setModifierName(id, '');\r\n this.toggleInlineEditing(id);\r\n }\r\n else {\r\n const toastrService = new ToastrService();\r\n toastrService.showError('', `There is an existing item in this task named '${value}'`);\r\n }\r\n }\r\n\r\n getInputOptions() {\r\n return this.taskInputTypes.map(inputType =>\r\n v.ID === modifier.InputVariableID)} dashboard={this.props.dashboard} updateModifier={this.props.updateModifier} />\r\n }\r\n else if(modifier.Type === 'FieldSelection') {\r\n let input; \r\n const task = this.props.resolvedTasks[this.props.task.ID];\r\n if(task) {\r\n const variable = task.variables[modifier.InputVariableID];\r\n if(variable && variable.currentValue) {\r\n input = variable.currentValue\r\n }\r\n } \r\n return \r\n
\r\n
\r\n
\r\n
\r\n
{this.props.newTask ? 'New task' : `Existing Task - ${this.props.task.Name}`} \r\n \r\n \r\n \r\n
\r\n {\r\n inputVariables.length ?\r\n
\r\n {\r\n inputVariables.map((inputVariable, i) => {\r\n //const inputType = this.taskInputTypes.concat(widgetConstants.variableTypes).find(t => t.type === task.Type);\r\n const inputType = this.taskInputTypes.find(t => t.type === inputVariable.Type);\r\n const resolvedTask = this.props.resolvedTasks[this.props.task.ID];\r\n let resolvedVariable;\r\n /*let linkedTransformationModifier;\r\n if(inputVariable.Type === 'Player' || inputVariable.Type === 'Dashboard' || inputVariable.Type === 'DataSource') {\r\n linkedTransformationModifier = modifiers.find(m => m.Type === 'Transformation' && m.InputVariableID === inputVariable.ID); \r\n }*/\r\n if(resolvedTask) {\r\n /*if(linkedTransformationModifier) {\r\n linkedTransformationModifiers.push(linkedTransformationModifier);\r\n resolvedVariable = resolvedTask.variables[linkedTransformationModifier.ID];\r\n }\r\n else {*/\r\n resolvedVariable = resolvedTask.variables[inputVariable.ID];\r\n //}\r\n }\r\n let output;\r\n let outputTypeText;\r\n if(resolvedVariable) {\r\n outputTypeText = resolvedVariable.OutputType;\r\n if(resolvedVariable.OutputType === 'Object' || resolvedVariable.OutputType === 'Array') {\r\n output = resolvedVariable.currentValue ? JSON.stringify(resolvedVariable.OutputType === 'Array' ? resolvedVariable.currentValue.slice(0, 20) : resolvedVariable.currentValue, null, 2) : '-';\r\n let nestedType;\r\n if(resolvedVariable.OutputType === 'Object') {\r\n nestedType = widgetUtils.getNestedObjectType(resolvedVariable.currentValue);\r\n if(nestedType && nestedType !== 'Object') {\r\n outputTypeText += ` containing a single ${nestedType} field`;\r\n }\r\n }\r\n else if(resolvedVariable.OutputType === 'Array' && resolvedVariable.currentValue && resolvedVariable.currentValue.length) {\r\n nestedType = widgetUtils.getObjectType(resolvedVariable.currentValue[0]);\r\n outputTypeText += resolvedVariable.currentValue.length === 1 ? ` containing a single ${nestedType} item` : ` containing ${nestedType}s`;\r\n }\r\n }\r\n else {\r\n output = resolvedVariable && resolvedVariable.currentValue ? resolvedVariable.currentValue.toString() : '-';\r\n }\r\n }\r\n return
\r\n
\r\n
\r\n
\r\n {\r\n this.state.inlineEditingEnabledIDs.includes(inputVariable.ID) ?\r\n this.toggleInlineEditing(inputVariable.ID)}>{inputVariable.Name} \r\n }\r\n {/*linkedTransformationModifier && linkedTransformationModifier.TransformationActions.length ? {`${linkedTransformationModifier.TransformationActions.length} input${linkedTransformationModifier.TransformationActions.length !== 1 ? 's' : ''} selected`} : null*/}\r\n {inputVariable.IncludeFields && inputVariable.IncludeFields.length ? {`${inputVariable.IncludeFields.length} input${inputVariable.IncludeFields.length !== 1 ? 's' : ''} selected`} : null}\r\n
\r\n
\r\n
\r\n {\r\n inputVariable.IncludeFields && inputVariable.IncludeFields.length ?\r\n //linkedTransformationModifier && linkedTransformationModifier.TransformationActions.length ?\r\n
\r\n
\r\n {\r\n /*linkedTransformationModifier.TransformationActions.map(transformationAction => \r\n
\r\n )*/\r\n inputVariable.IncludeFields.map(field => \r\n
\r\n )\r\n\r\n } \r\n
\r\n
\r\n : null\r\n }\r\n
Output:
\r\n
\r\n })\r\n } \r\n {\r\n //modifiers.filter(m => !linkedTransformationModifiers.includes(m)).map(modifier => { \r\n modifiers.map(modifier => { \r\n return this.getModifierMarkup(modifier);\r\n }) \r\n } \r\n
\r\n {/*we can't add modifiers if the last modifier was an iteration*/}\r\n {\r\n !modifiers.length || modifiers[modifiers.length - 1].Type !== 'Iteration' ? \r\n
\r\n {/* Modifier selector */}\r\n { //we can't have modifiers without 1st having some input variables \r\n inputVariables.length ?\r\n
\r\n : null\r\n } \r\n {\r\n //modifiers.filter(m => !linkedTransformationModifiers.includes(m)).length === 0 ?\r\n modifiers.length === 0 ?\r\n //we only want to be able to add a data source at the end if there are no modifiers yet (except it's a linked transformation as we use this to select fields from the data source)\r\n
\r\n \r\n
\r\n {\r\n this.getInputOptions()\r\n }\r\n
\r\n
\r\n : null\r\n } \r\n
\r\n : null\r\n }\r\n
\r\n
\r\n :\r\n
\r\n } \r\n
\r\n
\r\n
Cancel \r\n
{this.props.newTask ? 'Create task' : 'Save changes'} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n this.updateDateRangeValue(event, dateRange)}>\r\n Select date range \r\n {\r\n preDefinedDateRanges.map(preDefinedDateRange =>\r\n {preDefinedDateRange.displayText} \r\n )\r\n }\r\n {\r\n dateRange.custom ? \r\n {customValue} \r\n : null\r\n }\r\n Custom Date Range \r\n \r\n
\r\n
\r\n this.removeDateRange(event, dateRange)}>\r\n \r\n
\r\n
\r\n
\r\n {\r\n momentActions.length ? \r\n momentActions.map(momentAction => \r\n
\r\n
\r\n
{momentAction.name}({momentAction.parameters[0]} {momentAction.parameters.length == 2 ? (, {textUtils.pluralise(momentAction.parameters[1], momentAction.parameters[0])} ) : null})
\r\n
\r\n
\r\n
\r\n )\r\n : null\r\n }\r\n
\r\n
\r\n
\r\n \r\n
\r\n
Select function \r\n {\r\n this.relativeFunctions.map(relativeFunction => \r\n this.setState({ addingStartFormula: isStartDate, addingEndFormula: !isStartDate, functionName: relativeFunction.functionName, functionPeriod: '', functionUnit: 1, showFunctionUnit: relativeFunction.showUnits, actionInEdit: null })}>{relativeFunction.displayName} \r\n )\r\n }\r\n \r\n
\r\n
\r\n
\r\n
{this.state.functionName} \r\n
\r\n {\r\n this.state.showFunctionUnit ?\r\n
\r\n
\r\n Unit \r\n
\r\n
\r\n : null\r\n } \r\n
\r\n
\r\n Period \r\n this.setState({ functionPeriod: event.target.value })}>\r\n Select period \r\n day \r\n week \r\n month \r\n quarter \r\n year \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
Set custom date range \r\n \r\n
\r\n
\r\n Start date: {this.state.customStartDateRelative ? (relativeStartDate ? relativeStartDate.format(this.state.dateFormat) : 'Not set') : (this.state.customStartDate ? this.state.customStartDate.format(this.state.dateFormat) : 'Not set')} | End date: {this.state.customEndDateRelative ? (relativeEndDate ? relativeEndDate.format(this.state.dateFormat) : 'Not set') : (this.state.customEndDate ? this.state.customEndDate.format(this.state.dateFormat) : 'Not set')}\r\n
\r\n
\r\n
\r\n
Start date \r\n
\r\n
\r\n Relative \r\n
\r\n
\r\n
\r\n {\r\n this.state.customStartDateRelative ? \r\n this.getRelativeDateMarkup(true)\r\n : \r\n
\r\n
\r\n } \r\n
\r\n
\r\n
\r\n
End date \r\n
\r\n
\r\n Relative \r\n
\r\n
\r\n
\r\n {\r\n this.state.customEndDateRelative ?\r\n this.getRelativeDateMarkup(false)\r\n : \r\n
\r\n
\r\n }\r\n
\r\n
\r\n
\r\n Display: {this.state.customDisplayText}\r\n
\r\n
\r\n {\r\n this.state.displayCustomName ?\r\n
\r\n Date range name \r\n \r\n :\r\n
\r\n Date format \r\n \r\n }\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
Select from the pre-selected date ranges or create custom ranges
\r\n {\r\n this.state.dateRanges.map(dateRange => dateRange.custom && (!dateRange.start || !dateRange.end) ? this.getCustomDateRangeInput(dateRange) : this.getDateRangeDropdown(dateRange)) \r\n }\r\n {\r\n !this.state.dateRanges.find(dateRange => dateRange.custom && (!dateRange.start || !dateRange.end)) ?\r\n
\r\n : null\r\n }\r\n
Save date ranges \r\n
\r\n {['Small', 'Medium', 'Large'].map(val =>\r\n this.updateVariableValue(e, variable, getVal)}>{val} \r\n )}\r\n
\r\n }\r\n else if(type === 'boolean') {\r\n const getVal = (event) => event.target.checked;\r\n const checked = this.getVariableValue(variable);\r\n return \r\n \r\n
\r\n }\r\n else if(type === 'colour') {\r\n const colour = this.getVariableValue(variable) || '#ffffff';\r\n return \r\n
this.swatchRefs.push(swatch)} data-selection-name={variable.Name} data-default-color={colour} style={{backgroundColor: colour}}>
\r\n
this.updateVariableValue(e, variable)} />\r\n
\r\n
\r\n
{dimension} px
\r\n
\r\n {['Square', 'Round'].map(val =>\r\n this.updateVariableValue(e, variable, getVal)}>{val} \r\n )}\r\n
\r\n }\r\n else if(type === 'number') {\r\n return \r\n \r\n {\r\n value && value.length ?\r\n
\r\n {\r\n value.map(dateRange =>\r\n \r\n {\r\n dateRange.custom ? \r\n widgetUtils.getDateDisplay(dateRange) \r\n : \r\n preDefinedDateRanges.find(d => d.name === dateRange.value).displayText \r\n }\r\n \r\n )\r\n }\r\n \r\n : null\r\n } \r\n
this.setState({ showDateRangeConfiguration: true, dateRangeVariable: variable })} value={value && value.length ? 'Edit Date Ranges' : 'Configure Date Ranges'} className=\"btn btn--outline\" />\r\n
\r\n ) \r\n }\r\n }\r\n }\r\n\r\n getAdjustments() {\r\n const adjustments = [...this.state.widgetSettings.Adjustments];\r\n if(this.state.widgetSettingsParent) {\r\n //we're in a child element, add the Adjustments from the parent to any adjustments on the child settings - these would have been taken from the original widget set-up\r\n this.state.widgetSettingsParent.Adjustments.filter(a => a.WidgetHierarchy.includes(this.state.widgetSettings.ID)).forEach(adjustment => {\r\n const originalAdjustment = adjustments.find(a => a.Name === adjustment.Name);\r\n if(originalAdjustment) {\r\n const index = adjustments.indexOf(originalAdjustment);\r\n adjustments[index] = adjustment;\r\n }\r\n else {\r\n adjustments.push(adjustment);\r\n }\r\n });\r\n }\r\n return adjustments;\r\n }\r\n\r\n getPreviewElement(widget, resolvedTasks, widgetSettings) {\r\n //debugger;\r\n if(this.state.widgetSettingsParent) {\r\n const adjustments = this.getAdjustments();\r\n widgetSettings = {\r\n ...widgetSettings, \r\n Adjustments: adjustments,\r\n FieldBindings: this.state.widgetSettingsParent.FieldBindings.filter(b => b.WidgetHierarchy.includes(widgetSettings.ID)),\r\n };\r\n }\r\n if(widget && resolvedTasks && widgetSettings) {\r\n const isEditable = true;\r\n if(widget.WidgetSource === 'System') {\r\n if(widget.Slug === 'label') {\r\n return \r\n
\r\n );\r\n }\r\n else if(widget.Slug === 'bar-chart') {\r\n return (\r\n \r\n
\r\n ); \r\n }\r\n else if(widget.Slug === 'line-chart') {\r\n return (\r\n \r\n
\r\n ); \r\n }\r\n else if(widget.Slug === 'grid') {\r\n return (\r\n \r\n
\r\n ); \r\n }\r\n }\r\n else if(widget.Children) {\r\n return Preview unavailable, this is a layout widget
\r\n }\r\n }\r\n }\r\n \r\n updateBinding(task) {\r\n this.setState({selectedTask: task});\r\n const widgetSettings = {...(this.state.widgetSettingsParent || this.state.widgetSettings)};\r\n widgetSettings.FieldBindings = [...widgetSettings.FieldBindings];\r\n let binding;\r\n let bindingIndex = -1;\r\n if(this.props.widget && this.props.widget.Children) {\r\n //we're in a parent widget, we can only bind to an iteration, with the WidgetHierarchy empty\r\n binding = widgetSettings.FieldBindings.find(b => !b.WidgetHierarchy.length);\r\n if(binding) { \r\n bindingIndex = widgetSettings.FieldBindings.indexOf(binding);\r\n binding = {...binding};\r\n }\r\n else {\r\n binding = { WidgetHierarchy: [] };\r\n }\r\n }\r\n else {\r\n binding = widgetSettings.FieldBindings.find(b => b.WidgetHierarchy.join(',') === this.state.widgetSettings.ID && b.FieldName === this.state.selectedInput.Name);\r\n if(binding) { \r\n bindingIndex = widgetSettings.FieldBindings.indexOf(binding);\r\n binding = {...binding};\r\n }\r\n else {\r\n binding = { WidgetHierarchy: [this.state.widgetSettings.ID], FieldName: this.state.selectedInput.Name };\r\n }\r\n }\r\n if(binding.TaskID !== task.ID) {\r\n binding.TaskID = task.ID;\r\n if(bindingIndex === -1) {\r\n widgetSettings.FieldBindings.push(binding);\r\n }\r\n else {\r\n widgetSettings.FieldBindings.splice(bindingIndex, 1, binding);\r\n }\r\n }\r\n else {\r\n //remove the binding \r\n widgetSettings.FieldBindings.splice(bindingIndex, 1);\r\n }\r\n this.setState(this.state.widgetSettingsParent ? { widgetSettingsParent: widgetSettings } : { widgetSettings });\r\n } \r\n\r\n save(event) {\r\n event.preventDefault();\r\n this.props.saveWidget(this.state.widgetSettingsParent || this.state.widgetSettings);\r\n }\r\n\r\n toggleNameInlineEditing() {\r\n this.setState({ enableNameEditing: !this.state.enableNameEditing });\r\n }\r\n\r\n widgetNameKeyPress(event, id) {\r\n if (event.key === \"Enter\") {\r\n this.toggleNameInlineEditing();\r\n }\r\n }\r\n\r\n getTabContent() {\r\n if(this.state.selectedTab === 'Visual Looks') {\r\n return (\r\n \r\n );\r\n }\r\n else if(this.state.selectedTab === 'Data') {\r\n return (\r\n \r\n
\r\n
\r\n
\r\n \r\n {/* Attribute select */ }\r\n
\r\n {/* Step: dual */}\r\n
\r\n
\r\n
\r\n
Select a task to bind to
\r\n
\r\n
\r\n
\r\n {\r\n this.props.tasks.map(task =>\r\n
this.updateBinding(task)}>\r\n
{task.Name}
\r\n
\r\n
\r\n
\r\n )\r\n } \r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n \r\n
Repetition \r\n
\r\n
\r\n {['None', 'Vertical', 'Horizontal'].map(val =>\r\n this.updateWidgetValue('RepeatDirection', val)}>{val} \r\n )}\r\n
\r\n
\r\n
\r\n
Data \r\n
\r\n
\r\n {/* Attribute select */ }\r\n
\r\n {/* Step: dual */}\r\n
\r\n
\r\n
\r\n
Select an iteration task for the repetition
\r\n
\r\n
\r\n
\r\n {\r\n iterationTasks.map(task =>\r\n
this.updateBinding(task)}>\r\n
{task.Name}
\r\n
\r\n
\r\n
\r\n )\r\n } \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n );\r\n } \r\n }\r\n\r\n render() {\r\n const { inputType } = this.props;\r\n const widgetName = this.state.widgetSettings ? this.state.widgetSettings.Name : '';\r\n this.tooltipControls = [];\r\n return (\r\n \r\n );\r\n }\r\n};\r\n\r\nexport default EditWidgetModal;","\r\n/* eslint-disable react/jsx-no-bind */\r\nimport React from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport * as imageUtils from '../../../utils/imageUtils';\r\nimport * as widgetUtils from '../../../utils/widgetUtils';\r\nimport * as widgetConstants from '../../../constants/widgetConstants';\r\nimport _ from 'lodash';\r\nimport ToastrService from '../../../services/toastrService';\r\n\r\nclass SelectDataModal extends React.Component {\r\n constructor(props, context) {\r\n super(props, context);\r\n this.primaryOptionSelected = this.primaryOptionSelected.bind(this);\r\n this.getSelectionText = this.getSelectionText.bind(this);\r\n this.selectData = this.selectData.bind(this);\r\n this.getVariableValue = this.getVariableValue.bind(this);\r\n this.getProperties = this.getProperties.bind(this);\r\n this.getSecondaryProperties = this.getSecondaryProperties.bind(this);\r\n this.getDefaultDatasetID = this.getDefaultDatasetID.bind(this);\r\n this.state = {\r\n selectedOptions: [],\r\n selectedOptionsSecondary: [],\r\n selectedDatasetID: this.getDefaultDatasetID()\r\n };\r\n \r\n }\r\n\r\n componentWillMount() {\r\n }\r\n\r\n componentDidMount() { \r\n \r\n } \r\n \r\n componentWillUpdate(nextProps, nextState) {\r\n if(this.props.inputType !== nextProps.inputType || this.props.task !== nextProps.task || this.props.selectedModifier !== nextProps.selectedModifier) {\r\n let selectedOptions = nextProps.selectedModifier ? this.getProperties(nextProps.selectedModifier) : [];\r\n let selectedOptionsSecondary = nextProps.inputType === 'OutputValue' ? this.getSecondaryProperties(nextProps.selectedModifier) : [];\r\n let selectedDatasetID = this.getDefaultDatasetID(nextProps);\r\n this.setState({\r\n selectedOptions,\r\n selectedOptionsSecondary,\r\n selectedTask: nextProps.task,\r\n selectedModifier: nextProps.selectedModifier,\r\n selectedDatasetID\r\n })\r\n }\r\n else if(this.state.selectedDatasetID !== nextState.selectedDatasetID) {\r\n //if we're on the original dataset, default to the original properties\r\n const selectedOptions = nextProps.selectedModifier && nextProps.selectedModifier.DatasetID === nextState.selectedDatasetID ? this.getProperties(nextProps.selectedModifier) : [];\r\n this.setState({\r\n selectedOptions,\r\n selectedOptionsSecondary: []\r\n })\r\n }\r\n }\r\n\r\n getProperties(task) {\r\n if(task.Type === 'ExistingTask') {\r\n if(task.TaskID) {\r\n const existingTask = this.props.dashboard.Tasks.find(t => t.ID === task.TaskID);\r\n if(existingTask) {\r\n return [existingTask.Name];\r\n }\r\n }\r\n return [];\r\n }\r\n else if(task.Type === 'OutputValue') {\r\n const widgetInstanceID = task.WidgetHierarchy[task.WidgetHierarchy.length - 1]; \r\n if(widgetInstanceID) {\r\n const existingWidget = widgetUtils.findWidgetInstance(widgetInstanceID, this.props.dashboard.Widgets, this.props.widgets);\r\n if(existingWidget) {\r\n return [existingWidget.widgetHierarchy.join('_')];\r\n }\r\n } \r\n return [];\r\n }\r\n else {\r\n return task.IncludeFields || [];\r\n }\r\n }\r\n\r\n getSecondaryProperties(task) {\r\n if(task && task.Type === 'OutputValue' && task.OutputFieldName) { \r\n return [task.OutputFieldName];\r\n }\r\n else {\r\n return [];\r\n }\r\n }\r\n\r\n getDefaultDatasetID(props = this.props) {\r\n if(props.inputType === 'DataSource') {\r\n if(props.selectedModifier) {\r\n //default it from the modifier\r\n return props.selectedModifier.DatasetID || props.dashboard.DatasetIDs[0];\r\n }\r\n else {\r\n return props.dashboard.DatasetIDs[0];\r\n }\r\n }\r\n }\r\n\r\n getVariableValue(inputType) {\r\n let variableValues;\r\n if(inputType === 'Dashboard') {\r\n variableValues = widgetUtils.getDashboardVariableValues(this.props.dashboard);\r\n }\r\n else if(inputType === 'Player') {\r\n variableValues = widgetUtils.getPlayerVariableValues(this.props.dashboard, this.props.playerID, this.props.users);\r\n }\r\n else if(inputType === 'DataSource') {\r\n let dashboardData = this.props.dashboardData;\r\n let selectedDatasetID;\r\n if(!this.props.dashboard.RuleEngineID && dashboardData) {\r\n //we will have multiple datasets in the data, find the correct one\r\n selectedDatasetID = this.state.selectedDatasetID;\r\n } \r\n variableValues = widgetUtils.getDataSourceVariableValues(dashboardData, null, this.props.dashboard, selectedDatasetID);\r\n }\r\n return variableValues;\r\n }\r\n\r\n getSelectionOptions() {\r\n const options = [];\r\n const inputType = this.props.inputType;\r\n if(inputType === \"Player\" && this.props.dashboard) {\r\n let player;\r\n const variableValue = this.getVariableValue(inputType);\r\n if(this.props.dashboard.PlayerMode === 'Single') {\r\n player = variableValue.currentValue;\r\n }\r\n else {\r\n player = variableValue.currentValue && variableValue.currentValue.length ? variableValue.currentValue[0] : null;\r\n }\r\n if(player) {\r\n Object.keys(player).forEach(item => options.push(item));\r\n };\r\n }\r\n else if(inputType === \"Dashboard\") {\r\n const variableValue = this.getVariableValue(inputType);\r\n Object.keys(variableValue.currentValue).forEach(item => options.push(item));\r\n }\r\n else if(inputType === \"ExistingTask\") {\r\n this.props.dashboard.Tasks.forEach(task => options.push(task.Name));\r\n }\r\n else if(inputType === 'DataSource') {\r\n const variableValue = this.getVariableValue(inputType);\r\n if(variableValue && variableValue.currentValue) {\r\n let data;\r\n if(Array.isArray(variableValue.currentValue)) {\r\n if(variableValue.currentValue.length) {\r\n data = variableValue.currentValue[0];\r\n }\r\n } \r\n else {\r\n data = variableValue.currentValue;\r\n }\r\n if(data) {\r\n Object.keys(data).forEach(item => options.push(item));\r\n }\r\n } \r\n }\r\n else {\r\n if(this.props.dashboard) {\r\n const dashboardWidgets = this.props.dashboard.Widgets;\r\n const widgets = this.props.widgets;\r\n dashboardWidgets.forEach(dashboardWidget => {\r\n //we don't just want the name, if it's a nested widget, then we want the children - full hierarchy with a dot separator\r\n options.push(dashboardWidget.Name);\r\n //we'll need this on the 2nd selection level\r\n //const widget = widgets.find(w => w.ID === dashboardWidget.WidgetID);\r\n //if(widget) {\r\n\r\n //}\r\n })\r\n }\r\n }\r\n return options;\r\n }\r\n\r\n getTabTitle() {\r\n const inputType = this.props.inputType;\r\n if(inputType === 'Player') {\r\n return 'Player data';\r\n }\r\n else if(inputType === 'Dashboard') {\r\n return 'Dashboard data';\r\n }\r\n else if(inputType === 'ExistingTask') {\r\n return 'Existing Task';\r\n }\r\n else if(inputType === 'ManualInput') {\r\n return 'Manual Input';\r\n }\r\n else if(inputType === 'OutputValue') {\r\n return 'Existing Widgets';\r\n }\r\n else if(inputType === 'DataSource') {\r\n return 'Imported Data';\r\n }\r\n }\r\n\r\n primaryOptionSelected(option) {\r\n let selectedOptions;\r\n if(this.props.inputType === 'ExistingTask' || this.props.inputType === 'OutputValue') {\r\n //we can only have 1 selected option\r\n selectedOptions = [option];\r\n }\r\n else {\r\n selectedOptions = [...this.state.selectedOptions];\r\n if(selectedOptions.includes(option)) {\r\n _.pull(selectedOptions, option);\r\n }\r\n else {\r\n selectedOptions.push(option);\r\n }\r\n }\r\n this.setState({ selectedOptions, selectedOptionsSecondary: [] }) \r\n }\r\n\r\n secondaryOptionSelected(option) {\r\n let selectedOptionsSecondary = [option]; \r\n this.setState({ selectedOptionsSecondary }) \r\n }\r\n\r\n getSelectionText() {\r\n const inputType = this.props.inputType;\r\n if(inputType === 'Player' || inputType === 'Dashboard' || inputType === 'DataSource') {\r\n return 'Select Property';\r\n }\r\n else if (inputType === 'ExistingTask'){\r\n return 'Select Task';\r\n }\r\n else if(inputType === 'OutputValue'){\r\n return 'Select Widget';\r\n }\r\n else {\r\n return '';\r\n }\r\n } \r\n\r\n selectData(event) {\r\n event.preventDefault();\r\n const inputType = this.props.inputType;\r\n if(this.state.selectedOptions.length && (inputType !== 'OutputValue' || this.state.selectedOptionsSecondary.length)) {\r\n let outputType;\r\n let singlePlayer = this.props.dashboard && this.props.dashboard.PlayerMode === 'Single';\r\n if(inputType === 'Dashboard' || (inputType === 'Player' && singlePlayer) || inputType === 'DataSource') {\r\n outputType = inputType === 'DataSource' && Array.isArray(this.props.dashboardData) ? 'Array' : 'Object';\r\n if(this.state.selectedOptions.length > 1) {\r\n //modifierOutputType = 'Object';\r\n }\r\n else {\r\n //const input = inputType === 'Dashboard' ? this.props.variables.Dashboard : this.props.variables.Player;\r\n //const fieldName = this.state.selectedOptions[0];\r\n //const value = input.currentValue[fieldName];\r\n //modifierOutputType = widgetUtils.getObjectType(value);\r\n }\r\n }\r\n else if(inputType === 'Player' && !singlePlayer) {\r\n outputType = 'Array';\r\n }\r\n else if(inputType === 'OutputValue') {\r\n const dashboardWidget = this.props.dashboard.Widgets.find(w => w.Name === this.state.selectedOptions[0]);\r\n if(dashboardWidget) {\r\n const widget = this.props.widgets.find(w => w.ID === dashboardWidget.WidgetID);\r\n if(widget) {\r\n const output = widget.Outputs.find(o => o.Name === this.state.selectedOptionsSecondary[0]);\r\n if(output) {\r\n outputType = output.Type;\r\n }\r\n }\r\n }\r\n }\r\n let task = {...this.props.task};\r\n task.Variables = [...task.Variables];\r\n if(!this.props.selectedModifier) {\r\n //create the variable for the data input\r\n const variableID = this.props.getTempID(inputType);\r\n const variable = { ID: variableID, Name: variableID, Type: inputType };\r\n if(inputType === 'ExistingTask') {\r\n const existingTask = this.props.dashboard.Tasks.find(t => t.Name === this.state.selectedOptions[0]);\r\n const preferredName = `ExistingTask - ${existingTask.Name}`;\r\n if(task.Variables.find(v => v.Name === preferredName) == null) {\r\n variable.Name = preferredName;\r\n }\r\n variable.TaskID = existingTask.ID;\r\n outputType = existingTask.Variables.length ? existingTask.Variables[existingTask.Variables.length - 1].OutputType : null;\r\n //if the existing task name is unique in the current task, update the task name to the existing task name\r\n }\r\n else if(inputType === 'OutputValue') {\r\n const dashboardWidget = this.props.dashboard.Widgets.find(w => w.Name === this.state.selectedOptions[0]);\r\n if(dashboardWidget) {\r\n variable.WidgetHierarchy = [dashboardWidget.ID];\r\n variable.OutputFieldName = this.state.selectedOptionsSecondary[0];\r\n const preferredName = `${this.state.selectedOptions[0]}_${this.state.selectedOptionsSecondary[0]}`;\r\n if(task.Variables.find(v => v.Name === preferredName) == null) {\r\n variable.Name = preferredName;\r\n }\r\n }\r\n }\r\n else if(inputType === 'UserDefined') {\r\n //variable.Value = //whatever was entered\r\n }\r\n else if((inputType === 'Dashboard' || inputType === 'Player' || inputType === 'DataSource') && this.state.selectedOptions) {\r\n variable.IncludeFields = this.state.selectedOptions;\r\n }\r\n variable.OutputType = outputType;\r\n if(inputType === 'DataSource') {\r\n variable.DatasetID = this.state.selectedDatasetID;\r\n }\r\n task.Variables.push(variable);\r\n }\r\n else {\r\n //update the task\r\n const variableIndex = task.Variables.indexOf(this.props.selectedModifier);\r\n const variable = {...this.props.selectedModifier};\r\n if((inputType === 'Dashboard' || inputType === 'Player' || inputType === 'DataSource') && this.state.selectedOptions) {\r\n variable.IncludeFields = this.state.selectedOptions;\r\n }\r\n else if(inputType === 'ExistingTask') {\r\n const existingTask = this.props.dashboard.Tasks.find(t => t.Name === this.state.selectedOptions[0]);\r\n const preferredName = `ExistingTask - ${existingTask.Name}`;\r\n if(existingTask.Variables.find(v => v.Name === preferredName) == null) {\r\n variable.Name = preferredName;\r\n }\r\n variable.TaskID = existingTask.ID;\r\n outputType = existingTask.Variables.length ? existingTask.Variables[existingTask.Variables.length - 1].OutputType : null;\r\n //if the existing task name is unique in the current task, update the task name to the existing task name\r\n }\r\n if(inputType === 'DataSource') {\r\n variable.DatasetID = this.state.selectedDatasetID;\r\n }\r\n variable.OutputType = outputType;\r\n task.Variables.splice(variableIndex, 1, variable);\r\n }\r\n this.props.updateTask(task);\r\n this.setState({ selectedOptions: [], selectedTask: null, selectedModifier: null })\r\n window.$('#modal-newdata').modal('hide');\r\n }\r\n else {\r\n const toastrService = new ToastrService();\r\n let message = '';\r\n if(this.props.inputType === 'ExistingTask') {\r\n message = 'Please select a task';\r\n }\r\n else if(inputType === 'OutputValue') {\r\n if(!this.state.selectedOptions.length) {\r\n message = 'Please select a widget';\r\n }\r\n else if(!this.state.selectedOptionsSecondary.length) {\r\n message = 'Please select an output field';\r\n }\r\n }\r\n else {\r\n message = 'Please select some data properties';\r\n }\r\n toastrService.showError('', message);\r\n }\r\n }\r\n\r\n render() {\r\n const { inputType } = this.props;\r\n let outputValueSelectedWidget;\r\n if(inputType === 'OutputValue' && this.state.selectedOptions && this.state.selectedOptions.length === 1) {\r\n const selectedDashboardWidget = this.props.dashboard.Widgets.find(w => w.Name === this.state.selectedOptions[0]);\r\n if(selectedDashboardWidget) {\r\n outputValueSelectedWidget = this.props.widgets.find(w => w.ID === selectedDashboardWidget.WidgetID);\r\n }\r\n } \r\n return (\r\n \r\n
\r\n
\r\n
\r\n
Select data \r\n \r\n \r\n \r\n {/*Side tabs*/}\r\n
\r\n
\r\n \r\n
\r\n \r\n {/* Steps list */}\r\n \r\n
\r\n \r\n {/* Tab 1: Data */}\r\n
\r\n
\r\n
\r\n
\r\n \r\n {/* Attribute select */ }\r\n
\r\n {/* Step: dual */}\r\n
\r\n
\r\n {\r\n inputType === 'DataSource' && !this.props.dashboard.RuleEngineID ?\r\n /*we're using the raw datasets*/\r\n
\r\n \r\n
Select dataset:
\r\n
\r\n this.setState({ selectedDatasetID: event.target.value })}>\r\n {\r\n this.props.dashboardData.map(dataset => \r\n {dataset.Name} \r\n )\r\n }\r\n \r\n
\r\n \r\n : null\r\n }\r\n
\r\n
{this.getSelectionText()}
\r\n
\r\n
\r\n
\r\n {\r\n this.getSelectionOptions().map(option =>\r\n
this.primaryOptionSelected(option)}>\r\n
{option}
\r\n
\r\n
\r\n
\r\n )\r\n } \r\n
\r\n
\r\n
\r\n {\r\n inputType === 'OutputValue' ?\r\n
\r\n
\r\n
Select Output Field
\r\n
\r\n
\r\n
\r\n {\r\n outputValueSelectedWidget && outputValueSelectedWidget.Outputs.length ?\r\n outputValueSelectedWidget.Outputs.map(output =>\r\n
this.secondaryOptionSelected(output.Name)}>\r\n
{output.Name}
\r\n
\r\n
\r\n
\r\n )\r\n :
No output fields available \r\n } \r\n
\r\n
\r\n
\r\n : null\r\n } \r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
Used in ${matchingWidgets.length} ${textUtils.pluralise('widget', matchingWidgets.length)}`;\r\n if(matchingWidgets.length) {\r\n tooltipText += ':
';\r\n matchingWidgets.forEach(widget => tooltipText += `${widget.Name} `);\r\n tooltipText += ' ';\r\n }\r\n else {\r\n tooltipText += ''\r\n }\r\n tooltipText += `Used in ${matchingTasks.length} ${textUtils.pluralise('task', matchingTasks.length)}`;\r\n if(matchingTasks.length) {\r\n tooltipText += ':
';\r\n matchingTasks.forEach(task => tooltipText += `${task.Name} `);\r\n tooltipText += ' ';\r\n }\r\n return {tooltipCount, tooltipText};\r\n }\r\n\r\n render() {\r\n const searchTextLower = this.state.searchText ? this.state.searchText.trim().toLowerCase() : null;\r\n const tasks = this.props.tasks.filter(t => !searchTextLower || t.Name.toLowerCase().indexOf(searchTextLower) > -1);\r\n this.tooltipControls = [];\r\n return (\r\n \r\n
\r\n
\r\n
\r\n
Tasks \r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n {\r\n tasks.map(task => {\r\n const {tooltipCount, tooltipText} = this.getTooltipData(task);\r\n return (\r\n
\r\n );\r\n })\r\n } \r\n
\r\n
\r\n
\r\n
\r\n
this.editorControl = control}\r\n onChange={onChange} />\r\n }\r\n\r\n getDefaultValue(type) {\r\n if(type === 'Text') {\r\n return '';\r\n }\r\n else if(type === 'Object') {\r\n return {};\r\n }\r\n else if(type === 'Array') {\r\n return [];\r\n }\r\n else if(type === 'Integer') {\r\n return 0;\r\n }\r\n else if(type === 'Double') {\r\n return 0.00;\r\n }\r\n else if(type === 'Date') {\r\n return new Date();\r\n }\r\n }\r\n\r\n saveData(event) {\r\n event.preventDefault();\r\n if(this.state.value) {\r\n let outputType = this.state.type;\r\n let value = this.state.value; \r\n let task = {...this.props.task};\r\n task.Variables = [...task.Variables];\r\n if(!this.props.selectedModifier) {\r\n //create the variable for the data input\r\n const variableID = this.props.getTempID('ManualInput');\r\n const variable = { ID: variableID, Name: variableID, Type: this.props.inputType, OutputType: outputType, Value: value };\r\n task.Variables.push(variable);\r\n }\r\n else {\r\n //update the task\r\n const variableIndex = task.Variables.indexOf(this.props.selectedModifier);\r\n const variable = {...this.props.selectedModifier, OutputType: outputType, Value: value };\r\n task.Variables.splice(variableIndex, 1, variable);\r\n }\r\n this.props.updateTask(task);\r\n this.setState({ type: 'Text', value: this.getDefaultValue('Text') });\r\n window.$('#modal-newdata-manual').modal('hide');\r\n }\r\n else {\r\n const toastrService = new ToastrService();\r\n toastrService.showError('', 'Please enter a value');\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n
\r\n
\r\n
Enter data manually \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n Select the data type \r\n this.setState({ type: event.target.value, value: this.getDefaultValue(event.target.value) })}>\r\n {\r\n this.types.map(type =>\r\n {type} \r\n )\r\n }\r\n \r\n
\r\n
\r\n {\r\n this.getInputControl()\r\n }\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
this.removeWidget(widgetInstance, gridItem)} \r\n xPos={widgetInstance.X} \r\n yPos={widgetInstance.Y} \r\n width={widgetInstance.Width} \r\n height={widgetInstance.Height} \r\n widgetHierarchy={[widgetInstance.ID]}\r\n onRef={this.setGridItemRef} \r\n onDataChange={this.onDataChange}\r\n index={index}\r\n gridColumnCount={this.getGridColumnCount()}\r\n removeGridNodesForWidget={this.removeGridNodesForWidget} />;\r\n }\r\n\r\n initialiseWidgets(props) {\r\n const dashboardWidgetItems = props.dashboard.Widgets;\r\n const allWidgets = props.widgets;\r\n const widgets = [];\r\n for(let i = 0; i < dashboardWidgetItems.length; i++) {\r\n const widgetItem = dashboardWidgetItems[i];\r\n const widget = allWidgets.find(w => w.ID === widgetItem.WidgetID);\r\n widgets.push(this.getGridStackItem(widget, widgetItem, widgets.length));\r\n }\r\n this.setState({ widgets, selectedWidget: null, selectedWidgetInstance: null, selectedWidgetInstanceParent: null });\r\n }\r\n\r\n getGridRowCount() {\r\n return this.state.rowCount || 0;\r\n }\r\n\r\n getGridColumnCount() {\r\n return this.state.columnCount || 12;\r\n }\r\n\r\n getGridCellHeight() {\r\n //not sure why, but this needs to be 90, else our nested widget doesn't fit - fixed\r\n //return 90;\r\n return this.state.cellHeight || 80;\r\n }\r\n\r\n initialiseGridStack() {\r\n if(this.props.dashboard) {\r\n const template = this.props.dashboard.Template;\r\n\r\n let dashboardData = {};\r\n //initialise using the template fields and then override with the adjustments\r\n const templateKeys = Object.keys(template.Variables);\r\n templateKeys.forEach(key => {\r\n const variable = template.Variables[key];\r\n dashboardData[variable.Name] = variable.DefaultValue;\r\n });\r\n this.props.dashboard.Adjustments.filter(a => a.Enabled).forEach(adjustment => {\r\n if(adjustment.Append) {\r\n dashboardData[adjustment.Name] += parseFloat(adjustment.Append);\r\n }\r\n else {\r\n dashboardData[adjustment.Name] = adjustment.Override;\r\n }\r\n });\r\n this.setState(dashboardData, () => {\r\n this.livePosX = null;\r\n this.livePosY = null; \r\n \r\n const gridStack = $(this.gridStackRef);\r\n if(gridStack.length !== 0) {\r\n gridStack.gridstack({\r\n cellHeight: this.getGridCellHeight(),\r\n width: this.getGridColumnCount(),\r\n verticalMargin: 20,\r\n maxHeight: 10000, //this is a custom parameter which we've implemented\r\n float: true,\r\n animate: false\r\n });\r\n this.grid = gridStack.data('gridstack');\r\n \r\n gridStack.on('change', (event, items) => this.handleChange(items));\r\n } \r\n \r\n this.dragItems = $('.widgets-list .widget-item');\r\n this.dragDropZones = gridStack;\r\n this.currentWidget = null; \r\n this.currentWidgetID = null;\r\n }) \r\n } \r\n }\r\n\r\n initialiseWidgetsDragDrop() {\r\n if(this.draggable) {\r\n this.draggable.destroy();\r\n }\r\n if(!this.props.loading && this.state.dataLoaded) {\r\n const widgetList = $('.widgets-list', $('#modal-new-widget'))[0];\r\n this.draggable = new Draggable([widgetList], {\r\n draggable: '.widget-item',\r\n mirror: {\r\n appendTo: 'body',\r\n }\r\n })\r\n .on('drag:start', (dragEvent) => {\r\n $(this.gridStackRef).addClass('over');\r\n this.handleDragStart(dragEvent);\r\n const source = $(dragEvent.source);\r\n const position = source.position();\r\n this.leftOffset = dragEvent.sensorEvent.clientX - position.left;\r\n this.topOffset = dragEvent.sensorEvent.clientY - position.top; \r\n })\r\n .on('drag:move', (dragEvent) => {\r\n this.handleDragOver(dragEvent);\r\n }) \r\n .on('drag:stop', (dragEvent) => {\r\n //remove the over class from the container\r\n $(this.gridStackRef).removeClass('over');\r\n this.handleDrop(dragEvent);\r\n })\r\n }\r\n }\r\n\r\n //-- Start drag\r\n handleDragStart(e) {\r\n console.log(\"Drag started...\");\r\n //the event object is different based on how we're doing the drag so try both\r\n const control = $(e.currentTarget || e.originalSource);\r\n control.addClass('dragged');\r\n $('body').addClass('drag-in-progress');\r\n\r\n this.currentWidgetID = control.attr('data-wid');\r\n this.currentWidget = control;\r\n\r\n if(e.originalEvent.dataTransfer) {\r\n e.originalEvent.dataTransfer.effectAllowed = 'move';\r\n }\r\n }\r\n \r\n //-- Dragging over target elements\r\n handleDragOver(e) {\r\n //console.log(\"Dragging over...\" + e.target || e.originalSource);\r\n\r\n if (e.preventDefault) {\r\n e.preventDefault();\r\n }\r\n if(e.originalEvent.dataTransfer) {\r\n e.originalEvent.dataTransfer.dropEffect = 'move';\r\n } \r\n\r\n //-- Insert new content between block level elements\r\n let elementOver = $(e.target || e.originalSource);\r\n\r\n //-- Calculate drag position to use it to drop\r\n //-- element to exact location on the grid\r\n let gridWidth = $(this.gridStackRef).width();\r\n let gridHeight = $(this.gridStackRef).height();\r\n let posX = (e.pageX || e.originalEvent.pageX) - elementOver.offset().left;\r\n let posY = (e.pageY || e.originalEvent.pageY) - elementOver.offset().top;\r\n //let posX = e.pageX - $(this).offset().left;\r\n //let posY = e.pageY - $(this).offset().top;\r\n let cellWidth = gridWidth / this.getGridColumnCount();\r\n\r\n this.livePosX = Math.floor( posX / cellWidth );\r\n this.livePosY = Math.floor( posY / this.getGridCellHeight() );\r\n }\r\n\r\n\r\n //-- Entering drag target\r\n handleDragEnter(e) {\r\n // this / e.target is the current hover target.\r\n e.preventDefault();\r\n\r\n console.log('Drop zone entered')\r\n $(this).addClass('over');\r\n }\r\n\r\n //-- Leaving drag target\r\n handleDragLeave(e) {\r\n console.log('Left drop zone')\r\n $(this).removeClass('over'); // this / e.target is previous target element.\r\n }\r\n\r\n\r\n //-- Dropping element\r\n handleDrop(e) {\r\n if (e.stopPropagation) {\r\n e.stopPropagation();\r\n }\r\n\r\n const widget = this.props.widgets.find(w => w.ID === this.currentWidgetID);\r\n\r\n let wX = this.livePosX,\r\n wY = this.livePosY,\r\n wW = widget.DefaultWidth,\r\n wH = widget.DefaultHeight;\r\n\r\n const widgetInstance = {\r\n widgetID: widget.ID,\r\n x: wX,\r\n y: wY,\r\n width: wW,\r\n height: wH,\r\n name: this.getWidgetName(widget.Slug || widget.Name.replace(/\\s+/g,''))\r\n };\r\n\r\n this.props.actions.addWidget(this.props.dashboard.ID, widgetInstance);\r\n this.dragItems.removeClass('dragged');\r\n\r\n //-- Remove Helper element\r\n $('.dragSpacer', this.dragDropZones).remove();\r\n $('body').removeClass('drag-in-progress');\r\n this.currentWidget = null;\r\n this.currentWidgetID = null;\r\n\r\n return false;\r\n }\r\n\r\n handleChange(items) {\r\n if(items && items.length) {\r\n const changedItem = items[0];\r\n const changedWidgetID = changedItem.el[0].dataset.widgetId;\r\n const widget = this.props.dashboard.Widgets.find(w => w.ID === changedWidgetID);\r\n if(widget) {\r\n //make sure something has changed as we also end up here when new items are added, e.g. in an iteration modifier\r\n if(widget.X !== changedItem.x || widget.Y !== changedItem.y || widget.Width !== changedItem.width || widget.Height !== changedItem.height) {\r\n let updatedWidget = {...widget, X: changedItem.x, Y: changedItem.y, Width: changedItem.width, Height: changedItem.height};\r\n this.props.actions.updateWidget(this.props.dashboard.ID, updatedWidget);\r\n }\r\n }\r\n }\r\n }\r\n\r\n getWidgetName(prefix) {\r\n let widgetName;\r\n while(!widgetName || this.props.dashboard.Widgets.find(w => w.Name === widgetName) != null) {\r\n widgetName = this.getTempID(prefix);\r\n }\r\n return widgetName;\r\n }\r\n\r\n removeWidget(widget, gridItem) {\r\n if(window.confirm('Delete item?')) {\r\n this.removedItem = gridItem.gridItemRef;\r\n this.props.actions.removeWidget(this.props.dashboard.ID, widget.ID);\r\n }\r\n }\r\n\r\n updateTask(task) {\r\n if(task.ID === this.state.newTask.ID) {\r\n this.setState({ newTask: task });\r\n }\r\n else {\r\n this.setState({ selectedTask: task });\r\n }\r\n }\r\n \r\n createModifier(modifier) {\r\n const task = this.state.selectedTask ? {...this.state.selectedTask} : {...this.state.newTask};\r\n const variables = [...task.Variables];\r\n variables.push(modifier);\r\n task.Variables = variables;\r\n if(this.state.selectedTask) {\r\n this.setState({ selectedTask: task });\r\n }\r\n else {\r\n this.setState({ newTask: task });\r\n }\r\n }\r\n\r\n updateModifier(modifier) {\r\n const task = this.state.selectedTask ? {...this.state.selectedTask} : {...this.state.newTask};\r\n const variables = [...task.Variables];\r\n const variablesIndex = variables.findIndex((v) => v.ID === modifier.ID);\r\n variables.splice(variablesIndex, 1, modifier);\r\n task.Variables = variables;\r\n if(this.state.selectedTask) {\r\n this.setState({ selectedTask: task });\r\n }\r\n else {\r\n this.setState({ newTask: task });\r\n }\r\n }\r\n \r\n deleteModifier(modifier) {\r\n const task = this.state.selectedTask ? {...this.state.selectedTask} : {...this.state.newTask};\r\n task.Variables = [...task.Variables];\r\n const variableIndex = task.Variables.indexOf(modifier);\r\n if(task.Variables.length > variableIndex + 1) {\r\n //we have modifiers after it, update their input to the input of the modifier being deleted \r\n const inputs = modifier.InputVariableID ? [modifier.InputVariableID] : modifier.Inputs;\r\n const nextVariable = {...task.Variables[variableIndex + 1]};\r\n if(nextVariable) {\r\n if(nextVariable.Inputs) {\r\n nextVariable.Inputs = inputs;\r\n }\r\n else {\r\n nextVariable.InputVariableID = inputs[0]\r\n }\r\n task.Variables.splice(variableIndex + 1, 1, nextVariable);\r\n }\r\n }\r\n task.Variables.splice(variableIndex, 1);\r\n //check if our variables in state has this resolved and remove it\r\n const resolvedTasks = {...this.state.resolvedTasks};\r\n const resolvedTask = {...resolvedTasks[task.ID]};\r\n const taskVariables = {...resolvedTask.variables};\r\n delete taskVariables[modifier.ID];\r\n resolvedTask.variables = taskVariables;\r\n resolvedTasks[task.ID] = resolvedTask;\r\n if(this.state.selectedTask) {\r\n this.setState({ selectedTask: task, resolvedTasks });\r\n }\r\n else {\r\n this.setState({ newTask: task, resolvedTasks });\r\n if(this.tempIDCounters[modifier.Type] === 1) {\r\n this.tempIDCounters[modifier.Type] = 0;\r\n }\r\n }\r\n }\r\n\r\n editTask(task) {\r\n this.setState({ selectedTask: task });\r\n }\r\n\r\n clearSelectedTask() {\r\n this.setState({ selectedTask: null });\r\n }\r\n\r\n deleteTask(task) {\r\n this.props.actions.removeTask(this.props.dashboard.ID, task.ID)\r\n .then(dashboard => {\r\n const toastrService = new ToastrService();\r\n toastrService.showSuccess('', 'Task has been deleted successfully!');\r\n })\r\n .catch(error => {\r\n const toastrService = new ToastrService();\r\n toastrService.showError('', 'Sorry, something went wrong, unable to delete task');\r\n });\r\n }\r\n \r\n openSecondModal(dataInputType, selectedModifier) {\r\n this.setState({ dataInputType, selectedModifier })\r\n if(dataInputType === 'UserDefined') {\r\n window.$('#modal-newdata-manual').modal('show');\r\n window.$('body').addClass('modal-open-secondary'); \r\n window.$('#modal-newdata-manual').on('hide.bs.modal', function(){\r\n window.$('body').removeClass('modal-open-secondary');\r\n });\r\n }\r\n else {\r\n window.$('#modal-newdata').modal('show');\r\n window.$('body').addClass('modal-open-secondary'); \r\n window.$('#modal-newdata').on('hide.bs.modal', function(){\r\n window.$('body').removeClass('modal-open-secondary');\r\n });\r\n }\r\n }\r\n\r\n openEditWidgetModal(widgetInstance, widget, parentWidget = null) { \r\n this.setState({selectedWidgetInstance: widgetInstance, selectedWidget: widget, selectedWidgetInstanceParent: parentWidget});\r\n window.$('#modal-edit-widget').modal('show');\r\n }\r\n\r\n removeModifierIncludeField(taskID, inputVariable, fieldName) {\r\n if(taskID === this.state.newTask.ID) {\r\n const newTask = {...this.state.newTask};\r\n const variableIndex = newTask.Variables.indexOf(inputVariable);\r\n let variables = [...newTask.Variables];\r\n let variable = variables[variableIndex];\r\n if(variable.IncludeFields.length === 1 && variable.IncludeFields[0] === fieldName) {\r\n //we're removing the only property, so just remove the modifier\r\n variables.splice(variableIndex, 1);\r\n /*const linkedTransformationModifier = modifiers.find(m => m.Type === 'Transformation' && m.Input.VariableName === (task.Name || task.Type));\r\n if(linkedTransformationModifier) {\r\n const modifierIndex = modifiers.indexOf(linkedTransformationModifier);\r\n modifiers = [...modifiers];\r\n modifiers.splice(modifierIndex, 1);\r\n }*/\r\n if(this.tempIDCounters[inputVariable.Type] === 1) {\r\n this.tempIDCounters[inputVariable.Type] = 0;\r\n }\r\n }\r\n else {\r\n variable = {...variable};\r\n const fieldIndex = variable.IncludeFields.indexOf(fieldName);\r\n variable.IncludeFields = [...variable.IncludeFields];\r\n variable.IncludeFields.splice(fieldIndex, 1);\r\n variables[variableIndex] = variable;\r\n }\r\n newTask.Variables = variables;\r\n this.setState({ newTask });\r\n }\r\n }\r\n\r\n async saveTask(taskID, taskName) {\r\n if(taskID === this.state.newTask.ID) {\r\n //we need to create a new task, create the task 1st (minus the modifiers)\r\n\r\n const task = { Name: taskName }\r\n await this.props.actions.addTask(this.props.dashboard.ID, task)\r\n .then(async dashboard => {\r\n //the name has to be unique so we can find the correct task using the task name\r\n const task = dashboard.Tasks.find(t => t.Name === taskName);\r\n //create the variables\r\n //we need to map the temporary variable IDs to the read IDs that the API will create so we can update any linked variables\r\n const variableIDMappings = {};\r\n const variables = [...this.state.newTask.Variables];\r\n for(let i = 0; i < variables.length; i++) {\r\n let variable = variables[i];\r\n const variableID = variable.ID;\r\n variable.ID = null;\r\n //update any temp IDs with the real ones\r\n if(variable.InputVariableID && variableIDMappings[variable.InputVariableID]) {\r\n variable.InputVariableID = variableIDMappings[variable.InputVariableID];\r\n };\r\n if(variable.Inputs && variable.Inputs.length) {\r\n for(let j = 0; j < variable.Inputs.length; j++) {\r\n variable.Inputs[j] = variableIDMappings[variable.Inputs[j]];\r\n }\r\n }\r\n if(variable.Type === 'Calculation') {\r\n //update the formula to replace any variable names with IDs\r\n const variableNameIDMappings = {};\r\n variable.Inputs.forEach(input => {\r\n const variable = dashboard.Tasks.find(t => t.ID === task.ID).Variables.find(v => v.ID === input);\r\n if(variable) {\r\n variableNameIDMappings[variable.Name] = variableIDMappings[variable.ID] || variable.ID;\r\n }\r\n });\r\n variable.Formula = widgetUtils.formatFormulaForParsing(variable.Formula, variableNameIDMappings);\r\n }\r\n await this.props.actions.addVariable(this.props.dashboard.ID, task.ID, variable).then(dashboard => {\r\n //the variable name has to be unique so we can find the correct variable using the variable name\r\n variable = dashboard.Tasks.find(t => t.ID === task.ID).Variables.find(v => v.Name === variable.Name);\r\n //now we have the real ID, store the mapping\r\n variableIDMappings[variableID] = variable.ID;\r\n if(i === variables.length - 1) {\r\n //it's the last one\r\n this.tempIDCounters = {};\r\n this.setState({ newTask: this.getNewTask() });\r\n const toastrService = new ToastrService();\r\n toastrService.showSuccess('', 'Task has been saved successfully!');\r\n }\r\n return true;\r\n })\r\n .catch(error => {\r\n throw(error);\r\n });\r\n }\r\n })\r\n .catch(error => {\r\n const toastrService = new ToastrService();\r\n toastrService.showError('', 'Sorry, something went wrong, unable to create task');\r\n }); \r\n }\r\n else {\r\n //if we have any new modifiers, we need to create them 1st so we can link the IDs properly, and then we finally call Save on the whole task\r\n //can we check if the modifier existed originally? we make the changes to the savedTask object but should still have the original\r\n const originalTask = this.props.dashboard.Tasks.find(t => t.ID === taskID);\r\n const originalVariableIDs = originalTask.Variables.map(v => v.ID);\r\n let selectedTask = {...this.state.selectedTask};\r\n const newVariables = selectedTask.Variables.filter(v => !originalVariableIDs.includes(v.ID));\r\n //we need to map the temporary variable IDs to the read IDs that the API will create so we can update any linked variables\r\n const variableIDMappings = {};\r\n await newVariables.forEach(async variable => {\r\n const variableID = variable.ID;\r\n variable.ID = null;\r\n await this.props.actions.addVariable(this.props.dashboard.ID, selectedTask.ID, variable).then(dashboard => {\r\n //the variable name has to be unique so we can find the correct variable using the variable name\r\n const variableIndex = selectedTask.Variables.findIndex(v => v.ID === variableID); \r\n variable = dashboard.Tasks.find(t => t.ID === selectedTask.ID).Variables.find(v => v.Name === variable.Name);\r\n //now we have the real ID, store the mapping\r\n variableIDMappings[variableID] = variable.ID; \r\n selectedTask.Variables.splice(variableIndex, 1, variable);\r\n return true;\r\n })\r\n .catch(error => {\r\n throw(error);\r\n })\r\n }); \r\n for(let i = 0; i < selectedTask.Variables.length; i++) {\r\n let variable = selectedTask.Variables[i];\r\n const originalVariable = originalTask.Variables.find(v => v.ID === variable.ID);\r\n if(originalVariable && variable !== originalVariable) {\r\n //we updated the variable, send an update to the API\r\n //update any temp IDs with the real ones\r\n if(variable.InputVariableID && variableIDMappings[variable.InputVariableID]) {\r\n variable.InputVariableID = variableIDMappings[variable.InputVariableID];\r\n };\r\n if(variable.Inputs && variable.Inputs.length) {\r\n for(let j = 0; j < variable.Inputs.length; j++) {\r\n if(variableIDMappings[variable.Inputs[j]]) {\r\n variable.Inputs[j] = variableIDMappings[variable.Inputs[j]];\r\n }\r\n }\r\n }\r\n if(variable.Type === 'Calculation' || variable.Type === 'Filter') {\r\n //update the formula to replace any variable names with IDs\r\n const variableNameIDMappings = {};\r\n const inputs = variable.Type === 'Calculation' ? variable.Inputs : variable.FormulaInputs;\r\n inputs.forEach(input => {\r\n const variable = this.props.dashboard.Tasks.find(t => t.ID === selectedTask.ID).Variables.find(v => v.ID === input);\r\n if(variable) {\r\n variableNameIDMappings[variable.Name] = variableIDMappings[variable.ID] || variable.ID;\r\n }\r\n });\r\n variable.Formula = widgetUtils.formatFormulaForParsing(variable.Formula, variableNameIDMappings);\r\n }\r\n await this.props.actions.updateVariable(this.props.dashboard.ID, selectedTask.ID, variable);\r\n } \r\n }\r\n //find any deleted variables\r\n const selectedVariableIDs = selectedTask.Variables.map(v => v.ID);\r\n const deletedVariableIDs = originalVariableIDs.filter(v => !selectedVariableIDs.includes(v));\r\n for(let i = 0; i < deletedVariableIDs.length; i++) {\r\n let variableID = deletedVariableIDs[i];\r\n await this.props.actions.removeVariable(this.props.dashboard.ID, selectedTask.ID, variableID);\r\n }\r\n const task = { ID: selectedTask.ID, Name: taskName, Description: selectedTask.Description };\r\n this.props.actions.updateTask(this.props.dashboard.ID, task)\r\n .then(dashboard => {\r\n const toastrService = new ToastrService();\r\n toastrService.showSuccess('', 'Task has been saved successfully!');\r\n this.setState({ selectedTask: null });\r\n }) \r\n }\r\n }\r\n\r\n saveWidget(widgetInstance) {\r\n this.props.actions.updateWidget(this.props.dashboard.ID, widgetInstance);\r\n /*let widget = this.state.widgets.find(w => w.key === widgetInstance.ID);\r\n const widgetIndex = this.state.widgets.indexOf(widget);\r\n const widgets = [...this.state.widgets];\r\n widget = {...widget};\r\n widget.props = {...widget.props};\r\n widget.props.widgetSettings = widgetInstance;\r\n widget.props.tasks = this.state.resolvedTasks;\r\n widgets.splice(widgetIndex, 1, widget);\r\n this.setState({ widgets });*/\r\n window.$('#modal-edit-widget').modal('hide');\r\n }\r\n\r\n onDataChange(widgetHierarchy, propertyName, value) {\r\n const outputTaskValues = [...this.state.outputTaskValues];\r\n let outputTaskValue = outputTaskValues.find(o => o.widgetHierarchy.join('-') === widgetHierarchy.join('-') && o.propertyName === propertyName);\r\n if(!outputTaskValue) {\r\n outputTaskValue = { widgetHierarchy, propertyName, value };\r\n outputTaskValues.push(outputTaskValue);\r\n }\r\n else {\r\n const index = outputTaskValues.indexOf(outputTaskValue);\r\n outputTaskValue = {...outputTaskValue};\r\n outputTaskValue.value = value;\r\n outputTaskValues.splice(index, 1, outputTaskValue);\r\n } \r\n\r\n let resolvedTasks = {...this.state.resolvedTasks};\r\n const taskKeys = Object.keys(resolvedTasks);\r\n for(let i = 0; i < taskKeys.length; i++) {\r\n const taskID = taskKeys[i];\r\n const task = resolvedTasks[taskID];\r\n const variableKeys = Object.keys(task.variables);\r\n for(let j = 0; j < variableKeys.length; j++) {\r\n const variableID = variableKeys[j];\r\n const variable = task.variables[variableID];\r\n if(variable.Type === 'OutputValue') {\r\n //we store the property name in the last item of the variable field name hierarchy\r\n if(widgetUtils.bindingMatch(variable.WidgetHierarchy, variable.OutputFieldName, widgetHierarchy, propertyName)) {\r\n //we have the right variable, set the value\r\n resolvedTasks[taskID] = {...resolvedTasks[taskID]};\r\n const variablesUpdated = {...task.variables}; \r\n variablesUpdated[variableID] = Object.assign({}, variablesUpdated[variableID], {currentValue: value});\r\n resolvedTasks[taskID].variables = variablesUpdated;\r\n const finalVariable = resolvedTasks[taskID].variables[variableKeys[variableKeys.length - 1]];\r\n if(finalVariable) {\r\n resolvedTasks[taskID].currentValue = finalVariable.currentValue;\r\n resolvedTasks[taskID].outputType = finalVariable.OutputType;\r\n }\r\n //resolve the other variables again\r\n resolvedTasks = widgetUtils.resolveTasks(this.props.dashboard.Tasks, resolvedTasks);\r\n break;\r\n }\r\n /*const propertyNameMatch = _.last(variable.WidgetHierarchy) === propertyName;\r\n if(widgetHierarchy.length === variable.WidgetHierarchy.length - 1 && propertyNameMatch) {\r\n let matching = true;\r\n for(let j = 0; j < widgetHierarchy.length; j++) {\r\n if(widgetHierarchy[j] !== variable.WidgetHierarchy[j]) {\r\n matching = false;\r\n break;\r\n }\r\n }\r\n if(matching) {\r\n //we have the right variable, set the value\r\n const variablesUpdated = {...variables}; \r\n variablesUpdated[keys[i]] = Object.assign({}, variablesUpdated[keys[i]], {currentValue: value});\r\n this.setState({ variables: variablesUpdated });\r\n break;\r\n }\r\n }*/\r\n }\r\n }\r\n }\r\n this.setState({ outputTaskValues, resolvedTasks });\r\n }\r\n\r\n removeGridNodesForWidget(widgetInstanceID, excludeItemIDs = []) {\r\n if(this.grid) {\r\n this.grid.grid.nodes.filter(n => n.el[0].dataset.widgetId === widgetInstanceID && !excludeItemIDs.includes(n.el[0].dataset.gsId)).forEach(node => {\r\n this.grid.removeWidget(node.el);\r\n });\r\n }\r\n }\r\n\r\n render() {\r\n const dashboard = this.props.dashboard;\r\n return (\r\n \r\n {\r\n !this.props.loading && this.state.dataLoaded ?\r\n
\r\n \r\n \r\n \r\n Tasks\r\n \r\n \r\n \r\n
\r\n
\r\n
Welcome to your new dashboard! \r\n
You don't have any widgets added yet. Click top right button and drag and drop any number of widgets and re-arrange them the way you like.
\r\n
\r\n
this.gridStackRef = control} data-gs-width={this.getGridColumnCount()} data-gs-height={this.getGridRowCount()} style={{marginBottom: '10px'}}>\r\n {this.state.widgets} \r\n
\r\n \r\n \r\n {/* Modal: Add widget */} \r\n \r\n : null\r\n }\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
{this.props.name} \r\n
{this.props.email}
\r\n
\r\n
\r\n
this.props.actions.addUser(dashboardID, playerID, userID)} />\r\n this.props.showModal(() => addUserModal, { isOpen: true })\r\n }\r\n\r\n toggleSelectedUser(event, userID) {\r\n let selectedUserIDs = [...this.state.selectedUserIDs];\r\n if(!selectedUserIDs.find(u => u === userID)) {\r\n selectedUserIDs.push(userID);\r\n }\r\n else {\r\n _.pull(selectedUserIDs, userID);\r\n }\r\n this.setState({\r\n selectedUserIDs\r\n })\r\n }\r\n\r\n isSelected(userID) {\r\n return this.state.selectedUserIDs.find(u => u === userID) ? true : false;\r\n }\r\n\r\n\r\n deleteSelectedUsers(event) {\r\n event.preventDefault();\r\n if(this.state.selectedUserIDs.length) {\r\n const deleteAction = () => {\r\n this.props.actions.removeUsers(this.props.dashboard.ID, this.props.match.params.playerID, this.state.selectedUserIDs)\r\n .then(_ => this.setState({\r\n selectedUserIDs: []\r\n }));\r\n } \r\n const deleteConfirmationModal = 1 ? 's' : ''} from this dashboard?`} />\r\n this.props.showModal(() => deleteConfirmationModal, { isOpen: true })\r\n }\r\n }\r\n\r\n deleteUser(userID) {\r\n this.props.actions.removeUser(this.props.dashboard.ID, this.props.match.params.playerID, userID);\r\n }\r\n\r\n getPlayer() {\r\n let player = null;\r\n if(this.props.dashboard && this.props.match.params.playerID) {\r\n player = this.props.dashboard.Players.find(p => p.ID === this.props.match.params.playerID);\r\n }\r\n return player;\r\n }\r\n\r\n render() {\r\n const dashboard = this.props.dashboard;\r\n const player = this.getPlayer();\r\n const users = this.getUsers();\r\n return (\r\n \r\n {\r\n !this.props.loading ?\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
Dashboard Access: {dashboard ? dashboard.Name : ''} {player ? `- ${player.Label}` : ''} \r\n
{this.getUserCount()}
\r\n
\r\n
\r\n {\r\n this.state.selectedUserIDs.length ?\r\n Delete selected \r\n : null\r\n }\r\n New user \r\n
\r\n
\r\n
\r\n
\r\n
\r\n : null\r\n }\r\n
this.setState({dropdownOpened: {}})}>\r\n {\r\n !this.props.loading && dashboard ?\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
Avatar Settings \r\n
Player: {player.Label}
\r\n
\r\n
\r\n Reset to Default \r\n Save Changes \r\n \r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n : null\r\n }\r\n
\r\n {\r\n
\r\n \r\n
\r\n
{name} \r\n \r\n
\r\n
\r\n
\r\n
View\r\n {\r\n role === roleTypes.Admin || role === roleTypes.Manager || role === roleTypes.SuperUser ?\r\n
\r\n \r\n : \r\n null\r\n }\r\n \r\n
\r\n
\r\n }\r\n
\r\n \r\n
\r\n
{this.getPlaylistSummaryText(this.props.playlists)}
\r\n
\r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nPlaylists.propTypes = {\r\n actions: PropTypes.object.isRequired\r\n};\r\n\r\nfunction mapStateToProps(state, ownProps) {\r\n const playlists = state.playlist.playlists;\r\n const role = state.account.user.Role;\r\n const userID = state.account.user.ID;\r\n return { \r\n playlists, \r\n playlistsLoading: state.playlist.playlistsLoading, \r\n role, \r\n userID\r\n };\r\n}\r\n\r\nfunction mapDispatchToProps(dispatch) {\r\n return {\r\n //playlist actions will now be available under this.props.actions\r\n actions: bindActionCreators(Object.assign({}, playlistActions), dispatch)\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Playlists);","import React from 'react';\r\n//import PropTypes from 'prop-types';\r\nimport {connect} from 'react-redux';\r\nimport {bindActionCreators} from 'redux';\r\nimport * as playlistActions from '../../actions/playlistActions';\r\nimport * as dashboardActions from '../../actions/dashboardActions';\r\nimport Dashboard from '../dashboards/Dashboard';\r\n\r\nclass Playlist extends React.Component {\r\n constructor(props, context) {\r\n super(props, context);\r\n this.initialisePlaylist = this.initialisePlaylist.bind(this);\r\n this.rotateDashboard = this.rotateDashboard.bind(this);\r\n this.getPlaylistItems = this.getPlaylistItems.bind(this);\r\n this.timer = null;\r\n this.state = { \r\n currentPlaylistItem: null\r\n };\r\n }\r\n\r\n componentDidMount() { \r\n this._isMounted = true;\r\n if(!this.props.playlist) {\r\n //if we're browsing directly to this page, we might not have the playlist details\r\n this.props.actions.getPlaylists();\r\n }\r\n else {\r\n this.initialisePlaylist();\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if(!prevProps.playlist && this.props.playlist) {\r\n this.initialisePlaylist();\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n if(this.timer) {\r\n window.clearTimeout(this.timer);\r\n }\r\n this._isMounted = false;\r\n }\r\n\r\n getPlaylistItems() {\r\n const playlistItems = [...this.props.playlist.Items];\r\n playlistItems.sort((a, b) => {\r\n const aOrder = a.Order;\r\n const bOrder = b.Order;\r\n return aOrder - bOrder;\r\n });\r\n return playlistItems;\r\n }\r\n\r\n initialisePlaylist() {\r\n if(this.timer) {\r\n window.clearTimeout(this.timer);\r\n }\r\n const playlistItems = this.getPlaylistItems();\r\n if(playlistItems.length > 0) {\r\n const initialItem = playlistItems[0];\r\n this.setState({\r\n currentPlaylistItem: initialItem\r\n }); \r\n if(initialItem.UseSpecifiedDuration) {\r\n this.timer = window.setTimeout(this.rotateDashboard, initialItem.Seconds * 1000)\r\n } \r\n const dashboardIDs = playlistItems.map(i => i.DashboardID);\r\n const dashboardIDsToLoad = [];\r\n for(let i = 0; i < dashboardIDs.length; i++) {\r\n const dashboardID = dashboardIDs[i];\r\n if(!dashboardIDsToLoad.includes(dashboardID)) {\r\n const dashboard = this.props.dashboards.find(d => d.ID === dashboardID);\r\n if(!dashboard) {\r\n dashboardIDsToLoad.push(dashboardIDs[i])\r\n }\r\n }\r\n }\r\n if(dashboardIDsToLoad.length) {\r\n this.props.actions.getDashboardList(dashboardIDsToLoad);\r\n }\r\n }\r\n }\r\n\r\n rotateDashboard() {\r\n //we could have the same dashboard multiple times, match using the item id, not the dashboard id\r\n if(this.state.currentPlaylistItem) {\r\n let index = null;\r\n const playlistItems = this.getPlaylistItems();\r\n for(let i = 0; i < playlistItems.length; i++) {\r\n if(playlistItems[i].ID === this.state.currentPlaylistItem.ID) {\r\n index = i;\r\n break;\r\n }\r\n }\r\n if(index !== null) {\r\n let newItem;\r\n if(playlistItems.length > index + 1) {\r\n newItem = {...playlistItems[index + 1]};\r\n }\r\n else {\r\n newItem = {...playlistItems[0]};\r\n }\r\n if(!this._isMounted){ return };\r\n this.setState({\r\n currentPlaylistItem: null\r\n }, () => {\r\n //make sure we've hidden any modals before we show the next dashboard (as they're shown outside the dashboard component tree) \r\n window.$('#modal').modal('hide');\r\n this.setState({\r\n currentPlaylistItem: newItem\r\n })\r\n });\r\n if(newItem.UseSpecifiedDuration) {\r\n this.timer = window.setTimeout(this.rotateDashboard, newItem.Seconds * 1000)\r\n }\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return ( \r\n \r\n {\r\n this.props.playlist ? \r\n this.state.currentPlaylistItem && this.props.dashboards.find(d => d.ID === this.state.currentPlaylistItem.DashboardID) ?\r\n
\r\n : \r\n !this.state.currentPlaylistItem ?\r\n
\r\n
\r\n
There are no dashboards in this playlist
\r\n
\r\n
\r\n :\r\n this.props.dashboardsLoading || this.props.dashboardItemsLoading.includes(this.state.currentPlaylistItem.DashboardID) ? \r\n
\r\n :\r\n
\r\n
\r\n
Dashboard not found
\r\n
\r\n
\r\n\r\n : \r\n this.props.playlistLoading ? \r\n
Loading...
\r\n : \r\n
\r\n
\r\n
Playlist not found
\r\n
\r\n
\r\n }\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
d.ID === item.DashboardID))} alt=\"Avatar\"/>\r\n
\r\n
\r\n
{item.Name} \r\n
{this.getDashboardDescription(item, dashboards.find(d => d.ID === item.DashboardID))}
\r\n
\r\n
\r\n
Duration: {this.getDurationText(item)}
\r\n
\r\n
\r\n
\r\n
1 ? 's' : ''}? This action is irreversible.`} />\r\n this.props.showModal(() => deleteConfirmationModal, { isOpen: true })\r\n }\r\n }\r\n\r\n render() {\r\n const playlist = this.props.playlist;\r\n const items = this.getItems();\r\n return (\r\n \r\n {\r\n !this.props.loading ?\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
Playlist Settings: {playlist ? playlist.Name : ''} \r\n
{this.getItemCount()}
\r\n
\r\n {\r\n playlist ?\r\n
\r\n {\r\n this.state.selectedItemIDs.length ?\r\n Delete selected \r\n : null\r\n }\r\n this.addItem(e, items)}>New dashboard \r\n
\r\n : null\r\n }\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n : null\r\n }\r\n
\r\n {\r\n !this.props.match.params.id || this.props.playlist ?\r\n
\r\n
\r\n
\r\n
{this.props.playlist ? 'Edit Playlist' : 'Add Playlist'} \r\n \r\n
\r\n
\r\n : \r\n this.props.playlistsLoading ? \r\n
Loading...
\r\n :\r\n
Unable to find playlist
\r\n }\r\n
this.props.actions.addUser(playlistID, userID)} />\r\n this.props.showModal(() => addUserModal, { isOpen: true })\r\n }\r\n\r\n toggleSelectedUser(event, userID) {\r\n let selectedUserIDs = [...this.state.selectedUserIDs];\r\n if(!selectedUserIDs.find(u => u === userID)) {\r\n selectedUserIDs.push(userID);\r\n }\r\n else {\r\n _.pull(selectedUserIDs, userID);\r\n }\r\n this.setState({\r\n selectedUserIDs\r\n })\r\n }\r\n\r\n isSelected(userID) {\r\n return this.state.selectedUserIDs.find(u => u === userID) ? true : false;\r\n }\r\n\r\n\r\n deleteSelectedUsers(event) {\r\n event.preventDefault();\r\n if(this.state.selectedUserIDs.length) {\r\n const deleteAction = () => {\r\n this.props.actions.removeUsers(this.props.playlist.ID, this.state.selectedUserIDs)\r\n .then(_ => this.setState({\r\n selectedUserIDs: []\r\n }));\r\n } \r\n const deleteConfirmationModal = 1 ? 's' : ''} from this playlist?`} />\r\n this.props.showModal(() => deleteConfirmationModal, { isOpen: true })\r\n }\r\n }\r\n\r\n deleteUser(userID) {\r\n this.props.actions.removeUser(this.props.playlist.ID, userID);\r\n }\r\n \r\n render() {\r\n const playlist = this.props.playlist;\r\n const users = this.getUsers();\r\n return (\r\n \r\n {\r\n !this.props.loading ?\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
Playlist Access: {playlist ? playlist.Name : ''} \r\n
{this.getUserCount()}
\r\n
\r\n
\r\n {\r\n this.state.selectedUserIDs.length ?\r\n Delete selected \r\n : null\r\n }\r\n New user \r\n
\r\n
\r\n
\r\n
\r\n
\r\n : null\r\n }\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
{user.Email} \r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n
\r\n
{`${usersLength} user${usersLength === 1 ? '' : 's'}`}
\r\n
\r\n
\r\n
\r\n {\r\n !this.props.usersLoading ?\r\n
\r\n {\r\n this.props.users.map(user =>\r\n
\r\n : null\r\n }\r\n
\r\n );\r\n }\r\n}\r\n\r\nUsers.propTypes = {\r\n actions: PropTypes.object.isRequired,\r\n users: PropTypes.array.isRequired\r\n};\r\n\r\nfunction mapStateToProps(state, ownProps) {\r\n const users = state.user.users;\r\n const usersLoading = state.user.usersLoading;\r\n return { users, usersLoading };\r\n}\r\n\r\nfunction mapDispatchToProps(dispatch) {\r\n return {\r\n //user actions will now be available under this.props.actions\r\n actions: bindActionCreators(Object.assign({}, userActions), dispatch)\r\n };\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Users);","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport { Link } from 'react-router-dom';\r\nimport * as userActions from '../../actions/userActions';\r\nimport validator from 'validator';\r\nimport CropModal from '../common/CropModal';\r\nimport InfoModal from '../common/InfoModal';\r\nimport * as imageUtils from '../../utils/imageUtils';\r\nimport { withModalContext } from '../../services/modalService';\r\nimport roleTypes from '../../constants/roleTypes';\r\n\r\nclass CreateUpdateUser extends React.Component {\r\n constructor(props, context) {\r\n debugger;\r\n super(props, context);\r\n this.createUser = this.createUser.bind(this);\r\n this.saveUser = this.saveUser.bind(this);\r\n this.onChange = this.onChange.bind(this);\r\n this.formIsValid = this.formIsValid.bind(this);\r\n this.getExistingUserDefaultState = this.getExistingUserDefaultState.bind(this);\r\n this.getNewUserDefaultState = this.getNewUserDefaultState.bind(this);\r\n this.previewImage = this.previewImage.bind(this);\r\n this.imageCropped = this.imageCropped.bind(this);\r\n this.getCreateUserEnabled = this.getCreateUserEnabled.bind(this);\r\n this.showMaxUsersModal = this.showMaxUsersModal.bind(this);\r\n const roles = [];\r\n roles.push(roleTypes.Viewer);\r\n roles.push(roleTypes.Manager);\r\n roles.push(roleTypes.Admin);\r\n if(this.props.myRole === roleTypes.SuperUser) {\r\n roles.push(roleTypes.SuperUser);\r\n }\r\n if(this.props.user) {\r\n this.state = this.getExistingUserDefaultState(this.props, roles);\r\n }\r\n else {\r\n this.state = this.getNewUserDefaultState(this.props, roles);\r\n }\r\n }\r\n\r\n componentDidMount() { \r\n this.props.actions.getUsers();\r\n if(!this.getCreateUserEnabled()) {\r\n this.showMaxUsersModal();\r\n }\r\n }\r\n\r\n componentWillUpdate(nextProps) {\r\n if(nextProps.user && !this.props.user) {\r\n this.setState(this.getExistingUserDefaultState(nextProps));\r\n }\r\n else if(!nextProps.user && this.props.user) {\r\n this.setState(this.getNewUserDefaultState(nextProps));\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if(prevProps.user && !this.props.user) {\r\n //we've reloaded the page to create a new user, load the user list.\r\n //we need the user list for new users as otherwise when we create them and redirect \r\n //to the /users endpoint, it will only have the single user present\r\n debugger;\r\n this.props.actions.getUsers();\r\n }\r\n if(!this.props.user && (prevState.clientID !== this.state.clientID || prevProps.clients.length !== this.props.clients.length) && this.state.clientID) {\r\n //we're creating a new user and have updated the client, check if we're allowed to create users for this client\r\n if(!this.getCreateUserEnabled()) {\r\n this.showMaxUsersModal();\r\n }\r\n }\r\n }\r\n\r\n getNewUserDefaultState(props, roles = this.state.roles) {\r\n return { \r\n email: '',\r\n password: '',\r\n fullName: '',\r\n role: roleTypes.Viewer,\r\n clientUserID: '',\r\n clientID: props.myClientID || '',\r\n emailAlertsEnabled: false,\r\n roles\r\n };\r\n }\r\n\r\n getExistingUserDefaultState(props, roles = this.state.roles) {\r\n return { \r\n email: props.user.Email,\r\n fullName: `${props.user.FirstName} ${props.user.LastName}`,\r\n role: props.user.Role,\r\n clientUserID: props.user.ClientUserID || '',\r\n avatar: props.user.Avatar ? imageUtils.getAvatarBase64Url(props.user.Avatar) : '',\r\n emailAlertsEnabled: props.user.EmailAlertsEnabled,\r\n roles\r\n };\r\n }\r\n\r\n createUser(event) {\r\n debugger;\r\n event.preventDefault();\r\n if(this.formIsValid()) {\r\n const nameArr = this.state.fullName.split(' ');\r\n const firstName = nameArr[0];\r\n const lastName = nameArr[1];\r\n this.props.actions.createUser(this.state.email, this.state.password, firstName, lastName, this.state.role, this.state.clientID, this.state.clientUserID, this.state.emailAlertsEnabled);\r\n } \r\n }\r\n\r\n saveUser(event) {\r\n debugger;\r\n event.preventDefault();\r\n if(this.formIsValid()) {\r\n const nameArr = this.state.fullName.split(' ');\r\n const firstName = nameArr[0];\r\n const lastName = nameArr[1];\r\n const avatar = this.state.avatar ? this.state.avatar.split(',')[1] : null;\r\n this.props.actions.updateUser(this.props.user.ID, this.state.email, firstName, lastName, this.state.role, this.state.clientUserID, avatar, this.state.emailAlertsEnabled);\r\n } \r\n }\r\n\r\n getCreateUserEnabled() {\r\n let createUserEnabled = true;\r\n if(!this.props.user) {\r\n //we're creating a user\r\n if(this.state.clientID) {\r\n debugger;\r\n const client = this.props.clients.find(c => c.ID === this.state.clientID);\r\n const userCount = this.props.users.filter(u => u.ClientID === this.state.clientID).length;\r\n if(client && userCount >= client.MaximumUserCount) {\r\n createUserEnabled = false;\r\n }\r\n }\r\n }\r\n return createUserEnabled\r\n }\r\n\r\n showMaxUsersModal() {\r\n const bodyText = this.props.myRole === roleTypes.SuperUser ? \"This client has reached the maximum number of users allowed\" : \"You have reached the maximum number of users allowed for this account\";\r\n const maxUsersModal = \r\n {\r\n !this.props.match.params.id || this.props.user ?\r\n
\r\n
\r\n
\r\n
{this.props.user ? 'Edit User' : 'Add User'} \r\n \r\n
\r\n
\r\n : \r\n this.props.usersLoading ? \r\n
Loading...
\r\n :\r\n
Unable to find user
\r\n }\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n
Sorry, we couldn't find that page!
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default NotFound;","import { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { withRouter } from 'react-router-dom';\r\n\r\nclass ScrollToTop extends Component {\r\n componentDidUpdate(prevProps) {\r\n if (this.props.location !== prevProps.location) {\r\n window.scrollTo(0, 0);\r\n }\r\n }\r\n \r\n render() {\r\n return this.props.children;\r\n }\r\n }\r\n \r\n ScrollToTop.propTypes = {\r\n location: PropTypes.object.isRequired,\r\n children: PropTypes.object.isRequired\r\n};\r\n\r\n export default withRouter(ScrollToTop);","import React from 'react';\r\nimport { Route, Redirect } from 'react-router-dom';\r\nimport { connect } from 'react-redux';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst PrivateRoute = (props) => {\r\n const { component: Component, authenticated, allowRoles, role, ...rest } = props;\r\n return \r\n authenticated === true ? \r\n allowRoles && allowRoles.length && allowRoles.find(r => r === role) == null ? //we're restricting the roles and the user doesn't have the required role, redirect to the home page\r\n this.removeWidget(widgetInstance, gridItem)} \r\n xPos={widgetInstance.X} \r\n yPos={widgetInstance.Y} \r\n width={widgetInstance.Width} \r\n height={widgetInstance.Height} \r\n widgetHierarchy={[widgetInstance.ID]}\r\n onRef={this.setGridItemRef} \r\n onDataChange={this.onDataChange}\r\n index={index}\r\n gridColumnCount={this.getGridColumnCount()}\r\n removeGridNodesForWidget={this.removeGridNodesForWidget} />;\r\n }\r\n\r\n initialiseWidgets(props) {\r\n const dashboardWidgetItems = props.dashboard.Widgets;\r\n const allWidgets = props.widgets;\r\n const widgets = [];\r\n for(let i = 0; i < dashboardWidgetItems.length; i++) {\r\n const widgetItem = dashboardWidgetItems[i];\r\n const widget = allWidgets.find(w => w.ID === widgetItem.WidgetID);\r\n widgets.push(this.getGridStackItem(widget, widgetItem, widgets.length));\r\n }\r\n this.setState({ widgets, selectedWidget: null, selectedWidgetInstance: null, selectedWidgetInstanceParent: null });\r\n }\r\n\r\n getGridRowCount() {\r\n return this.state.rowCount || 6;\r\n }\r\n\r\n getGridColumnCount() {\r\n return this.state.columnCount || 4;\r\n }\r\n\r\n getGridCellHeight() {\r\n return 80;\r\n }\r\n\r\n initialiseGridStack() {\r\n this.livePosX = null;\r\n this.livePosY = null; \r\n\r\n const gridStack = $(this.gridStackRef);\r\n if(gridStack.length !== 0) {\r\n if(this.grid) {\r\n //clear the data to allow it to be reloaded\r\n gridStack.data('gridstack', null);\r\n }\r\n gridStack.gridstack({\r\n cellHeight: this.getGridCellHeight(),\r\n width: this.getGridColumnCount(),\r\n verticalMargin: 0, //20,\r\n row: this.getGridRowCount(),\r\n //maxHeight: 10000, //this is a custom parameter which we've implemented\r\n float: true,\r\n animate: false\r\n });\r\n this.grid = gridStack.data('gridstack');\r\n gridStack.on('change', (event, items) => this.handleChange(items));\r\n } \r\n\r\n this.dragItems = $('.widgets-list .widget-item');\r\n this.dragDropZones = gridStack;\r\n this.currentWidget = null; \r\n this.currentWidgetID = null;\r\n }\r\n\r\n initialiseWidgetsDragDrop() {\r\n if(this.draggable) {\r\n this.draggable.destroy();\r\n }\r\n if(!this.props.loading) {\r\n const widgetList = $('.widgets-list', $('#modal-new-widget'))[0];\r\n this.draggable = new Draggable([widgetList], {\r\n draggable: '.widget-item',\r\n mirror: {\r\n appendTo: 'body',\r\n }\r\n })\r\n .on('drag:start', (dragEvent) => {\r\n $(this.gridStackRef).addClass('over');\r\n this.handleDragStart(dragEvent);\r\n const source = $(dragEvent.source);\r\n const position = source.position();\r\n this.leftOffset = dragEvent.sensorEvent.clientX - position.left;\r\n this.topOffset = dragEvent.sensorEvent.clientY - position.top; \r\n })\r\n .on('drag:move', (dragEvent) => {\r\n this.handleDragOver(dragEvent);\r\n }) \r\n .on('drag:stop', (dragEvent) => {\r\n //remove the over class from the container\r\n $(this.gridStackRef).removeClass('over');\r\n this.handleDrop(dragEvent);\r\n })\r\n }\r\n }\r\n\r\n initialiseColourPicker() { \r\n const cPalette = [\r\n [\"#20B99D\", \"#2ACD70\", \"#3597E0\", \"#965DAA\", \"#3B4657\", \"#2D3E4E\", \"#95A3A4\"],\r\n [\"#F2C216\", \"#E47F23\", \"#E44E3F\", \"#BCC4C7\", \"#7E8C8D\", \"#000\", \"#fff\"]\r\n ];\r\n\r\n //-- Color Picker\r\n if(this.swatchRef) {\r\n const element = window.$(this.swatchRef);\r\n\r\n const defaultColor = element[0].dataset.defaultColor;\r\n element.spectrum({\r\n color: defaultColor,\r\n showPaletteOnly: false,\r\n showPalette: true,\r\n showInput: true,\r\n preferredFormat: \"hex\",\r\n palette: cPalette,\r\n allowEmpty:true,\r\n showButtons: false,\r\n appendTo: element.parent('.colorswatch'),\r\n change: (color) => { \r\n this.setState({backgroundColour: color.toHexString()});\r\n element.spectrum(\"hide\");\r\n }\r\n });\r\n }\r\n }\r\n\r\n //-- Start drag\r\n handleDragStart(e) {\r\n console.log(\"Drag started...\");\r\n //the event object is different based on how we're doing the drag so try both\r\n const control = $(e.currentTarget || e.originalSource);\r\n control.addClass('dragged');\r\n $('body').addClass('drag-in-progress');\r\n\r\n this.currentWidgetID = control.attr('data-wid');\r\n this.currentWidget = control;\r\n\r\n if(e.originalEvent.dataTransfer) {\r\n e.originalEvent.dataTransfer.effectAllowed = 'move';\r\n }\r\n }\r\n \r\n //-- Dragging over target elements\r\n handleDragOver(e) {\r\n //console.log(\"Dragging over...\" + e.target || e.originalSource);\r\n\r\n if (e.preventDefault) {\r\n e.preventDefault();\r\n }\r\n if(e.originalEvent.dataTransfer) {\r\n e.originalEvent.dataTransfer.dropEffect = 'move';\r\n } \r\n\r\n //-- Insert new content between block level elements\r\n let elementOver = $(e.target || e.originalSource);\r\n\r\n //-- Calculate drag position to use it to drop\r\n //-- element to exact location on the grid\r\n let gridWidth = $(this.gridStackRef).width();\r\n let gridHeight = $(this.gridStackRef).height();\r\n let posX = (e.pageX || e.originalEvent.pageX) - elementOver.offset().left;\r\n let posY = (e.pageY || e.originalEvent.pageY) - elementOver.offset().top;\r\n let cellWidth = gridWidth / this.getGridColumnCount();\r\n\r\n this.livePosX = Math.floor( posX / cellWidth );\r\n this.livePosY = Math.floor( posY / this.getGridCellHeight() );\r\n }\r\n\r\n\r\n //-- Entering drag target\r\n handleDragEnter(e) {\r\n // this / e.target is the current hover target.\r\n e.preventDefault();\r\n\r\n console.log('Drop zone entered')\r\n $(this).addClass('over');\r\n }\r\n\r\n //-- Leaving drag target\r\n handleDragLeave(e) {\r\n console.log('Left drop zone')\r\n $(this).removeClass('over'); // this / e.target is previous target element.\r\n }\r\n\r\n\r\n //-- Dropping element\r\n handleDrop(e) {\r\n if (e.stopPropagation) {\r\n e.stopPropagation();\r\n }\r\n\r\n const widget = this.props.widgets.find(w => w.ID === this.currentWidgetID);\r\n\r\n let wX = this.livePosX,\r\n wY = this.livePosY,\r\n wW = widget.DefaultWidth,\r\n wH = widget.DefaultHeight;\r\n\r\n let columnCount = this.state.columnCount;\r\n let rowCount = this.state.rowCount;\r\n if(wX + wW > columnCount) {\r\n wW = 1;\r\n wX = columnCount - 1;\r\n //columnCount = widgetInstance.X + widgetInstance.Width;\r\n } \r\n if(wY + wH > rowCount) {\r\n wH = 1;\r\n wY = rowCount - 1;\r\n // rowCount = widgetInstance.Y + widgetInstance.Height;\r\n } \r\n\r\n const widgetName = this.getWidgetName(widget.Slug);\r\n const widgetInstance = {\r\n ID: widgetName,\r\n WidgetID: widget.ID,\r\n X: wX,\r\n Y: wY,\r\n Width: wW,\r\n Height: wH,\r\n Name: widgetName,\r\n Adjustments: [],\r\n FieldBindings: []\r\n };\r\n const widgets = [...this.state.widgets];\r\n\r\n widgets.push(this.getGridStackItem(widget, widgetInstance, this.state.widgets.length)); \r\n this.setState({ widgets });\r\n this.dragItems.removeClass('dragged');\r\n\r\n //-- Remove Helper element\r\n $('.dragSpacer', this.dragDropZones).remove();\r\n $('body').removeClass('drag-in-progress');\r\n this.currentWidget = null;\r\n this.currentWidgetID = null;\r\n\r\n return false;\r\n }\r\n\r\n handleChange(items) {\r\n if(items && items.length) {\r\n const changedItem = items[0];\r\n const changedWidgetID = changedItem.el[0].dataset.widgetId;\r\n let gridItem = this.state.widgets.find(w => w.key === changedWidgetID);\r\n const gridItemIndex = this.state.widgets.indexOf(gridItem);\r\n if(gridItem) {\r\n let widget = gridItem.props.widgetSettings;\r\n //make sure something has changed as we also end up here when new items are added, e.g. in an iteration modifier\r\n if(widget.X !== changedItem.x || widget.Y !== changedItem.y || widget.Width !== changedItem.width || widget.Height !== changedItem.height) {\r\n const widgets = [...this.state.widgets];\r\n gridItem = {...gridItem};\r\n gridItem.props = {...gridItem.props};\r\n gridItem.props.widgetSettings = {...gridItem.props.widgetSettings};\r\n gridItem.props.widgetSettings.X = changedItem.x;\r\n gridItem.props.widgetSettings.Y = changedItem.y;\r\n gridItem.props.widgetSettings.Width = changedItem.width;\r\n gridItem.props.widgetSettings.Height = changedItem.height;\r\n widgets[gridItemIndex] = gridItem;\r\n let columnCount = this.state.columnCount;\r\n let rowCount = this.state.rowCount;\r\n if(changedItem.x + changedItem.width > columnCount) {\r\n columnCount = changedItem.x + changedItem.width;\r\n } \r\n if(changedItem.y + changedItem.height > rowCount) {\r\n rowCount = changedItem.y + changedItem.height;\r\n }\r\n this.setState({ widgets, columnCount, rowCount });\r\n }\r\n }\r\n }\r\n }\r\n\r\n getWidgetName(prefix) {\r\n let widgetName;\r\n while(!widgetName || this.state.widgets.find(w => w.Name === widgetName) != null) {\r\n widgetName = this.getTempID(prefix);\r\n }\r\n return widgetName;\r\n }\r\n\r\n removeWidget(widget, gridItem) {\r\n if(window.confirm('Delete item?')) {\r\n this.removedItem = gridItem.gridItemRef;\r\n const widgets = [...this.state.widgets];\r\n const widgetIndex = widgets.findIndex(w => w.ID === widget.ID);\r\n widgets.splice(widgetIndex, 1);\r\n this.setState({ widgets });\r\n }\r\n } \r\n \r\n openEditWidgetModal(widgetInstance, widget, parentWidget = null) { \r\n this.setState({selectedWidgetInstance: widgetInstance, selectedWidget: widget, selectedWidgetInstanceParent: parentWidget});\r\n window.$('#modal-edit-widget').modal('show');\r\n }\r\n\r\n updateWidget(widgetInstance) {\r\n const widgets = [...this.state.widgets];\r\n let widget = widgets.find(w => w.key === widgetInstance.ID);\r\n const widgetIndex = widgets.indexOf(widget);\r\n widget = {...widget};\r\n widget.props = {...widget.props};\r\n widget.props.widgetSettings = widgetInstance;\r\n widgets[widgetIndex] = widget;\r\n this.setState({ widgets });\r\n window.$('#modal-edit-widget').modal('hide');\r\n }\r\n\r\n toggleInlineEditing(event) {\r\n event.preventDefault();\r\n if(!this.state.inlineEditingEnabled) {\r\n //we're going to enable it, so set the focus\r\n window.setTimeout(() => {\r\n window.$(`#inline-name`).focus();\r\n }, 300);\r\n }\r\n this.setState({ inlineEditingEnabled: !this.state.inlineEditingEnabled });\r\n }\r\n\r\n saveWidget(event) {\r\n event.preventDefault();\r\n if(!this.state.ID) {\r\n const widget = {\r\n Name: this.state.widgetName,\r\n Slug: '', //the slug doesn't matter for custom controls, we use it to map to the control for system controls\r\n ClientIDs: this.state.clientIDs,\r\n DashboardIDs: this.state.dashboardIDs,\r\n Category: 'Custom',\r\n RowCount: this.state.rowCount,\r\n ColumnCount: this.state.columnCount, \r\n DefaultWidth: 2, //default these values\r\n DefaultHeight: 3,\r\n Enabled: true,\r\n CreatedBy: this.props.user.ID,\r\n WidgetSource: 'User',\r\n BackgroundColour: this.state.backgroundColour,\r\n Children: this.state.widgets.map(w => ({\r\n WidgetID: w.props.widgetSettings.WidgetID,\r\n Name: w.props.widgetSettings.Name,\r\n X: w.props.widgetSettings.X,\r\n Y: w.props.widgetSettings.Y,\r\n Width: w.props.widgetSettings.Width,\r\n Height: w.props.widgetSettings.Height,\r\n //we need to check how this gets transferred to a widget instance\r\n Adjustments: w.props.widgetSettings.Adjustments\r\n }))\r\n } \r\n\r\n this.props.actions.createWidget(widget)\r\n .then(newWidget => {\r\n const toastrService = new ToastrService();\r\n toastrService.showSuccess('', 'Widget has been created successfully!');\r\n this.setState({ID: newWidget.ID});\r\n this.props.history.goBack();\r\n });\r\n }\r\n }\r\n\r\n render() {\r\n const dashboard = this.props.dashboard;\r\n const columnCount = this.getGridColumnCount();\r\n const rowCount = this.getGridRowCount();\r\n const minHeight = rowCount * this.getGridCellHeight();\r\n const minRowCount = Math.max(...this.state.widgets.map(w => w.props.widgetSettings.Height + w.props.widgetSettings.Y)) || 1;\r\n return (\r\n \r\n \r\n {\r\n !this.props.loading ?\r\n
\r\n \r\n \r\n \r\n \r\n this.gridStackRef = control} \r\n data-gs-width={columnCount} \r\n data-gs-height={rowCount} \r\n data-gs-max-height={rowCount} \r\n /*data-gs-current-height={rowCount}*/ \r\n style={{\r\n position: 'absolute', \r\n marginBottom: '10px', \r\n minHeight, \r\n height: minHeight, \r\n width: '600px', \r\n border: 'solid 1px rgb(153,153,153)', \r\n top: '100px', \r\n left: '50px',\r\n backgroundColor: this.state.backgroundColour\r\n }}>\r\n {this.state.widgets} \r\n
\r\n \r\n \r\n {/* Modal: Add widget */} \r\n \r\n : null\r\n }\r\n
\r\n \r\n \r\n \r\n \r\n ;","import * as types from '../actions/actionTypes';\r\nimport initialState from './initialState';\r\nconst _ = require('lodash');\r\n\r\nexport default function dashboardReducer(state = initialState.dashboard, action) {\r\n //check if this has the saved state included\r\n //debugger;\r\n \r\n switch(action.type) {\r\n case types.GET_DASHBOARDS_SUCCESS:\r\n const dashboards = [...action.dashboards]; \r\n return {\r\n ...state,\r\n dashboards\r\n } \r\n case types.DASHBOARDS_LOADING:\r\n {\r\n const dashboardsLoading = action.loading; \r\n return {\r\n ...state,\r\n dashboardsLoading\r\n } \r\n }\r\n case types.CURRENT_DASHBOARD_LOADED:\r\n {\r\n const currentDashboard = { id: action.id, data: null }; \r\n return {\r\n ...state,\r\n currentDashboard\r\n } \r\n }\r\n case types.DASHBOARD_LOADING:\r\n {\r\n const dashboardItemsLoading = [...state.dashboardItemsLoading];\r\n if(action.payload.loading) {\r\n dashboardItemsLoading.push(action.payload.dashboardID);\r\n }\r\n else {\r\n _.pull(dashboardItemsLoading, action.payload.dashboardID);\r\n }\r\n return {\r\n ...state,\r\n dashboardItemsLoading\r\n } \r\n }\r\n case types.DASHBOARD_DATA_RECEIVED:\r\n {\r\n if(state.currentDashboard && state.currentDashboard.id === action.dashboardData.id) {\r\n const currentDashboard = {...action.dashboardData}; //{ id = state.currentDashboard.id, data = {...action.data} }; \r\n return {\r\n ...state,\r\n currentDashboard\r\n } \r\n }\r\n else {\r\n //the data we received isn't for the current dashboard so ignore it\r\n return state;\r\n } \r\n }\r\n case types.DASHBOARD_UPDATED:\r\n {\r\n const dashboards = [...state.dashboards];\r\n const dashboard = dashboards.find(d => d.ID === action.dashboard.ID);\r\n const dashboardIndex = _.indexOf(dashboards, dashboard);\r\n dashboards.splice(dashboardIndex, 1, action.dashboard);\r\n return {\r\n ...state,\r\n dashboards\r\n } \r\n }\r\n case types.GET_WIDGETS_SUCCESS:\r\n {\r\n const widgets = action.widgets;\r\n return {\r\n ...state,\r\n widgets\r\n } \r\n }\r\n case types.CREATE_WIDGET_SUCCESS:\r\n {\r\n const widgets = [...state.widgets];\r\n widgets.push(action.widget);\r\n return {\r\n ...state,\r\n widgets\r\n }\r\n }\r\n case types.LOGOUT: \r\n return {\r\n ...initialState.dashboard\r\n }; \r\n default:\r\n return state;\r\n }\r\n}","import * as types from '../actions/actionTypes';\r\nimport initialState from './initialState';\r\nimport * as dataUtils from '../utils/dataUtils';\r\nconst _ = require('lodash');\r\n\r\nexport default function userReducer(state = initialState.user, action) {\r\n \r\n switch(action.type) {\r\n case types.GET_USERS_SUCCESS:\r\n {\r\n const users = [...action.users];\r\n return {\r\n ...state,\r\n users\r\n }\r\n }\r\n case types.USERS_LOADING:\r\n const usersLoading = action.loading; \r\n return {\r\n ...state,\r\n usersLoading\r\n } \r\n case types.USER_CREATED:\r\n {\r\n const users = [...state.users];\r\n users.push(action.user) \r\n dataUtils.sortUsers(users);\r\n return {\r\n ...state,\r\n users\r\n } \r\n }\r\n case types.USER_UPDATED:\r\n {\r\n const users = [...state.users];\r\n const user = users.find(u => u.ID === action.user.ID);\r\n const userIndex = _.indexOf(users, user);\r\n users.splice(userIndex, 1, action.user);\r\n dataUtils.sortUsers(users);\r\n return {\r\n ...state,\r\n users\r\n } \r\n }\r\n case types.USER_DELETED:\r\n {\r\n const users = [...state.users];\r\n _.remove(users, u => u.ID === action.id); \r\n return {\r\n ...state,\r\n users\r\n } \r\n }\r\n case types.SET_CREATE_UPDATE_USER_ERROR:\r\n return {\r\n ...state,\r\n createUpdateUserError: action.error.message\r\n }\r\n case types.CLEAR_CREATE_UPDATE_USER_ERROR:\r\n return {\r\n ...state,\r\n createUpdateUserError: null\r\n }\r\n case types.LOGOUT: \r\n return {\r\n ...initialState.user\r\n }; \r\n default:\r\n return state;\r\n }\r\n}","import {combineReducers} from 'redux';\r\nimport { routerReducer } from 'react-router-redux';\r\nimport account from './accountReducer';\r\nimport dashboard from './dashboardReducer';\r\nimport playlist from './playlistReducer';\r\nimport template from './templateReducer';\r\nimport user from './userReducer';\r\nimport client from './clientReducer';\r\n\r\nconst rootReducer = combineReducers({\r\n account,\r\n dashboard,\r\n playlist,\r\n template,\r\n user,\r\n client,\r\n routing: routerReducer\r\n});\r\n\r\nexport default rootReducer;\r\n","import * as types from '../actions/actionTypes';\r\nimport initialState from './initialState';\r\n\r\nexport default function accountReducer(state = initialState.account, action) {\r\n //check if this has the saved state included\r\n let user;\r\n switch(action.type) {\r\n case types.LOGIN_SUCCESS:\r\n case types.TOKEN_REFRESHED:\r\n const { access_token, refresh_token } = action.payload; \r\n const expires = new Date(action.payload[\".expires\"]);\r\n if(action.type === types.LOGIN_SUCCESS || state.user) { //if it's a token refresh, make sure we haven't logged out while this call was in-flight\r\n return {\r\n ...state,\r\n token: access_token,\r\n tokenExpiry: expires,\r\n refreshToken: refresh_token,\r\n refreshingToken: false\r\n }\r\n }\r\n else {\r\n return state;\r\n }\r\n case types.TOKEN_REFRESH_FAILED:\r\n return {\r\n ...state,\r\n refreshingToken: false\r\n } \r\n case types.GET_USER_SUCCESS:\r\n user = action.user; \r\n return {\r\n ...state,\r\n user\r\n } \r\n case types.TOKEN_REFRESHING:\r\n return {\r\n ...state,\r\n refreshTokenPromise: action.refreshTokenPromise,\r\n refreshingToken: true\r\n } \r\n case types.SET_REFRESH_TOKEN_TIMEOUT_HANDLE:\r\n return {\r\n ...state,\r\n refreshTokenTimeoutHandle: action.timeoutHandle\r\n }\r\n case types.LOGOUT: \r\n return {\r\n ...initialState.account,\r\n refreshTokenPromise: state.refreshTokenPromise //we can't just set the promise to null, else this causes some errors if we're waiting for the result\r\n }; \r\n case types.SET_LOGIN_ERROR:\r\n return {\r\n ...state,\r\n loginError: action.error.message\r\n }\r\n case types.CLEAR_LOGIN_ERROR:\r\n return {\r\n ...state,\r\n loginError: null\r\n }\r\n case types.SET_SIGNUP_ERROR:\r\n return {\r\n ...state,\r\n signupError: action.error.message\r\n }\r\n case types.CLEAR_SIGNUP_ERROR:\r\n return {\r\n ...state,\r\n signupError: null\r\n }\r\n case types.FORGOT_PASSWORD_EMAIL_SENT: \r\n return {\r\n ...state,\r\n forgotPasswordEmailSent: action.sent\r\n } \r\n case types.SET_FORGOT_PASSWORD_ERROR:\r\n return {\r\n ...state,\r\n forgotPasswordError: action.error.message\r\n }\r\n case types.CLEAR_FORGOT_PASSWORD_ERROR:\r\n return {\r\n ...state,\r\n forgotPasswordError: null\r\n }\r\n case types.PASSWORD_RESET: \r\n return {\r\n ...state,\r\n passwordReset: action.reset\r\n } \r\n case types.SET_RESET_PASSWORD_ERROR:\r\n return {\r\n ...state,\r\n resetPasswordError: action.error.message\r\n }\r\n case types.CLEAR_RESET_PASSWORD_ERROR:\r\n return {\r\n ...state,\r\n resetPasswordError: null\r\n }\r\n case types.SET_CHANGE_PASSWORD_ERROR:\r\n return {\r\n ...state,\r\n changePasswordError: action.error.message\r\n }\r\n case types.CLEAR_CHANGE_PASSWORD_ERROR:\r\n return {\r\n ...state,\r\n changePasswordError: null\r\n }\r\n case types.SET_ACCOUNT_SETTINGS_ERROR:\r\n return {\r\n ...state,\r\n accountSettingsError: action.error.message\r\n }\r\n case types.CLEAR_ACCOUNT_SETTINGS_ERROR:\r\n return {\r\n ...state,\r\n accountSettingsError: null\r\n }\r\n default:\r\n return state;\r\n }\r\n}","import * as types from '../actions/actionTypes';\r\nimport initialState from './initialState';\r\nimport _ from 'lodash';\r\n\r\nexport default function playlistReducer(state = initialState.playlist, action) {\r\n\r\n switch(action.type) {\r\n case types.GET_PLAYLISTS_SUCCESS:\r\n const playlists = [...action.playlists]; \r\n return {\r\n ...state,\r\n playlists\r\n } \r\n case types.PLAYLISTS_LOADING:\r\n {\r\n const playlistsLoading = action.loading; \r\n return {\r\n ...state,\r\n playlistsLoading\r\n } \r\n }\r\n case types.PLAYLIST_CREATED:\r\n {\r\n const playlists = [...state.playlists];\r\n playlists.push(action.playlist) \r\n return {\r\n ...state,\r\n playlists\r\n } \r\n }\r\n case types.PLAYLIST_UPDATED:\r\n {\r\n const playlists = [...state.playlists];\r\n const playlist = playlists.find(p => p.ID === action.playlist.ID);\r\n const playlistIndex = _.indexOf(playlists, playlist);\r\n playlists.splice(playlistIndex, 1, action.playlist);\r\n return {\r\n ...state,\r\n playlists\r\n } \r\n }\r\n case types.PLAYLIST_DELETED:\r\n {\r\n const playlists = [...state.playlists];\r\n _.remove(playlists, p => p.ID === action.id); \r\n return {\r\n ...state,\r\n playlists\r\n } \r\n }\r\n case types.SET_CREATE_UPDATE_PLAYLIST_ERROR:\r\n return {\r\n ...state,\r\n createUpdatePlaylistError: action.error.message\r\n }\r\n case types.CLEAR_CREATE_UPDATE_PLAYLIST_ERROR:\r\n return {\r\n ...state,\r\n createUpdatePlaylistError: null\r\n }\r\n case types.LOGOUT: \r\n return {\r\n ...initialState.playlist\r\n }; \r\n default:\r\n return state;\r\n }\r\n}","import * as types from '../actions/actionTypes';\r\nimport initialState from './initialState';\r\n\r\nexport default function templateReducer(state = initialState.template, action) {\r\n //check if this has the saved state included\r\n //debugger;\r\n \r\n switch(action.type) {\r\n case types.GET_TEMPLATES_SUCCESS:\r\n const templates = [...action.results.templates];\r\n if(action.results.tag === 'New') {\r\n return {\r\n ...state,\r\n new: templates\r\n }\r\n } \r\n else if(action.results.tag === 'Popular') {\r\n return {\r\n ...state,\r\n popular: templates\r\n }\r\n }\r\n else {\r\n return state;\r\n }\r\n case types.LOGOUT: \r\n return {\r\n ...initialState.template\r\n }; \r\n default:\r\n return state;\r\n }\r\n}","import * as types from '../actions/actionTypes';\r\nimport initialState from './initialState';\r\n\r\nexport default function clientReducer(state = initialState.client, action) {\r\n switch(action.type) {\r\n case types.GET_CLIENTS_SUCCESS:\r\n const clients = [...action.clients];\r\n return {\r\n ...state,\r\n clients\r\n }\r\n case types.LOGOUT: \r\n return {\r\n ...initialState.client\r\n }; \r\n default:\r\n return state;\r\n }\r\n}","import BaseService from '../services/baseService';\r\nimport * as types from '../actions/actionTypes';\r\nimport {loadState} from '../utils/localStorage';\r\nimport * as processUtils from '../utils/processUtils';\r\n\r\nconst REFRESH_TOKEN_MINS = 5;\r\n\r\nexport default function tokenRefreshMiddleware() {\r\n return ({ dispatch, getState }) => next => action => {\r\n if (typeof action === 'function') {\r\n //we're making an async call, check if we need to refresh the token\r\n let state = getState();\r\n if(state) {\r\n const tokenExpiryMins = getTokenExpiryMins(state.account.tokenExpiry)\r\n if(state.account.token && tokenExpiryMins < REFRESH_TOKEN_MINS) {\r\n // make sure we are not already refreshing the token\r\n if(!state.account.refreshingToken) {\r\n return refreshToken(dispatch, state).then(() => next(action)).catch(error => {\r\n //debugger;\r\n console.log(error.message);\r\n });\r\n } \r\n else {\r\n return state.account.refreshTokenPromise.then(() => next(action)).catch(error => {\r\n //debugger;\r\n console.log(error.message);\r\n });\r\n }\r\n }\r\n }\r\n }\r\n else if (action.type === types.SCHEDULE_TOKEN_REFRESH) {\r\n let state = getState();\r\n //we prioritise the token expiry sent in the action instead of the token expiry in the state as if we've just refreshed,\r\n //the TOKEN_REFRESHED action will schedule the next refresh (called in the serviceMiddleware) before the reducer has been run\r\n //but when we run at the scheduled time, we want to check the state\r\n let tokenExpiry = action.payload && action.payload.tokenExpiry ? action.payload.tokenExpiry : state.account.tokenExpiry;\r\n if(tokenExpiry) {\r\n const tokenExpiryMins = getTokenExpiryMins(tokenExpiry);\r\n if(tokenExpiryMins < REFRESH_TOKEN_MINS) {\r\n //expiry is in less than 5 mins or has passed already, dispatch a refresh\r\n // make sure we are not already refreshing the token\r\n if(!state.account.refreshingToken) {\r\n if(state.account.refreshTokenTimeoutHandle) {\r\n //cancel the already scheduled check\r\n dispatch({type: types.CANCEL_TOKEN_REFRESH});\r\n }\r\n refreshToken(dispatch, state);\r\n } \r\n }\r\n else {\r\n //schedule another check for 5 mins before the expiry\r\n const timeUntilRefresh = tokenExpiryMins - REFRESH_TOKEN_MINS;\r\n let timeUntilRefreshMs = Math.min(timeUntilRefresh * 60 * 1000, 2147483647); //if we set a value larger than 2147483647, it will execute instantly\r\n console.log(`${new Date()}: scheduling token refresh for ${timeUntilRefreshMs / 60 / 1000} mins time`);\r\n const timeout = timeUntilRefreshMs;\r\n const timeoutHandle = setTimeout(() => dispatch({ type: types.SCHEDULE_TOKEN_REFRESH}), timeout);\r\n dispatch({type: types.SET_REFRESH_TOKEN_TIMEOUT_HANDLE, timeoutHandle});\r\n }\r\n }\r\n }\r\n else if(action.type === types.CANCEL_TOKEN_REFRESH) {\r\n console.log(`${new Date()}: cancelling token refresh`);\r\n let state = getState();\r\n if(state.account.refreshTokenTimeoutHandle) {\r\n clearTimeout(state.account.refreshTokenTimeoutHandle);\r\n dispatch({type: types.SET_REFRESH_TOKEN_TIMEOUT_HANDLE, timeoutHandle: null});\r\n } \r\n }\r\n return next(action);\r\n };\r\n }\r\n\r\n function getTokenExpiryMins(tokenExpiry) {\r\n const diffMs = new Date(tokenExpiry) - new Date();\r\n const minsToExpiry = diffMs / 1000 / 60;\r\n return minsToExpiry;\r\n }\r\n\r\n function refreshToken(dispatch, state) {\r\n console.log(`${new Date()}: refreshing token`);\r\n let refreshTokenPromise = BaseService.postData('/Token', { username: state.account.user.Email, password: state.account.refreshToken, grant_type: 'refresh_token' })\r\n .then(data => {\r\n const payload = Object.assign({}, data);\r\n dispatch({type: types.TOKEN_REFRESHED, payload});\r\n console.log(`${new Date()}: refresh token complete, new expiry: ${payload[\".expires\"]}`);\r\n return Promise.resolve(payload);\r\n })\r\n .catch(async error => {\r\n console.log(`${new Date()}: Unable to refresh token`); \r\n dispatch({type: types.TOKEN_REFRESH_FAILED});\r\n if(error.message === 'The username or token is invalid') {\r\n //check local storage to see if we've refreshed this token in another browser tab\r\n //wait 5 secs to give it time to save if it was refreshing at the same time\r\n console.log(`${new Date()}: Token is invalid, checking if it has been updated elsewhere`);\r\n await processUtils.sleep(5000)\r\n const persistedState = loadState();\r\n if(persistedState.account.user && persistedState.account.user.ID === state.account.user.ID && new Date(persistedState.account.tokenExpiry) > new Date(state.account.tokenExpiry)) {\r\n //we have a new token for this user\r\n console.log(`${new Date()}: Token has been updated elsewhere, retrieving updated token from local storage`);\r\n //debugger;\r\n const payload = {\r\n access_token: persistedState.account.token, \r\n refresh_token: persistedState.account.refreshToken\r\n };\r\n payload['.expires'] = persistedState.account.tokenExpiry;\r\n dispatch({type: types.TOKEN_REFRESHED, payload});\r\n console.log(`${new Date()}: token has been updated`);\r\n return Promise.resolve(payload);\r\n }\r\n else {\r\n //delete the token so we stop trying to refresh\r\n dispatch({ type: types.LOGOUT });\r\n }\r\n }\r\n return Promise.reject({message: 'Unable to refresh token'});\r\n });\r\n\r\n // we want to keep track of the token promise in the state so that we don't try to refresh the token again while refreshing is in process \r\n dispatch({type: types.TOKEN_REFRESHING, refreshTokenPromise});\r\n return refreshTokenPromise;\r\n }","import {createStore, applyMiddleware, compose} from 'redux';\r\nimport rootReducer from '../reducers';\r\nimport { routerMiddleware } from 'react-router-redux';\r\nimport reduxImmutableStateInvariant from 'redux-immutable-state-invariant';\r\nimport thunk from 'redux-thunk';\r\nimport serviceMiddleware from '../middleware/serviceMiddleware';\r\nimport tokenRefreshMiddleware from '../middleware/tokenRefreshMiddleware';\r\nimport localStorageMiddleware from '../middleware/localStorageMiddleware';\r\n//import { History } from 'history';\r\n\r\nexport default function configureStore(history, initialState) {\r\n const composeEnhancers = (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;\r\n const myServiceMiddleware = serviceMiddleware();\r\n const myTokenRefreshMiddleware = tokenRefreshMiddleware();\r\n const myLocalStorageMiddleware = localStorageMiddleware();\r\n const store = createStore(\r\n rootReducer, \r\n initialState,\r\n composeEnhancers(\r\n applyMiddleware(myTokenRefreshMiddleware, thunk, reduxImmutableStateInvariant(), routerMiddleware(history), myServiceMiddleware, myLocalStorageMiddleware)\r\n ));\r\n\r\n // Enable Webpack hot module replacement for reducers\r\n if (module.hot) {\r\n module.hot.accept('../reducers', () => {\r\n store.replaceReducer(rootReducer);\r\n });\r\n }\r\n\r\n return store;\r\n}","import BaseService from '../services/baseService';\r\nimport * as types from '../actions/actionTypes';\r\n\r\nexport default function serviceMiddleware() {\r\n return ({ dispatch, getState }) => next => action => {\r\n if (action.type === types.LOGIN_SUCCESS || action.type === types.TOKEN_REFRESHED) {\r\n //const state = getState();\r\n BaseService.setToken(action.payload.access_token);\r\n dispatch({ type: types.SCHEDULE_TOKEN_REFRESH, payload: { tokenExpiry: action.payload[\".expires\"], refreshToken: action.payload.refresh_token} });\r\n }\r\n else if(action.type === types.LOGOUT) {\r\n debugger;\r\n BaseService.clearToken();\r\n dispatch({ type: types.CANCEL_TOKEN_REFRESH });\r\n } \r\n return next(action);\r\n };\r\n }\r\n","import * as types from '../actions/actionTypes';\r\nimport {saveState} from '../utils/localStorage';\r\n\r\nexport default function localStorageMiddleware() {\r\n return ({ dispatch, getState }) => next => action => {\r\n if (action.type === types.GET_USER_SUCCESS || action.type === types.TOKEN_REFRESHED) {\r\n debugger;\r\n const result = next(action)\r\n const state = getState(); //this will now give us the new state after calling next\r\n const account = state.account;\r\n saveState({\r\n account: {\r\n token: account.token,\r\n tokenExpiry: account.tokenExpiry,\r\n refreshToken: account.refreshToken,\r\n user: account.user\r\n } \r\n });\r\n return result;\r\n } \r\n else if(action.type === types.LOGOUT) {\r\n debugger;\r\n saveState({});\r\n }\r\n return next(action);\r\n };\r\n }\r\n","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport './styles/bootstrap.min.css';\r\nimport '../node_modules/toastr/build/toastr.min.css';\r\nimport '../node_modules/react-dragula/dist/dragula.min.css';\r\nimport './styles/style.css';\r\nimport * as serviceWorker from './registerServiceWorker';\r\nimport { Provider } from 'react-redux';\r\nimport { ConnectedRouter } from 'react-router-redux';\r\nimport { createBrowserHistory } from 'history';\r\nimport configureStore from './store/configureStore';\r\nimport {loadState} from './utils/localStorage';\r\nimport initialState from './reducers/initialState';\r\nimport BaseService from './services/baseService';\r\nimport * as types from './actions/actionTypes';\r\nimport * as urlUtils from './utils/urlUtils';\r\n\r\nimport jQuery from 'jquery';\r\nimport * as RoutesModule from './routes';\r\nimport tether from 'tether';\r\nwindow.jQuery = jQuery;\r\nwindow.$ = jQuery;\r\nglobal.Tether = tether;\r\n\r\nrequire('bootstrap');\r\n\r\nlet routes = RoutesModule.routes;\r\n// Create browser history to use in the Redux store\r\nconst history = createBrowserHistory();\r\n\r\nconst persistedState = loadState();\r\nconst updatedState = Object.assign({}, initialState, persistedState);\r\nconst store = configureStore(history, updatedState);\r\n\r\nif(updatedState.account.token) {\r\n BaseService.setToken(updatedState.account.token);\r\n store.dispatch({ type: types.SCHEDULE_TOKEN_REFRESH, payload: { tokenExpiry: updatedState.account.tokenExpiry, refreshToken: updatedState.account.refreshToken} });\r\n}\r\n/*store.subscribe(_.throttle(() => {\r\n const account = store.getState().account;\r\n saveState({\r\n account: {\r\n token: account.token,\r\n tokenExpiry: account.tokenExpiry,\r\n refreshToken: account.refreshToken,\r\n user: account.user\r\n } \r\n });\r\n}, 1000));*/\r\n\r\n//const store = configureStore(history);\r\n\r\nhistory.listen(function (location) {\r\n setBackground(location);\r\n setDashboardClass(location);\r\n });\r\n\r\nsetBackground(window.location);\r\nsetDashboardClass(window.location);\r\n\r\nfunction setBackground(location) {\r\n /*if(location.pathname !== '/Account/Login' && location.pathname !== '/Account/ForgotPassword' && location.pathname !== '/Account/ResetPassword') {\r\n window.$('body').removeClass('greybg');\r\n }\r\n else {\r\n window.$('body').addClass('greybg');\r\n }*/\r\n}\r\n\r\nfunction setDashboardClass(location) {\r\n if(urlUtils.isDashboard(location.pathname)) {\r\n window.$('body').addClass('racepage');\r\n }\r\n else {\r\n window.$('body').removeClass('racepage');\r\n }\r\n \r\n /*if(location.pathname === '/Dashboards/Custom' || location.pathname.indexOf('WidgetSettings') > -1) {\r\n window.$('body').addClass('dashbg');\r\n }*/\r\n}\r\n\r\nsetBodyClickEvents();\r\n\r\nfunction setBodyClickEvents() {\r\n window.$('body').on('click', function(e){\r\n if (window.$(e.target).parents('.side').length === 0 && !window.$(e.target).hasClass('btn-mobilemenu')) {\r\n window.$('body').removeClass('showside');\r\n }\r\n if (!window.$(e.target).hasClass('btn-new') && window.$('.btn-new').hasClass('open')) {\r\n window.$('.new').removeClass('show');\r\n window.$('.btn-new').removeClass('open');\r\n }\r\n });\r\n}\r\n\r\nfunction renderApp() {\r\n // This code starts up the React app when it runs in a browser. It sets up the routing configuration\r\n // and injects the app into a DOM element.\r\n ReactDOM.render(\r\n \r\n ,\r\n document.getElementById('root')\r\n );\r\n}\r\n\r\nrenderApp();\r\nserviceWorker.unregister();\r\n//registerServiceWorker();\r\n","module.exports = \"data:image/png;base64,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\"","module.exports = __webpack_public_path__ + \"static/media/track-line.b7302195.png\";","module.exports = \"data:image/png;base64,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\"","module.exports = __webpack_public_path__ + \"static/media/track-finish.354ac5d8.png\";","module.exports = __webpack_public_path__ + \"static/media/track-bg-single.dc22a7fe.png\";","module.exports = __webpack_public_path__ + \"static/media/track-dirt-single.82df9975.png\";","module.exports = \"data:image/png;base64,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\"","module.exports = __webpack_public_path__ + \"static/media/track-line.b7302195.png\";","module.exports = \"data:image/png;base64,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\"","module.exports = __webpack_public_path__ + \"static/media/track-bg-single.dc22a7fe.png\";","module.exports = __webpack_public_path__ + \"static/media/track-dirt-single.82df9975.png\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAI4AAAEsCAYAAAAVXotZAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAKwwAACsMBNCkkqwAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvMDgvMThZMTMvAAAJC0lEQVR4nO3cMXYbRwyAYUTvJY2bpHFjN3GTI6TSCXQhHYGHScsT8BRpksZu3ESNm6hQCpMKJZGz2B3MDID5v9Z66+Z/w5UIzA9PT0+CPO7vbj+JyO9Gj3vc7Q9/XPqHG6P/AH78avisz9f+gXASub+7fSci7w0f+ee1fyCcXH4zfNbDbn/459o/Ek4unwyfdfW0ESGcNO7vbj+KyI+Gj7z6fiNCOJlYvhT/vdsf/i39AOEkcHwp/mj4yL+WfoBwcrB8t/m22x++Lv0Q4eRg+TFVfCk+IZzg7u9u34vIO8NHFl+KTwgnPsuPqc+7/eGb5gcJJ7D7u9ufxPi3Ke0PEk5sltF82+0Pqo8pEcKJzvIrBvVpI0I4Yd3f3f4iti/Fi3+7OUc4cVmeNl+1L8UnhBPQ8aXY8i/Fqz6mRAgnKssvNB93+8OqjykRwonK8mNqdTQihBPO8QvNnw0fufpjSoRwIuo25VdCOPF0m/IrIZxAjqsvZi/FovxC8xLCieWD4bM+L035lRBOECOm/EoIJ47uU34lhBNH9ym/EsIJ4Lj6YvmF5qa/3ZwjnBi6rr5oEI5zDb7Q3Pwr+DnC8W/YlF8J4fg3bMqvhHAca7D6UvW3m3OE49uQ1RcNwnGqwUvxF8NnEY5jw6f8SgjHr+FTfiWE49Bx9cVyyq/6K4bXCMenoasvGoTj09DVFw3CccbTlF8J4fhjesG1xRealxCOIz0vuK5FOL64WH3RIBxf3MwULyEcJzxO+ZUQjh/upvxKCMcBb6svGoTjg2U01asvGoTjg8spvxLCGczzlF8J4YzndsqvhHAGGnnBdS3CGcvl6osG4Yxl+jFl+KxFhDNIhCm/EsIZx/2UXwnhDODhgutahDOG69UXDcIZw3TKz/BZaoTTWaQpvxLC6S/MlF8J4fTn4oLrWoTTUZTVFw3C6cvNBde1CKeTiFN+JYTTj6sLrmsRTj+uLriuRTgdRFt90SCcPkzvKR75UnxCOI1FnvIrIZz2wk75lRBOe+FWXzQIp6HjlF+41RcNwmkr9JRfCeE0kmHKr4Rw2gk/5VdCOO24vuC6FuE0EH31RYNw2rD8282Dp5fiE8JpI8WUXwnhGMs05VdCOPZCXHBdi3AMZVl90SAcW9ZTfkNWXzQIx1aqKb8SwjGSccqvhHDshLrguhbhGMi2+qJBODbCXXBdi3BspJzyKyGcSlEvuK5FOPVCXnBdi3AqZF190SCcOpYvxY9eVl80CKdO6im/EsLZaIYpvxLC2S7t6osG4WyXdvVFg3A2mGXKr4Rwtpliyq+EcFaaacqvhHDWS3HBdS3CWS/96osG4axwnPKzeikWCfhSfEI460w15VdCOEozTvmVEI5eqguuaxGO3jSrLxqEo9Bgyi/sS/EJ4ehMOeVXQjgLZp7yKyGcZSkvuK5FOMumW33RIJyCzBdc1yKcsqmn/EoI54rsF1zXIpzrUl9wXYtwrpt29UWDcC44fqFpufqS6mNKhHCuYcpvAeFcxpTfAsJ5hdUXHcJ564Phs0KuvmgQzhmm/PQI5yWm/JQI5yWm/JQI52i2C65rEc7/WH1ZgXCkyReaKX8FP0c43zHltxLhfMeU30rThzPrBde1pg9HWH3ZZOpwGrwUfzF8lmtThyNM+W02ezhM+W00bTizX3Bda9pwhNWXKjOHw+pLhSnDYcqv3pThCBdcV5suHC64tjFdOMLqi4kZw2Gm2MBU4TDlZ2eqcIQpPzPThMPqi61pwhHbaFKvvmjMFA5TfoamCIcpP3tThCNM+ZlLHw4XXLeRPhxh9aWJGcIx/ZgyfFZoqcNhyq+d1OEIU37NpA2HC67bShuOsPrSVOZwTKf8DJ+VQspwmPJrL2U4wpRfc1nD4YLrxtKFw+pLH+nCES647iJVOEz59ZMqHOGC626yhcMF152kCYfVl77ShCPG9xTzUlyWIhym/PpLEY4w5dddlnBYfeksfDjHKT9WXzoLH44w5TdE6HCY8hsndDjClN8w0cPhgutBwobD6stYYcMR27/dPPBSvE7kcJjyGyhkOEz5jRcyHOGC6+HChcPqiw/hwhH7KT9WXzaIGA5Tfg6ECocpPz9ChSNccO1GmHBYffElTDjCBdeuRAqHKT9HQoTDBdf+hAhHuODaHffhsPrik/twxPal+JHVFxsRwmHKzyHX4TDl55frcITVF7e8h8Pqi1Nuw2HKzze34QhTfq65DIcpP/9chiNccO2e13BYfXHOXTjHKT+rl2IRXoqbcBeOMOUXgqtwmPKLw1U4wgXXYXgLh9WXINyE02DKj5fihtyEI0z5heIiHKb84nERjnDBdThewmH1JZjh4XDBdUzDwxGm/EIaGg4XXMc1+sThguugRofD6ktQw8I5fqFpufrCx1RHI08cpvwCGxkOU36BDQmH1Zf4Rp04HwyfxerLAN3DYcovhxEnDlN+CYwIhym/BLqGwwXXefQ+cVh9SaJbOA2+0ORX8IF6njhM+SXSMxym/BLpEg4XXOfT68Rh9SWZ5uE0eCn+YvgsbNTjxGHKL6Ee4TDll1DTcLjgOq/WJw6rL0m1DofVl6SahcOUX24tTxwuuE6sSThccJ1fqxOH1ZfkWoXDTHFy5uEw5TeHFicOU34TMA2H1Zd5WJ84ltGw+uKYdThM+U3CLBym/OZieeIw5TcRk3C44Ho+VicOqy+TsQrH9GPK8FlopDocpvzmZHHiMOU3oapwuOB6XrUnDqsvk6oNx3TKz/BZaGxzOEz5za3mxGHKb2I14XDB9cQ2hcPqC7aeOFxwPbnV4TDlB5FtJw4XXGNTOFxwjXXhsPqCk7Unjuk9xbwUx6UOhyk/nFtz4jDlh2drwmH1Bc9U4Ryn/Fh9wTPticOUH15YDIcpP1yiOXGY8sMbmnC44BpvFMNh9QXXLJ04ln+7eeClOI+lcJjyw0VXw2HKDyWlE4cLrnHVxXBYfcGSayeO9ZQfqy/JXAuHKT8UvQmHKT9oXDpxuOAai16Ew+oLtF6fOFxwDZXX4TDlB5XncLjgGmucnzhccA21GxFWX7De6cSxfCl+ZPUlv1M4TPlhlRum/LDFjbD6gg1uhNUXbPAfLjwTgg053ZwAAAAASUVORK5CYII=\"","module.exports = __webpack_public_path__ + \"static/media/track-bottom.21648072.png\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAADICAYAAACuw2LzAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAK6wAACusBgosNWgAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvMDgvMThZMTMvAAAFBUlEQVR4nO2dv4vbVhzAv3YbOFKoDM3RSyBIS2Zr7SR163g3dbQyZbSndpQ9dnP+AqtjJ3vsZmnqKHkO1IJAcuUI6Ao5DEf8OiQ21i9btr5P33v0+wGRyDye9EHf9/R+6lpCCFCZr7Ey+uP58yEAuBWTj35++3aIcd02RiaUsAA1/z+BVqtVeGDkcwrKP4HWoffA62dPOwBgHsrou/ZXzqNWq1flovdC/P5h/cmrkDTqv3uf7EtQ5T1gAsD8UKIP608VstrS+3Ic4kcA8PclUD6EWIAa5QVStdCv5+cGADi7Cc7arYtv2+2fmr2tz/y7Xv+5WovrzM/ebzc38eYkWwsZkGlRrtYCVsfVMJi8KvjNB4B4c6J8CLEANcoLZAtxAgDB+YsXZz+8fHlBcUNl/DWZXN+8ebOCz/e4pawxZ0OF9k/DFLaLlA8hFqCGBahhAWpYgBoWoAZtfiCKIhgMBpXSOo4DjuOgXBdNIEkSCIKgUlrbtrEuyyFUiq7rpWGC+QSkCRiGAcPhUFb2W5QPIeUFpIVQEASFsy7Y89LKPwEWKMOyLBBC5A5s+AlQwwLUKC+A9iLrdDpgWdb23DQPzo2jwIO71LAANSxAjZT+QBzHEMfx9twwDDAMQ8aloLDFKISwRQ1c1xUAsD1c162T3QZbFNyr8iHEAtSwADUsQA0LUMMC1LAANSxAjZQOjeM4qYk8aZ0ZkCQgtQeWQfkQYgFqWICa2gK2bad24+1bXoCxcy8L+hMYjUYQRRF2tqVICSGsxUxVkCKwWCwaWakCILEQNxVKUmuhJkIJXUDTtO3/F4sFjMdj7EukQBcYj8cpieFwmBpqxwZdILvU7Pb2VmooSSkDg8EgNWccBIG0UJJWiD3Py4WSDKQJFIWSDKRWo9lQkoH01mg2lLCRLiB7AWwj/QGZoVR7VKLqEIrneeB5Xt3L5eDlNtSwADUsQI2UwV3f98H3/e25bduo2052kSYwGo1Sv8kSUD6EWIAaFqCGBahhAWpYgBoWoIYFqOFhFWpYgBoWoEbKqESSJKlZemV2MYVhKCzLSu1g2hzdbldMp1P0XUxoAtPptPDGs8dkMnmYApqm5W627Gksl0s0AZRC7Pt+bho1DEPwfR+Wy2Vukg9z0lvap0k2O7oNwwDP83KFGg2MEJrP57kw6fV6p4TJPpovA5qmiX6/L8IwfPgCh2ohXdfr1EDyBYTY/x5ACC35Arsi/X5f6LpeKHHi9tzmBHaZTqe58qFp2ilZFQqg9MjiOM7Nwu+uj5jNZnB1dZWr/Y6ksEeG8h5IkqRwSknWtFKKosciTgihbOHdVKGu6+ZCyLIstBBCEwjDsPBdUHTM5/OHJ7CR6Ha7pTeuaVqdJrW8QpwliiKYzWYQRREkSQKmaYJpmnB5eQmdTufUbAsLMY8LUcMC1LAANbWbEtmPBZumWdrnzTYtdpfknEptgWM+Flw13TEoH0IsQI3yAugDW3EcN7YJDgDqN6eLBrWqHhjNaQ6hLJqmlX7pUsZ7AF3ANM3SNyzWHuJdlA8hFqCGBaipXQsd87FgGVuxeFiFGhaghgWoYQFqWIAaFqCGBahJtUZfP3tqAsD40ePHZ998f/Gg/sDyx3+ur+/v7lYAMOi/e79d/pXtD3QAwLq/u4Nk+XejN1gB/cu/qXla5UOIBahhAWpYgBrlBVq/PHmC/4fyGkT5J8AC1LAANSxAjfIC/wHAVchDlaIM0wAAAABJRU5ErkJggg==\"","module.exports = __webpack_public_path__ + \"static/media/track-bg-single.dc22a7fe.png\";","module.exports = __webpack_public_path__ + \"static/media/track-dirt-single.ecd26837.png\";","\r\n/* eslint-disable react/jsx-no-bind */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Link } from 'react-router-dom';\r\nimport * as imageUtils from '../../../../utils/imageUtils';\r\nimport _ from 'lodash';\r\nimport 'url-search-params-polyfill';\r\nimport { withRouter } from 'react-router-dom';\r\nimport * as processUtils from '../../../../utils/processUtils';\r\nimport * as textUtils from '../../../../utils/textUtils';\r\n//import Modal from '../../../common/Modal';\r\n\r\nclass Tournament extends React.Component {\r\n constructor(props, context) {\r\n super(props, context);\r\n this.getPlayerData = this.getPlayerData.bind(this);\r\n this.getPlayersForCurrentPage = this.getPlayersForCurrentPage.bind(this);\r\n this.startLiveTest = this.startLiveTest.bind(this);\r\n this.getDashboardID = this.getDashboardID.bind(this);\r\n this.formatValue = this.formatValue.bind(this);\r\n this.playerRefs = [];\r\n this.playerTimelines = [];\r\n this.playersPerPage = 10;\r\n this.initialDataProcessed = false;\r\n this.animatingPlayers = false;\r\n let testLiveMode = false;\r\n const searchParams = new URLSearchParams(props.location.search);\r\n const testLiveModeParam = searchParams.get('testLiveMode');\r\n if(testLiveModeParam) {\r\n testLiveMode = testLiveModeParam === 'true';\r\n }\r\n this.state = {\r\n isAnimating: false,\r\n finished: false,\r\n title: this.props.dashboard.Name,\r\n backgroundImage: null,\r\n logo: null,\r\n logoLarge: null,\r\n players: [],\r\n page: 1,\r\n testLiveMode,\r\n singlePageMode: false,\r\n processedData: null,\r\n listHeadHeight: 0,\r\n listItemHeight: 0\r\n }\r\n this.initialiseDashboard = this.initialiseDashboard.bind(this);\r\n this.initialisePlayers = this.initialisePlayers.bind(this);\r\n this.rotatePlayers = this.rotatePlayers.bind(this);\r\n }\r\n\r\n async componentDidMount() { \r\n this._isMounted = true;\r\n this.initialiseDashboard();\r\n window.setTimeout(() => window.$(this.tournamentBackground).addClass('animate'), 100);\r\n window.$('body').addClass('scoreboard-tournament');\r\n this.backgroundAnimationInterval = window.setInterval(() =>\r\n window.$(this.tournamentBackground).toggleClass('animate'),\r\n 60000);\r\n }\r\n\r\n shouldComponentUpdate(nextProps, nextState) {\r\n const dashboardUpdated = this.getDashboardID() !== (nextProps.dashboard ? nextProps.dashboard.ID : nextProps.id) || this.props.dashboard !== nextProps.dashboard;\r\n const playersUpdated = this.state.players !== nextState.players;\r\n const pageUpdated = this.state.page !== nextState.page;\r\n const dataSet = !this.props.data && nextProps.data;\r\n let shouldProcessNewData = false;\r\n if(this.state.singlePageMode && this.props.data && nextProps.data && this.props.data !== nextProps.data && !this.animatingPlayers) {\r\n //for the single player mode, if the data has changed and we're not currently animating the rows in, trigger an update so we can pick up the new data\r\n shouldProcessNewData = true;\r\n }\r\n let listHeightSet = nextState.listHeadHeight !== this.state.listHeadHeight || nextState.listItemHeight !== this.state.listItemHeight;\r\n return dashboardUpdated || playersUpdated || pageUpdated || dataSet || shouldProcessNewData || listHeightSet;\r\n }\r\n\r\n componentWillUpdate(nextProps, nextState) {\r\n if(this.props.dashboard.ID !== nextProps.dashboard.ID) { \r\n this.setState({ \r\n isAnimating: false,\r\n finished: false,\r\n title: nextProps.dashboard.Name,\r\n backgroundImage: null,\r\n logo: null,\r\n logoLarge: null,\r\n players: [],\r\n page: 1,\r\n singlePageMode: false,\r\n processedData: null,\r\n listHeadHeight: 0,\r\n listItemHeight: 0\r\n });\r\n this.playerRefs = [];\r\n this.playerTimelines = [];\r\n this.playersPerPage = 10;\r\n this.initialDataProcessed = false;\r\n this.animatingPlayers = false;\r\n \r\n }\r\n else if(nextProps.dashboard) {\r\n const singlePageMode = nextProps.dashboard.Players.length <= this.playersPerPage;\r\n if(singlePageMode !== this.state.singlePageMode) {\r\n this.setState({\r\n singlePageMode\r\n });\r\n }\r\n }\r\n //reset this array as it will be populated again in the render\r\n this.playerRefs = [];\r\n if(this.props.data === null && nextProps.data !== null) {\r\n this.initialDataProcessed = false;\r\n }\r\n }\r\n\r\n async componentDidUpdate(prevProps, prevState) {\r\n if(prevProps.dashboard.ID !== this.props.dashboard.ID) { \r\n //reset these values\r\n window.$('.list-scores')\r\n .css('height', '')\r\n .removeClass('animatable'); \r\n \r\n this.initialiseDashboard(); \r\n }\r\n if(prevProps.data === null && this.props.data !== null) {\r\n this.initialisePlayers();\r\n }\r\n if(this.state.singlePageMode !== prevState.singlePageMode) {\r\n //do some initialisation?\r\n this.initialDataProcessed = false;\r\n this.initialisePlayers();\r\n }\r\n if(!this.state.singlePageMode && this.state.page !== prevState.page) {\r\n if(this.state.page === 1) {\r\n //we're back at page 1, reload the data, this will call the animatePlayers function when it completes\r\n this.initialisePlayers();\r\n }\r\n else {\r\n this.animatePlayers();\r\n }\r\n }\r\n else if(this.state.singlePageMode && this.props.data && prevProps.data && (this.props.data !== prevProps.data || this.props.dashboard != prevProps.dashboard || this.props.users != prevProps.users) && !this.animatingPlayers) {\r\n this.initialisePlayers();\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this._isMounted = false;\r\n window.$('body').removeClass('scoreboard-tournament');\r\n if(this.backgroundAnimationInterval) {\r\n window.clearInterval(this.backgroundAnimationInterval);\r\n }\r\n }\r\n\r\n async rotatePlayers() {\r\n if(this.state.players.length) {\r\n const dashboardID = this.getDashboardID();\r\n let haveMorePages = this.state.players.length > this.state.page * this.playersPerPage;\r\n if(haveMorePages) {\r\n while(dashboardID === this.getDashboardID() && this._isMounted) {\r\n await processUtils.sleep(15000);\r\n if(this._isMounted) {\r\n const newPage = haveMorePages ? this.state.page + 1 : 1;\r\n const rotationFinished = newPage === 1;\r\n if(rotationFinished && this.props.onAnimationFinished) {\r\n this.props.onAnimationFinished();\r\n break;\r\n }\r\n else {\r\n this.setState({\r\n page: newPage\r\n });\r\n }\r\n haveMorePages = this.state.players.length > newPage * this.playersPerPage;\r\n }\r\n }\r\n }\r\n else {\r\n if(this.props.onAnimationFinished) {\r\n await processUtils.sleep(15000);\r\n if(this._isMounted) {\r\n this.props.onAnimationFinished();\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n async animatePlayers() {\r\n this.animatingPlayers = true;\r\n const data = this.props.data;\r\n const playerRefs = this.playerRefs.filter(p => p);\r\n if(playerRefs.length) {\r\n window.$(playerRefs).each((index, playerRef) => {\r\n playerRef = window.$(playerRef);\r\n setTimeout(async () => {\r\n playerRef.addClass('active');\r\n if(index === playerRefs.length - 1) {\r\n this.animatingPlayers = false;\r\n if(this.state.singlePageMode) {\r\n //fix the table height, this will allow us to later animate changes to the row positions\r\n const listLength = playerRefs.length + 1; //add the header\r\n const listHeadHeight = parseInt(window.$('#listHeader').outerHeight(), 10);\r\n const listItemHeight = parseInt(window.$(playerRefs[0]).outerHeight(), 10);\r\n const tableHeight = listHeadHeight + 2 + ((listLength - 1) * (listItemHeight + 2));\r\n window.$('.list-scores')\r\n .css('height', tableHeight)\r\n .addClass('animatable');\r\n this.setState({\r\n listHeadHeight,\r\n listItemHeight\r\n });\r\n if(this.props.data !== data) {\r\n //the data changed while we were animating, process the data now\r\n this.initialisePlayers();\r\n }\r\n //if we're in a playlist, wait 15 seconds and then call the finished function so we can move to the next dashboard\r\n if(this.props.onAnimationFinished) {\r\n await processUtils.sleep(15000);\r\n if(this._isMounted) {\r\n this.props.onAnimationFinished();\r\n }\r\n }\r\n }\r\n }\r\n }, 300 * index);\r\n });\r\n }\r\n }\r\n\r\n async startLiveTest() {\r\n const currentDashboardID = this.getDashboardID();\r\n while(true && currentDashboardID === this.getDashboardID()) {\r\n await processUtils.sleep(5000);\r\n if(!this._isMounted){ return };\r\n const data = [...this.props.data];\r\n for(let i = 0; i < data.length; i++) {\r\n let dataItem = data[i];\r\n let updated = false;\r\n const val = dataItem.current;\r\n const random = Math.random();\r\n let randomMultiplier = random * 0.4; //we'll get a random number between 0 and 1 and then cap it to 0.4 by multiplying by 0.4\r\n if(random <= 0.35) {\r\n //increase the value 35% of the time\r\n randomMultiplier = 1 + randomMultiplier;\r\n updated = true;\r\n }\r\n else if(random >= 0.90) {\r\n //decrease the value 10% of the time\r\n randomMultiplier = 1 - randomMultiplier;\r\n updated = true;\r\n }\r\n else {\r\n //do nothing 55% of the time\r\n }\r\n if(updated) {\r\n dataItem = {...dataItem};\r\n dataItem.current = (val || 1) * randomMultiplier;\r\n data[i] = dataItem;\r\n }\r\n }\r\n //make sure we haven't switched to a different dashboard\r\n if(currentDashboardID === this.props.dashboard.ID) {\r\n this.props.actions.updateDashboardData(currentDashboardID, null, data);\r\n }\r\n await processUtils.sleep(5000);\r\n }\r\n }\r\n\r\n getDashboardID() {\r\n //if we're in a playlist, then we'll pass the dashboard in as a prop\r\n return this.props.dashboard ? this.props.dashboard.ID : this.props.id;\r\n }\r\n \r\n initialiseDashboard() {\r\n const dashboard = this.props.dashboard;\r\n let dashboardData = {};\r\n //initialise using the template fields and then override with the adjustments\r\n dashboard.Template.GameVariables.forEach(variable => {\r\n dashboardData[variable.Name] = variable.DefaultValue;\r\n });\r\n dashboard.Adjustments.filter(a => a.Enabled).forEach(adjustment => {\r\n if(adjustment.Append) {\r\n dashboardData[adjustment.Name] += parseFloat(adjustment.Append);\r\n }\r\n else {\r\n dashboardData[adjustment.Name] = adjustment.Override;\r\n }\r\n });\r\n const players = dashboard.Players.map(player => {\r\n let userAvatar = null;\r\n if(player.UserID) {\r\n const user = this.props.users.find(u => u.ID === player.UserID);\r\n if(user) {\r\n userAvatar = user.Avatar;\r\n }\r\n }\r\n return {\r\n label: player.Label,\r\n id: player.ID,\r\n userID: player.UserID,\r\n clientUserID: player.ClientUserID,\r\n userAvatar,\r\n percentage: 0,\r\n rawPercentage: 0,\r\n movement: 0\r\n };\r\n });\r\n dashboardData['players'] = players;\r\n this.setState(dashboardData, this.initialisePlayers);\r\n }\r\n \r\n initialisePlayers() {\r\n if(this.props.data) {\r\n const playerData = this.getPlayerData();\r\n if(playerData.length) {\r\n let players = [...this.state.players];\r\n for(let i = 0; i < playerData.length; i++) {\r\n const playerDataItem = playerData[i];\r\n let percentage = 0;\r\n let rawPercentage = 0;\r\n if(Object.keys(playerDataItem).includes('percentage')) {\r\n //if we have it in the data or as a player game variable, get it from there\r\n percentage = playerDataItem.percentage;\r\n rawPercentage = percentage;\r\n }\r\n else {\r\n if(playerDataItem.current && playerDataItem.target) {\r\n percentage = this.getPercentage(playerDataItem.current, playerDataItem.target);\r\n rawPercentage = (playerDataItem.current / playerDataItem.target) * 100;\r\n }\r\n }\r\n const playerDataItemCalculated = {\r\n id: playerDataItem.id,\r\n percentage,\r\n rawPercentage,\r\n department: playerDataItem.department,\r\n current: playerDataItem.current,\r\n target: playerDataItem.target\r\n }; \r\n\r\n const originalPlayer = players.find(p => p.clientUserID === playerDataItem.id);\r\n if(originalPlayer) {\r\n const playerIndex = _.indexOf(players, originalPlayer);\r\n const percentage = playerDataItemCalculated.percentage;\r\n const rawPercentage = playerDataItemCalculated.rawPercentage;\r\n const department = playerDataItemCalculated.department; \r\n let label = originalPlayer.label; \r\n let userID = originalPlayer.userID;\r\n const newPlayer = this.props.dashboard.Players.find(p => p.ID === originalPlayer.id);\r\n if(newPlayer) {\r\n label = newPlayer.Label;\r\n userID = newPlayer.UserID; \r\n } \r\n let userAvatar = null;\r\n if(userID) {\r\n const user = this.props.users.find(u => u.ID === userID);\r\n if(user) {\r\n userAvatar = user.Avatar;\r\n }\r\n } \r\n let updatedPlayer = Object.assign({}, originalPlayer, { percentage, rawPercentage, current: playerDataItemCalculated.current, target: playerDataItemCalculated.target, department, label, userAvatar });\r\n players.splice(playerIndex, 1, updatedPlayer);\r\n }\r\n }\r\n if(this.state.defaultSort === 'current') {\r\n players.sort((a, b) => {\r\n let val = (b.current || 0) - (a.current || 0);\r\n if(val === 0) {\r\n if(this.state.secondarySort === 'percentage') {\r\n val = (b.rawPercentage || 0) - (a.rawPercentage || 0);\r\n }\r\n }\r\n return val;\r\n });\r\n }\r\n else {\r\n players.sort((a, b) => {\r\n let val = (b.rawPercentage || 0) - (a.rawPercentage || 0);\r\n if(val === 0) {\r\n if(this.state.secondarySort === 'current') {\r\n val = (b.current || 0) - (a.current || 0);\r\n }\r\n }\r\n return val;\r\n });\r\n }\r\n const previousPlayers = this.state.players;\r\n //add the positions and movement\r\n players = players.map((player, index) => {\r\n const position = index + 1;\r\n let movement = 0;\r\n const previousPlayer = previousPlayers.find(p => p.id === player.id);\r\n if(previousPlayer && previousPlayer.hasOwnProperty('position')) {\r\n movement = position - previousPlayer.position;\r\n }\r\n return Object.assign({}, player, { position }, { movement });\r\n });\r\n\r\n this.setState({ players, processedData: this.props.data }, () => {\r\n if(!this.initialDataProcessed || !this.state.singlePageMode) {\r\n //animate on every multi page load, or on the 1st single page load\r\n this.animatePlayers();\r\n }\r\n if(!this.initialDataProcessed) {\r\n if(!this.state.singlePageMode) {\r\n this.rotatePlayers();\r\n }\r\n if(this.state.testLiveMode) {\r\n this.startLiveTest();\r\n }\r\n this.initialDataProcessed = true;\r\n }\r\n });\r\n }\r\n }\r\n }\r\n\r\n getPlayersForCurrentPage() {\r\n const page = this.state.page;\r\n const playersPerPage = this.playersPerPage;\r\n const playerStart = (page - 1) * playersPerPage;\r\n const playerEnd = playerStart + playersPerPage;\r\n let players = this.state.players.slice(playerStart, playerEnd);\r\n if(this.state.singlePageMode && this.state.listHeadHeight && this.state.listItemHeight) {\r\n let y = this.state.listHeadHeight + 2;\r\n for(let i = 0; i < players.length; i++) {\r\n players[i] = Object.assign({}, players[i], { top: y });\r\n y += this.state.listItemHeight + 2;\r\n } \r\n }\r\n return players;\r\n }\r\n\r\n getPercentage(current, target) {\r\n let percentage = target === 0 ? 0 : (current / target) * 100;\r\n if(percentage < 0) {\r\n percentage = 0;\r\n }\r\n if(percentage > 100) {\r\n percentage = 100;\r\n }\r\n return percentage;\r\n }\r\n\r\n getPlayerData() {\r\n const playerData = [];\r\n if(this.props.data && this.props.dashboard) {\r\n const playerGameVariableTypes = {};\r\n this.props.dashboard.Template.PlayerGameVariables.forEach(variable => playerGameVariableTypes[variable.Name] = variable.Type);\r\n for(let i = 0; i < this.props.dashboard.Players.length; i++) {\r\n const player = this.props.dashboard.Players[i];\r\n let playerDashboardData = {};\r\n if(player.ClientUserID) {\r\n playerDashboardData = Object.assign({}, this.props.data.find(d => d.id + '' === player.ClientUserID));\r\n }\r\n player.Adjustments.forEach(adjustment => {\r\n if(adjustment.Append) {\r\n playerDashboardData[adjustment.Name] += parseFloat(adjustment.Append);\r\n }\r\n else {\r\n let override = adjustment.Override;\r\n let type = playerGameVariableTypes[adjustment.Name];\r\n if(type) {\r\n if(type.toLowerCase() === 'integer') {\r\n override = parseInt(override, 10);\r\n }\r\n else if(type.toLowerCase() === 'double') {\r\n override = parseFloat(override);\r\n }\r\n }\r\n playerDashboardData[adjustment.Name] = override;\r\n }\r\n });\r\n playerData.push(playerDashboardData);\r\n }\r\n }\r\n return playerData;\r\n }\r\n\r\n getBase64Url(rawString) {\r\n if(rawString) {\r\n return imageUtils.getBase64Url(rawString);\r\n }\r\n else {\r\n return \"\";\r\n }\r\n }\r\n\r\n getUserImage(avatar) {\r\n const imageData = avatar ? imageUtils.getAvatarBase64Url(avatar) : require('../../../../images/avatar-empty.png');\r\n return imageData;\r\n }\r\n\r\n getScoreClass(percentage) {\r\n if(percentage >= 75) {\r\n return 'list-scores__perc--high'\r\n }\r\n else if(percentage >= 50) {\r\n return 'list-scores__perc--med'\r\n }\r\n else if(percentage >= 25) {\r\n return 'list-scores__perc--low'\r\n }\r\n else {\r\n return 'list-scores__perc--lowest'\r\n }\r\n }\r\n\r\n getMovementClass(movement) {\r\n //if the movement is negative, then we've moved up in position, e.g. from position 2 to 1\r\n if(movement < 0) {\r\n return 'aheadicon-arrow--up';\r\n }\r\n else if(movement > 0) {\r\n return 'aheadicon-arrow--dn';\r\n }\r\n else {\r\n return '';\r\n }\r\n }\r\n\r\n formatValue(value) {\r\n if(this.state.valueFormat === \"callTime\") {\r\n return value ? textUtils.formatTime(value) : '-';\r\n }\r\n else {\r\n //default to currency\r\n return `${this.state.currencySymbol}${_.round((parseFloat(value) || 0), 2).toLocaleString()}`;\r\n }\r\n }\r\n\r\n render() {\r\n const players = this.getPlayersForCurrentPage();\r\n return (\r\n \r\n
\r\n
\r\n Back\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
{this.state.title} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n {\r\n players.map(player => \r\n this.playerRefs.push(control)} style={player.top ? { top: player.top + 'px'} : null }>\r\n {player.position}
\r\n {\r\n this.state.showAvatar ?\r\n \r\n
\r\n
{player.label}\r\n \r\n {player.department || '-'}\r\n \r\n
\r\n : null\r\n }\r\n {\r\n this.state.showDepartment ?\r\n {player.department || '-'}
\r\n : null\r\n }\r\n {\r\n this.state.showValue ?\r\n {this.formatValue(player.current)}
\r\n : null\r\n }\r\n {\r\n this.state.showTarget ?\r\n {this.formatValue(player.target)}
\r\n : null\r\n }\r\n {\r\n this.state.showPercentage ? \r\n this.state.formatPercentage ?\r\n {Math.round(player.percentage || 0)}%
\r\n :\r\n {Math.round(player.percentage || 0)}
\r\n : null\r\n }\r\n {\r\n this.state.showTrend ?\r\n \r\n
\r\n : null\r\n } \r\n \r\n )\r\n }\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
this.tournamentBackground = control} className=\"scoreboard-tournament-bg\" style={{backgroundImage: `url(${this.getBase64Url(this.state.backgroundImage)})`}}>
\r\n
\r\n {\r\n this.props.label ?
{this.props.label}
: null\r\n }\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
this.node = node}>\r\n
\r\n
\r\n
\r\n
\r\n {\r\n logo ?\r\n
\r\n
\r\n
\r\n : null\r\n }\r\n
Scoreboard \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n Name
\r\n Department
\r\n Current
\r\n Target
\r\n Perc
\r\n \r\n {\r\n players.map((player) =>\r\n \r\n {player.position}
\r\n \r\n
\r\n
{player.label}\r\n \r\n {player.department || '-'}\r\n \r\n
\r\n {player.department || '-'}
\r\n £{(player.current || 0).toLocaleString()}
\r\n £{(player.target || 0).toLocaleString()}
\r\n {Math.round((this.props.showRealPercentage ? Math.min(player.realPercentage, 999) : player.percentage) || 0)}%
\r\n \r\n )\r\n }\r\n \r\n
\r\n
\r\n
\r\n
\r\n
5 ? 'racetrack--labelsback' : ''}`}>\r\n \r\n
{player.label}
\r\n {this.getAvatar(player)}\r\n
;\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
{this.state.title} \r\n \r\n \r\n {\r\n this.state.logo ?\r\n
\r\n : null\r\n }\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n {this.getPlayersMarkup(this.state.players)}\r\n \r\n \r\n {[1,2,3,4,5,6,7].map(i => \r\n
\r\n )}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n {/*
\r\n
\r\n
*/}\r\n\r\n
\r\n\r\n
\r\n\r\n\r\n
\r\n
\r\n \r\n
\r\n
\r\n
Race start in
\r\n
0:{this.state.countdownSecs.toString().padStart(2, '0')}
\r\n
\r\n
\r\n
\r\n {\r\n this.props.label ?
{this.props.label}
: null\r\n }\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
this.node = node}>\r\n
\r\n
\r\n
\r\n
\r\n {\r\n logo ?\r\n
\r\n
\r\n
\r\n : null\r\n } \r\n
Scoreboard \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n Name
\r\n {\r\n this.props.showQualified ?\r\n Qualified
\r\n : null\r\n }\r\n Department
\r\n Current
\r\n Target
\r\n Perc
\r\n \r\n {\r\n players.map((player) =>\r\n \r\n {player.position}
\r\n \r\n
\r\n
{player.label}\r\n \r\n {player.department || '-'}\r\n \r\n
\r\n {\r\n this.props.showQualified ?\r\n {player.percentage >= 100 ? 'Q': ''}
\r\n : null\r\n }\r\n {player.department || '-'}
\r\n {this.formatValue(player.current)}
\r\n {this.formatValue(player.target)}
\r\n {Math.round((this.props.showRealPercentage ? Math.min(player.realPercentage, 999) : player.percentage) || 0)}%
\r\n \r\n )\r\n }\r\n \r\n
\r\n
\r\n
\r\n
\r\n
5 ? 'racetrack--labelsback' : ''}`}>\r\n \r\n
{player.label}
\r\n {this.getAvatar(player)}\r\n
;\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
{this.state.title} \r\n \r\n \r\n {\r\n this.state.logo ?\r\n
\r\n : null\r\n }\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n {this.getPlayersMarkup(this.state.players)}\r\n \r\n \r\n {[1,2,3,4,5,6,7].map(i => \r\n
\r\n )}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n\r\n
\r\n\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
Race start in
\r\n
0:{this.state.countdownSecs.toString().padStart(2, '0')}
\r\n
\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n
This dashboard is not yet configured \r\n
Your dashboard does not contain any widgets or data. {this.props.role === 'Viewer' ? 'Please contact an administrator.' : 'Please configure it.'}
\r\n {\r\n this.props.role !== 'Viewer' ?\r\n
\r\n
\r\n Customise Now\r\n \r\n : null\r\n }\r\n \r\n
\r\n
this.gridStackRef = control} data-gs-width={columnCount} data-gs-height={rowCount} style={{marginBottom: '10px'}}>\r\n {\r\n this.props.dashboard.Widgets.map((item, i) => \r\n w.ID === item.WidgetID)} \r\n widgets={this.props.widgets} \r\n tasks={this.state.tasks} \r\n widgetSettings={item} \r\n xPos={item.X} \r\n yPos={item.Y} \r\n width={item.Width} \r\n height={item.Height} \r\n index={i} \r\n widgetHierarchy={[item.ID]}\r\n onDataChange={this.onDataChange}\r\n gridColumnCount={this.state.columnCount || 12}\r\n onRef={this.setGridItemRef} \r\n removeGridNodesForWidget={this.removeGridNodesForWidget}\r\n />\r\n )\r\n } \r\n
\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nWidgets.propTypes = {\r\n actions: PropTypes.object.isRequired,\r\n dashboard: PropTypes.object\r\n};\r\n\r\nfunction mapStateToProps(state, ownProps) {\r\n return {\r\n widgets: state.dashboard.widgets,\r\n role: state.account.user.Role\r\n };\r\n}\r\n\r\nfunction mapDispatchToProps(dispatch) {\r\n return {\r\n //dashboard actions will now be available under this.props.actions\r\n actions: bindActionCreators(Object.assign({}, dashboardActions, userActions), dispatch)\r\n };\r\n}\r\n\r\nexport default withRouter(withModalContext(connect(mapStateToProps, mapDispatchToProps)(Widgets)));","/* eslint-disable react/jsx-no-bind */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Link } from 'react-router-dom';\r\nimport * as dashboardActions from '../../../../../actions/dashboardActions';\r\nimport * as userActions from '../../../../../actions/userActions';\r\nimport $ from 'jquery';\r\nimport * as imageUtils from '../../../../../utils/imageUtils';\r\nimport Highcharts from 'highcharts';\r\n\r\nclass Chart extends React.Component {\r\n constructor(props, context) {\r\n super(props, context);\r\n this.state = {\r\n };\r\n }\r\n\r\n componentDidMount() { \r\n this.initPie(this.chartRef);\r\n } \r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n }\r\n\r\n initPie(container){\r\n this.chart = new Highcharts.Chart({\r\n chart: {\r\n color: '#fff',\r\n backgroundColor: 'transparent',\r\n renderTo: container,\r\n type: 'pie'\r\n },\r\n credits: {\r\n enabled: false\r\n },\r\n title: {\r\n text: null,\r\n style: {\r\n \"color\": \"#fff\"\r\n }\r\n },\r\n yAxis: {\r\n title: {\r\n text: 'Total percent market share'\r\n }\r\n },\r\n plotOptions: {\r\n pie: {\r\n shadow: false,\r\n borderColor: null\r\n }\r\n },\r\n tooltip: {\r\n formatter: function() {\r\n return '' + this.point.name + ' : ' + this.y + ' %';\r\n }\r\n },\r\n legend: {\r\n enabled: false,\r\n align: 'right',\r\n layout: 'vertical',\r\n verticalAlign: 'middle',\r\n symbolRadius: 0,\r\n symbolPadding: 10,\r\n itemMarginTop: 40,\r\n itemStyle: {\r\n \"color\": \"#fff\"\r\n }\r\n },\r\n series: [{\r\n name: 'User data',\r\n data: [{\r\n y: 8,\r\n name: \"April 2019\",\r\n color: \"#09A709\"\r\n }, {\r\n y: 4,\r\n name: \"March 2019\",\r\n color: \"#E49923\"\r\n }, {\r\n y: 2,\r\n name: \"June 2019\",\r\n color: \"#29B8FC\"\r\n }],\r\n size: '90%',\r\n innerSize: '75%',\r\n showInLegend: true,\r\n dataLabels: {\r\n enabled: false\r\n },\r\n marker: {\r\n symbol: 'square',\r\n radius: 12\r\n }\r\n }]\r\n });\r\n }\r\n\r\n\r\n render() {\r\n return ( \r\n \r\n
\r\n
\r\n
Call time \r\n \r\n
\r\n
\r\n
\r\n
this.chartRef = control}>
\r\n
\r\n
\r\n
\r\n this.navNode = node}>\r\n \r\n \r\n \r\n \r\n
\r\n this.node = node}>\r\n
\r\n
\r\n
\r\n
\r\n {/*
\r\n
\r\n
*/}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
{dashboardName} {playerLabel} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n {textUtils.spacePascalCase(kpi)}\r\n
\r\n \r\n \r\n KPI
\r\n Value
\r\n Split
\r\n \r\n {\r\n playersCurrentPage.map((player, index) =>\r\n \r\n {player.bikeName === 'Current' ? player.bikeName : player.label}
\r\n {this.getCurrentValue(player, kpi)}
\r\n {this.getSplit(player, max, kpi)}
\r\n \r\n )\r\n }\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n );\r\n }\r\n else {\r\n return
\r\n }\r\n }\r\n}\r\n\r\nexport default ScoreboardModal;","\r\n/* eslint-disable react/jsx-no-bind */\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Link } from 'react-router-dom';\r\nimport * as imageUtils from '../../../../../utils/imageUtils';\r\nimport Track from '../Track';\r\nimport ScoreboardModal from './ScoreboardModal';\r\nimport _ from 'lodash';\r\nimport 'url-search-params-polyfill';\r\nimport { withRouter } from 'react-router-dom';\r\nimport * as processUtils from '../../../../../utils/processUtils';\r\nimport * as textUtils from '../../../../../utils/textUtils';\r\nimport '../styles/track-italy.css';\r\nimport {TweenLite, Linear, Power1} from 'gsap/TweenLite';\r\nimport {TimelineMax} from 'gsap/TweenMax';\r\nimport Avatar from '../../../Avatar';\r\nimport Modal from '../../../../common/Modal';\r\nimport SelectPlayerModal from '../../../SelectPlayerModal';\r\n\r\nclass BikeRace extends React.Component {\r\n constructor(props, context) {\r\n super(props, context);\r\n this.getPlayerData = this.getPlayerData.bind(this);\r\n this.getInitialPlayerData = this.getInitialPlayerData.bind(this);\r\n this.getMainClass = this.getMainClass.bind(this);\r\n this.showScoreboard = this.showScoreboard.bind(this);\r\n this.createBgAnim = this.createBgAnim.bind(this);\r\n this.createPlayerAnim = this.createPlayerAnim.bind(this);\r\n this.startBgAnim = this.startBgAnim.bind(this);\r\n this.stopBgAnim = this.stopBgAnim.bind(this);\r\n this.startPlayerAnim = this.startPlayerAnim.bind(this);\r\n this.stopPlayerAnim = this.stopPlayerAnim.bind(this);\r\n this.getCountdownClass = this.getCountdownClass.bind(this);\r\n this.setPlayerRef = this.setPlayerRef.bind(this);\r\n this.dashboardGroupSelected = this.dashboardGroupSelected.bind(this);\r\n this.startLiveTest = this.startLiveTest.bind(this);\r\n this.calculateLanePlayerValues = this.calculateLanePlayerValues.bind(this);\r\n this.processUpdatedData = this.processUpdatedData.bind(this);\r\n this.getPlayerID = this.getPlayerID.bind(this);\r\n this.getDashboardID = this.getDashboardID.bind(this);\r\n this.bikeTypes = {\r\n WorldRecord: {\r\n Name: 'WorldRecord',\r\n LabelName: 'World Record',\r\n Order: 1,\r\n ColourOverride: 'gold'\r\n },\r\n PersonalBest: {\r\n Name: 'PersonalBest',\r\n LabelName: 'Personal Best',\r\n Order: 2,\r\n ColourOverride: 'silver'\r\n },\r\n Target: {\r\n Name: 'Target',\r\n LabelName: 'Target',\r\n Order: 3,\r\n ColourOverride: 'white'\r\n },\r\n Previous: {\r\n Name: 'Previous',\r\n LabelName: 'Previous',\r\n Order: 4,\r\n ColourOverride: 'red'\r\n },\r\n Current: {\r\n Name: 'Current',\r\n LabelName: 'Current',\r\n Order: 5,\r\n ColourOverride: null\r\n },\r\n };\r\n this.playerRefs = [];\r\n this.playerTimelines = [];\r\n //this.tooltipControls = [];\r\n let animationStyle = 1;\r\n let testLiveMode = false;\r\n const searchParams = new URLSearchParams(props.location.search);\r\n const animationStyleParam = searchParams.get('animationStyle');\r\n if(animationStyleParam) {\r\n animationStyle = parseInt(animationStyleParam, 10);\r\n }\r\n const testLiveModeParam = searchParams.get('testLiveMode');\r\n if(testLiveModeParam) {\r\n testLiveMode = testLiveModeParam === 'true';\r\n }\r\n this.state = {\r\n isAnimating: false,\r\n finished: false,\r\n title: this.props.dashboard.Name,\r\n backgroundImage: null,\r\n logo: null,\r\n logoLarge: null,\r\n players: {},\r\n animationStyle,\r\n testLiveMode,\r\n showCountdown: false,\r\n countdownSecs: 3\r\n }\r\n this.initialiseDashboard = this.initialiseDashboard.bind(this);\r\n this.initialisePlayers = this.initialisePlayers.bind(this);\r\n this.getAvatar = this.getAvatar.bind(this);\r\n this.clearTimelines = this.clearTimelines.bind(this);\r\n }\r\n\r\n componentDidMount() { \r\n this._isMounted = true;\r\n this.initialiseDashboard();\r\n //this.createBgAnim();\r\n //this.createPlayerAnim();\r\n window.$('body').addClass('racepage--bikes');\r\n }\r\n\r\n componentWillUpdate(nextProps, nextState) {\r\n if(this.props.dashboard.ID !== nextProps.dashboard.ID) {\r\n this.setState({\r\n players: {},\r\n showScoreboard: false,\r\n showScoreboardButton: false,\r\n animationStyle: 1,\r\n testLiveMode: false\r\n });\r\n this.stopBgAnim();\r\n window.$('#modal').modal('hide');\r\n this.playerRefs = [];\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if(this.playersUpdated) {\r\n //debugger;\r\n const newRefs = [];\r\n const timelinesToKill = [];\r\n this.playerTimelines.forEach(timeline => {\r\n const children = timeline.getChildren();\r\n if(children && children.length && !children[0].target.isConnected) {\r\n timelinesToKill.push(timeline);\r\n }\r\n });\r\n timelinesToKill.forEach(timeline => {\r\n timeline.kill();\r\n _.pull(this.playerTimelines, timeline);\r\n });\r\n \r\n this.playerRefs.forEach(ref => {\r\n ref = window.$(ref);\r\n if(ref && ref.children()[0] && !ref.children()[0].getAttribute('animationAdded')) {\r\n newRefs.push(ref);\r\n }\r\n });\r\n if(newRefs.length) {\r\n const startPlayerAnimations = this.playerAnimationStarted;\r\n this.createPlayerAnim(newRefs);\r\n if(startPlayerAnimations) {\r\n this.startPlayerAnim();\r\n }\r\n }\r\n }\r\n this.playersUpdated = false;\r\n if(prevProps.dashboard.ID !== this.props.dashboard.ID) {\r\n this.initialiseDashboard();\r\n //this.createBgAnim\r\n this.createPlayerAnim();\r\n }\r\n if(prevProps.data === null && this.props.data !== null) {\r\n this.initialisePlayers();\r\n }\r\n const dataUpdated = prevProps.data !== null && this.props.data !== null && JSON.stringify(prevProps.data) !== JSON.stringify(this.props.data);\r\n const dashboardUpdated = prevProps.dashboard != this.props.dashboard;\r\n if(this.props.dashboard.ID && this.props.dashboard.ID === prevProps.dashboard.ID && (dataUpdated || dashboardUpdated)) {\r\n if(dashboardUpdated) {\r\n const dashboardPlayer = this.props.dashboard.Players.find(p => p.ID === this.getPlayerID());\r\n if(dashboardPlayer) { \r\n let userAvatar = null;\r\n if(dashboardPlayer.UserID) {\r\n const user = this.props.users.find(u => u.ID === dashboardPlayer.UserID);\r\n if(user) {\r\n userAvatar = user.Avatar;\r\n }\r\n }\r\n //update the player in state with the dashboard player \r\n let player = Object.assign({}, this.state.player, dashboardPlayer, { userAvatar });\r\n let title = `${this.props.dashboard.Name} - ${player.Label}`;\r\n this.setState({ player, title }, () => this.processUpdatedData());\r\n this.playersUpdated = true;\r\n }\r\n }\r\n else if(!this.initialising && dataUpdated) {\r\n this.processUpdatedData();\r\n }\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n this._isMounted = false;\r\n window.$('body').removeClass('racepage--bikes');\r\n this.clearTimelines();\r\n }\r\n\r\n clearTimelines() {\r\n //destroy any animation timelines\r\n this.playerTimelines.forEach(timeline => {\r\n timeline.kill();\r\n timeline = null;\r\n });\r\n if(this.bg) {\r\n this.bg.kill();\r\n this.bg = null;\r\n }\r\n if(this.bgSingle) {\r\n this.bgSingle.kill();\r\n this.bgSingle = null;\r\n }\r\n if(this.bgCurbTop) {\r\n this.bgCurbTop.kill();\r\n this.bgCurbTop = null;\r\n }\r\n if(this.bgCurbBot) {\r\n this.bgCurbBot.kill();\r\n this.bgCurbBot = null;\r\n }\r\n if(this.start) {\r\n this.start.kill();\r\n this.start = null;\r\n }\r\n if(this.trackline) {\r\n this.trackline.kill();\r\n this.trackline = null;\r\n }\r\n }\r\n\r\n getPlayerID() {\r\n return this.props.match.params.playerID || this.props.playerID;\r\n }\r\n\r\n getDashboardID() {\r\n //if we're in a playlist, then we'll pass the dashboard in as a prop\r\n return this.props.dashboard ? this.props.dashboard.ID : this.props.id;\r\n }\r\n\r\n processUpdatedData() {\r\n const players = this.getPlayerData();\r\n const playerKeys = Object.keys(players);\r\n const timePeriodRatio = this.props.data.TimePeriodRatio;\r\n if(playerKeys.length) {\r\n const speed = 8;\r\n let maxDuration = 0;\r\n for(let i = 0; i < playerKeys.length; i++) {\r\n const player = players[playerKeys[i]];\r\n const playersCurrentLaneResult = this.calculateLanePlayerValues(player, timePeriodRatio, speed, maxDuration);\r\n players[playerKeys[i]] = playersCurrentLaneResult[0];\r\n maxDuration = playersCurrentLaneResult[1];\r\n }\r\n this.setState({\r\n players\r\n });\r\n }\r\n }\r\n\r\n createBgAnim() {\r\n //initialise the background image animation\r\n if(this.bg) {\r\n this.bg.kill();\r\n this.bg = null;\r\n }\r\n if(this.bgSingle) {\r\n this.bgSingle.kill();\r\n this.bgSingle = null;\r\n }\r\n if(this.bgCurbTop) {\r\n this.bgCurbTop.kill();\r\n this.bgCurbTop = null;\r\n }\r\n if(this.bgCurbBot) {\r\n this.bgCurbBot.kill();\r\n this.bgCurbBot = null;\r\n }\r\n if(this.start) {\r\n this.start.kill();\r\n this.start = null;\r\n }\r\n if(this.trackline) {\r\n this.trackline.kill();\r\n this.trackline = null;\r\n }\r\n this.bg = new TimelineMax({\r\n repeat: -1\r\n });\r\n this.bgSingle = new TimelineMax({\r\n repeat: -1\r\n });\r\n this.bgCurbTop = new TimelineMax({\r\n repeat: -1\r\n });\r\n this.bgCurbBot = new TimelineMax({\r\n repeat: -1\r\n });\r\n this.start = new TimelineMax({\r\n repeat: 0\r\n });\r\n /*this.finish = new TimelineMax({\r\n repeat: 0\r\n });*/\r\n this.trackline = new TimelineMax({\r\n repeat: -1\r\n });\r\n /*this.flag = new TimelineMax({\r\n repeat: 0\r\n });*/\r\n this.bg.to(\".racetrack__bg\", 25, {\r\n backgroundPosition: \"-2800px 0px\",\r\n force3D:true,\r\n rotation:0.01,\r\n z:0.01,\r\n autoRound:false,\r\n ease: Linear.easeNone\r\n });\r\n this.bg.pause();\r\n\r\n //-- Single Track track bacground animation\r\n this.bgSingle.to(\".track-dirt-single\", 25, {\r\n backgroundPosition: \"-2800px 0px\",\r\n force3D:true,\r\n rotation:0.01,\r\n z:0.01,\r\n autoRound:false,\r\n ease: Linear.easeNone\r\n });\r\n this.bgSingle.pause();\r\n\r\n //-- Top curb animation\r\n this.bgCurbTop.to(\".track__top\", 25, {\r\n backgroundPosition: \"-1400px 0px\",\r\n force3D:true,\r\n rotation:0.01,\r\n z:0.01,\r\n autoRound:false,\r\n ease: Linear.easeNone\r\n });\r\n this.bgCurbTop.pause();\r\n \r\n //-- Bottom curb animation\r\n this.bgCurbBot.to(\".track__bottom\", 25, {\r\n backgroundPosition: \"-1400px 0px\",\r\n force3D:true,\r\n rotation:0.01,\r\n z:0.01,\r\n autoRound:false,\r\n ease: Linear.easeNone\r\n });\r\n this.bgCurbBot.pause();\r\n\r\n this.start.to(\".track__start\", 1.5, {left: -100, ease: Power1.ease});\r\n this.start.pause();\r\n \r\n /*this.finish.from(\".track__finish\", 2.5, {right: -130, ease: Power2.easeOut});\r\n this.finish.pause();*/\r\n \r\n //const duration = 5000;\r\n //this.trackline.to(\".track__line\", duration / 1000, {backgroundPosition: '100% 0', ease: Power2.ease});\r\n this.trackline.to(\".track__line\", 25, {\r\n backgroundPosition: \"100% 0\", \r\n force3D:true, \r\n rotation:0.01, \r\n z:0.01, \r\n autoRound:false, \r\n ease: Linear.easeNone\r\n });\r\n //this.trackline.to(\".track__line\", duration / 1000, {backgroundPosition: '100% 0', ease: Linear.easeNone});\r\n this.trackline.pause();\r\n \r\n /*this.flag.from(\".racetrack__flag\", 1.5, {right: -50, ease: Power3.ease});\r\n this.flag.pause();*/\r\n }\r\n\r\n createPlayerAnim(playerRefs = this.playerRefs) {\r\n //if we have previous animation, then clear them and then add again?\r\n this.playerAnimationStarted = false;\r\n const timelineCount = this.playerTimelines.length;\r\n if(timelineCount) {\r\n for(let i = 0; i < timelineCount; i++) {\r\n this.playerTimelines[i].kill();\r\n this.playerTimelines[i] = null;\r\n }\r\n this.playerTimelines = [];\r\n }\r\n //initialise the player animation\r\n window.$(playerRefs.filter(p => p != null)).each((index, playerRef) => {\r\n try {\r\n playerRef = window.$(playerRef);\r\n const speed = 0.5;\r\n const delay = Math.random() / 10;\r\n const wheels = new TimelineMax({repeat: -1}).delay(delay);\r\n const movefrontleglower = new TimelineMax({repeat: -1}).delay(delay);\r\n const movefrontlegupper = new TimelineMax({repeat: -1}).delay(delay);\r\n const movebackleglower = new TimelineMax({repeat: -1}).delay(delay);\r\n const movebacklegupper = new TimelineMax({repeat: -1}).delay(delay);\r\n \r\n const frontwheel = playerRef.find(\"#wheel-front\").get(0);\r\n const backwheel = playerRef.find(\"#wheel-back\").get(0);\r\n const frontpedal = playerRef.find(\"#pedal-front\").get(0);\r\n const backpedal = playerRef.find(\"#pedal-back\").get(0);\r\n const frontleglower = playerRef.find(\"#leg-front-lower\").get(0);\r\n const frontlegupper = playerRef.find(\"#leg-front-upper\").get(0);\r\n const backleglower = playerRef.find(\"#leg-back-lower\").get(0);\r\n const backlegupper = playerRef.find(\"#leg-back-upper\").get(0);\r\n\r\n wheels\r\n .to(frontwheel, speed, {rotation:360, transformOrigin:\"center center\", ease:Linear.easeNone})\r\n .to(backwheel, speed, {rotation:360, transformOrigin:\"center center\", ease:Linear.easeNone, delay: -speed})\r\n .to(frontpedal, speed, {rotation:360, transformOrigin:\"3 2.5\", ease:Linear.easeNone, delay: -speed})\r\n .to(backpedal, speed, {rotation:360, transformOrigin:\"bottom center\", ease:Linear.easeNone, delay: -speed})\r\n\r\n movefrontleglower\r\n .to(frontleglower, speed / 4, {x: -15, y: -10, rotation:48, transformOrigin:\"bottom center\", ease:Linear.easeNone})\r\n .to(frontleglower, speed / 4, {x: -7, y: -22, rotation: 52, transformOrigin:\"bottom center\", scale: .95, ease:Linear.easeNone}) \r\n .to(frontleglower, speed / 4, {x: 10, y: -10, rotation: 13, transformOrigin:\"bottom center\", scale: 1, ease:Linear.easeNone})\r\n .to(frontleglower, speed / 4, {x: 0, y: 0, rotation:0, transformOrigin:\"bottom center\", ease:Linear.easeNone})\r\n\r\n movefrontlegupper\r\n .to(frontlegupper, speed / 4, {x: -4, y: 5, rotation:-32, transformOrigin:\"top left\", ease:Linear.easeNone}) \r\n .to(frontlegupper, speed / 4, {x: -2, y: 10, rotation: -48, scale: .95, transformOrigin:\"top left\", ease:Linear.easeNone})\r\n .to(frontlegupper, speed / 4, {x: -4, y: 3, rotation: -33, scale: 1, transformOrigin:\"top left\", ease:Linear.easeNone})\r\n .to(frontlegupper, speed / 4, {x: 0, y: 0, rotation:0, transformOrigin:\"top left\", ease:Linear.easeNone});\r\n \r\n movebackleglower\r\n .to(backleglower, speed / 4, {x: 26, y: 7, rotation:-35, transformOrigin:\"bottom center\", ease:Linear.easeNone})\r\n .to(backleglower, speed / 4, {x: 7, y: 20, rotation: -28, transformOrigin:\"bottom center\", scale: .95, ease:Linear.easeNone}) \r\n .to(backleglower, speed / 4, {x: -5, y: 10, rotation: 3, transformOrigin:\"bottom center\", scale: 1, ease:Linear.easeNone})\r\n .to(backleglower, speed / 4, {x: 0, y: 0, rotation:0, transformOrigin:\"bottom center\", ease:Linear.easeNone});\r\n \r\n movebacklegupper\r\n .to(backlegupper, speed / 4, {x: 6, y: 8, rotation:-5, transformOrigin:\"top left\", ease:Linear.easeNone}) \r\n .to(backlegupper, speed / 4, {x: 2, y: 8, rotation: 25, scale: 1.05, transformOrigin:\"top left\", ease:Linear.easeNone})\r\n .to(backlegupper, speed / 4, {x: 0, y: 5, rotation: 5, scaleX: 1, transformOrigin:\"top left\", ease:Linear.easeNone})\r\n .to(backlegupper, speed / 4, {x: 0, y: 0, rotation:0, transformOrigin:\"top left\", ease:Linear.easeNone});\r\n \r\n\r\n wheels.pause();\r\n movefrontleglower.pause();\r\n movefrontlegupper.pause();\r\n movebackleglower.pause();\r\n movebacklegupper.pause();\r\n\r\n this.playerTimelines.push(wheels);\r\n this.playerTimelines.push(movefrontleglower);\r\n this.playerTimelines.push(movefrontlegupper);\r\n this.playerTimelines.push(movebackleglower);\r\n this.playerTimelines.push(movebacklegupper);\r\n playerRef.children()[0].setAttribute('animationAdded', true);\r\n }\r\n catch(e) {\r\n console.log(e);\r\n }\r\n });\r\n }\r\n\r\n setPlayerRef(player) {\r\n this.playerRefs.push(player);\r\n }\r\n\r\n initialiseDashboard() {\r\n const dashboard = this.props.dashboard;\r\n let dashboardData = {};\r\n //initialise using the template fields and then override with the adjustments\r\n dashboard.Template.GameVariables.forEach(variable => {\r\n dashboardData[variable.Name] = variable.DefaultValue;\r\n });\r\n dashboard.Adjustments.filter(a => a.Enabled).forEach(adjustment => {\r\n if(adjustment.Append) {\r\n dashboardData[adjustment.Name] += parseFloat(adjustment.Append);\r\n }\r\n else {\r\n dashboardData[adjustment.Name] = adjustment.Override;\r\n }\r\n });\r\n const playerID = this.getPlayerID();\r\n const matchingPlayer = dashboard.Players.find(p => p.ID === playerID);\r\n if(matchingPlayer) {\r\n let userAvatar = null;\r\n if(matchingPlayer.UserID) {\r\n const user = this.props.users.find(u => u.ID === matchingPlayer.UserID);\r\n if(user) {\r\n userAvatar = user.Avatar;\r\n }\r\n }\r\n const player = Object.assign({}, matchingPlayer, { userAvatar });\r\n dashboardData['player'] = player;\r\n dashboardData['title'] = `${dashboard.Name} - ${player.Label}`;\r\n this.setState(dashboardData, this.initialisePlayers);\r\n }\r\n }\r\n\r\n calculateLanePlayerValues(playersCurrentLane, timePeriodRatio, speed, maxDuration) {\r\n const maxValue = _.max(playersCurrentLane.map(p => p.currentValue));\r\n for(let j = 0; j < playersCurrentLane.length; j++) {\r\n const currentPlayer = playersCurrentLane[j];\r\n let percentage = currentPlayer.percentage;\r\n if(currentPlayer.bikeName === this.bikeTypes.Current.Name) {\r\n percentage = this.getPercentage(currentPlayer.currentValue, maxValue);\r\n }\r\n else {\r\n //adjust based on the time ratio\r\n percentage = this.getPercentage(currentPlayer.currentValue * timePeriodRatio, maxValue);\r\n }\r\n const timeMs = Math.round((percentage / speed) * 1000); //this gives us the time to allocate to the transition to get a uniform speed\r\n const transitionDuration = `${timeMs}ms`; \r\n maxDuration = Math.max(timeMs, maxDuration);\r\n const updatedPlayer = Object.assign({}, currentPlayer, { percentage, transitionDuration })\r\n playersCurrentLane.splice(j, 1, updatedPlayer);\r\n }\r\n return [playersCurrentLane, maxDuration]\r\n }\r\n \r\n async initialisePlayers() {\r\n this.initialising = true;\r\n const currentPlayerID = this.getPlayerID();\r\n if(this.props.data) {\r\n const currentData = this.props.data;\r\n const players = this.getPlayerData();\r\n const playerKeys = Object.keys(players);\r\n if(playerKeys.length) {\r\n this.setState({\r\n players,\r\n showCountdown: true,\r\n countdownSecs: 3\r\n }, () => {\r\n this.createPlayerAnim();\r\n this.createBgAnim();\r\n });\r\n await processUtils.sleep(1000);\r\n if(!this._isMounted){ return };\r\n this.setState({\r\n showCountdown: true,\r\n countdownSecs: 2\r\n });\r\n await processUtils.sleep(1000);\r\n if(!this._isMounted){ return };\r\n this.setState({\r\n showCountdown: true,\r\n countdownSecs: 1\r\n });\r\n await processUtils.sleep(1000);\r\n if(!this._isMounted){ return };\r\n this.setState({\r\n showCountdown: true,\r\n countdownSecs: 0\r\n });\r\n window.setTimeout(() => {\r\n if(!this._isMounted){ return };\r\n this.setState({\r\n showCountdown: false,\r\n countdownSecs: 3\r\n });\r\n }, 1000);\r\n if(!this._isMounted){ return };\r\n const timePeriodRatio = this.props.data.TimePeriodRatio;\r\n if(this.state.animationStyle === 1) {\r\n const speed = 8; //10\r\n let maxDuration = 0;\r\n for(let i = 0; i < playerKeys.length; i++) {\r\n const playersCurrentLaneResult = this.calculateLanePlayerValues(players[playerKeys[i]], timePeriodRatio, speed, maxDuration);\r\n players[playerKeys[i]] = playersCurrentLaneResult[0];\r\n maxDuration = playersCurrentLaneResult[1];\r\n }\r\n this.setState({\r\n isAnimating: true\r\n });\r\n\r\n this.startBgAnim();\r\n this.startPlayerAnim();\r\n this.setState({ players }, async () => {\r\n await processUtils.sleep(maxDuration);\r\n if(!this._isMounted){ return };\r\n if(this.state.testLiveMode) {\r\n this.startLiveTest();\r\n }\r\n //this.stopBgAnim();\r\n //this.stopPlayerAnim();\r\n await processUtils.sleep(15000);\r\n if(!this._isMounted){ return };\r\n if(currentPlayerID === this.getPlayerID()) {\r\n //make sure we haven't switched to a different dashboard\r\n this.showScoreboard(players); \r\n }\r\n });\r\n }\r\n else if(this.state.animationStyle === 2) {\r\n const speed = 12; //10\r\n this.setState({\r\n isAnimating: true\r\n });\r\n this.startBgAnim();\r\n this.startPlayerAnim();\r\n for(let i = 0; i < playerKeys.length; i++) {\r\n let maxDuration = 0;\r\n const playersCurrentLaneResult = this.calculateLanePlayerValues(players[playerKeys[i]], timePeriodRatio, speed, maxDuration);\r\n players[playerKeys[i]] = playersCurrentLaneResult[0];\r\n maxDuration = playersCurrentLaneResult[1];\r\n this.setState({ players });\r\n await processUtils.sleep(maxDuration);\r\n if(!this._isMounted){ return };\r\n }\r\n if(this.state.testLiveMode) {\r\n this.startLiveTest();\r\n }\r\n await processUtils.sleep(15000);\r\n if(!this._isMounted){ return };\r\n if(currentPlayerID === this.getPlayerID()) {\r\n //make sure we haven't switched to a different dashboard\r\n this.showScoreboard(players); \r\n } \r\n }\r\n if(currentPlayerID === this.getPlayerID() && JSON.stringify(currentData) !== JSON.stringify(this.props.data)) {\r\n //we have new data available, process the update\r\n this.processUpdatedData();\r\n }\r\n }\r\n }\r\n else {\r\n this.setState({ players: this.getInitialPlayerData() });\r\n }\r\n this.initialising = false;\r\n }\r\n\r\n getPercentage(current, target) {\r\n let percentage = target === 0 ? 0 : (current / target) * 100;\r\n if(percentage < 0) {\r\n percentage = 0;\r\n }\r\n if(percentage > 100) {\r\n percentage = 100;\r\n }\r\n return percentage;\r\n }\r\n\r\n getInitialPlayerData() {\r\n //get the list of players we're expecting with the default values (likely zeros) - to use for the initial view before we've received the live data\r\n let playerDashboardData = {};\r\n if(this.props.dashboard && this.state.player) {\r\n const player = this.state.player;\r\n playerDashboardData.id = player.ClientUserID;\r\n this.props.dashboard.Template.PlayerGameVariables.forEach(i => {\r\n playerDashboardData[i.Name] = i.DefaultValue; \r\n });\r\n }\r\n return this.formatPlayerData(playerDashboardData);\r\n }\r\n\r\n getPlayerData() {\r\n let playerDashboardData = {};\r\n if(this.props.data && this.props.dashboard && this.state.player) {\r\n const player = this.state.player;\r\n if(player.ClientUserID && this.props.data.id + '' === player.ClientUserID) {\r\n playerDashboardData = Object.assign({}, this.props.data);\r\n }\r\n player.Adjustments.forEach(adjustment => {\r\n if(adjustment.Append) {\r\n playerDashboardData[adjustment.Name] += parseFloat(adjustment.Append);\r\n }\r\n else {\r\n playerDashboardData[adjustment.Name] = adjustment.Override;\r\n }\r\n });\r\n }\r\n return this.formatPlayerData(playerDashboardData);\r\n }\r\n\r\n formatPlayerData(playerDashboardData) {\r\n const playerData = {};\r\n const dataKeys = Object.keys(playerDashboardData);\r\n const bikeKeys = Object.keys(this.bikeTypes);\r\n for(let i = 0; i < dataKeys.length; i++) {\r\n const keyName = dataKeys[i];\r\n let kpi = null;\r\n let bikeType = null;\r\n for(let j = 0; j < bikeKeys.length; j++) {\r\n const bikeKeyName = bikeKeys[j];\r\n if(keyName.includes(bikeKeyName)) {\r\n kpi = keyName.replace(bikeKeyName, '');\r\n bikeType = this.bikeTypes[bikeKeyName];\r\n break;\r\n }\r\n }\r\n if(kpi && bikeType) {\r\n if(!playerData[kpi]) {\r\n playerData[kpi] = [];\r\n }\r\n //default the percentage and set it\r\n const percentage = 0;\r\n const playerItem = {\r\n id: playerDashboardData.id,\r\n label: bikeType === this.bikeTypes.Current ? textUtils.spacePascalCase(kpi) : bikeType.LabelName,\r\n bikeName: bikeType.Name,\r\n order: bikeType.Order, \r\n percentage,\r\n currentValue: playerDashboardData[keyName],\r\n transitionDuration: '5s',\r\n colourOverride: bikeType.ColourOverride\r\n };\r\n playerData[kpi].push(playerItem);\r\n }\r\n }\r\n //sort the players according to the order we assigned\r\n const playerDataKeys = Object.keys(playerData);\r\n for(let i = 0; i < playerDataKeys.length; i++) {\r\n const playerDataArray = playerData[playerDataKeys[i]];\r\n playerDataArray.sort((a, b) => {\r\n const aOrder = a.order;\r\n const bOrder = b.order;\r\n return aOrder - bOrder;\r\n });\r\n }\r\n return playerData;\r\n }\r\n\r\n async startLiveTest() {\r\n const currentPlayerID = this.getPlayerID();\r\n while(true && currentPlayerID === this.getPlayerID()) {\r\n if(!this._isMounted){ return };\r\n const data = {...this.props.data};\r\n const keys = Object.keys(data);\r\n for(let i = 0; i < keys.length; i++) {\r\n const key = keys[i];\r\n if(key.indexOf('Current') >= 0) {\r\n const val = data[key];\r\n const multiplier = 1 + (Math.random() * 0.2); //we'll get a random number between 0 and 1 and then cap it by 0.2 by multiplying by 0.2\r\n data[key] = (val || 1) * multiplier;\r\n }\r\n }\r\n //make sure we haven't switched to a different dashboard\r\n if(currentPlayerID === this.getPlayerID()) {\r\n this.props.actions.updateDashboardData(this.getDashboardID(), currentPlayerID, data);\r\n }\r\n await processUtils.sleep(5000);\r\n }\r\n }\r\n\r\n getBase64Url(rawString) {\r\n if(rawString) {\r\n return imageUtils.getBase64Url(rawString);\r\n }\r\n else {\r\n return \"\";\r\n }\r\n }\r\n\r\n getMainClass() {\r\n let className = '';\r\n const players = this.state.players;\r\n if(players) {\r\n const playerKeys = Object.keys(players);\r\n let playerCount = 0;\r\n if(playerKeys.length) {\r\n for(let i = 0; i < playerKeys.length; i++) {\r\n playerCount += players[playerKeys[i]].length;\r\n }\r\n }\r\n if(playerCount > 7) {\r\n className += 'racetrack--more-than-7 ';\r\n }\r\n if(playerCount > 35) {\r\n className += 'racetrack--smallest-bikes ';\r\n }\r\n else if(playerCount > 21) { \r\n className += 'racetrack--larger-bikes ';\r\n }\r\n else if(playerCount > 14) {\r\n className += 'racetrack--ultralarge-bikes ';\r\n }\r\n else if(playerCount > 7) {\r\n className += 'racetrack--ultralarge-bikes ';\r\n }\r\n else {\r\n className += 'racetrack--ultralarge-bikes ';\r\n }\r\n }\r\n if(this.state.isAnimating) {\r\n className += 'racetrack--animate ';\r\n }\r\n /*if(this.state.finished) {\r\n className += 'showfinish ';\r\n }*/\r\n return className;\r\n }\r\n\r\n getAvatar(player) {\r\n let avatarSelection = {...this.state.player.AvatarSelection};\r\n if(player.bikeName !== this.bikeTypes.Current.Name) {\r\n const selectedColours = [...this.state.player.AvatarSelection.Colours];\r\n //we want to apply custom colours\r\n this.props.dashboard.AvatarOverrides.Colours.forEach(colour => {\r\n if(colour.Name.toLowerCase().includes('shirt') || colour.Name.toLowerCase().includes('shorts') || colour.Name.toLowerCase().includes('shoes') || colour.Name.toLowerCase().includes('helmet')) {\r\n colour.Options.forEach(option => {\r\n const existingSelection = selectedColours.find(c => c.Name === option.Name);\r\n if(existingSelection) {\r\n _.remove(selectedColours, existingSelection);\r\n }\r\n selectedColours.push({\r\n Name: option.Name,\r\n Selection: this.bikeTypes[player.bikeName].ColourOverride\r\n });\r\n });\r\n }\r\n });\r\n avatarSelection.Colours = selectedColours;\r\n }\r\n return 8 ? 'racetrack--labelsback' : ''}`}>\r\n \r\n
{labelName === 'CallTime' ? textUtils.formatTime(player.currentValue) : _.round(player.currentValue, 2).toLocaleString()}
\r\n
{player.label}
\r\n {this.getAvatar(player)}\r\n
;\r\n }\r\n \r\n dashboardGroupSelected(event) {\r\n const id = event.target.value;\r\n const newDashboard = this.props.dashboardsInGroup.find(d => d.ID === id);\r\n if(newDashboard.PlayerMode === 'Single') {\r\n window.$('#modal').modal('hide'); //hide any existing modals\r\n if(newDashboard.Players.length == 1) {\r\n //we only have 1 player, default to that player\r\n let url = `/Dashboards/${newDashboard.ID}/Player/${newDashboard.Players[0].ID}`; \r\n this.props.history.push(url);\r\n }\r\n else {\r\n const playerSelectionModal = () => \r\n
\r\n \r\n
\r\n \r\n
{this.state.title} \r\n {/*\r\n this.state.logo ?\r\n
\r\n : null\r\n */}\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n {this.getPlayersMarkup(this.state.players)}\r\n \r\n \r\n {\r\n playerKeys && playerKeys.length ?\r\n playerKeys.map((p, index) => \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n
Race start in
\r\n
0:{this.state.countdownSecs.toString().padStart(2, '0')}
\r\n
\r\n
\r\n
\r\n
this.setState({ showScoreboard: false })}> \r\n {/*We use the Modal component directly here instead of using the context API so that we can have it in the render and bind to the data as it needs to be live*/}\r\n {\r\n this.state.showScoreboard ? \r\n this.setState({ showScoreboard: false })} onAnimationFinished={this.props.onAnimationFinished} /> \r\n /*We shouldn't need to pass the hideModal function into the ScoreboardModal as well as the Modal component, but thre's some bug that causes it not to work when the dashboard is launched from the select player modal */ \r\n :null\r\n }\r\n \r\n
this.node = node}>\r\n
\r\n
\r\n
\r\n
\r\n {\r\n logo ?\r\n
\r\n
\r\n
\r\n : null\r\n }\r\n
Scoreboard \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n Name
\r\n {\r\n this.props.showQualified ?\r\n Qualified
\r\n : null\r\n }\r\n Department
\r\n Current
\r\n Target
\r\n Perc
\r\n \r\n {\r\n players.map((player) =>\r\n \r\n {player.position}
\r\n \r\n
\r\n
{player.label}\r\n \r\n {player.department || '-'}\r\n \r\n
\r\n {\r\n this.props.showQualified ?\r\n {player.percentage >= 100 ? 'Q': ''}
\r\n : null\r\n }\r\n {player.department || '-'}
\r\n {this.formatValue(player.current)}
\r\n {this.formatValue(player.target)}
\r\n {Math.round((this.props.showRealPercentage ? Math.min(player.realPercentage, 999) : player.percentage) || 0)}%
\r\n \r\n )\r\n }\r\n \r\n
\r\n
\r\n
\r\n
\r\n
5 ? 'racetrack--labelsback' : ''}`}>\r\n \r\n
{player.label}
\r\n {this.getAvatar(player)}\r\n
;\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
{this.state.title} \r\n \r\n \r\n {\r\n this.state.logo ?\r\n
\r\n : null\r\n }\r\n \r\n
\r\n {\r\n this.state.theme === 'Dark' ? \r\n
\r\n : \r\n
\r\n } \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n {this.getPlayersMarkup(this.state.players)}\r\n \r\n \r\n {[1,2,3,4,5,6,7].map(i => \r\n
\r\n )}\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n {/*
\r\n
\r\n
*/}\r\n\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
Race start in
\r\n
0:{this.state.countdownSecs.toString().padStart(2, '0')}
\r\n
\r\n
\r\n
})
\r\n })
\r\n : \r\n })
\r\n }\r\n \r\n }){kind=logo}
\r\n })
\r\n })
\r\n })
\r\n })
\r\n })
\r\n }){kind=logo}
\r\n }){kind=logo}
\r\n })
\r\n