Merge pull request #72 from kadoshita/add-share-execute-result

Add share execute result
kadoshita · Apr 4, 2020 · 86947cc · 86947cc
2 parents 9bea982 + 7c0ea0d
commit 86947cc
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 1 deletion.
diff --git a/ClientApp/src/App.js b/ClientApp/src/App.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { Route } from 'react-router';
 import { Layout } from './components/Layout';
 import { Home } from './components/Home';
+import { Console } from './components/Console';
 import { Viewer } from './components/Viewer';
 import { Editor } from './components/Editor';
 
@@ -14,6 +15,7 @@ export default class App extends Component {
     return (
       <Layout>
         <Route exact path='/' component={Home} />
+        <Route path='/console' component={Console} />
         <Route path='/viewer' component={Viewer} />
         <Route path='/editor' component={Editor} />
       </Layout>

diff --git a/ClientApp/src/components/Console.js b/ClientApp/src/components/Console.js
@@ -0,0 +1,89 @@
+import React, { Component } from 'react'
+import * as SignalR from '@microsoft/signalr';
+import ReactAce from 'react-ace';
+import { Grid } from '@material-ui/core';
+import InputDialog from './InputDialog';
+import Common from '../common';
+
+import 'ace-builds/src-noconflict/mode-plain_text';
+
+import 'ace-builds/src-noconflict/theme-terminal';
+
+export class Console extends Component {
+    static displayName = Console.name;
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            mode: 'plain_text',
+            theme: 'terminal',
+            receiveText: '',
+            sessionId: '',
+            showSessionIdInputDialog: false
+        };
+        this.togglInputDialogBinded = this.togglInputDialog.bind(this);
+        this.setSessionIdBinded = this.setSessionId.bind(this);
+        this.connection = new SignalR.HubConnectionBuilder().withUrl("/shareHub").build();
+        this.connection.on('ReceiveMessage', message => {
+            const msg = JSON.parse(message);
+            if (msg.type === 'console') {
+                this.setState({ receiveText: msg.data });
+            }
+        });
+        this.connection.start().then(() => {
+            console.log('connected');
+            const queryParameters = Common.parseQueryString();
+            if ('session' in queryParameters) {
+                this.connection.invoke('JoinGroup', { sessionId: queryParameters.session, isEditor: false });
+                this.setState({ sessionId: queryParameters.session });
+            } else {
+                console.warn('not set session id');
+                this.setState({ showSessionIdInputDialog: true });
+            }
+        }).catch(err => {
+            console.error(err);
+        });
+    }
+
+    togglInputDialog(open = false, joinSession = false) {
+        this.setState({ showSessionIdInputDialog: open }, () => {
+            if (joinSession) {
+                window.history.replaceState('', '', `${window.location.origin}/Console?session=${this.state.sessionId}`);
+                this.connection.invoke('JoinGroup', { sessionId: this.state.sessionId, isEditor: false });
+            }
+        });
+    }
+    setSessionId(sessionId) {
+        this.setState({ sessionId: sessionId });
+    }
+
+    render() {
+        return (
+            <Grid container>
+                <Grid item xs={12}>
+                    <ReactAce
+                        width='100%'
+                        mode='plain_text'
+                        theme='terminal'
+                        value={this.state.receiveText}
+                        readOnly={true}
+                        setOptions={{
+                            useWorker: false
+                        }}
+                    >
+                    </ReactAce>
+                </Grid>
+                <InputDialog
+                    title='セッションID'
+                    show={this.state.showSessionIdInputDialog}
+                    label='セッションID'
+                    onChangeInput={this.setSessionIdBinded}
+                    togglOpen={this.togglInputDialogBinded}
+                    okButtonTitle='OK'
+                    cancelButtonTitle='キャンセル'
+                    rowCount={1}
+                ></InputDialog>
+            </Grid>
+        )
+    }
+}
diff --git a/ClientApp/src/components/Editor.js b/ClientApp/src/components/Editor.js
@@ -2,6 +2,8 @@ import React, { Component } from 'react'
 import * as SignalR from '@microsoft/signalr';
 import ReactAce from 'react-ace';
 import { Select, MenuItem, InputLabel, FormControl, Grid, Button, LinearProgress } from '@material-ui/core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faShareSquare } from '@fortawesome/free-solid-svg-icons';
 import ClipBoard from 'clipboard';
 import ClipBoardText from './ClipboardText';
 import InputDialog from './InputDialog';
@@ -136,6 +138,12 @@ export class Editor extends Component {
             })).catch(err => {
                 console.error(err);
             });
+            this.connection.invoke('SendMessage', this.state.sessionId, JSON.stringify({
+                type: 'console',
+                data: this.state.console
+            })).catch(err => {
+                console.error(err);
+            });
         });
         window.addEventListener('beforeunload', () => {
             console.log('leave');
@@ -231,6 +239,13 @@ export class Editor extends Component {
                     } else {
                         return { console: `[${current.toTimeString().split(' ')[0]}] > ${json.program_output}${state.console}`, isRunning: false }
                     }
+                }, () => {
+                    this.connection.invoke('SendMessage', this.state.sessionId, JSON.stringify({
+                        type: 'console',
+                        data: this.state.console
+                    })).catch(err => {
+                        console.error(err);
+                    });
                 });
             });
         }
@@ -348,7 +363,7 @@ export class Editor extends Component {
                 <Grid item xs={12} style={{
                     marginTop: '8px'
                 }}>
-                    <InputLabel>標準出力</InputLabel>
+                    <InputLabel>標準出力<a href={`/console?session=${this.state.sessionId}`} target='_blank' rel='noopener noreferrer'><FontAwesomeIcon icon={faShareSquare} color='#55B2B8' fixedWidth></FontAwesomeIcon></a></InputLabel>
                     <ReactAce
                         width='100%'
                         height='140px'