Replace add app dialog with scalar interface
This commit is contained in:
Richard Lewis
parent
59f6448b3e
commit
a449588c1c
2 changed files with 109 additions and 162 deletions
|
|
@ -1,91 +0,0 @@
|
||||||
/*
|
|
||||||
Copyright 2016 OpenMarket Ltd
|
|
||||||
|
|
||||||
Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
you may not use this file except in compliance with the License.
|
|
||||||
You may obtain a copy of the License at
|
|
||||||
|
|
||||||
http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
|
|
||||||
Unless required by applicable law or agreed to in writing, software
|
|
||||||
distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
See the License for the specific language governing permissions and
|
|
||||||
limitations under the License.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React from 'react';
|
|
||||||
import sdk from '../../../index';
|
|
||||||
import AppIconTile from '../elements/AppIconTile';
|
|
||||||
import ModularWidgets from '../../structures/ModularWidgets';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Prompt the user for address of iframe widget
|
|
||||||
*
|
|
||||||
* On success, `onFinished(true, newAppWidget)` is called.
|
|
||||||
*/
|
|
||||||
export default React.createClass({
|
|
||||||
displayName: 'AddAppDialog',
|
|
||||||
propTypes: {
|
|
||||||
onFinished: React.PropTypes.func.isRequired,
|
|
||||||
},
|
|
||||||
|
|
||||||
getInitialState: function() {
|
|
||||||
return {
|
|
||||||
value: "",
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
componentDidMount: function() {
|
|
||||||
this.refs.input_value.select();
|
|
||||||
},
|
|
||||||
|
|
||||||
onValueChange: function(ev) {
|
|
||||||
this.setState({ value: ev.target.value});
|
|
||||||
},
|
|
||||||
|
|
||||||
onFormSubmit: function(ev) {
|
|
||||||
ev.preventDefault();
|
|
||||||
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) =>
|
|
||||||
<AppIconTile
|
|
||||||
key={index}
|
|
||||||
type={widgetType.type}
|
|
||||||
icon={widgetType.icon}
|
|
||||||
name={widgetType.name}
|
|
||||||
description={widgetType.description}
|
|
||||||
onClick={this.onTileClick}/>,
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<BaseDialog className="mx_AddAppDialog"
|
|
||||||
onFinished={this.props.onFinished}
|
|
||||||
title="Add an app Widget"
|
|
||||||
>
|
|
||||||
<div className="mx_Dialog_content">
|
|
||||||
{appCards}
|
|
||||||
<hr/>
|
|
||||||
<form className="mx_Custom_Widget_Form" onSubmit={this.onFormSubmit}>
|
|
||||||
<div>Or enter the URL of the widget to add.</div>
|
|
||||||
<input type="text" ref="input_value" value={this.state.value}
|
|
||||||
autoFocus={true} onChange={this.onValueChange} size="30"
|
|
||||||
className="mx_SetAppURLDialog_input"
|
|
||||||
/>
|
|
||||||
<div className="mx_Dialog_buttons">
|
|
||||||
<input className="mx_Dialog_primary" type="submit" value="Add" />
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</BaseDialog>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -16,12 +16,14 @@ limitations under the License.
|
||||||
|
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
const React = require('react');
|
import React from 'react';
|
||||||
const MatrixClientPeg = require('../../../MatrixClientPeg');
|
import MatrixClientPeg from '../../../MatrixClientPeg';
|
||||||
const AddAppDialog = require('../dialogs/AddAppDialog');
|
import AppTile from '../elements/AppTile';
|
||||||
const AppTile = require('../elements/AppTile');
|
import Modal from '../../../Modal';
|
||||||
const Modal = require("../../../Modal");
|
import dis from '../../../dispatcher';
|
||||||
const dis = require('../../../dispatcher');
|
import sdk from '../../../index';
|
||||||
|
import SdkConfig from '../../../SdkConfig';
|
||||||
|
import ScalarAuthClient from '../../../ScalarAuthClient';
|
||||||
|
|
||||||
module.exports = React.createClass({
|
module.exports = React.createClass({
|
||||||
displayName: 'AppsDrawer',
|
displayName: 'AppsDrawer',
|
||||||
|
|
@ -35,8 +37,20 @@ module.exports = React.createClass({
|
||||||
},
|
},
|
||||||
|
|
||||||
componentDidMount: function() {
|
componentDidMount: function() {
|
||||||
if (this.state.apps && this.state.apps.length < 1) {
|
this.scalarClient = null;
|
||||||
this.onClickAddWidget();
|
const appsDrawer = this;
|
||||||
|
if (SdkConfig.get().integrations_ui_url && SdkConfig.get().integrations_rest_url) {
|
||||||
|
this.scalarClient = new ScalarAuthClient();
|
||||||
|
this.scalarClient.connect().done(() => {
|
||||||
|
this.forceUpdate();
|
||||||
|
if (appsDrawer.state.apps && appsDrawer.state.apps.length < 1) {
|
||||||
|
appsDrawer.onClickAddWidget();
|
||||||
|
}
|
||||||
|
}, (err) => {
|
||||||
|
this.setState({
|
||||||
|
scalar_error: err,
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -117,72 +131,96 @@ module.exports = React.createClass({
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
onClickAddWidget: function() {
|
onClickAddWidget: function(e) {
|
||||||
Modal.createDialog(AddAppDialog, {
|
// Modal.createDialog(AddAppDialog, {
|
||||||
onFinished: (proceed, type, value) => {
|
// onFinished: (proceed, type, value) => {
|
||||||
if (!proceed || !type) return;
|
// if (!proceed || !type) return;
|
||||||
if (type === 'custom' && !value) return;
|
// if (type === 'custom' && !value) return;
|
||||||
|
//
|
||||||
|
// 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 'vrdemo':
|
||||||
|
// appsStateEvent.vrDemo = {
|
||||||
|
// type: type,
|
||||||
|
// url: 'http://localhost:8000/vrdemo.html',
|
||||||
|
// data: {
|
||||||
|
// roomAlias: '#vrvc' + 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,
|
||||||
|
// '',
|
||||||
|
// );
|
||||||
|
// },
|
||||||
|
// });
|
||||||
|
|
||||||
const appsStateEvents = this.props.room.currentState.getStateEvents('im.vector.modular.widgets', '');
|
if (e) {
|
||||||
let appsStateEvent = {};
|
e.preventDefault();
|
||||||
if (appsStateEvents) {
|
}
|
||||||
appsStateEvent = appsStateEvents.getContent();
|
|
||||||
|
const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
|
||||||
|
console.warn("scalarClient: ", this.scalarClient);
|
||||||
|
console.warn("hasCredentials: ", this.scalarClient.hasCredentials());
|
||||||
|
console.warn("roomId: ", this.props.room.roomId);
|
||||||
|
console.warn("Scalar interface: ", this.scalarClient.getScalarInterfaceUrlForRoom(this.props.room.roomId));
|
||||||
|
const src = (this.scalarClient !== null && this.scalarClient.hasCredentials()) ?
|
||||||
|
this.scalarClient.getScalarInterfaceUrlForRoom(this.props.room.roomId) :
|
||||||
|
null;
|
||||||
|
console.warn("src: ", src);
|
||||||
|
Modal.createDialog(IntegrationsManager, {
|
||||||
|
src: src,
|
||||||
|
onFinished: ()=>{
|
||||||
|
if (this._calcSavePromises().length === 0) {
|
||||||
|
if (e) {
|
||||||
|
this.props.onCancelClick(e);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
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 'vrdemo':
|
|
||||||
appsStateEvent.vrDemo = {
|
|
||||||
type: type,
|
|
||||||
url: 'http://localhost:8000/vrdemo.html',
|
|
||||||
data: {
|
|
||||||
roomAlias: '#vrvc' + 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,
|
|
||||||
'',
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
});
|
}, "mx_IntegrationsManager");
|
||||||
},
|
},
|
||||||
|
|
||||||
render: function() {
|
render: function() {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue