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';
|
||||
|
||||
const React = require('react');
|
||||
const MatrixClientPeg = require('../../../MatrixClientPeg');
|
||||
const AddAppDialog = require('../dialogs/AddAppDialog');
|
||||
const AppTile = require('../elements/AppTile');
|
||||
const Modal = require("../../../Modal");
|
||||
const dis = require('../../../dispatcher');
|
||||
import React from 'react';
|
||||
import MatrixClientPeg from '../../../MatrixClientPeg';
|
||||
import AppTile from '../elements/AppTile';
|
||||
import Modal from '../../../Modal';
|
||||
import dis from '../../../dispatcher';
|
||||
import sdk from '../../../index';
|
||||
import SdkConfig from '../../../SdkConfig';
|
||||
import ScalarAuthClient from '../../../ScalarAuthClient';
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'AppsDrawer',
|
||||
|
|
@ -35,8 +37,20 @@ module.exports = React.createClass({
|
|||
},
|
||||
|
||||
componentDidMount: function() {
|
||||
if (this.state.apps && this.state.apps.length < 1) {
|
||||
this.onClickAddWidget();
|
||||
this.scalarClient = null;
|
||||
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() {
|
||||
Modal.createDialog(AddAppDialog, {
|
||||
onFinished: (proceed, type, value) => {
|
||||
if (!proceed || !type) return;
|
||||
if (type === 'custom' && !value) return;
|
||||
onClickAddWidget: function(e) {
|
||||
// Modal.createDialog(AddAppDialog, {
|
||||
// onFinished: (proceed, type, value) => {
|
||||
// if (!proceed || !type) 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', '');
|
||||
let appsStateEvent = {};
|
||||
if (appsStateEvents) {
|
||||
appsStateEvent = appsStateEvents.getContent();
|
||||
if (e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
if (appsStateEvent[type]) {
|
||||
return;
|
||||
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);
|
||||
}
|
||||
|
||||
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() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue