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 {
state = {
progress: false,
open: false,
file: false,
title: '',
content: ''
constructor(props){
super(props);
this.state = {
progress: false,
open: false,
file: false,
title: '',
content: '',
name: props.name
};
}
componentDidUpdate(props){
if(props.name !== this.props.name){
this.setState({name: this.props.name});
}
}
compile = () => {
this.setState({ progress: true });
const data = {
@ -71,9 +82,10 @@ class Compile extends Component {
}
download = () => {
this.toggleDialog();
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');
this.setState({ progress: false });
}
@ -83,11 +95,16 @@ class Compile extends Component {
}
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) => {
this.props.workspaceName(e.target.value);
this.setState({name: e.target.value});
}
render() {
@ -116,13 +133,13 @@ class Compile extends Component {
{this.state.content}
{this.state.file ?
<div style={{marginTop: '10px'}}>
<TextField autoFocus placeholder='Dateiname' value={this.props.name} onChange={this.setFileName} style={{marginRight: '10px'}}/>
<Button disabled={!this.props.name} variant='contained' color='primary' onClick={() => this.download()}>Eingabe</Button>
<TextField autoFocus placeholder='Dateiname' value={this.state.name} onChange={this.setFileName} style={{marginRight: '10px'}}/>
<Button disabled={!this.state.name} variant='contained' color='primary' onClick={() => this.download()}>Eingabe</Button>
</div>
: null}
</DialogContent>
<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'}
</Button>
</DialogActions>

8
src/components/Home.js
View File

@ -1,7 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { clearStats } from '../actions/workspaceActions';
import { clearStats, workspaceName } from '../actions/workspaceActions';
import * as Blockly from 'blockly/core';
@ -58,6 +58,7 @@ class Home extends Component {
componentWillUnmount(){
this.props.clearStats();
this.props.workspaceName(null);
}
onChange = () => {
@ -100,8 +101,9 @@ class Home extends Component {
}
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 PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { clearStats, onChangeCode } from '../actions/workspaceActions';
import { clearStats, onChangeCode, workspaceName } from '../actions/workspaceActions';
import * as Blockly from 'blockly/core';
@ -12,6 +12,7 @@ import { initialXml } from './Blockly/initialXml.js';
import Compile from './Compile';
import SolutionCheck from './Tutorial/SolutionCheck';
import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
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 Tooltip from '@material-ui/core/Tooltip';
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";
const styles = (theme) => ({
@ -35,6 +37,15 @@ const styles = (theme) => ({
backgroundColor: theme.palette.primary.main,
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: '',
content: '',
open: false,
fileName: '',
file: false
file: false,
saveXml: false,
name: props.name
};
}
toggleDialog = () => {
this.setState({ open: !this.state, fileName: '' });
this.setState({ open: !this.state });
}
saveXmlFile = (code) => {
saveXmlFile = () => {
var code = this.props.xml;
this.toggleDialog();
var fileName = this.state.fileName;
if(fileName === '') fileName = 'unbekannt';
var fileName = this.state.name;
this.props.workspaceName(fileName);
fileName = `${fileName}.xml`
var blob = new Blob([code], { type: 'text/xml' });
saveAs(blob, fileName);
}
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) => {
this.setState({ fileName: e.target.value });
this.setState({name: e.target.value});
}
uploadXmlFile = (xmlFile) => {
@ -116,6 +134,16 @@ class WorkspaceFunc extends Component {
render() {
return (
<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 />}
<Tooltip title='Blöcke speichern' arrow style={{marginRight: '5px'}}>
<IconButton
@ -157,13 +185,13 @@ class WorkspaceFunc extends Component {
{this.state.content}
{this.state.file ?
<div style={{marginTop: '10px'}}>
<TextField autoFocus placeholder='Dateiname' onChange={this.setFileName} style={{marginRight: '10px'}}/>
<Button disabled={this.state.fileName === ''} variant='contained' color='primary' onClick={() => this.saveXmlFile(this.props.xml)}>Eingabe</Button>
<TextField autoFocus placeholder={this.state.saveXml ?'Dateiname' : 'Projektname'} value={this.state.name} onChange={this.setFileName} style={{marginRight: '10px'}}/>
<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>
: null}
</DialogContent>
<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'}
</Button>
</DialogActions>
@ -176,13 +204,16 @@ class WorkspaceFunc extends Component {
WorkspaceFunc.propTypes = {
arduino: PropTypes.string.isRequired,
xml: PropTypes.string.isRequired,
name: PropTypes.string,
clearStats: PropTypes.func.isRequired,
onChangeCode: PropTypes.func.isRequired
onChangeCode: PropTypes.func.isRequired,
workspaceName: PropTypes.func.isRequired
};
const mapStateToProps = state => ({
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() {
const bigDisplay = !isWidthDown('xs', this.props.width);
const bigDisplay = !isWidthDown('sm', this.props.width);
const workspace = Blockly.getMainWorkspace();
const remainingBlocksInfinity = workspace ? workspace.remainingCapacity() !== Infinity : null;
const stats = <div style={bigDisplay ? {display: 'flex'} : {display: 'inline'}}>