update variable names
This commit is contained in:
Mario Pesch
parent
687ac32166
commit
255b1619b8
@ -1,20 +1,18 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { onChangeWorkspace, clearStats } from '../../actions/workspaceActions';
|
||||
import React, { Component } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { connect } from "react-redux";
|
||||
import { onChangeWorkspace, clearStats } from "../../actions/workspaceActions";
|
||||
|
||||
import BlocklyComponent from './BlocklyComponent';
|
||||
import BlocklySvg from './BlocklySvg';
|
||||
import BlocklyComponent from "./BlocklyComponent";
|
||||
import BlocklySvg from "./BlocklySvg";
|
||||
|
||||
import * as Blockly from 'blockly/core';
|
||||
import './blocks/index';
|
||||
import './generator/index';
|
||||
|
||||
import { initialXml } from './initialXml.js';
|
||||
import * as Blockly from "blockly/core";
|
||||
import "./blocks/index";
|
||||
import "./generator/index";
|
||||
|
||||
import { initialXml } from "./initialXml.js";
|
||||
|
||||
class BlocklyWindow extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.simpleWorkspace = React.createRef();
|
||||
@ -41,6 +39,7 @@ class BlocklyWindow extends Component {
|
||||
Blockly.Events.disableOrphans(event);
|
||||
}
|
||||
});
|
||||
|
||||
Blockly.svgResize(workspace);
|
||||
}
|
||||
|
||||
@ -64,46 +63,65 @@ class BlocklyWindow extends Component {
|
||||
// workspace.updateToolbox(toolbox.toolboxDef_);
|
||||
}
|
||||
Blockly.svgResize(workspace);
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<BlocklyComponent ref={this.simpleWorkspace}
|
||||
<BlocklyComponent
|
||||
ref={this.simpleWorkspace}
|
||||
style={this.props.svg ? { height: 0 } : this.props.blocklyCSS}
|
||||
readOnly={this.props.readOnly !== undefined ? this.props.readOnly : false}
|
||||
trashcan={this.props.trashcan !== undefined ? this.props.trashcan : true}
|
||||
readOnly={
|
||||
this.props.readOnly !== undefined ? this.props.readOnly : false
|
||||
}
|
||||
trashcan={
|
||||
this.props.trashcan !== undefined ? this.props.trashcan : true
|
||||
}
|
||||
renderer={this.props.renderer}
|
||||
zoom={{ // https://developers.google.com/blockly/guides/configure/web/zoom
|
||||
controls: this.props.zoomControls !== undefined ? this.props.zoomControls : true,
|
||||
zoom={{
|
||||
// https://developers.google.com/blockly/guides/configure/web/zoom
|
||||
controls:
|
||||
this.props.zoomControls !== undefined
|
||||
? this.props.zoomControls
|
||||
: true,
|
||||
wheel: false,
|
||||
startScale: 1,
|
||||
maxScale: 3,
|
||||
minScale: 0.3,
|
||||
scaleSpeed: 1.2
|
||||
scaleSpeed: 1.2,
|
||||
}}
|
||||
grid={this.props.grid !== undefined && !this.props.grid ? {} :
|
||||
{ // https://developers.google.com/blockly/guides/configure/web/grid
|
||||
spacing: 20,
|
||||
length: 1,
|
||||
colour: '#4EAF47', // senseBox-green
|
||||
snap: false
|
||||
}}
|
||||
media={'/media/blockly/'}
|
||||
move={this.props.move !== undefined && !this.props.move ? {} :
|
||||
{ // https://developers.google.com/blockly/guides/configure/web/move
|
||||
scrollbars: true,
|
||||
drag: true,
|
||||
wheel: false
|
||||
}}
|
||||
initialXml={this.props.initialXml ? this.props.initialXml : initialXml}
|
||||
>
|
||||
</BlocklyComponent >
|
||||
{this.props.svg && this.props.initialXml ? <BlocklySvg initialXml={this.props.initialXml} /> : null}
|
||||
grid={
|
||||
this.props.grid !== undefined && !this.props.grid
|
||||
? {}
|
||||
: {
|
||||
// https://developers.google.com/blockly/guides/configure/web/grid
|
||||
spacing: 20,
|
||||
length: 1,
|
||||
colour: "#4EAF47", // senseBox-green
|
||||
snap: false,
|
||||
}
|
||||
}
|
||||
media={"/media/blockly/"}
|
||||
move={
|
||||
this.props.move !== undefined && !this.props.move
|
||||
? {}
|
||||
: {
|
||||
// https://developers.google.com/blockly/guides/configure/web/move
|
||||
scrollbars: true,
|
||||
drag: true,
|
||||
wheel: false,
|
||||
}
|
||||
}
|
||||
initialXml={
|
||||
this.props.initialXml ? this.props.initialXml : initialXml
|
||||
}
|
||||
></BlocklyComponent>
|
||||
{this.props.svg && this.props.initialXml ? (
|
||||
<BlocklySvg initialXml={this.props.initialXml} />
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
BlocklyWindow.propTypes = {
|
||||
@ -114,10 +132,12 @@ BlocklyWindow.propTypes = {
|
||||
workspaceXML: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
const mapStateToProps = (state) => ({
|
||||
renderer: state.general.renderer,
|
||||
language: state.general.language.Blockly,
|
||||
workspaceXML: state.workspace.code.xml,
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, { onChangeWorkspace, clearStats })(BlocklyWindow);
|
||||
export default connect(mapStateToProps, { onChangeWorkspace, clearStats })(
|
||||
BlocklyWindow
|
||||
);
|
||||
|
||||
@ -1,43 +1,46 @@
|
||||
import Blockly from 'blockly/core';
|
||||
import { getColour } from '../helpers/colour';
|
||||
import { getCompatibleTypes } from '../helpers/types'
|
||||
|
||||
|
||||
Blockly.Blocks['variables_set_dynamic'] = {
|
||||
init: function () {
|
||||
|
||||
// const type = myVar.type;
|
||||
this.setColour(getColour().variables);
|
||||
this.setPreviousStatement(true, null);
|
||||
this.setNextStatement(true, null);
|
||||
this.appendValueInput('VALUE')
|
||||
.appendField('set', 'set')
|
||||
.appendField('', 'type')
|
||||
.appendField(new Blockly.FieldVariable('VAR'), 'VAR')
|
||||
.appendField('to');
|
||||
},
|
||||
onchange: function (e) {
|
||||
let variableID = this.getFieldValue('VAR');
|
||||
let variable = Blockly.getMainWorkspace().getVariableMap().getVariableById(variableID)
|
||||
this.getField('type').setValue(variable.type);
|
||||
this.getInput('VALUE').setCheck(getCompatibleTypes(variable.type));
|
||||
import Blockly from "blockly/core";
|
||||
import { getColour } from "../helpers/colour";
|
||||
import { getCompatibleTypes } from "../helpers/types";
|
||||
|
||||
Blockly.Blocks["variables_set_dynamic"] = {
|
||||
init: function () {
|
||||
// const type = myVar.type;
|
||||
this.setColour(getColour().variables);
|
||||
this.setPreviousStatement(true, null);
|
||||
this.setNextStatement(true, null);
|
||||
this.appendValueInput("VALUE")
|
||||
.appendField("set", "set")
|
||||
.appendField("", "type")
|
||||
.appendField(new Blockly.FieldVariable("VAR"), "VAR")
|
||||
.appendField("to");
|
||||
},
|
||||
onchange: function (e) {
|
||||
let variableID = this.getFieldValue("VAR");
|
||||
let variable = Blockly.getMainWorkspace()
|
||||
.getVariableMap()
|
||||
.getVariableById(variableID);
|
||||
if (variable !== null) {
|
||||
this.getField("type").setValue(variable.type);
|
||||
this.getInput("VALUE").setCheck(getCompatibleTypes(variable.type));
|
||||
}
|
||||
}
|
||||
|
||||
Blockly.Blocks['variables_get_dynamic'] = {
|
||||
init: function () {
|
||||
this.setColour(getColour().variables);
|
||||
this.appendDummyInput()
|
||||
.appendField('', 'type')
|
||||
.appendField(new Blockly.FieldVariable('VAR'), 'VAR');
|
||||
this.setOutput(true);
|
||||
},
|
||||
onchange: function (e) {
|
||||
let variableID = this.getFieldValue('VAR');
|
||||
let variable = Blockly.getMainWorkspace().getVariableMap().getVariableById(variableID)
|
||||
this.getField('type').setValue(variable.type);
|
||||
},
|
||||
};
|
||||
|
||||
Blockly.Blocks["variables_get_dynamic"] = {
|
||||
init: function () {
|
||||
this.setColour(getColour().variables);
|
||||
this.appendDummyInput()
|
||||
.appendField("", "type")
|
||||
.appendField(new Blockly.FieldVariable("VAR"), "VAR");
|
||||
this.setOutput(true);
|
||||
},
|
||||
onchange: function (e) {
|
||||
let variableID = this.getFieldValue("VAR");
|
||||
let variable = Blockly.getMainWorkspace()
|
||||
.getVariableMap()
|
||||
.getVariableById(variableID);
|
||||
if (variable !== null) {
|
||||
this.getField("type").setValue(variable.type);
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
};
|
||||
|
||||
@ -10,6 +10,16 @@ export const UI = {
|
||||
toolbox_time: "Zeit",
|
||||
toolbox_functions: "Funktionen",
|
||||
toolbox_variables: "Variablen",
|
||||
variable_NUMBER: "Zahl (int)",
|
||||
variable_SHORT_NUMBER: "char",
|
||||
variable_LONG: "große Zahl (long)",
|
||||
variable_DECIMAL: "Kommazahl (float)",
|
||||
variables_TEXT: "Text (string)",
|
||||
variables_ARRAY: "Array (array)",
|
||||
variables_CHARACTER: "char (char)",
|
||||
variables_BOOLEAN: "Boolean (boolean)",
|
||||
variables_NULL: "void (void)",
|
||||
variables_UNDEF: "undefined",
|
||||
|
||||
/**
|
||||
* Tooltips
|
||||
|
||||
@ -10,6 +10,16 @@ export const UI = {
|
||||
toolbox_time: "Time",
|
||||
toolbox_functions: "Functions",
|
||||
toolbox_variables: "Variables",
|
||||
variable_NUMBER: "Number (int)",
|
||||
variable_SHORT_NUMBER: "char",
|
||||
variable_LONG: " Zahl (long)",
|
||||
variable_DECIMAL: "Decimal (float)",
|
||||
variables_TEXT: "Text (string)",
|
||||
variables_ARRAY: "Array (array)",
|
||||
variables_CHARACTER: "char (char)",
|
||||
variables_BOOLEAN: "Boolean (boolean)",
|
||||
variables_NULL: "void (void)",
|
||||
variables_UNDEF: "undefined",
|
||||
|
||||
/**
|
||||
* Tooltips
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,20 +1,20 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { workspaceName } from '../../actions/workspaceActions';
|
||||
import React, { Component } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { connect } from "react-redux";
|
||||
import { workspaceName } from "../../actions/workspaceActions";
|
||||
|
||||
import BlocklyWindow from '../Blockly/BlocklyWindow';
|
||||
import CodeViewer from '../CodeViewer';
|
||||
import WorkspaceFunc from '../Workspace/WorkspaceFunc';
|
||||
import BlocklyWindow from "../Blockly/BlocklyWindow";
|
||||
import CodeViewer from "../CodeViewer";
|
||||
import WorkspaceFunc from "../Workspace/WorkspaceFunc";
|
||||
|
||||
import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import Card from '@material-ui/core/Card';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import * as Blockly from 'blockly'
|
||||
import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
import Card from "@material-ui/core/Card";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import * as Blockly from "blockly";
|
||||
import { initialXml } from "../Blockly/initialXml";
|
||||
|
||||
class Assessment extends Component {
|
||||
|
||||
componentDidMount() {
|
||||
this.props.workspaceName(this.props.name);
|
||||
}
|
||||
@ -28,48 +28,90 @@ class Assessment extends Component {
|
||||
render() {
|
||||
var tutorialId = this.props.tutorial._id;
|
||||
var currentTask = this.props.step;
|
||||
var status = this.props.status.filter(status => status._id === tutorialId)[0];
|
||||
var taskIndex = status.tasks.findIndex(task => task._id === currentTask._id);
|
||||
var status = this.props.status.filter(
|
||||
(status) => status._id === tutorialId
|
||||
)[0];
|
||||
var taskIndex = status.tasks.findIndex(
|
||||
(task) => task._id === currentTask._id
|
||||
);
|
||||
var statusTask = status.tasks[taskIndex];
|
||||
|
||||
return (
|
||||
<div className="assessmentDiv" style={{ width: '100%' }}>
|
||||
<Typography variant='h4' style={{ float: 'left', marginBottom: '5px', height: '40px', display: 'table' }}>{currentTask.headline}</Typography>
|
||||
<div style={{ float: 'right', height: '40px' }}><WorkspaceFunc assessment /></div>
|
||||
<Grid container spacing={2} style={{ marginBottom: '5px' }}>
|
||||
<div className="assessmentDiv" style={{ width: "100%" }}>
|
||||
<Typography
|
||||
variant="h4"
|
||||
style={{
|
||||
float: "left",
|
||||
marginBottom: "5px",
|
||||
height: "40px",
|
||||
display: "table",
|
||||
}}
|
||||
>
|
||||
{currentTask.headline}
|
||||
</Typography>
|
||||
<div style={{ float: "right", height: "40px" }}>
|
||||
<WorkspaceFunc assessment />
|
||||
</div>
|
||||
<Grid container spacing={2} style={{ marginBottom: "5px" }}>
|
||||
<Grid item xs={12} md={6} lg={8}>
|
||||
<BlocklyWindow
|
||||
initialXml={statusTask ? statusTask.xml ? statusTask.xml : null : null}
|
||||
initialXml={initialXml}
|
||||
blockDisabled
|
||||
blocklyCSS={{ height: '65vH' }}
|
||||
blocklyCSS={{ height: "65vH" }}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} lg={4} style={isWidthDown('sm', this.props.width) ? { height: 'max-content' } : {}}>
|
||||
<Card style={{ height: 'calc(50% - 30px)', padding: '10px', marginBottom: '10px' }}>
|
||||
<Typography variant='h5'>{Blockly.Msg.tutorials_assessment_task}</Typography>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
md={6}
|
||||
lg={4}
|
||||
style={
|
||||
isWidthDown("sm", this.props.width)
|
||||
? { height: "max-content" }
|
||||
: {}
|
||||
}
|
||||
>
|
||||
<Card
|
||||
style={{
|
||||
height: "calc(50% - 30px)",
|
||||
padding: "10px",
|
||||
marginBottom: "10px",
|
||||
}}
|
||||
>
|
||||
<Typography variant="h5">
|
||||
{Blockly.Msg.tutorials_assessment_task}
|
||||
</Typography>
|
||||
<Typography>{currentTask.text}</Typography>
|
||||
</Card>
|
||||
<div style={isWidthDown('sm', this.props.width) ? { height: '500px' } : { height: '50%' }}>
|
||||
<div
|
||||
style={
|
||||
isWidthDown("sm", this.props.width)
|
||||
? { height: "500px" }
|
||||
: { height: "50%" }
|
||||
}
|
||||
>
|
||||
<CodeViewer />
|
||||
</div>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
Assessment.propTypes = {
|
||||
status: PropTypes.array.isRequired,
|
||||
change: PropTypes.number.isRequired,
|
||||
workspaceName: PropTypes.func.isRequired,
|
||||
tutorial: PropTypes.object.isRequired
|
||||
tutorial: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
const mapStateToProps = (state) => ({
|
||||
change: state.tutorial.change,
|
||||
status: state.tutorial.status,
|
||||
tutorial: state.tutorial.tutorials[0]
|
||||
tutorial: state.tutorial.tutorials[0],
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, { workspaceName })(withWidth()(Assessment));
|
||||
export default connect(mapStateToProps, { workspaceName })(
|
||||
withWidth()(Assessment)
|
||||
);
|
||||
|
||||
@ -1,57 +1,95 @@
|
||||
import React, { Component } from 'react';
|
||||
import React, { Component } from "react";
|
||||
|
||||
import Hardware from './Hardware';
|
||||
import Requirement from './Requirement';
|
||||
import BlocklyWindow from '../Blockly/BlocklyWindow';
|
||||
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import Hardware from "./Hardware";
|
||||
import Requirement from "./Requirement";
|
||||
import BlocklyWindow from "../Blockly/BlocklyWindow";
|
||||
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
|
||||
class Instruction extends Component {
|
||||
|
||||
render() {
|
||||
var step = this.props.step;
|
||||
var isHardware = step.hardware && step.hardware.length > 0;
|
||||
var areRequirements = step.requirements && step.requirements.length > 0;
|
||||
return (
|
||||
<div>
|
||||
<Typography variant='h4' style={{ marginBottom: '5px' }}>{step.headline}</Typography>
|
||||
<Typography style={isHardware ? {} : { marginBottom: '5px' }}><ReactMarkdown className={'tutorial'} linkTarget={'_blank'} skipHtml={false}>{step.text}</ReactMarkdown></Typography>
|
||||
{isHardware ?
|
||||
<Hardware picture={step.hardware} /> : null}
|
||||
{areRequirements > 0 ?
|
||||
<Requirement requirements={step.requirements} /> : null}
|
||||
{step.media ?
|
||||
step.media.picture ?
|
||||
<div style={{ display: 'flex', justifyContent: 'center', marginBottom: '5px' }}>
|
||||
<img src={`${process.env.REACT_APP_BLOCKLY_API}/media/${step.media.picture.path}`} alt='' style={{ maxHeight: '40vH', maxWidth: '100%' }} />
|
||||
</div>
|
||||
: step.media.youtube ?
|
||||
/*16:9; width: 800px; height: width/16*9=450px*/
|
||||
<div style={{ maxWidth: '800px', margin: 'auto' }}>
|
||||
<div style={{ position: 'relative', height: 0, paddingBottom: 'calc(100% / 16 * 9)' }}>
|
||||
<iframe title={step.media.youtube} style={{ position: 'absolute', top: '0', left: '0', width: '100%', maxWidth: '800px', height: '100%', maxHeight: '450px' }} src={`https://www.youtube.com/embed/${step.media.youtube}`} frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
|
||||
</div>
|
||||
</div>
|
||||
: null
|
||||
: null}
|
||||
{step.xml ?
|
||||
<Grid container spacing={2} style={{ marginBottom: '5px' }}>
|
||||
<Grid item xs={12} style={{display: 'flex', justifyContent: 'center'}}>
|
||||
<BlocklyWindow
|
||||
svg
|
||||
blockDisabled
|
||||
initialXml={step.xml}
|
||||
<Typography variant="h4" style={{ marginBottom: "5px" }}>
|
||||
{step.headline}
|
||||
</Typography>
|
||||
<Typography style={isHardware ? {} : { marginBottom: "5px" }}>
|
||||
<ReactMarkdown
|
||||
className={"tutorial"}
|
||||
linkTarget={"_blank"}
|
||||
skipHtml={false}
|
||||
>
|
||||
{step.text}
|
||||
</ReactMarkdown>
|
||||
</Typography>
|
||||
{isHardware ? <Hardware picture={step.hardware} /> : null}
|
||||
{areRequirements > 0 ? (
|
||||
<Requirement requirements={step.requirements} />
|
||||
) : null}
|
||||
{step.media ? (
|
||||
step.media.picture ? (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
marginBottom: "5px",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={`${process.env.REACT_APP_BLOCKLY_API}/media/${step.media.picture.path}`}
|
||||
alt=""
|
||||
style={{ maxHeight: "40vH", maxWidth: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
) : step.media.youtube ? (
|
||||
/*16:9; width: 800px; height: width/16*9=450px*/
|
||||
<div style={{ maxWidth: "800px", margin: "auto" }}>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
height: 0,
|
||||
paddingBottom: "calc(100% / 16 * 9)",
|
||||
}}
|
||||
>
|
||||
<iframe
|
||||
title={step.media.youtube}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "0",
|
||||
left: "0",
|
||||
width: "100%",
|
||||
maxWidth: "800px",
|
||||
height: "100%",
|
||||
maxHeight: "450px",
|
||||
}}
|
||||
src={`https://www.youtube.com/embed/${step.media.youtube}`}
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : null
|
||||
) : null}
|
||||
{step.xml ? (
|
||||
<Grid container spacing={2} style={{ marginBottom: "5px" }}>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
style={{ display: "flex", justifyContent: "center" }}
|
||||
>
|
||||
<BlocklyWindow svg blockDisabled initialXml={step.xml} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
: null}
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default Instruction;
|
||||
|
||||
@ -1,76 +1,88 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { login } from '../../actions/authActions'
|
||||
import { clearMessages } from '../../actions/messageActions'
|
||||
import React, { Component } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { connect } from "react-redux";
|
||||
import { login } from "../../actions/authActions";
|
||||
import { clearMessages } from "../../actions/messageActions";
|
||||
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import { withRouter } from "react-router-dom";
|
||||
|
||||
import Snackbar from '../Snackbar';
|
||||
import Alert from '../Alert';
|
||||
import Breadcrumbs from '../Breadcrumbs';
|
||||
import Snackbar from "../Snackbar";
|
||||
import Alert from "../Alert";
|
||||
import Breadcrumbs from "../Breadcrumbs";
|
||||
|
||||
import Button from '@material-ui/core/Button';
|
||||
import IconButton from '@material-ui/core/IconButton';
|
||||
import Button from "@material-ui/core/Button";
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
|
||||
import TextField from '@material-ui/core/TextField';
|
||||
import Divider from '@material-ui/core/Divider';
|
||||
import InputAdornment from '@material-ui/core/InputAdornment';
|
||||
import CircularProgress from '@material-ui/core/CircularProgress';
|
||||
import Link from '@material-ui/core/Link';
|
||||
import * as Blockly from 'blockly'
|
||||
import TextField from "@material-ui/core/TextField";
|
||||
import Divider from "@material-ui/core/Divider";
|
||||
import InputAdornment from "@material-ui/core/InputAdornment";
|
||||
import CircularProgress from "@material-ui/core/CircularProgress";
|
||||
import Link from "@material-ui/core/Link";
|
||||
import * as Blockly from "blockly";
|
||||
|
||||
export class Login extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
redirect: props.location.state ? props.location.state.from.pathname : null,
|
||||
email: '',
|
||||
password: '',
|
||||
redirect: props.location.state
|
||||
? props.location.state.from.pathname
|
||||
: null,
|
||||
email: "",
|
||||
password: "",
|
||||
snackbar: false,
|
||||
type: '',
|
||||
key: '',
|
||||
message: '',
|
||||
showPassword: false
|
||||
type: "",
|
||||
key: "",
|
||||
message: "",
|
||||
showPassword: false,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidUpdate(props) {
|
||||
const { message } = this.props;
|
||||
if (message !== props.message) {
|
||||
if (message.id === 'LOGIN_SUCCESS') {
|
||||
if (message.id === "LOGIN_SUCCESS") {
|
||||
if (this.state.redirect) {
|
||||
this.props.history.push(this.state.redirect);
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
this.props.history.goBack();
|
||||
}
|
||||
}
|
||||
// Check for login error
|
||||
else if (message.id === 'LOGIN_FAIL') {
|
||||
this.setState({ email: '', password: '', snackbar: true, key: Date.now(), message: Blockly.Msg.messages_LOGIN_FAIL, type: 'error' });
|
||||
else if (message.id === "LOGIN_FAIL") {
|
||||
this.setState({
|
||||
email: "",
|
||||
password: "",
|
||||
snackbar: true,
|
||||
key: Date.now(),
|
||||
message: Blockly.Msg.messages_LOGIN_FAIL,
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onChange = e => {
|
||||
onChange = (e) => {
|
||||
this.setState({ [e.target.name]: e.target.value });
|
||||
};
|
||||
|
||||
onSubmit = e => {
|
||||
onSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
const { email, password } = this.state;
|
||||
if (email !== '' && password !== '') {
|
||||
if (email !== "" && password !== "") {
|
||||
// create user object
|
||||
const user = {
|
||||
email,
|
||||
password
|
||||
password,
|
||||
};
|
||||
this.props.login(user);
|
||||
} else {
|
||||
this.setState({ snackbar: true, key: Date.now(), message: Blockly.Msg.messages_login_error, type: 'error' });
|
||||
this.setState({
|
||||
snackbar: true,
|
||||
key: Date.now(),
|
||||
message: Blockly.Msg.messages_login_error,
|
||||
type: "error",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@ -85,12 +97,25 @@ export class Login extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Breadcrumbs content={[{ link: '/user/login', title: Blockly.Msg.button_login }]} />
|
||||
<Breadcrumbs
|
||||
content={[{ link: "/user/login", title: Blockly.Msg.button_login }]}
|
||||
/>
|
||||
|
||||
<div style={{ maxWidth: '500px', marginLeft: 'auto', marginRight: 'auto' }}>
|
||||
<div
|
||||
style={{ maxWidth: "500px", marginLeft: "auto", marginRight: "auto" }}
|
||||
>
|
||||
<h1>{Blockly.Msg.login_head}</h1>
|
||||
<Alert>
|
||||
{Blockly.Msg.login_osem_account_01} <Link color='primary' rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link> {Blockly.Msg.login_osem_account_02}.
|
||||
{Blockly.Msg.login_osem_account_01}{" "}
|
||||
<Link
|
||||
color="primary"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
href={"https://opensensemap.org/"}
|
||||
>
|
||||
openSenseMap
|
||||
</Link>{" "}
|
||||
{Blockly.Msg.login_osem_account_02}.
|
||||
</Alert>
|
||||
<Snackbar
|
||||
open={this.state.snackbar}
|
||||
@ -99,51 +124,83 @@ export class Login extends Component {
|
||||
key={this.state.key}
|
||||
/>
|
||||
<TextField
|
||||
style={{ marginBottom: '10px' }}
|
||||
style={{ marginBottom: "10px" }}
|
||||
// variant='outlined'
|
||||
type='text'
|
||||
type="text"
|
||||
label={Blockly.Msg.labels_username}
|
||||
name='email'
|
||||
name="email"
|
||||
value={this.state.email}
|
||||
onChange={this.onChange}
|
||||
fullWidth={true}
|
||||
/>
|
||||
<TextField
|
||||
// variant='outlined'
|
||||
type={this.state.showPassword ? 'text' : 'password'}
|
||||
type={this.state.showPassword ? "text" : "password"}
|
||||
label={Blockly.Msg.labels_password}
|
||||
name='password'
|
||||
name="password"
|
||||
value={this.state.password}
|
||||
InputProps={{
|
||||
endAdornment:
|
||||
<InputAdornment
|
||||
position="end"
|
||||
>
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
onClick={this.handleClickShowPassword}
|
||||
onMouseDown={this.handleMouseDownPassword}
|
||||
edge="end"
|
||||
>
|
||||
<FontAwesomeIcon size='xs' icon={this.state.showPassword ? faEyeSlash : faEye} />
|
||||
<FontAwesomeIcon
|
||||
size="xs"
|
||||
icon={this.state.showPassword ? faEyeSlash : faEye}
|
||||
/>
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
onChange={this.onChange}
|
||||
fullWidth={true}
|
||||
/>
|
||||
<p>
|
||||
<Button color="primary" variant='contained' onClick={this.onSubmit} style={{ width: '100%' }}>
|
||||
{this.props.progress ?
|
||||
<div style={{ height: '24.5px' }}><CircularProgress color="inherit" size={20} /></div>
|
||||
: Blockly.Msg.button_login}
|
||||
<Button
|
||||
color="primary"
|
||||
variant="contained"
|
||||
onClick={this.onSubmit}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
{this.props.progress ? (
|
||||
<div style={{ height: "24.5px" }}>
|
||||
<CircularProgress color="inherit" size={20} />
|
||||
</div>
|
||||
) : (
|
||||
Blockly.Msg.button_login
|
||||
)}
|
||||
</Button>
|
||||
</p>
|
||||
<p style={{ textAlign: 'center', fontSize: '0.8rem' }}>
|
||||
<Link rel="noreferrer" target="_blank" href={'https://opensensemap.org/'} color="primary">{Blockly.Msg.login_lostpassword}</Link>
|
||||
<p style={{ textAlign: "center", fontSize: "0.8rem" }}>
|
||||
<Link
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
href={"https://opensensemap.org/"}
|
||||
color="primary"
|
||||
>
|
||||
{Blockly.Msg.login_lostpassword}
|
||||
</Link>
|
||||
</p>
|
||||
<Divider variant='fullWidth' />
|
||||
<p style={{ textAlign: 'center', paddingRight: "34px", paddingLeft: "34px" }}>
|
||||
{Blockly.Msg.login_createaccount}<Link rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link>.
|
||||
<Divider variant="fullWidth" />
|
||||
<p
|
||||
style={{
|
||||
textAlign: "center",
|
||||
paddingRight: "34px",
|
||||
paddingLeft: "34px",
|
||||
}}
|
||||
>
|
||||
{Blockly.Msg.login_createaccount}
|
||||
<Link
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
href={"https://opensensemap.org/"}
|
||||
>
|
||||
openSenseMap
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -155,12 +212,14 @@ Login.propTypes = {
|
||||
message: PropTypes.object.isRequired,
|
||||
login: PropTypes.func.isRequired,
|
||||
clearMessages: PropTypes.func.isRequired,
|
||||
progress: PropTypes.bool.isRequired
|
||||
progress: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
const mapStateToProps = (state) => ({
|
||||
message: state.message,
|
||||
progress: state.auth.progress
|
||||
progress: state.auth.progress,
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, { login, clearMessages })(withRouter(Login));
|
||||
export default connect(mapStateToProps, { login, clearMessages })(
|
||||
withRouter(Login)
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user