schuelerlabor-cleverlab/smarti
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

name of the workspace and display of its

Browse Source
This commit is contained in:
Delucse 2020-09-17 11:55:46 +02:00
parent ba84bc512c
commit 5c43ff4648
4 changed files with 83 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/Compile.js
View File

@ -38,14 +38,25 @@ const styles = (theme) => ({
class Compile extends Component { class Compile extends Component {
state = { constructor(props){
progress: false, super(props);
open: false, this.state = {
file: false, progress: false,
title: '', open: false,
content: '' file: false,
title: '',
content: '',
name: props.name
};
} }
componentDidUpdate(props){
if(props.name !== this.props.name){
this.setState({name: this.props.name});
}
}
compile = () => { compile = () => {
this.setState({ progress: true }); this.setState({ progress: true });
const data = { const data = {
@ -71,9 +82,10 @@ class Compile extends Component {
} }
download = () => { download = () => {
this.toggleDialog();
const id = this.state.id; const id = this.state.id;
const filename = this.props.name; const filename = this.state.name;
this.toggleDialog();
this.props.workspaceName(filename);
window.open(`${process.env.REACT_APP_COMPILER_URL}/download?id=${id}&board=${process.env.REACT_APP_BOARD}&filename=${filename}`, '_self'); window.open(`${process.env.REACT_APP_COMPILER_URL}/download?id=${id}&board=${process.env.REACT_APP_BOARD}&filename=${filename}`, '_self');
this.setState({ progress: false }); this.setState({ progress: false });
} }
@ -83,11 +95,16 @@ class Compile extends Component {
} }
createFileName = () => { createFileName = () => {
this.setState({ file: true, open: true, title: 'Blöcke kompilieren', content: 'Bitte gib einen Namen für die Bennenung des zu kompilierenden Programms ein und bestätige diesen mit einem Klick auf \'Eingabe\'.' }); if(this.state.name){
this.download();
}
else{
this.setState({ file: true, open: true, title: 'Blöcke kompilieren', content: 'Bitte gib einen Namen für die Bennenung des zu kompilierenden Programms ein und bestätige diesen mit einem Klick auf \'Eingabe\'.' });
}
} }
setFileName = (e) => { setFileName = (e) => {
this.props.workspaceName(e.target.value); this.setState({name: e.target.value});
} }
render() { render() {
@ -116,13 +133,13 @@ class Compile extends Component {
{this.state.content} {this.state.content}
{this.state.file ? {this.state.file ?
<div style={{marginTop: '10px'}}> <div style={{marginTop: '10px'}}>
<TextField autoFocus placeholder='Dateiname' value={this.props.name} onChange={this.setFileName} style={{marginRight: '10px'}}/> <TextField autoFocus placeholder='Dateiname' value={this.state.name} onChange={this.setFileName} style={{marginRight: '10px'}}/>
<Button disabled={!this.props.name} variant='contained' color='primary' onClick={() => this.download()}>Eingabe</Button> <Button disabled={!this.state.name} variant='contained' color='primary' onClick={() => this.download()}>Eingabe</Button>
</div> </div>
: null} : null}
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={this.toggleDialog} color="primary"> <Button onClick={this.state.file ? () => {this.toggleDialog(); this.setState({name: this.props.name})} : this.toggleDialog} color="primary">
{this.state.file ? 'Abbrechen' : 'Schließen'} {this.state.file ? 'Abbrechen' : 'Schließen'}
</Button> </Button>
</DialogActions> </DialogActions>

8
src/components/Home.js
View File

@ -1,7 +1,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { clearStats } from '../actions/workspaceActions'; import { clearStats, workspaceName } from '../actions/workspaceActions';
import * as Blockly from 'blockly/core'; import * as Blockly from 'blockly/core';
@ -58,6 +58,7 @@ class Home extends Component {
componentWillUnmount(){ componentWillUnmount(){
this.props.clearStats(); this.props.clearStats();
this.props.workspaceName(null);
} }
onChange = () => { onChange = () => {
@ -100,8 +101,9 @@ class Home extends Component {
} }
Home.propTypes = { Home.propTypes = {
clearStats: PropTypes.func.isRequired clearStats: PropTypes.func.isRequired,
workspaceName: PropTypes.func.isRequired
}; };
export default connect(null, { clearStats })(withStyles(styles, { withTheme: true })(Home)); export default connect(null, { clearStats, workspaceName })(withStyles(styles, { withTheme: true })(Home));

63
src/components/WorkspaceFunc.js
View File

@ -1,7 +1,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { clearStats, onChangeCode } from '../actions/workspaceActions'; import { clearStats, onChangeCode, workspaceName } from '../actions/workspaceActions';
import * as Blockly from 'blockly/core'; import * as Blockly from 'blockly/core';
@ -12,6 +12,7 @@ import { initialXml } from './Blockly/initialXml.js';
import Compile from './Compile'; import Compile from './Compile';
import SolutionCheck from './Tutorial/SolutionCheck'; import SolutionCheck from './Tutorial/SolutionCheck';
import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
import DialogTitle from '@material-ui/core/DialogTitle'; import DialogTitle from '@material-ui/core/DialogTitle';
@ -21,8 +22,9 @@ import Dialog from '@material-ui/core/Dialog';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@material-ui/core/IconButton';
import Tooltip from '@material-ui/core/Tooltip'; import Tooltip from '@material-ui/core/Tooltip';
import TextField from '@material-ui/core/TextField'; import TextField from '@material-ui/core/TextField';
import Typography from '@material-ui/core/Typography';
import { faSave, faUpload, faShare } from "@fortawesome/free-solid-svg-icons"; import { faPen, faSave, faUpload, faShare } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const styles = (theme) => ({ const styles = (theme) => ({
@ -35,6 +37,15 @@ const styles = (theme) => ({
backgroundColor: theme.palette.primary.main, backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText, color: theme.palette.primary.contrastText,
} }
},
workspaceName: {
backgroundColor: theme.palette.secondary.main,
borderRadius: '25px',
display: 'inline-flex',
cursor: 'pointer',
'&:hover': {
color: theme.palette.primary.main,
}
} }
}); });
@ -48,30 +59,37 @@ class WorkspaceFunc extends Component {
title: '', title: '',
content: '', content: '',
open: false, open: false,
fileName: '', file: false,
file: false saveXml: false,
name: props.name
}; };
} }
toggleDialog = () => { toggleDialog = () => {
this.setState({ open: !this.state, fileName: '' }); this.setState({ open: !this.state });
} }
saveXmlFile = (code) => { saveXmlFile = () => {
var code = this.props.xml;
this.toggleDialog(); this.toggleDialog();
var fileName = this.state.fileName; var fileName = this.state.name;
if(fileName === '') fileName = 'unbekannt'; this.props.workspaceName(fileName);
fileName = `${fileName}.xml` fileName = `${fileName}.xml`
var blob = new Blob([code], { type: 'text/xml' }); var blob = new Blob([code], { type: 'text/xml' });
saveAs(blob, fileName); saveAs(blob, fileName);
} }
createFileName = () => { createFileName = () => {
this.setState({ file: true, open: true, title: 'Blöcke speichern', content: 'Bitte gib einen Namen für die Bennenung der XML-Datei ein und bestätige diesen mit einem Klick auf \'Eingabe\'.' }); if(this.state.name){
this.saveXmlFile();
}
else{
this.setState({ file: true, saveXml: true, open: true, title: 'Blöcke speichern', content: 'Bitte gib einen Namen für die Bennenung der XML-Datei ein und bestätige diesen mit einem Klick auf \'Eingabe\'.' });
}
} }
setFileName = (e) => { setFileName = (e) => {
this.setState({ fileName: e.target.value }); this.setState({name: e.target.value});
} }
uploadXmlFile = (xmlFile) => { uploadXmlFile = (xmlFile) => {
@ -116,6 +134,16 @@ class WorkspaceFunc extends Component {
render() { render() {
return ( return (
<div style={{width: 'max-content', display: 'flex'}}> <div style={{width: 'max-content', display: 'flex'}}>
{!this.props.solutionCheck ?
<Tooltip title={`Name des Projekts${this.props.name ? `: ${this.props.name}` : ''}`} arrow style={{marginRight: '5px'}}>
<div className={this.props.classes.workspaceName} onClick={() => {this.setState({file: true, open: true, saveXml: false, title: 'Projekt benennen', content: 'Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf \'Eingabe\'.'})}}>
{this.props.name && !isWidthDown('xs', this.props.width) ? <Typography style={{margin: 'auto -3px auto 12px'}}>{this.props.name}</Typography> : null}
<div style={{width: '40px', display: 'flex'}}>
<FontAwesomeIcon icon={faPen} style={{height: '18px', width: '18px', margin: 'auto'}}/>
</div>
</div>
</Tooltip>
: null}
{this.props.solutionCheck ? <SolutionCheck /> : <Compile iconButton />} {this.props.solutionCheck ? <SolutionCheck /> : <Compile iconButton />}
<Tooltip title='Blöcke speichern' arrow style={{marginRight: '5px'}}> <Tooltip title='Blöcke speichern' arrow style={{marginRight: '5px'}}>
<IconButton <IconButton
@ -157,13 +185,13 @@ class WorkspaceFunc extends Component {
{this.state.content} {this.state.content}
{this.state.file ? {this.state.file ?
<div style={{marginTop: '10px'}}> <div style={{marginTop: '10px'}}>
<TextField autoFocus placeholder='Dateiname' onChange={this.setFileName} style={{marginRight: '10px'}}/> <TextField autoFocus placeholder={this.state.saveXml ?'Dateiname' : 'Projektname'} value={this.state.name} onChange={this.setFileName} style={{marginRight: '10px'}}/>
<Button disabled={this.state.fileName === ''} variant='contained' color='primary' onClick={() => this.saveXmlFile(this.props.xml)}>Eingabe</Button> <Button disabled={!this.state.name} variant='contained' color='primary' onClick={() => {this.state.saveXml ? this.saveXmlFile() : this.props.workspaceName(this.state.name); this.toggleDialog();}}>Eingabe</Button>
</div> </div>
: null} : null}
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={this.toggleDialog} color="primary"> <Button onClick={this.state.file ? () => {this.toggleDialog(); this.setState({name: this.props.name})} : this.toggleDialog} color="primary">
{this.state.file ? 'Abbrechen' : 'Schließen'} {this.state.file ? 'Abbrechen' : 'Schließen'}
</Button> </Button>
</DialogActions> </DialogActions>
@ -176,13 +204,16 @@ class WorkspaceFunc extends Component {
WorkspaceFunc.propTypes = { WorkspaceFunc.propTypes = {
arduino: PropTypes.string.isRequired, arduino: PropTypes.string.isRequired,
xml: PropTypes.string.isRequired, xml: PropTypes.string.isRequired,
name: PropTypes.string,
clearStats: PropTypes.func.isRequired, clearStats: PropTypes.func.isRequired,
onChangeCode: PropTypes.func.isRequired onChangeCode: PropTypes.func.isRequired,
workspaceName: PropTypes.func.isRequired
}; };
const mapStateToProps = state => ({ const mapStateToProps = state => ({
arduino: state.workspace.code.arduino, arduino: state.workspace.code.arduino,
xml: state.workspace.code.xml xml: state.workspace.code.xml,
name: state.workspace.name
}); });
export default connect(mapStateToProps, { clearStats, onChangeCode })(withStyles(styles, {withTheme: true})(WorkspaceFunc)); export default connect(mapStateToProps, { clearStats, onChangeCode, workspaceName })(withStyles(styles, {withTheme: true})(withWidth()(WorkspaceFunc)));

2
src/components/WorkspaceStats.js
View File

@ -50,7 +50,7 @@ class WorkspaceStats extends Component {
}; };
render() { render() {
const bigDisplay = !isWidthDown('xs', this.props.width); const bigDisplay = !isWidthDown('sm', this.props.width);
const workspace = Blockly.getMainWorkspace(); const workspace = Blockly.getMainWorkspace();
const remainingBlocksInfinity = workspace ? workspace.remainingCapacity() !== Infinity : null; const remainingBlocksInfinity = workspace ? workspace.remainingCapacity() !== Infinity : null;
const stats = <div style={bigDisplay ? {display: 'flex'} : {display: 'inline'}}> const stats = <div style={bigDisplay ? {display: 'flex'} : {display: 'inline'}}>