diff --git a/src/components/views/dialogs/AddAppDialog.js b/src/components/views/dialogs/AddAppDialog.js index 6d722365e8..49e16820d6 100644 --- a/src/components/views/dialogs/AddAppDialog.js +++ b/src/components/views/dialogs/AddAppDialog.js @@ -46,10 +46,14 @@ export default React.createClass({ onFormSubmit: function(ev) { ev.preventDefault(); - this.props.onFinished(true, this.state.value); + this.props.onFinished(true, 'custom', this.state.value); return false; }, + onTileClick: function(value) { + this.props.onFinished(true, value, null); + }, + render: function() { const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); const appCards = ModularWidgets.widgetTypes.map((widgetType, index) => @@ -58,7 +62,8 @@ export default React.createClass({ type={widgetType.type} icon={widgetType.icon} name={widgetType.name} - description={widgetType.description}/>, + description={widgetType.description} + onClick={this.onTileClick}/>, ); return ( diff --git a/src/components/views/elements/AppIconTile.js b/src/components/views/elements/AppIconTile.js index 282a33743c..32fcd74111 100644 --- a/src/components/views/elements/AppIconTile.js +++ b/src/components/views/elements/AppIconTile.js @@ -18,6 +18,14 @@ limitations under the License. import React from 'react'; class AppIconTile extends React.Component { + constructor(props) { + super(props); + this._onTileClick = this._onTileClick.bind(this); + } + + _onTileClick(props) { + this.props.onClick(this.props.type); + } render() { const contentClasses = ['mx_AppIconTile']; @@ -26,7 +34,7 @@ class AppIconTile extends React.Component { // } return ( -
+
{this.props.name}
@@ -44,6 +52,7 @@ AppIconTile.propTypes = { icon: React.PropTypes.string.isRequired, name: React.PropTypes.string.isRequired, description: React.PropTypes.string.isRequired, + onClick: React.PropTypes.func.isRequired, }; export default AppIconTile; diff --git a/src/components/views/rooms/AppsDrawer.js b/src/components/views/rooms/AppsDrawer.js index d2b6cf8b21..1dee5dacf8 100644 --- a/src/components/views/rooms/AppsDrawer.js +++ b/src/components/views/rooms/AppsDrawer.js @@ -113,10 +113,59 @@ module.exports = React.createClass({ onClickAddWidget: function() { Modal.createDialog(AddAppDialog, { - onFinished: (proceed, reason) => { - if (!proceed) return; + onFinished: (proceed, type, value) => { + if (!proceed || !type) return; + if (type === 'custom' && !value) return; - this.state.apps.push(); + const appsStateEvents = this.props.room.currentState.getStateEvents('im.vector.modular.widgets', ''); + let appsStateEvent = {}; + if (appsStateEvents) { + appsStateEvent = appsStateEvents.getContent(); + } + + if (appsStateEvent[type]) { + return; + } + + switch (type) { + case 'etherpad': + appsStateEvent.etherpad = { + type: type, + url: 'http://localhost:8000/etherpad.html', + }; + break; + case 'grafana': + appsStateEvent.grafana = { + type: type, + url: 'http://localhost:8000/grafana.html', + }; + break; + case 'jitsi': + appsStateEvent.videoConf = { + type: type, + url: 'http://localhost:8000/jitsi.html', + data: { + confId: this.props.room.roomId.replace(/[^A-Za-z0-9]/g, '_') + Date.now(), + }, + }; + break; + case 'custom': + appsStateEvent.custom = { + type: type, + url: value, + }; + break; + default: + console.warn('Unsupported app type:', type); + return; + } + + MatrixClientPeg.get().sendStateEvent( + this.props.room.roomId, + 'im.vector.modular.widgets', + appsStateEvent, + '', + ); }, }); },