update variable names
This commit is contained in:
parent
687ac32166
commit
255b1619b8
@ -1,20 +1,18 @@
|
|||||||
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 { onChangeWorkspace, clearStats } from '../../actions/workspaceActions';
|
import { onChangeWorkspace, clearStats } from "../../actions/workspaceActions";
|
||||||
|
|
||||||
import BlocklyComponent from './BlocklyComponent';
|
import BlocklyComponent from "./BlocklyComponent";
|
||||||
import BlocklySvg from './BlocklySvg';
|
import BlocklySvg from "./BlocklySvg";
|
||||||
|
|
||||||
import * as Blockly from 'blockly/core';
|
import * as Blockly from "blockly/core";
|
||||||
import './blocks/index';
|
import "./blocks/index";
|
||||||
import './generator/index';
|
import "./generator/index";
|
||||||
|
|
||||||
import { initialXml } from './initialXml.js';
|
|
||||||
|
|
||||||
|
import { initialXml } from "./initialXml.js";
|
||||||
|
|
||||||
class BlocklyWindow extends Component {
|
class BlocklyWindow extends Component {
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.simpleWorkspace = React.createRef();
|
this.simpleWorkspace = React.createRef();
|
||||||
@ -41,6 +39,7 @@ class BlocklyWindow extends Component {
|
|||||||
Blockly.Events.disableOrphans(event);
|
Blockly.Events.disableOrphans(event);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
Blockly.svgResize(workspace);
|
Blockly.svgResize(workspace);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -64,46 +63,65 @@ class BlocklyWindow extends Component {
|
|||||||
// workspace.updateToolbox(toolbox.toolboxDef_);
|
// workspace.updateToolbox(toolbox.toolboxDef_);
|
||||||
}
|
}
|
||||||
Blockly.svgResize(workspace);
|
Blockly.svgResize(workspace);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<BlocklyComponent ref={this.simpleWorkspace}
|
<BlocklyComponent
|
||||||
|
ref={this.simpleWorkspace}
|
||||||
style={this.props.svg ? { height: 0 } : this.props.blocklyCSS}
|
style={this.props.svg ? { height: 0 } : this.props.blocklyCSS}
|
||||||
readOnly={this.props.readOnly !== undefined ? this.props.readOnly : false}
|
readOnly={
|
||||||
trashcan={this.props.trashcan !== undefined ? this.props.trashcan : true}
|
this.props.readOnly !== undefined ? this.props.readOnly : false
|
||||||
|
}
|
||||||
|
trashcan={
|
||||||
|
this.props.trashcan !== undefined ? this.props.trashcan : true
|
||||||
|
}
|
||||||
renderer={this.props.renderer}
|
renderer={this.props.renderer}
|
||||||
zoom={{ // https://developers.google.com/blockly/guides/configure/web/zoom
|
zoom={{
|
||||||
controls: this.props.zoomControls !== undefined ? this.props.zoomControls : true,
|
// https://developers.google.com/blockly/guides/configure/web/zoom
|
||||||
|
controls:
|
||||||
|
this.props.zoomControls !== undefined
|
||||||
|
? this.props.zoomControls
|
||||||
|
: true,
|
||||||
wheel: false,
|
wheel: false,
|
||||||
startScale: 1,
|
startScale: 1,
|
||||||
maxScale: 3,
|
maxScale: 3,
|
||||||
minScale: 0.3,
|
minScale: 0.3,
|
||||||
scaleSpeed: 1.2
|
scaleSpeed: 1.2,
|
||||||
}}
|
}}
|
||||||
grid={this.props.grid !== undefined && !this.props.grid ? {} :
|
grid={
|
||||||
{ // https://developers.google.com/blockly/guides/configure/web/grid
|
this.props.grid !== undefined && !this.props.grid
|
||||||
|
? {}
|
||||||
|
: {
|
||||||
|
// https://developers.google.com/blockly/guides/configure/web/grid
|
||||||
spacing: 20,
|
spacing: 20,
|
||||||
length: 1,
|
length: 1,
|
||||||
colour: '#4EAF47', // senseBox-green
|
colour: "#4EAF47", // senseBox-green
|
||||||
snap: false
|
snap: false,
|
||||||
}}
|
}
|
||||||
media={'/media/blockly/'}
|
}
|
||||||
move={this.props.move !== undefined && !this.props.move ? {} :
|
media={"/media/blockly/"}
|
||||||
{ // https://developers.google.com/blockly/guides/configure/web/move
|
move={
|
||||||
|
this.props.move !== undefined && !this.props.move
|
||||||
|
? {}
|
||||||
|
: {
|
||||||
|
// https://developers.google.com/blockly/guides/configure/web/move
|
||||||
scrollbars: true,
|
scrollbars: true,
|
||||||
drag: true,
|
drag: true,
|
||||||
wheel: false
|
wheel: false,
|
||||||
}}
|
}
|
||||||
initialXml={this.props.initialXml ? this.props.initialXml : initialXml}
|
}
|
||||||
>
|
initialXml={
|
||||||
</BlocklyComponent >
|
this.props.initialXml ? this.props.initialXml : initialXml
|
||||||
{this.props.svg && this.props.initialXml ? <BlocklySvg initialXml={this.props.initialXml} /> : null}
|
}
|
||||||
|
></BlocklyComponent>
|
||||||
|
{this.props.svg && this.props.initialXml ? (
|
||||||
|
<BlocklySvg initialXml={this.props.initialXml} />
|
||||||
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
BlocklyWindow.propTypes = {
|
BlocklyWindow.propTypes = {
|
||||||
@ -114,10 +132,12 @@ BlocklyWindow.propTypes = {
|
|||||||
workspaceXML: PropTypes.string.isRequired,
|
workspaceXML: PropTypes.string.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
const mapStateToProps = state => ({
|
const mapStateToProps = (state) => ({
|
||||||
renderer: state.general.renderer,
|
renderer: state.general.renderer,
|
||||||
language: state.general.language.Blockly,
|
language: state.general.language.Blockly,
|
||||||
workspaceXML: state.workspace.code.xml,
|
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 Blockly from "blockly/core";
|
||||||
import { getColour } from '../helpers/colour';
|
import { getColour } from "../helpers/colour";
|
||||||
import { getCompatibleTypes } from '../helpers/types'
|
import { getCompatibleTypes } from "../helpers/types";
|
||||||
|
|
||||||
|
Blockly.Blocks["variables_set_dynamic"] = {
|
||||||
Blockly.Blocks['variables_set_dynamic'] = {
|
|
||||||
init: function () {
|
init: function () {
|
||||||
|
|
||||||
// const type = myVar.type;
|
// const type = myVar.type;
|
||||||
this.setColour(getColour().variables);
|
this.setColour(getColour().variables);
|
||||||
this.setPreviousStatement(true, null);
|
this.setPreviousStatement(true, null);
|
||||||
this.setNextStatement(true, null);
|
this.setNextStatement(true, null);
|
||||||
this.appendValueInput('VALUE')
|
this.appendValueInput("VALUE")
|
||||||
.appendField('set', 'set')
|
.appendField("set", "set")
|
||||||
.appendField('', 'type')
|
.appendField("", "type")
|
||||||
.appendField(new Blockly.FieldVariable('VAR'), 'VAR')
|
.appendField(new Blockly.FieldVariable("VAR"), "VAR")
|
||||||
.appendField('to');
|
.appendField("to");
|
||||||
},
|
},
|
||||||
onchange: function (e) {
|
onchange: function (e) {
|
||||||
let variableID = this.getFieldValue('VAR');
|
let variableID = this.getFieldValue("VAR");
|
||||||
let variable = Blockly.getMainWorkspace().getVariableMap().getVariableById(variableID)
|
let variable = Blockly.getMainWorkspace()
|
||||||
this.getField('type').setValue(variable.type);
|
.getVariableMap()
|
||||||
this.getInput('VALUE').setCheck(getCompatibleTypes(variable.type));
|
.getVariableById(variableID);
|
||||||
|
if (variable !== null) {
|
||||||
|
this.getField("type").setValue(variable.type);
|
||||||
|
this.getInput("VALUE").setCheck(getCompatibleTypes(variable.type));
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
};
|
||||||
|
|
||||||
Blockly.Blocks['variables_get_dynamic'] = {
|
Blockly.Blocks["variables_get_dynamic"] = {
|
||||||
init: function () {
|
init: function () {
|
||||||
this.setColour(getColour().variables);
|
this.setColour(getColour().variables);
|
||||||
this.appendDummyInput()
|
this.appendDummyInput()
|
||||||
.appendField('', 'type')
|
.appendField("", "type")
|
||||||
.appendField(new Blockly.FieldVariable('VAR'), 'VAR');
|
.appendField(new Blockly.FieldVariable("VAR"), "VAR");
|
||||||
this.setOutput(true);
|
this.setOutput(true);
|
||||||
},
|
},
|
||||||
onchange: function (e) {
|
onchange: function (e) {
|
||||||
let variableID = this.getFieldValue('VAR');
|
let variableID = this.getFieldValue("VAR");
|
||||||
let variable = Blockly.getMainWorkspace().getVariableMap().getVariableById(variableID)
|
let variable = Blockly.getMainWorkspace()
|
||||||
this.getField('type').setValue(variable.type);
|
.getVariableMap()
|
||||||
|
.getVariableById(variableID);
|
||||||
|
if (variable !== null) {
|
||||||
|
this.getField("type").setValue(variable.type);
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
};
|
||||||
|
@ -10,6 +10,16 @@ export const UI = {
|
|||||||
toolbox_time: "Zeit",
|
toolbox_time: "Zeit",
|
||||||
toolbox_functions: "Funktionen",
|
toolbox_functions: "Funktionen",
|
||||||
toolbox_variables: "Variablen",
|
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
|
* Tooltips
|
||||||
|
@ -10,6 +10,16 @@ export const UI = {
|
|||||||
toolbox_time: "Time",
|
toolbox_time: "Time",
|
||||||
toolbox_functions: "Functions",
|
toolbox_functions: "Functions",
|
||||||
toolbox_variables: "Variables",
|
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
|
* Tooltips
|
||||||
|
@ -1,30 +1,43 @@
|
|||||||
import React from 'react';
|
import React from "react";
|
||||||
import { Block, Value, Field, Shadow, Category } from '../';
|
import { Block, Value, Field, Shadow, Category } from "../";
|
||||||
import { getColour } from '../helpers/colour'
|
import { getColour } from "../helpers/colour";
|
||||||
import '@blockly/block-plus-minus';
|
import "@blockly/block-plus-minus";
|
||||||
import { TypedVariableModal } from '@blockly/plugin-typed-variable-modal';
|
import { TypedVariableModal } from "@blockly/plugin-typed-variable-modal";
|
||||||
import * as Blockly from 'blockly/core';
|
import * as Blockly from "blockly/core";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
class Toolbox extends React.Component {
|
class Toolbox extends React.Component {
|
||||||
|
|
||||||
componentDidUpdate() {
|
componentDidUpdate() {
|
||||||
this.props.workspace.registerToolboxCategoryCallback('CREATE_TYPED_VARIABLE', this.createFlyout);
|
this.props.workspace.registerToolboxCategoryCallback(
|
||||||
|
"CREATE_TYPED_VARIABLE",
|
||||||
|
this.createFlyout
|
||||||
|
);
|
||||||
|
|
||||||
const typedVarModal = new TypedVariableModal(this.props.workspace, 'callbackName', [['SHORT_NUMBER', 'char'], ['NUMBER', 'int'], ['DECIMAL', 'float'], ['TEXT', 'String'], ['ARRAY', 'Array'], ['CHARACTER', 'char'], ['BOOLEAN', 'boolean'], ['NULL', 'void'], ['UNDEF', 'undefined']]);
|
const typedVarModal = new TypedVariableModal(
|
||||||
|
this.props.workspace,
|
||||||
|
"callbackName",
|
||||||
|
[
|
||||||
|
[`${Blockly.Msg.variable_SHORT_NUMBER}`, "char"],
|
||||||
|
[`${Blockly.Msg.variable_NUMBER}`, "int"],
|
||||||
|
[`${Blockly.Msg.variable_LONG}`, "long"],
|
||||||
|
[`${Blockly.Msg.variable_DECIMAL}`, "float"],
|
||||||
|
[`${Blockly.Msg.variables_TEXT}`, "String"],
|
||||||
|
[`${Blockly.Msg.variables_ARRAY}`, "Array"],
|
||||||
|
[`${Blockly.Msg.variables_CHARACTER}`, "char"],
|
||||||
|
[`${Blockly.Msg.variables_BOOLEAN}`, "boolean"],
|
||||||
|
[`${Blockly.Msg.variables_NULL}`, "void"],
|
||||||
|
[`${Blockly.Msg.variables_UNDEF}`, "undefined"],
|
||||||
|
]
|
||||||
|
);
|
||||||
typedVarModal.init();
|
typedVarModal.init();
|
||||||
}
|
}
|
||||||
|
|
||||||
createFlyout(workspace) {
|
createFlyout(workspace) {
|
||||||
|
|
||||||
let xmlList = [];
|
let xmlList = [];
|
||||||
|
|
||||||
// Add your button and give it a callback name.
|
// Add your button and give it a callback name.
|
||||||
const button = document.createElement('button');
|
const button = document.createElement("button");
|
||||||
button.setAttribute('text', 'Create Typed Variable');
|
button.setAttribute("text", "Create Typed Variable");
|
||||||
button.setAttribute('callbackKey', 'callbackName');
|
button.setAttribute("callbackKey", "callbackName");
|
||||||
|
|
||||||
xmlList.push(button);
|
xmlList.push(button);
|
||||||
|
|
||||||
@ -33,12 +46,20 @@ class Toolbox extends React.Component {
|
|||||||
const blockList = Blockly.VariablesDynamic.flyoutCategoryBlocks(workspace);
|
const blockList = Blockly.VariablesDynamic.flyoutCategoryBlocks(workspace);
|
||||||
xmlList = xmlList.concat(blockList);
|
xmlList = xmlList.concat(blockList);
|
||||||
return xmlList;
|
return xmlList;
|
||||||
};
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<xml xmlns="https://developers.google.com/blockly/xml" id="blockly" style={{ display: 'none' }} ref={this.props.toolbox}>
|
<xml
|
||||||
<Category name={Blockly.Msg.toolbox_sensors} colour={getColour().sensebox}>
|
xmlns="https://developers.google.com/blockly/xml"
|
||||||
|
id="blockly"
|
||||||
|
style={{ display: "none" }}
|
||||||
|
ref={this.props.toolbox}
|
||||||
|
>
|
||||||
|
<Category
|
||||||
|
name={Blockly.Msg.toolbox_sensors}
|
||||||
|
colour={getColour().sensebox}
|
||||||
|
>
|
||||||
<Block type="sensebox_sensor_temp_hum" />
|
<Block type="sensebox_sensor_temp_hum" />
|
||||||
<Block type="sensebox_sensor_uv_light" />
|
<Block type="sensebox_sensor_uv_light" />
|
||||||
<Block type="sensebox_sensor_bmx055_accelerometer" />
|
<Block type="sensebox_sensor_bmx055_accelerometer" />
|
||||||
@ -54,7 +75,7 @@ class Toolbox extends React.Component {
|
|||||||
<Block type="sensebox_sensor_watertemperature" />
|
<Block type="sensebox_sensor_watertemperature" />
|
||||||
{/* <Block type="sensebox_windspeed" /> */}
|
{/* <Block type="sensebox_windspeed" /> */}
|
||||||
<Block type="sensebox_soundsensor_dfrobot" />
|
<Block type="sensebox_soundsensor_dfrobot" />
|
||||||
</Category >
|
</Category>
|
||||||
<Category name="WIFI" colour={getColour().sensebox}>
|
<Category name="WIFI" colour={getColour().sensebox}>
|
||||||
<Block type="sensebox_wifi" />
|
<Block type="sensebox_wifi" />
|
||||||
<Block type="sensebox_startap" />
|
<Block type="sensebox_startap" />
|
||||||
@ -157,19 +178,16 @@ class Toolbox extends React.Component {
|
|||||||
<Field name="TEXT">Unit</Field>
|
<Field name="TEXT">Unit</Field>
|
||||||
</Block>
|
</Block>
|
||||||
</Value>
|
</Value>
|
||||||
</Block >
|
</Block>
|
||||||
<Block type="sensebox_display_plotDisplay">
|
<Block type="sensebox_display_plotDisplay">
|
||||||
<Value name="Title">
|
<Value name="Title">
|
||||||
<Block type="text">
|
<Block type="text"></Block>
|
||||||
</Block>
|
|
||||||
</Value>
|
</Value>
|
||||||
<Value name="YLabel">
|
<Value name="YLabel">
|
||||||
<Block type="text">
|
<Block type="text"></Block>
|
||||||
</Block>
|
|
||||||
</Value>
|
</Value>
|
||||||
<Value name="XLabel">
|
<Value name="XLabel">
|
||||||
<Block type="text">
|
<Block type="text"></Block>
|
||||||
</Block>
|
|
||||||
</Value>
|
</Value>
|
||||||
<Value name="XRange1">
|
<Value name="XRange1">
|
||||||
<Block type="math_number">
|
<Block type="math_number">
|
||||||
@ -261,16 +279,32 @@ class Toolbox extends React.Component {
|
|||||||
</Block>
|
</Block>
|
||||||
<Block type="sensebox_send_to_osem" />
|
<Block type="sensebox_send_to_osem" />
|
||||||
</Category>
|
</Category>
|
||||||
<Category id="catSenseBoxOutput_LoRa" name=" LoRa" colour={getColour().sensebox}>
|
<Category
|
||||||
<Category id="catSenseBoxOutput_LoRa_activation" name=" Aktivierung" colour={getColour().sensebox}>
|
id="catSenseBoxOutput_LoRa"
|
||||||
|
name=" LoRa"
|
||||||
|
colour={getColour().sensebox}
|
||||||
|
>
|
||||||
|
<Category
|
||||||
|
id="catSenseBoxOutput_LoRa_activation"
|
||||||
|
name=" Aktivierung"
|
||||||
|
colour={getColour().sensebox}
|
||||||
|
>
|
||||||
<Block type="sensebox_lora_initialize_otaa" />
|
<Block type="sensebox_lora_initialize_otaa" />
|
||||||
<Block type="sensebox_lora_initialize_abp" />
|
<Block type="sensebox_lora_initialize_abp" />
|
||||||
</Category>
|
</Category>
|
||||||
<Category id="catSenseBoxOutput_LoRa_loramessage" name=" Lora Message" colour={getColour().sensebox}>
|
<Category
|
||||||
|
id="catSenseBoxOutput_LoRa_loramessage"
|
||||||
|
name=" Lora Message"
|
||||||
|
colour={getColour().sensebox}
|
||||||
|
>
|
||||||
<Block type="sensebox_lora_message_send" />
|
<Block type="sensebox_lora_message_send" />
|
||||||
<Block type="sensebox_send_lora_sensor_value" />
|
<Block type="sensebox_send_lora_sensor_value" />
|
||||||
</Category>
|
</Category>
|
||||||
<Category id="catSenseBoxOutput_Map" name=" TTN Mapper" colour={getColour().sensebox}>
|
<Category
|
||||||
|
id="catSenseBoxOutput_Map"
|
||||||
|
name=" TTN Mapper"
|
||||||
|
colour={getColour().sensebox}
|
||||||
|
>
|
||||||
<Block type="sensebox_lora_ttn_mapper">
|
<Block type="sensebox_lora_ttn_mapper">
|
||||||
<Value name="Latitude">
|
<Value name="Latitude">
|
||||||
<Block type="sensebox_gps">
|
<Block type="sensebox_gps">
|
||||||
@ -299,7 +333,11 @@ class Toolbox extends React.Component {
|
|||||||
</Value>
|
</Value>
|
||||||
</Block>
|
</Block>
|
||||||
</Category>
|
</Category>
|
||||||
<Category id="catSenseBoxOutput_LoRa_cayenne" name=" Cayenne LPP" colour={getColour().sensebox}>
|
<Category
|
||||||
|
id="catSenseBoxOutput_LoRa_cayenne"
|
||||||
|
name=" Cayenne LPP"
|
||||||
|
colour={getColour().sensebox}
|
||||||
|
>
|
||||||
<Block type="sensebox_lora_cayenne_send" />
|
<Block type="sensebox_lora_cayenne_send" />
|
||||||
<Block type="sensebox_lora_cayenne_temperature" />
|
<Block type="sensebox_lora_cayenne_temperature" />
|
||||||
<Block type="sensebox_lora_cayenne_humidity" />
|
<Block type="sensebox_lora_cayenne_humidity" />
|
||||||
@ -310,7 +348,11 @@ class Toolbox extends React.Component {
|
|||||||
<Block type="sensebox_lora_cayenne_gps" />
|
<Block type="sensebox_lora_cayenne_gps" />
|
||||||
</Category>
|
</Category>
|
||||||
</Category>
|
</Category>
|
||||||
<Category id="webserver" name="Webserver" colour={getColour().webserver}>
|
<Category
|
||||||
|
id="webserver"
|
||||||
|
name="Webserver"
|
||||||
|
colour={getColour().webserver}
|
||||||
|
>
|
||||||
<Block type="sensebox_initialize_http_server"></Block>
|
<Block type="sensebox_initialize_http_server"></Block>
|
||||||
<Block type="sensebox_http_on_client_connect"></Block>
|
<Block type="sensebox_http_on_client_connect"></Block>
|
||||||
<Block type="sensebox_ip_address"></Block>
|
<Block type="sensebox_ip_address"></Block>
|
||||||
@ -338,7 +380,11 @@ class Toolbox extends React.Component {
|
|||||||
<Block type="logic_boolean" />
|
<Block type="logic_boolean" />
|
||||||
<Block type="switch_case" />
|
<Block type="switch_case" />
|
||||||
</Category>
|
</Category>
|
||||||
<Category id="loops" name={Blockly.Msg.toolbox_loops} colour={getColour().loops}>
|
<Category
|
||||||
|
id="loops"
|
||||||
|
name={Blockly.Msg.toolbox_loops}
|
||||||
|
colour={getColour().loops}
|
||||||
|
>
|
||||||
<Block type="controls_repeat_ext">
|
<Block type="controls_repeat_ext">
|
||||||
<Value name="TIMES">
|
<Value name="TIMES">
|
||||||
<Block type="math_number">
|
<Block type="math_number">
|
||||||
@ -353,13 +399,13 @@ class Toolbox extends React.Component {
|
|||||||
<Field name="NUM">1</Field>
|
<Field name="NUM">1</Field>
|
||||||
</Block>
|
</Block>
|
||||||
</Value>
|
</Value>
|
||||||
<Value name="TO" >
|
<Value name="TO">
|
||||||
<Block type="math_number" >
|
<Block type="math_number">
|
||||||
<Field name="NUM">10</Field>
|
<Field name="NUM">10</Field>
|
||||||
</Block>
|
</Block>
|
||||||
</Value>
|
</Value>
|
||||||
<Value name="BY" >
|
<Value name="BY">
|
||||||
<Block Type="math_number" >
|
<Block Type="math_number">
|
||||||
<Field name="NUM">1</Field>
|
<Field name="NUM">1</Field>
|
||||||
</Block>
|
</Block>
|
||||||
</Value>
|
</Value>
|
||||||
@ -377,7 +423,11 @@ class Toolbox extends React.Component {
|
|||||||
<Block type="text_length" />
|
<Block type="text_length" />
|
||||||
<Block type="text_isEmpty" />
|
<Block type="text_isEmpty" />
|
||||||
</Category>
|
</Category>
|
||||||
<Category id="time" name={Blockly.Msg.toolbox_time} colour={getColour().time}>
|
<Category
|
||||||
|
id="time"
|
||||||
|
name={Blockly.Msg.toolbox_time}
|
||||||
|
colour={getColour().time}
|
||||||
|
>
|
||||||
<Block type="time_delay">
|
<Block type="time_delay">
|
||||||
<Value name="DELAY_TIME_MILI">
|
<Value name="DELAY_TIME_MILI">
|
||||||
<Block type="math_number">
|
<Block type="math_number">
|
||||||
@ -397,7 +447,11 @@ class Toolbox extends React.Component {
|
|||||||
<Block type="infinite_loop"></Block>
|
<Block type="infinite_loop"></Block>
|
||||||
<Block type="sensebox_interval_timer"></Block>
|
<Block type="sensebox_interval_timer"></Block>
|
||||||
</Category>
|
</Category>
|
||||||
<Category id="math" name={Blockly.Msg.toolbox_math} colour={getColour().math}>
|
<Category
|
||||||
|
id="math"
|
||||||
|
name={Blockly.Msg.toolbox_math}
|
||||||
|
colour={getColour().math}
|
||||||
|
>
|
||||||
<Block type="math_number"></Block>
|
<Block type="math_number"></Block>
|
||||||
<Block type="math_arithmetic"></Block>
|
<Block type="math_arithmetic"></Block>
|
||||||
<Block type="math_single"></Block>
|
<Block type="math_single"></Block>
|
||||||
@ -450,13 +504,21 @@ class Toolbox extends React.Component {
|
|||||||
</Block>
|
</Block>
|
||||||
<Block type="io_notone"></Block>
|
<Block type="io_notone"></Block>
|
||||||
</Category>
|
</Category>
|
||||||
<Category name={Blockly.Msg.toolbox_variables} colour={getColour().variables} custom="CREATE_TYPED_VARIABLE"></Category>
|
<Category
|
||||||
<Category name="Arrays" colour={getColour().arrays} >
|
name={Blockly.Msg.toolbox_variables}
|
||||||
|
colour={getColour().variables}
|
||||||
|
custom="CREATE_TYPED_VARIABLE"
|
||||||
|
></Category>
|
||||||
|
<Category name="Arrays" colour={getColour().arrays}>
|
||||||
<Block type="lists_create_empty" />
|
<Block type="lists_create_empty" />
|
||||||
<Block type="array_getIndex" />
|
<Block type="array_getIndex" />
|
||||||
<Block type="lists_length" />
|
<Block type="lists_length" />
|
||||||
</Category>
|
</Category>
|
||||||
<Category name={Blockly.Msg.toolbox_functions} colour={getColour().procedures} custom="PROCEDURE"></Category>
|
<Category
|
||||||
|
name={Blockly.Msg.toolbox_functions}
|
||||||
|
colour={getColour().procedures}
|
||||||
|
custom="PROCEDURE"
|
||||||
|
></Category>
|
||||||
<sep></sep>
|
<sep></sep>
|
||||||
<Category name={Blockly.Msg.toolbox_io} colour={getColour().io}>
|
<Category name={Blockly.Msg.toolbox_io} colour={getColour().io}>
|
||||||
<Block type="io_digitalwrite"></Block>
|
<Block type="io_digitalwrite"></Block>
|
||||||
@ -489,7 +551,7 @@ class Toolbox extends React.Component {
|
|||||||
*/}
|
*/}
|
||||||
</xml>
|
</xml>
|
||||||
);
|
);
|
||||||
};
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Toolbox;
|
export default Toolbox;
|
||||||
|
@ -1,20 +1,20 @@
|
|||||||
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 { workspaceName } from '../../actions/workspaceActions';
|
import { workspaceName } from "../../actions/workspaceActions";
|
||||||
|
|
||||||
import BlocklyWindow from '../Blockly/BlocklyWindow';
|
import BlocklyWindow from "../Blockly/BlocklyWindow";
|
||||||
import CodeViewer from '../CodeViewer';
|
import CodeViewer from "../CodeViewer";
|
||||||
import WorkspaceFunc from '../Workspace/WorkspaceFunc';
|
import WorkspaceFunc from "../Workspace/WorkspaceFunc";
|
||||||
|
|
||||||
import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
|
import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
|
||||||
import Grid from '@material-ui/core/Grid';
|
import Grid from "@material-ui/core/Grid";
|
||||||
import Card from '@material-ui/core/Card';
|
import Card from "@material-ui/core/Card";
|
||||||
import Typography from '@material-ui/core/Typography';
|
import Typography from "@material-ui/core/Typography";
|
||||||
import * as Blockly from 'blockly'
|
import * as Blockly from "blockly";
|
||||||
|
import { initialXml } from "../Blockly/initialXml";
|
||||||
|
|
||||||
class Assessment extends Component {
|
class Assessment extends Component {
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this.props.workspaceName(this.props.name);
|
this.props.workspaceName(this.props.name);
|
||||||
}
|
}
|
||||||
@ -28,48 +28,90 @@ class Assessment extends Component {
|
|||||||
render() {
|
render() {
|
||||||
var tutorialId = this.props.tutorial._id;
|
var tutorialId = this.props.tutorial._id;
|
||||||
var currentTask = this.props.step;
|
var currentTask = this.props.step;
|
||||||
var status = this.props.status.filter(status => status._id === tutorialId)[0];
|
var status = this.props.status.filter(
|
||||||
var taskIndex = status.tasks.findIndex(task => task._id === currentTask._id);
|
(status) => status._id === tutorialId
|
||||||
|
)[0];
|
||||||
|
var taskIndex = status.tasks.findIndex(
|
||||||
|
(task) => task._id === currentTask._id
|
||||||
|
);
|
||||||
var statusTask = status.tasks[taskIndex];
|
var statusTask = status.tasks[taskIndex];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="assessmentDiv" style={{ width: '100%' }}>
|
<div className="assessmentDiv" style={{ width: "100%" }}>
|
||||||
<Typography variant='h4' style={{ float: 'left', marginBottom: '5px', height: '40px', display: 'table' }}>{currentTask.headline}</Typography>
|
<Typography
|
||||||
<div style={{ float: 'right', height: '40px' }}><WorkspaceFunc assessment /></div>
|
variant="h4"
|
||||||
<Grid container spacing={2} style={{ marginBottom: '5px' }}>
|
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}>
|
<Grid item xs={12} md={6} lg={8}>
|
||||||
<BlocklyWindow
|
<BlocklyWindow
|
||||||
initialXml={statusTask ? statusTask.xml ? statusTask.xml : null : null}
|
initialXml={initialXml}
|
||||||
blockDisabled
|
blockDisabled
|
||||||
blocklyCSS={{ height: '65vH' }}
|
blocklyCSS={{ height: "65vH" }}
|
||||||
/>
|
/>
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={12} md={6} lg={4} style={isWidthDown('sm', this.props.width) ? { height: 'max-content' } : {}}>
|
<Grid
|
||||||
<Card style={{ height: 'calc(50% - 30px)', padding: '10px', marginBottom: '10px' }}>
|
item
|
||||||
<Typography variant='h5'>{Blockly.Msg.tutorials_assessment_task}</Typography>
|
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>
|
<Typography>{currentTask.text}</Typography>
|
||||||
</Card>
|
</Card>
|
||||||
<div style={isWidthDown('sm', this.props.width) ? { height: '500px' } : { height: '50%' }}>
|
<div
|
||||||
|
style={
|
||||||
|
isWidthDown("sm", this.props.width)
|
||||||
|
? { height: "500px" }
|
||||||
|
: { height: "50%" }
|
||||||
|
}
|
||||||
|
>
|
||||||
<CodeViewer />
|
<CodeViewer />
|
||||||
</div>
|
</div>
|
||||||
</Grid>
|
</Grid>
|
||||||
</Grid>
|
</Grid>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Assessment.propTypes = {
|
Assessment.propTypes = {
|
||||||
status: PropTypes.array.isRequired,
|
status: PropTypes.array.isRequired,
|
||||||
change: PropTypes.number.isRequired,
|
change: PropTypes.number.isRequired,
|
||||||
workspaceName: PropTypes.func.isRequired,
|
workspaceName: PropTypes.func.isRequired,
|
||||||
tutorial: PropTypes.object.isRequired
|
tutorial: PropTypes.object.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
const mapStateToProps = state => ({
|
const mapStateToProps = (state) => ({
|
||||||
change: state.tutorial.change,
|
change: state.tutorial.change,
|
||||||
status: state.tutorial.status,
|
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 Hardware from "./Hardware";
|
||||||
import Requirement from './Requirement';
|
import Requirement from "./Requirement";
|
||||||
import BlocklyWindow from '../Blockly/BlocklyWindow';
|
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 Grid from "@material-ui/core/Grid";
|
||||||
|
import Typography from "@material-ui/core/Typography";
|
||||||
|
import ReactMarkdown from "react-markdown";
|
||||||
|
|
||||||
class Instruction extends Component {
|
class Instruction extends Component {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
var step = this.props.step;
|
var step = this.props.step;
|
||||||
var isHardware = step.hardware && step.hardware.length > 0;
|
var isHardware = step.hardware && step.hardware.length > 0;
|
||||||
var areRequirements = step.requirements && step.requirements.length > 0;
|
var areRequirements = step.requirements && step.requirements.length > 0;
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Typography variant='h4' style={{ marginBottom: '5px' }}>{step.headline}</Typography>
|
<Typography variant="h4" style={{ marginBottom: "5px" }}>
|
||||||
<Typography style={isHardware ? {} : { marginBottom: '5px' }}><ReactMarkdown className={'tutorial'} linkTarget={'_blank'} skipHtml={false}>{step.text}</ReactMarkdown></Typography>
|
{step.headline}
|
||||||
{isHardware ?
|
</Typography>
|
||||||
<Hardware picture={step.hardware} /> : null}
|
<Typography style={isHardware ? {} : { marginBottom: "5px" }}>
|
||||||
{areRequirements > 0 ?
|
<ReactMarkdown
|
||||||
<Requirement requirements={step.requirements} /> : null}
|
className={"tutorial"}
|
||||||
{step.media ?
|
linkTarget={"_blank"}
|
||||||
step.media.picture ?
|
skipHtml={false}
|
||||||
<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%' }} />
|
{step.text}
|
||||||
</div>
|
</ReactMarkdown>
|
||||||
: step.media.youtube ?
|
</Typography>
|
||||||
/*16:9; width: 800px; height: width/16*9=450px*/
|
{isHardware ? <Hardware picture={step.hardware} /> : null}
|
||||||
<div style={{ maxWidth: '800px', margin: 'auto' }}>
|
{areRequirements > 0 ? (
|
||||||
<div style={{ position: 'relative', height: 0, paddingBottom: 'calc(100% / 16 * 9)' }}>
|
<Requirement requirements={step.requirements} />
|
||||||
<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 />
|
) : null}
|
||||||
</div>
|
{step.media ? (
|
||||||
</div>
|
step.media.picture ? (
|
||||||
: null
|
<div
|
||||||
: null}
|
style={{
|
||||||
{step.xml ?
|
display: "flex",
|
||||||
<Grid container spacing={2} style={{ marginBottom: '5px' }}>
|
justifyContent: "center",
|
||||||
<Grid item xs={12} style={{display: 'flex', justifyContent: 'center'}}>
|
marginBottom: "5px",
|
||||||
<BlocklyWindow
|
}}
|
||||||
svg
|
>
|
||||||
blockDisabled
|
<img
|
||||||
initialXml={step.xml}
|
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>
|
||||||
</Grid>
|
</Grid>
|
||||||
: null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export default Instruction;
|
export default Instruction;
|
||||||
|
@ -1,76 +1,88 @@
|
|||||||
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 { login } from '../../actions/authActions'
|
import { login } from "../../actions/authActions";
|
||||||
import { clearMessages } from '../../actions/messageActions'
|
import { clearMessages } from "../../actions/messageActions";
|
||||||
|
|
||||||
import { withRouter } from 'react-router-dom';
|
import { withRouter } from "react-router-dom";
|
||||||
|
|
||||||
import Snackbar from '../Snackbar';
|
import Snackbar from "../Snackbar";
|
||||||
import Alert from '../Alert';
|
import Alert from "../Alert";
|
||||||
import Breadcrumbs from '../Breadcrumbs';
|
import Breadcrumbs from "../Breadcrumbs";
|
||||||
|
|
||||||
import Button from '@material-ui/core/Button';
|
import Button from "@material-ui/core/Button";
|
||||||
import IconButton from '@material-ui/core/IconButton';
|
import IconButton from "@material-ui/core/IconButton";
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
|
import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
|
||||||
import TextField from '@material-ui/core/TextField';
|
import TextField from "@material-ui/core/TextField";
|
||||||
import Divider from '@material-ui/core/Divider';
|
import Divider from "@material-ui/core/Divider";
|
||||||
import InputAdornment from '@material-ui/core/InputAdornment';
|
import InputAdornment from "@material-ui/core/InputAdornment";
|
||||||
import CircularProgress from '@material-ui/core/CircularProgress';
|
import CircularProgress from "@material-ui/core/CircularProgress";
|
||||||
import Link from '@material-ui/core/Link';
|
import Link from "@material-ui/core/Link";
|
||||||
import * as Blockly from 'blockly'
|
import * as Blockly from "blockly";
|
||||||
|
|
||||||
export class Login extends Component {
|
export class Login extends Component {
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
redirect: props.location.state ? props.location.state.from.pathname : null,
|
redirect: props.location.state
|
||||||
email: '',
|
? props.location.state.from.pathname
|
||||||
password: '',
|
: null,
|
||||||
|
email: "",
|
||||||
|
password: "",
|
||||||
snackbar: false,
|
snackbar: false,
|
||||||
type: '',
|
type: "",
|
||||||
key: '',
|
key: "",
|
||||||
message: '',
|
message: "",
|
||||||
showPassword: false
|
showPassword: false,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidUpdate(props) {
|
componentDidUpdate(props) {
|
||||||
const { message } = this.props;
|
const { message } = this.props;
|
||||||
if (message !== props.message) {
|
if (message !== props.message) {
|
||||||
if (message.id === 'LOGIN_SUCCESS') {
|
if (message.id === "LOGIN_SUCCESS") {
|
||||||
if (this.state.redirect) {
|
if (this.state.redirect) {
|
||||||
this.props.history.push(this.state.redirect);
|
this.props.history.push(this.state.redirect);
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
this.props.history.goBack();
|
this.props.history.goBack();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Check for login error
|
// Check for login error
|
||||||
else if (message.id === 'LOGIN_FAIL') {
|
else if (message.id === "LOGIN_FAIL") {
|
||||||
this.setState({ email: '', password: '', snackbar: true, key: Date.now(), message: Blockly.Msg.messages_LOGIN_FAIL, type: 'error' });
|
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 });
|
this.setState({ [e.target.name]: e.target.value });
|
||||||
};
|
};
|
||||||
|
|
||||||
onSubmit = e => {
|
onSubmit = (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const { email, password } = this.state;
|
const { email, password } = this.state;
|
||||||
if (email !== '' && password !== '') {
|
if (email !== "" && password !== "") {
|
||||||
// create user object
|
// create user object
|
||||||
const user = {
|
const user = {
|
||||||
email,
|
email,
|
||||||
password
|
password,
|
||||||
};
|
};
|
||||||
this.props.login(user);
|
this.props.login(user);
|
||||||
} else {
|
} 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() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<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>
|
<h1>{Blockly.Msg.login_head}</h1>
|
||||||
<Alert>
|
<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>
|
</Alert>
|
||||||
<Snackbar
|
<Snackbar
|
||||||
open={this.state.snackbar}
|
open={this.state.snackbar}
|
||||||
@ -99,51 +124,83 @@ export class Login extends Component {
|
|||||||
key={this.state.key}
|
key={this.state.key}
|
||||||
/>
|
/>
|
||||||
<TextField
|
<TextField
|
||||||
style={{ marginBottom: '10px' }}
|
style={{ marginBottom: "10px" }}
|
||||||
// variant='outlined'
|
// variant='outlined'
|
||||||
type='text'
|
type="text"
|
||||||
label={Blockly.Msg.labels_username}
|
label={Blockly.Msg.labels_username}
|
||||||
name='email'
|
name="email"
|
||||||
value={this.state.email}
|
value={this.state.email}
|
||||||
onChange={this.onChange}
|
onChange={this.onChange}
|
||||||
fullWidth={true}
|
fullWidth={true}
|
||||||
/>
|
/>
|
||||||
<TextField
|
<TextField
|
||||||
// variant='outlined'
|
// variant='outlined'
|
||||||
type={this.state.showPassword ? 'text' : 'password'}
|
type={this.state.showPassword ? "text" : "password"}
|
||||||
label={Blockly.Msg.labels_password}
|
label={Blockly.Msg.labels_password}
|
||||||
name='password'
|
name="password"
|
||||||
value={this.state.password}
|
value={this.state.password}
|
||||||
InputProps={{
|
InputProps={{
|
||||||
endAdornment:
|
endAdornment: (
|
||||||
<InputAdornment
|
<InputAdornment position="end">
|
||||||
position="end"
|
|
||||||
>
|
|
||||||
<IconButton
|
<IconButton
|
||||||
onClick={this.handleClickShowPassword}
|
onClick={this.handleClickShowPassword}
|
||||||
onMouseDown={this.handleMouseDownPassword}
|
onMouseDown={this.handleMouseDownPassword}
|
||||||
edge="end"
|
edge="end"
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon size='xs' icon={this.state.showPassword ? faEyeSlash : faEye} />
|
<FontAwesomeIcon
|
||||||
|
size="xs"
|
||||||
|
icon={this.state.showPassword ? faEyeSlash : faEye}
|
||||||
|
/>
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</InputAdornment>
|
</InputAdornment>
|
||||||
|
),
|
||||||
}}
|
}}
|
||||||
onChange={this.onChange}
|
onChange={this.onChange}
|
||||||
fullWidth={true}
|
fullWidth={true}
|
||||||
/>
|
/>
|
||||||
<p>
|
<p>
|
||||||
<Button color="primary" variant='contained' onClick={this.onSubmit} style={{ width: '100%' }}>
|
<Button
|
||||||
{this.props.progress ?
|
color="primary"
|
||||||
<div style={{ height: '24.5px' }}><CircularProgress color="inherit" size={20} /></div>
|
variant="contained"
|
||||||
: Blockly.Msg.button_login}
|
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>
|
</Button>
|
||||||
</p>
|
</p>
|
||||||
<p style={{ textAlign: 'center', fontSize: '0.8rem' }}>
|
<p style={{ textAlign: "center", fontSize: "0.8rem" }}>
|
||||||
<Link rel="noreferrer" target="_blank" href={'https://opensensemap.org/'} color="primary">{Blockly.Msg.login_lostpassword}</Link>
|
<Link
|
||||||
|
rel="noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
href={"https://opensensemap.org/"}
|
||||||
|
color="primary"
|
||||||
|
>
|
||||||
|
{Blockly.Msg.login_lostpassword}
|
||||||
|
</Link>
|
||||||
</p>
|
</p>
|
||||||
<Divider variant='fullWidth' />
|
<Divider variant="fullWidth" />
|
||||||
<p style={{ textAlign: 'center', paddingRight: "34px", paddingLeft: "34px" }}>
|
<p
|
||||||
{Blockly.Msg.login_createaccount}<Link rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link>.
|
style={{
|
||||||
|
textAlign: "center",
|
||||||
|
paddingRight: "34px",
|
||||||
|
paddingLeft: "34px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{Blockly.Msg.login_createaccount}
|
||||||
|
<Link
|
||||||
|
rel="noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
href={"https://opensensemap.org/"}
|
||||||
|
>
|
||||||
|
openSenseMap
|
||||||
|
</Link>
|
||||||
|
.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -155,12 +212,14 @@ Login.propTypes = {
|
|||||||
message: PropTypes.object.isRequired,
|
message: PropTypes.object.isRequired,
|
||||||
login: PropTypes.func.isRequired,
|
login: PropTypes.func.isRequired,
|
||||||
clearMessages: PropTypes.func.isRequired,
|
clearMessages: PropTypes.func.isRequired,
|
||||||
progress: PropTypes.bool.isRequired
|
progress: PropTypes.bool.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
const mapStateToProps = state => ({
|
const mapStateToProps = (state) => ({
|
||||||
message: state.message,
|
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