From 65fa627aeb6a30ca934e78d0b4d322284d86b615 Mon Sep 17 00:00:00 2001 From: Mario Pesch Date: Wed, 24 Mar 2021 11:46:05 +0100 Subject: [PATCH 01/10] add dialog before reset workspace fixes #78 --- src/components/Blockly/blocks/loops.js | 12 +- src/components/Blockly/helpers/types.js | 132 --------------------- src/components/Blockly/msg/de/ui.js | 8 ++ src/components/Blockly/msg/en/ui.js | 9 ++ src/components/Workspace/ResetWorkspace.js | 24 +++- 5 files changed, 46 insertions(+), 139 deletions(-) diff --git a/src/components/Blockly/blocks/loops.js b/src/components/Blockly/blocks/loops.js index aab8d32..326dd78 100644 --- a/src/components/Blockly/blocks/loops.js +++ b/src/components/Blockly/blocks/loops.js @@ -16,7 +16,7 @@ Blockly.Blocks['controls_whileUntil'] = { this.setHelpUrl(Blockly.Msg.CONTROLS_WHILEUNTIL_HELPURL); this.setColour(getColour().loops); this.appendValueInput('BOOL') - .setCheck(getCompatibleTypes(Boolean)) + .setCheck(getCompatibleTypes('boolean')) .appendField(new Blockly.FieldDropdown(OPERATORS), 'MODE'); this.appendStatementInput('DO') .appendField(Blockly.Msg.CONTROLS_WHILEUNTIL_INPUT_DO); @@ -53,19 +53,19 @@ Blockly.Blocks['controls_for'] = { { "type": "input_value", "name": "FROM", - "check": getCompatibleTypes(Number), + "check": getCompatibleTypes('int'), "align": "RIGHT" }, { "type": "input_value", "name": "TO", - "check": getCompatibleTypes(Number), + "check": getCompatibleTypes('int'), "align": "RIGHT" }, { "type": "input_value", "name": "BY", - "check": getCompatibleTypes(Number), + "check": getCompatibleTypes('int'), "align": "RIGHT" } ], @@ -104,7 +104,7 @@ Blockly.Blocks['controls_forEach'] = { { "type": "input_value", "name": "LIST", - "check": getCompatibleTypes(Array) + "check": getCompatibleTypes('Array') } ], "previousStatement": null, @@ -197,7 +197,7 @@ Blockly.Blocks['controls_repeat_ext'] = { { "type": "input_value", "name": "TIMES", - "check": getCompatibleTypes(Number), + "check": getCompatibleTypes('int'), } ], "previousStatement": null, diff --git a/src/components/Blockly/helpers/types.js b/src/components/Blockly/helpers/types.js index 7a663d5..c3f9f24 100644 --- a/src/components/Blockly/helpers/types.js +++ b/src/components/Blockly/helpers/types.js @@ -105,135 +105,3 @@ export const getCompatibleTypes = (type) => { }; export const VARIABLE_TYPES = [['SHORT_NUMBER', 'char'], ['NUMBER', 'int'], ['DECIMAL', 'long'], ['TEXT', 'String'], ['CHARACTER', 'char'], ['BOOLEAN', 'boolean'], ['NULL', 'void'], ['UNDEF', 'undefined']]; - -// /** -// * Some Types have circular dependencies on their compatibilities, so add them -// * after declaration. -// */ -// Blockly.Types.NUMBER.addCompatibleTypes([ -// Blockly.Types.BOOLEAN, -// Blockly.Types.SHORT_NUMBER, -// Blockly.Types.LARGE_NUMBER, -// Blockly.Types.DECIMAL]); - -// Blockly.Types.SHORT_NUMBER.addCompatibleTypes([ -// Blockly.Types.BOOLEAN, -// Blockly.Types.NUMBER, -// Blockly.Types.LARGE_NUMBER, -// Blockly.Types.DECIMAL]); - -// Blockly.Types.LARGE_NUMBER.addCompatibleTypes([ -// Blockly.Types.BOOLEAN, -// Blockly.Types.SHORT_NUMBER, -// Blockly.Types.NUMBER, -// Blockly.Types.DECIMAL]); - -// /** -// * Adds another type to the Blockly.Types collection. -// * @param {string} typeId_ Identifiable name of the type. -// * @param {string} typeMsgName_ Name of the member variable from Blockly.Msg -// * object to identify the translateble string.for the Type name. -// * @param {Array} compatibleTypes_ List of types this Type is -// * compatible with. -// */ -// Blockly.Types.addType = function (typeId_, typeMsgName_, compatibleTypes_) { -// // The Id is used as the key from the value pair in the BlocklyTypes object -// var key = typeId_.toUpperCase().replace(/ /g, '_'); -// if (Blockly.Types[key] !== undefined) { -// throw 'The Blockly type ' + key + ' already exists.'; -// } -// Blockly.Types[key] = new Blockly.Type({ -// typeId: typeId_, -// typeName: typeMsgName_, -// compatibleTypes: compatibleTypes_ -// }); -// }; - -// /** -// * Converts the static types dictionary in to a an array with 2-item arrays. -// * This array only contains the valid types, excluding any error or temp types. -// * @return {!Array>} Blockly types in the format described above. -// */ -// Blockly.Types.getValidTypeArray = function () { -// var typesArray = []; -// for (var typeKey in Blockly.Types) { -// if ((typeKey !== 'UNDEF') && (typeKey !== 'CHILD_BLOCK_MISSING') && -// (typeKey !== 'NULL') && (typeKey !== 'ARRAY') && -// (typeof Blockly.Types[typeKey] !== 'function') && -// !(Blockly.Types[typeKey] instanceof RegExp)) { -// typesArray.push([Blockly.Types[typeKey].typeName, typeKey]); -// } -// } -// return typesArray; -// }; - -// /** -// * Navigates through child blocks of the argument block to get this block type. -// * @param {!Blockly.Block} block Block to navigate through children. -// * @return {Blockly.Type} Type of the input block. -// */ -// Blockly.Types.getChildBlockType = function (block) { -// var blockType = null; -// var nextBlock = block; -// // Only checks first input block, so it decides the type. Incoherences amongst -// // multiple inputs dealt at a per-block level with their own block warnings -// while (nextBlock && (nextBlock.getBlockType === undefined) && -// (nextBlock.inputList.length > 0) && -// (nextBlock.inputList[0].connection)) { -// nextBlock = nextBlock.inputList[0].connection.targetBlock(); -// } -// if (nextBlock === block) { -// // Set variable block is empty, so no type yet -// blockType = Blockly.Types.CHILD_BLOCK_MISSING; -// } else if (nextBlock === null) { -// // Null return from targetBlock indicates no block connected -// blockType = Blockly.Types.CHILD_BLOCK_MISSING; -// } else { -// var func = nextBlock.getBlockType; -// if (func) { -// blockType = nextBlock.getBlockType(); -// } else { -// // Most inner block, supposed to define a type, is missing getBlockType() -// blockType = Blockly.Types.NULL; -// } -// } -// return blockType; -// }; - -// /** -// * Regular expressions to identify an integer. -// * @private -// */ -// Blockly.Types.regExpInt_ = new RegExp(/^-?\d+$/); - -// /** -// * Regular expressions to identify a decimal. -// * @private -// */ -// Blockly.Types.regExpFloat_ = new RegExp(/^-?[0-9]*[.][0-9]+$/); - -// /** -// * Uses regular expressions to identify if the input number is an integer or a -// * floating point. -// * @param {string} numberString String of the number to identify. -// * @return {!Blockly.Type} Blockly type. -// */ -// Blockly.Types.identifyNumber = function (numberString) { -// if (Blockly.Types.regExpInt_.test(numberString)) { -// var intValue = parseInt(numberString); -// if (isNaN(intValue)) { -// return Blockly.Types.NULL; -// } -// if (intValue > 32767 || intValue < -32768) { -// return Blockly.Types.LARGE_NUMBER; -// } -// return Blockly.Types.NUMBER; -// } else if (Blockly.Types.regExpFloat_.test(numberString)) { -// return Blockly.Types.DECIMAL; -// } -// return Blockly.Types.NULL; -// }; - - - - diff --git a/src/components/Blockly/msg/de/ui.js b/src/components/Blockly/msg/de/ui.js index 9513304..0e2925e 100644 --- a/src/components/Blockly/msg/de/ui.js +++ b/src/components/Blockly/msg/de/ui.js @@ -64,6 +64,14 @@ export const UI = { messages_GET_TUTORIAL_FAIL: 'Zurück zur Tutorials-Übersicht', messages_LOGIN_FAIL: 'Der Benutzername oder das Passwort ist nicht korrekt.', messages_copy_code: "Code wurde in die Zwischenablage kopiert", + + /** + * Reset Dialog + */ + + resetDialog_headline: "Workspace zurücksetzen?", + resetDialog_text: "Möchtest du wirklich die Workspace zurücksetzen? Hierbei werden alle Blöcke gelöscht!", + /** * Share Dialog */ diff --git a/src/components/Blockly/msg/en/ui.js b/src/components/Blockly/msg/en/ui.js index eb11219..b92922c 100644 --- a/src/components/Blockly/msg/en/ui.js +++ b/src/components/Blockly/msg/en/ui.js @@ -67,6 +67,15 @@ export const UI = { messages_LOGIN_FAIL: 'The username or password is incorrect.', messages_login_error: "Enter both a username and a password.", messages_copy_code: "Copy code to clipboard succesfull", + + + /** + * Reset Dialog + */ + + resetDialog_headline: "Reset workspace?", + resetDialog_text: "Do you really want to reset the workspace? All blocks will be deleted!", + /** * Share Dialog */ diff --git a/src/components/Workspace/ResetWorkspace.js b/src/components/Workspace/ResetWorkspace.js index 37a03e0..ba4161c 100644 --- a/src/components/Workspace/ResetWorkspace.js +++ b/src/components/Workspace/ResetWorkspace.js @@ -16,6 +16,8 @@ import Tooltip from '@material-ui/core/Tooltip'; import { faShare } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import Dialog from '../Dialog'; +import Button from '@material-ui/core/Button'; const styles = (theme) => ({ button: { @@ -39,12 +41,21 @@ class ResetWorkspace extends Component { this.inputRef = React.createRef(); this.state = { snackbar: false, + open: false, type: '', key: '', message: '', }; } + toggleDialog = () => { + this.setState({ open: !this.state}); + } + + openDialog = () => { + this.setState({open: true}); + } + resetWorkspace = () => { const workspace = Blockly.getMainWorkspace(); Blockly.Events.disable(); // https://groups.google.com/forum/#!topic/blockly/m7e3g0TC75Y @@ -69,7 +80,7 @@ class ResetWorkspace extends Component { this.resetWorkspace()} + onClick={() => this.openDialog()} > @@ -81,6 +92,17 @@ class ResetWorkspace extends Component { type={this.state.type} key={this.state.key} /> + { this.toggleDialog(); }} + onClick={() => { this.toggleDialog(); }} + button={Blockly.Msg.button_cancel} + >
+ + +
); }; From 190d676e5be95ba5670779e0fe9c557a916682ad Mon Sep 17 00:00:00 2001 From: Mario Pesch Date: Wed, 24 Mar 2021 15:33:08 +0100 Subject: [PATCH 02/10] fix #58 --- src/components/Blockly/BlocklyWindow.js | 22 ++++++++++++++++++---- src/components/Home.js | 8 +++++--- 2 files changed, 23 insertions(+), 7 deletions(-) diff --git a/src/components/Blockly/BlocklyWindow.js b/src/components/Blockly/BlocklyWindow.js index 0b0cf02..7a807a9 100644 --- a/src/components/Blockly/BlocklyWindow.js +++ b/src/components/Blockly/BlocklyWindow.js @@ -21,9 +21,18 @@ class BlocklyWindow extends Component { } componentDidMount() { + console.log(this.props); const workspace = Blockly.getMainWorkspace(); - this.props.onChangeWorkspace({}); - this.props.clearStats(); + + if (this.props.workspaceXML !== "") { + Blockly.Xml.clearWorkspaceAndLoadFromXml( + Blockly.Xml.textToDom(this.props.workspaceXML), + workspace + ); + } else { + this.props.onChangeWorkspace({}); + this.props.clearStats(); + } workspace.addChangeListener((event) => { this.props.onChangeWorkspace(event); // switch on that a block is displayed disabled or not depending on whether it is correctly connected @@ -38,6 +47,8 @@ class BlocklyWindow extends Component { componentDidUpdate(props) { const workspace = Blockly.getMainWorkspace(); var xml = this.props.initialXml; + console.log(xml) + console.log(this.props.xml) // if svg is true, then the update process is done in the BlocklySvg component if (props.initialXml !== xml && !this.props.svg) { // guarantees that the current xml-code (this.props.initialXml) is rendered @@ -45,6 +56,7 @@ class BlocklyWindow extends Component { if (!xml) xml = initialXml; Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), workspace); } + if (props.language !== this.props.language) { // change language if (!xml) xml = initialXml; @@ -101,12 +113,14 @@ BlocklyWindow.propTypes = { onChangeWorkspace: PropTypes.func.isRequired, clearStats: PropTypes.func.isRequired, renderer: PropTypes.string.isRequired, - language: PropTypes.string.isRequired + language: PropTypes.string.isRequired, + workspaceXML: PropTypes.string.isRequired, }; const mapStateToProps = state => ({ renderer: state.general.renderer, - language: state.general.language + language: state.general.language.Blockly, + workspaceXML: state.workspace.code.xml, }); export default connect(mapStateToProps, { onChangeWorkspace, clearStats })(BlocklyWindow); diff --git a/src/components/Home.js b/src/components/Home.js index d169d24..52ccebe 100644 --- a/src/components/Home.js +++ b/src/components/Home.js @@ -114,7 +114,7 @@ class Home extends Component {
{this.props.project ? < BlocklyWindow blocklyCSS={{ height: '80vH' }} initialXml={this.props.project.xml} /> - : < BlocklyWindow blocklyCSS={{ height: '80vH' }} /> + : < BlocklyWindow blocklyCSS={{ height: '80vH' }}/> }
@@ -141,12 +141,14 @@ Home.propTypes = { clearStats: PropTypes.func.isRequired, workspaceName: PropTypes.func.isRequired, message: PropTypes.object.isRequired, - statistics: PropTypes.bool.isRequired + statistics: PropTypes.bool.isRequired, + }; const mapStateToProps = state => ({ message: state.message, - statistics: state.general.statistics + statistics: state.general.statistics, + }); From d835ffc449058887d5051745af70a5d6dc3db666 Mon Sep 17 00:00:00 2001 From: Mario Pesch Date: Wed, 24 Mar 2021 17:05:21 +0100 Subject: [PATCH 03/10] fix load projects --- src/components/Blockly/BlocklyWindow.js | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/src/components/Blockly/BlocklyWindow.js b/src/components/Blockly/BlocklyWindow.js index 7a807a9..dd930fa 100644 --- a/src/components/Blockly/BlocklyWindow.js +++ b/src/components/Blockly/BlocklyWindow.js @@ -21,17 +21,17 @@ class BlocklyWindow extends Component { } componentDidMount() { - console.log(this.props); const workspace = Blockly.getMainWorkspace(); - - if (this.props.workspaceXML !== "") { - Blockly.Xml.clearWorkspaceAndLoadFromXml( - Blockly.Xml.textToDom(this.props.workspaceXML), - workspace - ); - } else { - this.props.onChangeWorkspace({}); - this.props.clearStats(); + if (!this.props.initialXml) { + if (this.props.workspaceXML !== "") { + Blockly.Xml.clearWorkspaceAndLoadFromXml( + Blockly.Xml.textToDom(this.props.workspaceXML), + workspace + ); + } else { + this.props.onChangeWorkspace({}); + this.props.clearStats(); + } } workspace.addChangeListener((event) => { this.props.onChangeWorkspace(event); @@ -47,8 +47,6 @@ class BlocklyWindow extends Component { componentDidUpdate(props) { const workspace = Blockly.getMainWorkspace(); var xml = this.props.initialXml; - console.log(xml) - console.log(this.props.xml) // if svg is true, then the update process is done in the BlocklySvg component if (props.initialXml !== xml && !this.props.svg) { // guarantees that the current xml-code (this.props.initialXml) is rendered From 6a6b2e2f584114796dc8efee92271187736b9edd Mon Sep 17 00:00:00 2001 From: Mario Pesch Date: Wed, 24 Mar 2021 17:07:23 +0100 Subject: [PATCH 04/10] get rid of console.log --- src/actions/tutorialActions.js | 3 --- src/actions/workspaceActions.js | 1 - src/components/Blockly/BlocklyWindow.js | 1 - src/components/Blockly/blocks/procedures.js | 4 +--- src/components/Blockly/blocks/sensebox-osem.js | 2 -- src/components/Blockly/generator/procedures.js | 1 - src/components/Blockly/generator/sensebox-led.js | 1 - src/components/Content.js | 4 ---- src/components/Project/Project.js | 2 -- src/components/Tutorial/Builder/Badge.js | 1 - src/components/Tutorial/Tutorial.js | 1 - src/components/User/Login.js | 1 - src/components/Workspace/Compile.js | 1 - src/components/Workspace/SaveProject.js | 1 - 14 files changed, 1 insertion(+), 23 deletions(-) diff --git a/src/actions/tutorialActions.js b/src/actions/tutorialActions.js index 7a9801a..0254205 100644 --- a/src/actions/tutorialActions.js +++ b/src/actions/tutorialActions.js @@ -38,13 +38,11 @@ export const getTutorials = () => (dispatch, getState) => { axios.get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial`) .then(res => { var tutorials = res.data.tutorials; - console.log(tutorials); existingTutorials(tutorials, getState().tutorial.status).then(status => { dispatch({ type: TUTORIAL_SUCCESS, payload: status }); - console.log('zwei'); dispatch(updateStatus(status)); dispatch({ type: GET_TUTORIALS, @@ -167,7 +165,6 @@ export const tutorialCheck = (status, step) => (dispatch, getState) => { type: status === 'success' ? TUTORIAL_SUCCESS : TUTORIAL_ERROR, payload: tutorialsStatus }); - console.log('drei'); dispatch(updateStatus(tutorialsStatus)); dispatch(tutorialChange()); dispatch(returnSuccess('', '', 'TUTORIAL_CHECK_SUCCESS')); diff --git a/src/actions/workspaceActions.js b/src/actions/workspaceActions.js index 60cba9a..f16da0a 100644 --- a/src/actions/workspaceActions.js +++ b/src/actions/workspaceActions.js @@ -17,7 +17,6 @@ export const onChangeCode = () => (dispatch, getState) => { var xmlDom = Blockly.Xml.workspaceToDom(workspace); code.xml = Blockly.Xml.domToPrettyText(xmlDom); var selectedBlock = Blockly.selected - console.log(selectedBlock) if (selectedBlock !== null) { code.helpurl = selectedBlock.helpUrl code.tooltip = selectedBlock.tooltip diff --git a/src/components/Blockly/BlocklyWindow.js b/src/components/Blockly/BlocklyWindow.js index dd930fa..efd8bf7 100644 --- a/src/components/Blockly/BlocklyWindow.js +++ b/src/components/Blockly/BlocklyWindow.js @@ -61,7 +61,6 @@ class BlocklyWindow extends Component { var xmlDom = Blockly.Xml.textToDom(xml); Blockly.Xml.clearWorkspaceAndLoadFromXml(xmlDom, workspace); // var toolbox = workspace.getToolbox(); - // console.log(toolbox); // workspace.updateToolbox(toolbox.toolboxDef_); } Blockly.svgResize(workspace); diff --git a/src/components/Blockly/blocks/procedures.js b/src/components/Blockly/blocks/procedures.js index c334f8f..0b2f9df 100644 --- a/src/components/Blockly/blocks/procedures.js +++ b/src/components/Blockly/blocks/procedures.js @@ -1148,9 +1148,7 @@ Blockly.Blocks['procedures_callnoreturn'] = { // This should only be possible programatically and may indicate a problem // with event grouping. If you see this message please investigate. If the // use ends up being valid we may need to reorder events in the undo stack. - console.log( - 'Saw an existing group while responding to a definition change' - ); + } Blockly.Events.setGroup(event.group); if (event.newValue) { diff --git a/src/components/Blockly/blocks/sensebox-osem.js b/src/components/Blockly/blocks/sensebox-osem.js index d3e54a5..a572e82 100644 --- a/src/components/Blockly/blocks/sensebox-osem.js +++ b/src/components/Blockly/blocks/sensebox-osem.js @@ -73,7 +73,6 @@ Blockly.Blocks['sensebox_osem_connection'] = { * Blockly.Blocks['controls_flow_statements'].LOOP_TYPES.push('custom_loop'); */ selectedBox = this.getFieldValue('BoxID'); - console.log(selectedBox) if (selectedBox !== '' && boxes) { var accessToken = boxes.find(element => element._id === selectedBox).access_token if (accessToken !== undefined) { @@ -160,7 +159,6 @@ Blockly.Blocks['sensebox_send_to_osem'] = { for (var i = 0; i < box.sensors.length; i++) { dropdown.push([box.sensors[i].title, box.sensors[i]._id]) } - console.log(dropdown) } if (dropdown.length > 1) { var options = dropdown.slice(1) diff --git a/src/components/Blockly/generator/procedures.js b/src/components/Blockly/generator/procedures.js index 7e07532..595dc66 100644 --- a/src/components/Blockly/generator/procedures.js +++ b/src/components/Blockly/generator/procedures.js @@ -68,7 +68,6 @@ Blockly.Arduino['procedures_defreturn'] = function (block) { }; function translateType(type) { - console.log(type); switch (type) { case 'int': diff --git a/src/components/Blockly/generator/sensebox-led.js b/src/components/Blockly/generator/sensebox-led.js index c239293..e5ee99c 100644 --- a/src/components/Blockly/generator/sensebox-led.js +++ b/src/components/Blockly/generator/sensebox-led.js @@ -33,7 +33,6 @@ Blockly.Arduino.sensebox_ws2818_led = function () { var dropdown_pin = this.getFieldValue('Port'); var position = Blockly.Arduino.valueToCode(this, 'POSITION', Blockly.Arduino.ORDER_ATOMIC) || '0'; var color = Blockly.Arduino.valueToCode(this, 'COLOR', Blockly.Arduino.ORDER_ATOMIC) || '0' - console.log(color) var code = `rgb_led_${dropdown_pin}.setPixelColor(${position},rgb_led_${dropdown_pin}.Color(${color}));\nrgb_led_${dropdown_pin}.show();\n`; return code; }; diff --git a/src/components/Content.js b/src/components/Content.js index f6595ee..f4b7bef 100644 --- a/src/components/Content.js +++ b/src/components/Content.js @@ -15,7 +15,6 @@ class Content extends Component { componentDidMount() { if (this.props.language === 'de_DE') { - console.log("change Language") Blockly.setLocale(De); } else if (this.props.language === 'en_US') { Blockly.setLocale(En); @@ -23,13 +22,10 @@ class Content extends Component { } componentDidUpdate(props) { - console.log(this.props.language) if (props.language !== this.props.language) { if (this.props.language === 'de_DE') { - console.log("change Language") Blockly.setLocale(De); } else if (this.props.language === 'en_US') { - console.log("change Language") Blockly.setLocale(En); } } diff --git a/src/components/Project/Project.js b/src/components/Project/Project.js index fa2353c..df0253d 100644 --- a/src/components/Project/Project.js +++ b/src/components/Project/Project.js @@ -56,8 +56,6 @@ class Project extends Component { getProject = () => { var id = this.props.location.pathname.replace(/\/[a-z]{1,}\//, ''); var param = this.props.location.pathname.replace(`/${id}`, '').replace('/', ''); - console.log('param', param); - console.log(id); this.props.getProject(param, id); } diff --git a/src/components/Tutorial/Builder/Badge.js b/src/components/Tutorial/Builder/Badge.js index 88386a3..4156864 100644 --- a/src/components/Tutorial/Builder/Badge.js +++ b/src/components/Tutorial/Builder/Badge.js @@ -60,7 +60,6 @@ class Badge extends Component { this.setState({badges: res.data.badges, badgeName: this.props.badge ? res.data.badges.filter(badge => badge._id === this.props.badge)[0].name : '' }); }) .catch(err => { - console.log(err); }); }; diff --git a/src/components/Tutorial/Tutorial.js b/src/components/Tutorial/Tutorial.js index f3f6195..cf2ef4b 100644 --- a/src/components/Tutorial/Tutorial.js +++ b/src/components/Tutorial/Tutorial.js @@ -28,7 +28,6 @@ class Tutorial extends Component { // retrieve tutorial only if a potential user is loaded - authentication // is finished (success or failed) if(!this.props.progress){ - console.log(this.props); this.props.getTutorial(this.props.match.params.tutorialId); } } diff --git a/src/components/User/Login.js b/src/components/User/Login.js index e7e5d12..d667bf1 100644 --- a/src/components/User/Login.js +++ b/src/components/User/Login.js @@ -38,7 +38,6 @@ export class Login extends Component { } componentDidUpdate(props) { - console.log(this.state.redirect); const { message } = this.props; if (message !== props.message) { if (message.id === 'LOGIN_SUCCESS') { diff --git a/src/components/Workspace/Compile.js b/src/components/Workspace/Compile.js index b4280f4..e691971 100644 --- a/src/components/Workspace/Compile.js +++ b/src/components/Workspace/Compile.js @@ -80,7 +80,6 @@ class Compile extends Component { }) .then(response => response.json()) .then(data => { - console.log(data); this.setState({ id: data.data.id }, () => { this.createFileName(); }); diff --git a/src/components/Workspace/SaveProject.js b/src/components/Workspace/SaveProject.js index 733ff76..3f01ff8 100644 --- a/src/components/Workspace/SaveProject.js +++ b/src/components/Workspace/SaveProject.js @@ -127,7 +127,6 @@ class SaveProject extends Component { } render() { - console.log(1, this.props); return (
From 687ac321669874e7d631b4cc105904a40a4bfd1c Mon Sep 17 00:00:00 2001 From: Mario Pesch Date: Thu, 25 Mar 2021 10:38:32 +0100 Subject: [PATCH 05/10] add ide output fixes #71 --- src/components/Blockly/msg/de/ui.js | 411 ++++++++++---------- src/components/Blockly/msg/en/ui.js | 423 +++++++++++---------- src/components/Project/ProjectHome.js | 214 +++++++---- src/components/Tutorial/StepperVertical.js | 2 +- src/components/Workspace/Compile.js | 237 ++++++++---- 5 files changed, 748 insertions(+), 539 deletions(-) diff --git a/src/components/Blockly/msg/de/ui.js b/src/components/Blockly/msg/de/ui.js index 0e2925e..06b9f76 100644 --- a/src/components/Blockly/msg/de/ui.js +++ b/src/components/Blockly/msg/de/ui.js @@ -1,232 +1,255 @@ - export const UI = { - /** - * Toolbox - */ - toolbox_sensors: "Sensoren", - toolbox_logic: "Logik", - toolbox_loops: "Schleifen", - toolbox_math: "Mathematik", - toolbox_io: "Eingang/Ausgang", - toolbox_time: "Zeit", - toolbox_functions: "Funktionen", - toolbox_variables: "Variablen", + /** + * Toolbox + */ + toolbox_sensors: "Sensoren", + toolbox_logic: "Logik", + toolbox_loops: "Schleifen", + toolbox_math: "Mathematik", + toolbox_io: "Eingang/Ausgang", + toolbox_time: "Zeit", + toolbox_functions: "Funktionen", + toolbox_variables: "Variablen", - /** - * Tooltips - * - */ + /** + * Tooltips + * + */ - tooltip_compile_code: "Code kompilieren", - tooltip_save_blocks: "Blöcke speichern", - tooltip_open_blocks: "Blöcke öffnen", - tooltip_screenshot: "Screenshot erstellen", - tooltip_clear_workspace: "Workspace zurücksetzen", - tooltip_share_blocks: "Blöcke teilen", - tooltip_show_code: "Code anzeigen", - tooltip_hide_code: "Code ausblenden", - tooltip_delete_project: "Projekt löschen", - tooltip_project_name: "Name des Projektes", - tooltip_download_project: "Projekt herunterladen", - tooltip_open_project: "Projekt öffnen", - tooltip_update_project: "Projekt aktualisieren", - tooltip_save_project: "Projekt speichern", - tooltip_create_project: "Projekt erstellen", - tooltip_share_project: "Projekt teilen", - tooltip_reset_workspace: "Workspace zurücksetzen", - tooltip_copy_link: "Link kopieren", - tooltip_trashcan_hide: 'gelöschte Blöcke ausblenden', - tooltip_trashcan_delete: 'Blöcke endgültig löschen', - tooltip_project_title: "Titel des Projektes", - tooltip_check_solution: "Lösung kontrollieren", - tooltip_copy_code: "Code in die Zwischenablage kopieren", + tooltip_compile_code: "Code kompilieren", + tooltip_save_blocks: "Blöcke speichern", + tooltip_open_blocks: "Blöcke öffnen", + tooltip_screenshot: "Screenshot erstellen", + tooltip_clear_workspace: "Workspace zurücksetzen", + tooltip_share_blocks: "Blöcke teilen", + tooltip_show_code: "Code anzeigen", + tooltip_hide_code: "Code ausblenden", + tooltip_delete_project: "Projekt löschen", + tooltip_project_name: "Name des Projektes", + tooltip_download_project: "Projekt herunterladen", + tooltip_open_project: "Projekt öffnen", + tooltip_update_project: "Projekt aktualisieren", + tooltip_save_project: "Projekt speichern", + tooltip_create_project: "Projekt erstellen", + tooltip_share_project: "Projekt teilen", + tooltip_reset_workspace: "Workspace zurücksetzen", + tooltip_copy_link: "Link kopieren", + tooltip_trashcan_hide: "gelöschte Blöcke ausblenden", + tooltip_trashcan_delete: "Blöcke endgültig löschen", + tooltip_project_title: "Titel des Projektes", + tooltip_check_solution: "Lösung kontrollieren", + tooltip_copy_code: "Code in die Zwischenablage kopieren", - /** - * Messages - * - */ + /** + * Messages + * + */ - messages_delete_project_failed: "Fehler beim Löschen des Projektes. Versuche es noch einmal.", - messages_reset_workspace_success: "Das Projekt wurde erfolgreich zurückgesetzt", - messages_PROJECT_UPDATE_SUCCESS: "Das Projekt wurde erfolgreich aktualisiert.", - messages_GALLERY_UPDATE_SUCCESS: "Das Galerie-Projekt wurde erfolgreich aktualisiert.", - messages_PROJECT_UPDATE_FAIL: "Fehler beim Aktualisieren des Projektes. Versuche es noch einmal.", - messages_GALLERY_UPDATE_FAIL: "Fehler beim Aktualisieren des Galerie-Projektes. Versuche es noch einmal.", - messages_gallery_save_fail_1: "Fehler beim Speichern des ", - messages_gallery_save_fail_2: "Projektes. Versuche es noch einmal.", - messages_SHARE_SUCCESS: 'Programm teilen', - messages_SHARE_FAIL: "Fehler beim Erstellen eines Links zum Teilen deines Programmes. Versuche es noch einmal.", - messages_copylink_success: 'Link erfolgreich in Zwischenablage gespeichert.', - messages_rename_success_01: 'Das Projekt wurde erfolgreich in ', - messages_rename_success_02: 'umbenannt.', - messages_newblockly_head: "Willkommen zur neuen Version Blockly für die senseBox", - messages_newblockly_text: "Die neue Blockly-Version befindet sich derzeit in der Testphase. Wenn Sie einen Fehler finden, melden Sie diesen bitte in unserem [Forum](https://forum.sensebox.de/t/neue-blockly-version-beta-test-und-feedback/1176). Eine Übersicht über alle neuen Funktionen finden Sie [hier](/news)", - messages_GET_TUTORIAL_FAIL: 'Zurück zur Tutorials-Übersicht', - messages_LOGIN_FAIL: 'Der Benutzername oder das Passwort ist nicht korrekt.', - messages_copy_code: "Code wurde in die Zwischenablage kopiert", - - /** - * Reset Dialog - */ - - resetDialog_headline: "Workspace zurücksetzen?", - resetDialog_text: "Möchtest du wirklich die Workspace zurücksetzen? Hierbei werden alle Blöcke gelöscht!", - - /** - * Share Dialog - */ + messages_delete_project_failed: + "Fehler beim Löschen des Projektes. Versuche es noch einmal.", + messages_reset_workspace_success: + "Das Projekt wurde erfolgreich zurückgesetzt", + messages_PROJECT_UPDATE_SUCCESS: + "Das Projekt wurde erfolgreich aktualisiert.", + messages_GALLERY_UPDATE_SUCCESS: + "Das Galerie-Projekt wurde erfolgreich aktualisiert.", + messages_PROJECT_UPDATE_FAIL: + "Fehler beim Aktualisieren des Projektes. Versuche es noch einmal.", + messages_GALLERY_UPDATE_FAIL: + "Fehler beim Aktualisieren des Galerie-Projektes. Versuche es noch einmal.", + messages_gallery_save_fail_1: "Fehler beim Speichern des ", + messages_gallery_save_fail_2: "Projektes. Versuche es noch einmal.", + messages_SHARE_SUCCESS: "Programm teilen", + messages_SHARE_FAIL: + "Fehler beim Erstellen eines Links zum Teilen deines Programmes. Versuche es noch einmal.", + messages_copylink_success: "Link erfolgreich in Zwischenablage gespeichert.", + messages_rename_success_01: "Das Projekt wurde erfolgreich in ", + messages_rename_success_02: "umbenannt.", + messages_newblockly_head: + "Willkommen zur neuen Version Blockly für die senseBox", + messages_newblockly_text: + "Die neue Blockly-Version befindet sich derzeit in der Testphase. Wenn Sie einen Fehler finden, melden Sie diesen bitte in unserem [Forum](https://forum.sensebox.de/t/neue-blockly-version-beta-test-und-feedback/1176). Eine Übersicht über alle neuen Funktionen finden Sie [hier](/news)", + messages_GET_TUTORIAL_FAIL: "Zurück zur Tutorials-Übersicht", + messages_LOGIN_FAIL: "Der Benutzername oder das Passwort ist nicht korrekt.", + messages_copy_code: "Code wurde in die Zwischenablage kopiert", - sharedialog_headline: "Dein Link wurde erstellt.", - sharedialog_text: "Über den folgenden Link kannst du dein Programm teilen.", + /** + * Reset Dialog + */ - /** - * Project rename Dialog - */ + resetDialog_headline: "Workspace zurücksetzen?", + resetDialog_text: + "Möchtest du wirklich die Workspace zurücksetzen? Hierbei werden alle Blöcke gelöscht!", - renamedialog_headline: "Projekt benennen", - renamedialog_text: "Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf 'Bestätigen'.", + /** + * Share Dialog + */ - /** - * Compile Dialog - * - */ + sharedialog_headline: "Dein Link wurde erstellt.", + sharedialog_text: "Über den folgenden Link kannst du dein Programm teilen.", - compiledialog_headline: "Fehler", - compiledialog_text: "Beim kompilieren ist ein Fehler aufgetreten. Überprüfe deine Blöcke und versuche es erneut", + /** + * Project rename Dialog + */ - /** - * Buttons - * - */ + renamedialog_headline: "Projekt benennen", + renamedialog_text: + "Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf 'Bestätigen'.", - button_cancel: "Abbrechen", - button_close: "Schließen", - button_accept: "Bestätigen", - button_compile: "Kompilieren", - button_create_variableCreate: "Erstelle Variable", - button_back: "Zurück", - button_next: "nächster Schritt", - button_tutorial_overview: "Tutorial Übersicht", - button_login: "Anmelden", + /** + * Compile Dialog + * + */ - /** - * - */ + compiledialog_headline: "Fehler", + compiledialog_text: + "Beim kompilieren ist ein Fehler aufgetreten. Überprüfe deine Blöcke und versuche es erneut", - filename: "Dateiname", - projectname: "Projektname", + /** + * Buttons + * + */ - /** - * Settings - */ - settings_head: "Einstellungen", - settings_language: "Sprache", - settings_language_text: "Auswahl der Sprache gilt für die gesamte Anwendung. Es kann zwischen Deutsch und Englisch unterschieden werden.", - settings_language_de: "Deutsch", - settings_language_en: "Englisch", - settings_renderer: "Renderer", - settings_renderer_text: "Der eingestellte Renderer bestimmt das Aussehen der Blöcke. Es kann zwischen 'Geras' und 'Zelos' unterschieden werden, wobei 'Zelos' insbesondere für eine Touch-Anwendung geeignet ist.", - settings_statistics: "Statistiken", - settings_statistics_text: "Die Anzeige von Statistiken zur Nutzung der Blöcke oberhalb der Arbeitsfläche kann ein- oder ausgeblendet werden.", - settings_statistics_on: "An", - settings_statistics_off: "Aus", + button_cancel: "Abbrechen", + button_close: "Schließen", + button_accept: "Bestätigen", + button_compile: "Kompilieren", + button_create_variableCreate: "Erstelle Variable", + button_back: "Zurück", + button_next: "nächster Schritt", + button_tutorial_overview: "Tutorial Übersicht", + button_login: "Anmelden", - /** - * 404 - */ + /** + * + */ - notfound_head: "Die von Ihnen angeforderte Seite kann nicht gefunden werden.", - notfound_text: "Die gesuchte Seite wurde möglicherweise entfernt, ihr Name wurde geändert oder sie ist vorübergehend nicht verfügbar.", + filename: "Dateiname", + projectname: "Projektname", + /** + * Settings + */ + settings_head: "Einstellungen", + settings_language: "Sprache", + settings_language_text: + "Auswahl der Sprache gilt für die gesamte Anwendung. Es kann zwischen Deutsch und Englisch unterschieden werden.", + settings_language_de: "Deutsch", + settings_language_en: "Englisch", + settings_renderer: "Renderer", + settings_renderer_text: + "Der eingestellte Renderer bestimmt das Aussehen der Blöcke. Es kann zwischen 'Geras' und 'Zelos' unterschieden werden, wobei 'Zelos' insbesondere für eine Touch-Anwendung geeignet ist.", + settings_statistics: "Statistiken", + settings_statistics_text: + "Die Anzeige von Statistiken zur Nutzung der Blöcke oberhalb der Arbeitsfläche kann ein- oder ausgeblendet werden.", + settings_statistics_on: "An", + settings_statistics_off: "Aus", - /** - * Labels - */ + /** + * 404 + */ - labels_donotshowagain: 'Dialog nicht mehr anzeigen', - labels_here: "hier", - labels_username: 'E-Mail oder Nutzername', - labels_password: "Passwort", + notfound_head: "Die von Ihnen angeforderte Seite kann nicht gefunden werden.", + notfound_text: + "Die gesuchte Seite wurde möglicherweise entfernt, ihr Name wurde geändert oder sie ist vorübergehend nicht verfügbar.", - /** - * Badges - */ + /** + * Labels + */ - badges_explaination: "Eine Übersicht über alle erhaltenen Badges im Kontext Blockly for senseBox findest du ", - badges_ASSIGNE_BADGE_SUCCESS_01: "Herzlichen Glückwunsch! Du hast den Badge ", - badges_ASSIGNE_BADGE_SUCCESS_02: " erhalten.", - /** - * Tutorials - */ + labels_donotshowagain: "Dialog nicht mehr anzeigen", + labels_here: "hier", + labels_username: "E-Mail oder Nutzername", + labels_password: "Passwort", - tutorials_assessment_task: "Aufgabe", - tutorials_hardware_head: "Für die Umsetzung benötigst du folgende Hardware:", - tutorials_hardware_moreInformation: "Weitere Informationen zur Hardware-Komponente findest du", - tutorials_hardware_here: "hier", - tutorials_requirements: "Bevor du mit diesem Tutorial fortfährst solltest du folgende Tutorials erfolgreich abgeschlossen haben:", + /** + * Badges + */ + badges_explaination: + "Eine Übersicht über alle erhaltenen Badges im Kontext Blockly for senseBox findest du ", + badges_ASSIGNE_BADGE_SUCCESS_01: "Herzlichen Glückwunsch! Du hast den Badge ", + badges_ASSIGNE_BADGE_SUCCESS_02: " erhalten.", + /** + * Tutorials + */ - /** - * Tutorial Builder - */ + tutorials_assessment_task: "Aufgabe", + tutorials_hardware_head: "Für die Umsetzung benötigst du folgende Hardware:", + tutorials_hardware_moreInformation: + "Weitere Informationen zur Hardware-Komponente findest du", + tutorials_hardware_here: "hier", + tutorials_requirements: + "Bevor du mit diesem Tutorial fortfährst solltest du folgende Tutorials erfolgreich abgeschlossen haben:", - builder_solution: "Lösung", - builder_solution_submit: "Lösung einreichen", - builder_example_submit: "Beispiel einreichen", - builder_comment: "Anmerkung: Man kann den initialen Setup()- bzw. Endlosschleifen()-Block löschen. Zusätzlich ist es möglich u.a. nur einen beliebigen Block auszuwählen, ohne dass dieser als deaktiviert dargestellt wird.", - builder_hardware_order: "Beachte, dass die Reihenfolge des Auswählens maßgebend ist.", - builder_hardware_helper: "Wähle mindestens eine Hardware-Komponente aus.", - builder_requirements_head: "Voraussetzungen", - builder_requirements_order: "Beachte, dass die Reihenfolge des Anhakens maßgebend ist.", + /** + * Tutorial Builder + */ - /** - * Login - */ + builder_solution: "Lösung", + builder_solution_submit: "Lösung einreichen", + builder_example_submit: "Beispiel einreichen", + builder_comment: + "Anmerkung: Man kann den initialen Setup()- bzw. Endlosschleifen()-Block löschen. Zusätzlich ist es möglich u.a. nur einen beliebigen Block auszuwählen, ohne dass dieser als deaktiviert dargestellt wird.", + builder_hardware_order: + "Beachte, dass die Reihenfolge des Auswählens maßgebend ist.", + builder_hardware_helper: "Wähle mindestens eine Hardware-Komponente aus.", + builder_requirements_head: "Voraussetzungen", + builder_requirements_order: + "Beachte, dass die Reihenfolge des Anhakens maßgebend ist.", + /** + * Login + */ - login_head: "Anmelden", - login_osem_account_01: "Du benötigst einen ", - login_osem_account_02: "Account um dich einzuloggen", - login_lostpassword: "Du hast dein Passwort vergessen?", - login_createaccount: "Falls du noch keinen Account hast erstellen einen auf ", - /** - * Navbar - */ + login_head: "Anmelden", + login_osem_account_01: "Du benötigst einen ", + login_osem_account_02: "Account um dich einzuloggen", + login_lostpassword: "Du hast dein Passwort vergessen?", + login_createaccount: "Falls du noch keinen Account hast erstellen einen auf ", + /** + * Navbar + */ - navbar_tutorials: "Tutorials", - navbar_tutorialbuilder: "Tutorial erstellen", - navbar_gallery: "Gallerie", - navbar_projects: "Projekte", + navbar_tutorials: "Tutorials", + navbar_tutorialbuilder: "Tutorial erstellen", + navbar_gallery: "Gallerie", + navbar_projects: "Projekte", - navbar_menu: "Menü", - navbar_login: "Einloggen", - navbar_mybadges: "myBadges", - navbar_account: "Konto", - navbar_logout: "Abmelden", - navbar_settings: "Einstellungen", + navbar_menu: "Menü", + navbar_login: "Einloggen", + navbar_mybadges: "myBadges", + navbar_account: "Konto", + navbar_logout: "Abmelden", + navbar_settings: "Einstellungen", - /** - * Codeviewer - */ + /** + * Codeviewer + */ - codeviewer_arduino: "Arduino Quellcode", - codeviewer_xml: "XML Blöcke", + codeviewer_arduino: "Arduino Quellcode", + codeviewer_xml: "XML Blöcke", + /** + * Overlay + */ + compile_overlay_head: "Dein Programm wird nun kompiliert und heruntergeladen", + compile_overlay_text: "Kopiere es anschließend auf deine senseBox MCU", + compile_overlay_help: "Benötigst du mehr Hilfe? Dann schaue hier: ", - /** - * Overlay - */ + /** + * Tooltip Viewer + */ - compile_overlay_head: "Dein Programm wird nun kompiliert und heruntergeladen", - compile_overlay_text: "Kopiere es anschließend auf deine senseBox MCU", - compile_overlay_help: "Benötigst du mehr Hilfe? Dann schaue hier: ", + tooltip_viewer: "Hilfe", + tooltip_moreInformation: "Mehr Informationen findest du ", + tooltip_hint: "Wähle einen Block aus um dir die Hilfe anzeigen zu lassen", - /** - * Tooltip Viewer - */ - - tooltip_viewer: "Hilfe", - tooltip_moreInformation: "Mehr Informationen findest du ", - tooltip_hint: "Wähle einen Block aus um dir die Hilfe anzeigen zu lassen", -} + /** + * IDEDrawer + */ + drawer_ideerror_head: "Hoppla da ist was schief gegangen.", + drawer_ideerror_text: + "Beim kompilieren ist ein Fehler aufgetreten, überprüfe deine Blöcke.", +}; diff --git a/src/components/Blockly/msg/en/ui.js b/src/components/Blockly/msg/en/ui.js index b92922c..3428980 100644 --- a/src/components/Blockly/msg/en/ui.js +++ b/src/components/Blockly/msg/en/ui.js @@ -1,244 +1,251 @@ export const UI = { + /** + * Toolbox + */ + toolbox_sensors: "Sensors", + toolbox_logic: "Logic", + toolbox_loops: "Loops", + toolbox_math: "Math", + toolbox_io: "Input/Output", + toolbox_time: "Time", + toolbox_functions: "Functions", + toolbox_variables: "Variables", + /** + * Tooltips + * + */ + tooltip_compile_code: "Compile code", + tooltip_save_blocks: "Save blocks", + tooltip_open_blocks: "Open blocks", + tooltip_screenshot: "Download screenshot", + tooltip_clear_workspace: "Reset workspace", + tooltip_share_blocks: "Share blocks", + tooltip_show_code: "Show code", + tooltip_hide_code: "Hide code", + tooltip_delete_project: "Delete project", + tooltip_project_name: "Project name", + tooltip_download_project: "Download project", + tooltip_open_project: "Open project", + tooltip_update_project: "Update project", + tooltip_save_project: "Save project", + tooltip_create_project: "Create project", + tooltip_share_project: "Share project", + tooltip_reset_workspace: "Reset workspace", + tooltip_copy_link: "Cooy link", + tooltip_trashcan_hide: "hide deleted blocks", + tooltip_trashcan_delete: "empty trashcan", + tooltip_project_title: "Project title", + tooltip_check_solution: "Check solution", + tooltip_copy_code: "Copy Code to clipboard", - /** - * Toolbox - */ - toolbox_sensors: "Sensors", - toolbox_logic: "Logic", - toolbox_loops: "Loops", - toolbox_math: "Math", - toolbox_io: "Input/Output", - toolbox_time: "Time", - toolbox_functions: "Functions", - toolbox_variables: "Variables", + /** + * Messages + * + */ - /** - * Tooltips - * - */ + messages_delete_project_failed: "Error deleting the project. Try again.", + messages_reset_workspace_success: "The project has been successfully reset.", + messages_PROJECT_UPDATE_SUCCESS: "The project was successfully updated.", + messages_GALLERY_UPDATE_SUCCESS: + "The gallery project was successfully updated.", + messages_PROJECT_UPDATE_FAIL: "Error updating the project. Try again.", + messages_GALLERY_UPDATE_FAIL: + "Error updating the gallery project. Try again.", + messages_gallery_save_fail_1: "Error saving the ", + messages_gallery_save_fail_2: "Project. Try again.", + messages_SHARE_SUCCESS: "Share program", + messages_SHARE_FAIL: + "Error creating a link to share your program. Try again.", + messages_copylink_success: "Link successfully saved to clipboard.", + messages_rename_success_01: "The project was successfully saved to ", + messages_rename_success_02: "renamed.", + messages_newblockly_head: + "Welcome to the new version Blockly for the senseBox", + messages_newblockly_text: + "The new Blockly version is currently in testing. If you find any errors please report them in our [forum](https://forum.sensebox.de/t/neue-blockly-version-beta-test-und-feedback/1176). You can find an overview of all new features [here](/news)", + messages_GET_TUTORIAL_FAIL: "Back to tutorials overview", + messages_LOGIN_FAIL: "The username or password is incorrect.", + messages_login_error: "Enter both a username and a password.", + messages_copy_code: "Copy code to clipboard succesfull", - tooltip_compile_code: "Compile code", - tooltip_save_blocks: "Save blocks", - tooltip_open_blocks: "Open blocks", - tooltip_screenshot: "Download screenshot", - tooltip_clear_workspace: "Reset workspace", - tooltip_share_blocks: "Share blocks", - tooltip_show_code: "Show code", - tooltip_hide_code: "Hide code", - tooltip_delete_project: "Delete project", - tooltip_project_name: "Project name", - tooltip_download_project: "Download project", - tooltip_open_project: "Open project", - tooltip_update_project: "Update project", - tooltip_save_project: "Save project", - tooltip_create_project: "Create project", - tooltip_share_project: "Share project", - tooltip_reset_workspace: "Reset workspace", - tooltip_copy_link: "Cooy link", - tooltip_trashcan_hide: "hide deleted blocks", - tooltip_trashcan_delete: "empty trashcan", - tooltip_project_title: "Project title", - tooltip_check_solution: "Check solution", - tooltip_copy_code: "Copy Code to clipboard", + /** + * Reset Dialog + */ - /** - * Messages - * - */ + resetDialog_headline: "Reset workspace?", + resetDialog_text: + "Do you really want to reset the workspace? All blocks will be deleted!", - messages_delete_project_failed: "Error deleting the project. Try again.", - messages_reset_workspace_success: "The project has been successfully reset.", - messages_PROJECT_UPDATE_SUCCESS: "The project was successfully updated.", - messages_GALLERY_UPDATE_SUCCESS: "The gallery project was successfully updated.", - messages_PROJECT_UPDATE_FAIL: "Error updating the project. Try again.", - messages_GALLERY_UPDATE_FAIL: "Error updating the gallery project. Try again.", - messages_gallery_save_fail_1: "Error saving the ", - messages_gallery_save_fail_2: "Project. Try again.", - messages_SHARE_SUCCESS: 'Share program', - messages_SHARE_FAIL: "Error creating a link to share your program. Try again.", - messages_copylink_success: 'Link successfully saved to clipboard.', - messages_rename_success_01: 'The project was successfully saved to ', - messages_rename_success_02: 'renamed.', - messages_newblockly_head: 'Welcome to the new version Blockly for the senseBox', - messages_newblockly_text: "The new Blockly version is currently in testing. If you find any errors please report them in our [forum](https://forum.sensebox.de/t/neue-blockly-version-beta-test-und-feedback/1176). You can find an overview of all new features [here](/news)", - messages_GET_TUTORIAL_FAIL: 'Back to tutorials overview', - messages_LOGIN_FAIL: 'The username or password is incorrect.', - messages_login_error: "Enter both a username and a password.", - messages_copy_code: "Copy code to clipboard succesfull", + /** + * Share Dialog + */ - - /** - * Reset Dialog - */ - - resetDialog_headline: "Reset workspace?", - resetDialog_text: "Do you really want to reset the workspace? All blocks will be deleted!", + sharedialog_headline: "Your link has been created.", + sharedialog_text: "You can share your program using the following link.", - /** - * Share Dialog - */ + /** + * Project rename Dialog + */ - sharedialog_headline: "Your link has been created.", - sharedialog_text: "You can share your program using the following link.", + renamedialog_headline: "Rename project", + renamedialog_text: + "Please enter a name for the project and confirm it by clicking 'Confirm'.", + /** + * Compile Dialog + * + */ - /** - * Project rename Dialog - */ + compiledialog_headline: "Error", + compiledialog_text: + "While compiling an error occured. Please check your blocks and try again", - renamedialog_headline: "Rename project", - renamedialog_text: "Please enter a name for the project and confirm it by clicking 'Confirm'.", - /** - * Compile Dialog - * - */ + /** + * Buttons + * + */ - compiledialog_headline: "Error", - compiledialog_text: "While compiling an error occured. Please check your blocks and try again", + button_cancel: "Cancel", + button_close: "Close", + button_accept: "Ok", + button_compile: "Compile", + button_create_variableCreate: "Create Variable", + button_back: "Back", + button_next: "Next step", + button_tutorial_overview: "Tutorial overview", + button_login: "Login", + /** + * + */ + filename: "Filename", + projectname: "Projectname", + /** + * Settings + */ + settings_head: "Settings", + settings_language: "Language", + settings_language_text: + "Selection of the language applies to the entire application. A distinction can be made between German and English.", + settings_language_de: "German", + settings_language_en: "English", + settings_renderer: "Renderer", + settings_renderer_text: + "The selected renderer determines the appearance of the blocks. A distinction can be made between 'Geras' and 'Zelos', whereby 'Zelos' is particularly suitable for a touch application.", + settings_statistics: "Statistics", + settings_statistics_text: + "The display of statistics on the usage of the blocks above the workspace can be shown or hidden.", + settings_statistics_on: "On", + settings_statistics_off: "Off", - /** - * Buttons - * - */ + /** + * 404 + */ - button_cancel: "Cancel", - button_close: "Close", - button_accept: "Ok", - button_compile: "Compile", - button_create_variableCreate: "Create Variable", - button_back: "Back", - button_next: "Next step", - button_tutorial_overview: "Tutorial overview", - button_login: "Login", + notfound_head: "The page you requested cannot be found.", + notfound_text: + "The page you are looking for may have been removed, its name changed, or it may be temporarily unavailable.", + /** + * Labels + */ + labels_donotshowagain: "Do not show dialog again", + labels_here: "here", + labels_username: "Email or username", + labels_password: "Password", + /** + * Badges + */ + badges_explaination: + "An overview of all badges received in the Blockly for senseBox context can be found ", + badges_ASSIGNE_BADGE_SUCCESS_01: + "Congratulations! You have received the badge ", + badges_ASSIGNE_BADGE_SUCCESS_02: ".", - /** - * - */ + /** + * Tutorials + */ - filename: "Filename", - projectname: "Projectname", - /** - * Settings - */ - settings_head: "Settings", - settings_language: "Language", - settings_language_text: "Selection of the language applies to the entire application. A distinction can be made between German and English.", - settings_language_de: "German", - settings_language_en: "English", - settings_renderer: "Renderer", - settings_renderer_text: "The selected renderer determines the appearance of the blocks. A distinction can be made between 'Geras' and 'Zelos', whereby 'Zelos' is particularly suitable for a touch application.", - settings_statistics: "Statistics", - settings_statistics_text: "The display of statistics on the usage of the blocks above the workspace can be shown or hidden.", - settings_statistics_on: "On", - settings_statistics_off: "Off", + tutorials_assessment_task: "Task", + tutorials_hardware_head: + "For the implementation you need the following hardware:", + tutorials_hardware_moreInformation: + "You can find more information about the hardware component.", + tutorials_hardware_here: "here", + tutorials_requirements: + "Before continuing with this tutorial, you should have successfully completed the following tutorials:", + /** + * Tutorial Builder + */ - /** - * 404 - */ + builder_solution: "Solution", + builder_solution_submit: "Submit Solution", + builder_example_submit: "Submit example", + builder_comment: + "Note: You can delete the initial setup() or infinite loop() block. Additionally, it is possible to select only any block, among others, without displaying it as disabled.", + builder_hardware_order: "Note that the order of selection is authoritative.", + builder_hardware_helper: "Select at least one hardware component.", + builder_requirements_head: "Requirements.", + builder_requirements_order: + "Note that the order of ticking is authoritative.", - notfound_head: "The page you requested cannot be found.", - notfound_text: "The page you are looking for may have been removed, its name changed, or it may be temporarily unavailable.", + /** + * Login + */ - /** - * Labels - */ - labels_donotshowagain: 'Do not show dialog again', - labels_here: 'here', - labels_username: 'Email or username', - labels_password: "Password", - /** - * Badges - */ + login_head: "Login", + login_osem_account_01: "You need to have an ", + login_osem_account_02: "Account to login", + login_lostpassword: "Lost your password?", + login_createaccount: + "If you don't have an openSenseMap account please register on ", - badges_explaination: "An overview of all badges received in the Blockly for senseBox context can be found ", - badges_ASSIGNE_BADGE_SUCCESS_01: "Congratulations! You have received the badge ", - badges_ASSIGNE_BADGE_SUCCESS_02: ".", + /** + * Navbar + */ + navbar_tutorials: "Tutorials", + navbar_tutorialbuilder: "Create tutorial", + navbar_gallery: "Gallery", + navbar_projects: "Projects", - /** - * Tutorials - */ + navbar_menu: "Menu", + navbar_login: "Login", + navbar_mybadges: "myBadges", + navbar_account: "Account", + navbar_logout: "Logout", + navbar_settings: "Settings", - tutorials_assessment_task: "Task", - tutorials_hardware_head: "For the implementation you need the following hardware:", - tutorials_hardware_moreInformation: "You can find more information about the hardware component.", - tutorials_hardware_here: "here", - tutorials_requirements: "Before continuing with this tutorial, you should have successfully completed the following tutorials:", + /** + * Codeviewer + */ + codeviewer_arduino: "Arduino Source Code", + codeviewer_xml: "XML Blocks", - /** - * Tutorial Builder - */ + /** + * Overlay + */ - builder_solution: "Solution", - builder_solution_submit: "Submit Solution", - builder_example_submit: "Submit example", - builder_comment: "Note: You can delete the initial setup() or infinite loop() block. Additionally, it is possible to select only any block, among others, without displaying it as disabled.", - builder_hardware_order: "Note that the order of selection is authoritative.", - builder_hardware_helper: "Select at least one hardware component.", - builder_requirements_head: "Requirements.", - builder_requirements_order: "Note that the order of ticking is authoritative.", + compile_overlay_head: "Your program is now compiled and downloaded", + compile_overlay_text: "Then copy it to your senseBox MCU", + compile_overlay_help: "You need help? Have a look here: ", + /** + * Tooltip Viewer + */ - /** - * Login - */ + tooltip_viewer: "Help", + tooltip_moreInformation: "More informations can be found ", + tooltip_hint: "Select a Block to show the hint", - - login_head: "Login", - login_osem_account_01: "You need to have an ", - login_osem_account_02: "Account to login", - login_lostpassword: "Lost your password?", - login_createaccount: "If you don't have an openSenseMap account please register on ", - - - /** - * Navbar - */ - - navbar_tutorials: "Tutorials", - navbar_tutorialbuilder: "Create tutorial", - navbar_gallery: "Gallery", - navbar_projects: "Projects", - - navbar_menu: "Menu", - navbar_login: "Login", - navbar_mybadges: "myBadges", - navbar_account: "Account", - navbar_logout: "Logout", - navbar_settings: "Settings", - - /** - * Codeviewer - */ - - codeviewer_arduino: "Arduino Source Code", - codeviewer_xml: "XML Blocks", - - - - - /** - * Overlay - */ - - compile_overlay_head: "Your program is now compiled and downloaded", - compile_overlay_text: "Then copy it to your senseBox MCU", - compile_overlay_help: "You need help? Have a look here: ", - - - /** - * Tooltip Viewer - */ - - tooltip_viewer: "Help", - tooltip_moreInformation: "More informations can be found ", - tooltip_hint: "Select a Block to show the hint", - -} \ No newline at end of file + /** + * IDEDrawer + */ + drawer_ideerror_head: "Oops something went wrong", + drawer_ideerror_text: "An error occurred while compiling, check your blocks", +}; diff --git a/src/components/Project/ProjectHome.js b/src/components/Project/ProjectHome.js index c7a8d8c..38ed822 100644 --- a/src/components/Project/ProjectHome.js +++ b/src/components/Project/ProjectHome.js @@ -1,57 +1,70 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; -import { getProjects, resetProject } from '../../actions/projectActions'; -import { clearMessages } from '../../actions/messageActions'; +import React, { Component } from "react"; +import PropTypes from "prop-types"; +import { connect } from "react-redux"; +import { getProjects, resetProject } from "../../actions/projectActions"; +import { clearMessages } from "../../actions/messageActions"; -import { Link, withRouter } from 'react-router-dom'; +import { Link, withRouter } from "react-router-dom"; -import Breadcrumbs from '../Breadcrumbs'; -import BlocklyWindow from '../Blockly/BlocklyWindow'; -import Snackbar from '../Snackbar'; -import WorkspaceFunc from '../Workspace/WorkspaceFunc'; +import Breadcrumbs from "../Breadcrumbs"; +import BlocklyWindow from "../Blockly/BlocklyWindow"; +import Snackbar from "../Snackbar"; +import WorkspaceFunc from "../Workspace/WorkspaceFunc"; -import { withStyles } from '@material-ui/core/styles'; -import Grid from '@material-ui/core/Grid'; -import Paper from '@material-ui/core/Paper'; -import Divider from '@material-ui/core/Divider'; -import Typography from '@material-ui/core/Typography'; -import Backdrop from '@material-ui/core/Backdrop'; -import CircularProgress from '@material-ui/core/CircularProgress'; +import { withStyles } from "@material-ui/core/styles"; +import Grid from "@material-ui/core/Grid"; +import Paper from "@material-ui/core/Paper"; +import Divider from "@material-ui/core/Divider"; +import Typography from "@material-ui/core/Typography"; +import Backdrop from "@material-ui/core/Backdrop"; +import CircularProgress from "@material-ui/core/CircularProgress"; const styles = (theme) => ({ link: { color: theme.palette.primary.main, - textDecoration: 'none', - '&:hover': { + textDecoration: "none", + "&:hover": { color: theme.palette.primary.main, - textDecoration: 'underline' - } - } + textDecoration: "underline", + }, + }, }); - class ProjectHome extends Component { - state = { snackbar: false, - type: '', - key: '', - message: '' - } + type: "", + key: "", + message: "", + }; componentDidMount() { - var type = this.props.location.pathname.replace('/', ''); + var type = this.props.location.pathname.replace("/", ""); this.props.getProjects(type); if (this.props.message) { - if (this.props.message.id === 'PROJECT_DELETE_SUCCESS') { - this.setState({ snackbar: true, key: Date.now(), message: `Dein Projekt wurde erfolgreich gelöscht.`, type: 'success' }); - } - else if (this.props.message.id === 'GALLERY_DELETE_SUCCESS') { - this.setState({ snackbar: true, key: Date.now(), message: `Dein Galerie-Projekt wurde erfolgreich gelöscht.`, type: 'success' }); - } - else if (this.props.message.id === 'GET_PROJECT_FAIL') { - this.setState({ snackbar: true, key: Date.now(), message: `Dein angefragtes ${type === 'gallery' ? 'Galerie-' : ''}Projekt konnte nicht gefunden werden.`, type: 'error' }); + if (this.props.message.id === "PROJECT_DELETE_SUCCESS") { + this.setState({ + snackbar: true, + key: Date.now(), + message: `Dein Projekt wurde erfolgreich gelöscht.`, + type: "success", + }); + } else if (this.props.message.id === "GALLERY_DELETE_SUCCESS") { + this.setState({ + snackbar: true, + key: Date.now(), + message: `Dein Galerie-Projekt wurde erfolgreich gelöscht.`, + type: "success", + }); + } else if (this.props.message.id === "GET_PROJECT_FAIL") { + this.setState({ + snackbar: true, + key: Date.now(), + message: `Dein angefragtes ${ + type === "gallery" ? "Galerie-" : "" + }Projekt konnte nicht gefunden werden.`, + type: "error", + }); } } } @@ -59,14 +72,23 @@ class ProjectHome extends Component { componentDidUpdate(props) { if (props.location.pathname !== this.props.location.pathname) { this.setState({ snackbar: false }); - this.props.getProjects(this.props.location.pathname.replace('/', '')); + this.props.getProjects(this.props.location.pathname.replace("/", "")); } if (props.message !== this.props.message) { - if (this.props.message.id === 'PROJECT_DELETE_SUCCESS') { - this.setState({ snackbar: true, key: Date.now(), message: `Dein Projekt wurde erfolgreich gelöscht.`, type: 'success' }); - } - else if (this.props.message.id === 'GALLERY_DELETE_SUCCESS') { - this.setState({ snackbar: true, key: Date.now(), message: `Dein Galerie-Projekt wurde erfolgreich gelöscht.`, type: 'success' }); + if (this.props.message.id === "PROJECT_DELETE_SUCCESS") { + this.setState({ + snackbar: true, + key: Date.now(), + message: `Dein Projekt wurde erfolgreich gelöscht.`, + type: "success", + }); + } else if (this.props.message.id === "GALLERY_DELETE_SUCCESS") { + this.setState({ + snackbar: true, + key: Date.now(), + message: `Dein Galerie-Projekt wurde erfolgreich gelöscht.`, + type: "success", + }); } } } @@ -77,60 +99,107 @@ class ProjectHome extends Component { } render() { - var data = this.props.location.pathname === '/project' ? 'Projekte' : 'Galerie'; + var data = + this.props.location.pathname === "/project" ? "Projekte" : "Galerie"; return (
- +

{data}

- {this.props.progress ? + {this.props.progress ? ( - : + ) : (
- {this.props.projects.length > 0 ? + {this.props.projects.length > 0 ? ( {this.props.projects.map((project, i) => { return ( - - + +

{project.title}

- + - {project.description} + + {project.description} + - {this.props.user && this.props.user.email === project.creator ? + {this.props.user && + this.props.user.email === project.creator ? (
- -
+ +
- : null} + ) : null} - ) + ); })} - :
- Es sind aktuell keine Projekte vorhanden. - {this.props.location.pathname.replace('/', '') === 'project' ? - Erstelle jetzt dein eigenes Projekt oder lasse dich von Projektbeispielen in der Galerie inspirieren. - : null} + ) : ( +
+ + Es sind aktuell keine Projekte vorhanden. + + {this.props.location.pathname.replace("/", "") === "project" ? ( + + Erstelle jetzt dein{" "} + + eigenes Projekt + {" "} + oder lasse dich von Projektbeispielen in der{" "} + + Galerie + {" "} + inspirieren. + + ) : null}
- } + )}
- } + )}
); - }; + } } ProjectHome.propTypes = { @@ -149,15 +218,18 @@ ProjectHome.propTypes = { projects: PropTypes.array.isRequired, progress: PropTypes.bool.isRequired, user: PropTypes.object, - message: PropTypes.object.isRequired + message: PropTypes.object.isRequired, }; -const mapStateToProps = state => ({ +const mapStateToProps = (state) => ({ projects: state.project.projects, progress: state.project.progress, user: state.auth.user, - message: state.message + message: state.message, }); - -export default connect(mapStateToProps, { getProjects, resetProject, clearMessages })(withStyles(styles, { withTheme: true })(withRouter(ProjectHome))); +export default connect(mapStateToProps, { + getProjects, + resetProject, + clearMessages, +})(withStyles(styles, { withTheme: true })(withRouter(ProjectHome))); diff --git a/src/components/Tutorial/StepperVertical.js b/src/components/Tutorial/StepperVertical.js index 19387a4..5735c3f 100644 --- a/src/components/Tutorial/StepperVertical.js +++ b/src/components/Tutorial/StepperVertical.js @@ -85,7 +85,7 @@ class StepperVertical extends Component { return ( -
{console.log(i); this.props.tutorialStep(i)}}> +
{ this.props.tutorialStep(i)}}> ({ backdrop: { zIndex: theme.zIndex.drawer + 1, - color: '#fff', + color: "#fff", }, iconButton: { backgroundColor: theme.palette.button.compile, color: theme.palette.primary.contrastText, - width: '40px', - height: '40px', - '&:hover': { + width: "40px", + height: "40px", + "&:hover": { backgroundColor: theme.palette.button.compile, color: theme.palette.primary.contrastText, - } + }, }, button: { backgroundColor: theme.palette.button.compile, color: theme.palette.primary.contrastText, - '&:hover': { + "&:hover": { backgroundColor: theme.palette.button.compile, color: theme.palette.primary.contrastText, - } - } + }, + }, }); +const Drawer = withStyles((theme) => ({ + paperAnchorBottom: { + backgroundColor: "black", + height: "20vH", + }, +}))(MuiDrawer); class Compile extends Component { - constructor(props) { super(props); this.state = { progress: false, open: false, file: false, - title: '', - content: '', - name: props.name + title: "", + content: "", + name: props.name, + error: "", }; } + componentDidMount() { + Prism.highlightAll(); + } + componentDidUpdate(props) { if (props.name !== this.props.name) { this.setState({ name: this.props.name }); } + Prism.highlightAll(); } - compile = () => { this.setState({ progress: true }); const data = { - "board": process.env.REACT_APP_BOARD, - "sketch": this.props.arduino + board: process.env.REACT_APP_BOARD, + sketch: this.props.arduino, }; fetch(`${process.env.REACT_APP_COMPILER_URL}/compile`, { method: "POST", - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify(data) + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(data), }) - .then(response => response.json()) - .then(data => { + .then((response) => response.json()) + .then((data) => { + console.log(data); + if (data.code === "Internal Server Error") { + this.setState({ + progress: false, + file: false, + open: true, + title: Blockly.Msg.compiledialog_headline, + content: Blockly.Msg.compiledialog_text, + error: data.message, + }); + } this.setState({ id: data.data.id }, () => { this.createFileName(); }); }) - .catch(err => { + .catch((err) => { console.log(err); - this.setState({ progress: false, file: false, open: true, title: Blockly.Msg.compiledialog_headline, content: Blockly.Msg.compiledialog_text }); + //this.setState({ progress: false, file: false, open: true, title: Blockly.Msg.compiledialog_headline, content: Blockly.Msg.compiledialog_text }); }); - } + }; download = () => { const id = this.state.id; const filename = detectWhitespacesAndReturnReadableResult(this.state.name); this.toggleDialog(); this.props.workspaceName(this.state.name); - 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 }); - } + }; toggleDialog = () => { this.setState({ open: !this.state, progress: false }); - } + }; createFileName = () => { if (this.state.name) { this.download(); + } else { + this.setState({ + file: true, + open: true, + title: "Projekt kompilieren", + content: + "Bitte gib einen Namen für die Bennenung des zu kompilierenden Programms ein und bestätige diesen mit einem Klick auf 'Eingabe'.", + }); } - else { - this.setState({ file: true, open: true, title: 'Projekt 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.setState({ name: e.target.value }); - } + }; + + toggleDrawer = (anchor, open) => (event) => { + if ( + event.type === "keydown" && + (event.key === "Tab" || event.key === "Shift") + ) { + return; + } + + this.setState({ open: false }); + }; render() { return (
- {this.props.iconButton ? - + {this.props.iconButton ? ( + this.compile()} @@ -128,21 +174,73 @@ class Compile extends Component { - : - - } - -
+ )} + +
copyimage

{Blockly.Msg.compile_overlay_head}

{Blockly.Msg.compile_overlay_text}

-

{Blockly.Msg.compile_overlay_help}FAQ

+

+ {Blockly.Msg.compile_overlay_help} + + FAQ + +

- +

+ {Blockly.Msg.drawer_ideerror_head} +

+

+ {Blockly.Msg.drawer_ideerror_text} +

+ +

+ {" "} + {`${this.state.error}`}{" "} +

+ + {/*
- : null} - + : + + 

+                {`${this.state.error}`}
+
+ + + + } + */}
); - }; + } } Compile.propTypes = { arduino: PropTypes.string.isRequired, name: PropTypes.string, - workspaceName: PropTypes.func.isRequired + workspaceName: PropTypes.func.isRequired, }; -const mapStateToProps = state => ({ +const mapStateToProps = (state) => ({ arduino: state.workspace.code.arduino, - name: state.workspace.name + name: state.workspace.name, }); - -export default connect(mapStateToProps, { workspaceName })(withStyles(styles, { withTheme: true })(Compile)); +export default connect(mapStateToProps, { workspaceName })( + withStyles(styles, { withTheme: true })(Compile) +); From 255b1619b8e10cf4fdadd930fc0d0559fa0fc066 Mon Sep 17 00:00:00 2001 From: Mario Pesch Date: Mon, 29 Mar 2021 15:07:39 +0200 Subject: [PATCH 06/10] update variable names --- src/components/Blockly/BlocklyWindow.js | 100 +- src/components/Blockly/blocks/variables.js | 81 +- src/components/Blockly/msg/de/ui.js | 10 + src/components/Blockly/msg/en/ui.js | 10 + src/components/Blockly/toolbox/Toolbox.js | 1020 +++++++++++--------- src/components/Tutorial/Assessment.js | 102 +- src/components/Tutorial/Instruction.js | 116 ++- src/components/User/Login.js | 181 ++-- 8 files changed, 932 insertions(+), 688 deletions(-) diff --git a/src/components/Blockly/BlocklyWindow.js b/src/components/Blockly/BlocklyWindow.js index efd8bf7..21f7392 100644 --- a/src/components/Blockly/BlocklyWindow.js +++ b/src/components/Blockly/BlocklyWindow.js @@ -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 (
- - - {this.props.svg && 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 + } + > + {this.props.svg && this.props.initialXml ? ( + + ) : null}
); - }; + } } 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 +); diff --git a/src/components/Blockly/blocks/variables.js b/src/components/Blockly/blocks/variables.js index 6984263..8e19984 100644 --- a/src/components/Blockly/blocks/variables.js +++ b/src/components/Blockly/blocks/variables.js @@ -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); } -} - + }, +}; diff --git a/src/components/Blockly/msg/de/ui.js b/src/components/Blockly/msg/de/ui.js index 06b9f76..3c8b238 100644 --- a/src/components/Blockly/msg/de/ui.js +++ b/src/components/Blockly/msg/de/ui.js @@ -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 diff --git a/src/components/Blockly/msg/en/ui.js b/src/components/Blockly/msg/en/ui.js index 3428980..63089be 100644 --- a/src/components/Blockly/msg/en/ui.js +++ b/src/components/Blockly/msg/en/ui.js @@ -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 diff --git a/src/components/Blockly/toolbox/Toolbox.js b/src/components/Blockly/toolbox/Toolbox.js index 713bce3..9d65862 100644 --- a/src/components/Blockly/toolbox/Toolbox.js +++ b/src/components/Blockly/toolbox/Toolbox.js @@ -1,495 +1,557 @@ -import React from 'react'; -import { Block, Value, Field, Shadow, Category } from '../'; -import { getColour } from '../helpers/colour' -import '@blockly/block-plus-minus'; -import { TypedVariableModal } from '@blockly/plugin-typed-variable-modal'; -import * as Blockly from 'blockly/core'; - - - +import React from "react"; +import { Block, Value, Field, Shadow, Category } from "../"; +import { getColour } from "../helpers/colour"; +import "@blockly/block-plus-minus"; +import { TypedVariableModal } from "@blockly/plugin-typed-variable-modal"; +import * as Blockly from "blockly/core"; class Toolbox extends React.Component { + componentDidUpdate() { + this.props.workspace.registerToolboxCategoryCallback( + "CREATE_TYPED_VARIABLE", + this.createFlyout + ); - componentDidUpdate() { - this.props.workspace.registerToolboxCategoryCallback('CREATE_TYPED_VARIABLE', this.createFlyout); + 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(); + } - 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']]); - typedVarModal.init(); - } + createFlyout(workspace) { + let xmlList = []; - createFlyout(workspace) { + // Add your button and give it a callback name. + const button = document.createElement("button"); + button.setAttribute("text", "Create Typed Variable"); + button.setAttribute("callbackKey", "callbackName"); - let xmlList = []; + xmlList.push(button); - // Add your button and give it a callback name. - const button = document.createElement('button'); - button.setAttribute('text', 'Create Typed Variable'); - button.setAttribute('callbackKey', 'callbackName'); + // This gets all the variables that the user creates and adds them to the + // flyout. + const blockList = Blockly.VariablesDynamic.flyoutCategoryBlocks(workspace); + xmlList = xmlList.concat(blockList); + return xmlList; + } - xmlList.push(button); - - // This gets all the variables that the user creates and adds them to the - // flyout. - const blockList = Blockly.VariablesDynamic.flyoutCategoryBlocks(workspace); - xmlList = xmlList.concat(blockList); - return xmlList; - }; - - render() { - return ( - - - - - - - - - - - - - - - - {/* */} - - - - - - - - - - - - - - - - - - - - - - 1 - - - - - 30 - - - - - - - 0 - - - - - 0 - - - - - - - - - 100 - - - - - 50 - - - - - 0 - - - - - - - - - - - - 1 - - - - - 0 - - - - - 0 - - - - - - - Title - - - - - Unit - - - - - Title - - - - - Unit - - - - - - - - - - - - - - - - - - - 0 - - - - - 15 - - - - - 0 - - - - - 50 - - - - - 5 - - - - - 0 - - - - - 15 - - - - - - - 0 - - - - - 0 - - - - - 0 - - - - - - - 0 - - - - - 0 - - - - - 0 - - - - - 0 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - latitude - - - - - longitude - - - - - altitude - - - - - pDOP - - - - - fixType - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {/* */} - - - - - - - - - - - - - - - 10 - - - - - - - - 1 - - - - - 10 - - - - - 1 - - - - - - - - - - - - - - - - - - - - - 1000 - - - - - - - 100 - - - - - - - - - - - - - - - - - - - 1 - - - - - - - - - 1 - - - - - 100 - - - - - - - 1 - - - - - 100 - - - - - - - - - - - 220 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 100 - - - - - {/* this block is the initial block of the workspace; not necessary + render() { + return ( + + + + + + + + + + + + + + + + {/* */} + + + + + + + + + + + + + + + + + + + + + + 1 + + + + + 30 + + + + + + + 0 + + + + + 0 + + + + + + + + + 100 + + + + + 50 + + + + + 0 + + + + + + + + + + + + 1 + + + + + 0 + + + + + 0 + + + + + + + Title + + + + + Unit + + + + + Title + + + + + Unit + + + + + + + + + + + + + + + + 0 + + + + + 15 + + + + + 0 + + + + + 50 + + + + + 5 + + + + + 0 + + + + + 15 + + + + + + + 0 + + + + + 0 + + + + + 0 + + + + + + + 0 + + + + + 0 + + + + + 0 + + + + + 0 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + latitude + + + + + longitude + + + + + altitude + + + + + pDOP + + + + + fixType + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {/* */} + + + + + + + + + + + + + + + 10 + + + + + + + + 1 + + + + + 10 + + + + + 1 + + + + + + + + + + + + + + + + + + + + + 1000 + + + + + + + 100 + + + + + + + + + + + + + + + + + + + 1 + + + + + + + + + 1 + + + + + 100 + + + + + + + 1 + + + + + 100 + + + + + + + + + + + 220 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 100 + + + + + {/* this block is the initial block of the workspace; not necessary to display, because it can only be used once anyway */} - - ); - }; + + ); + } } export default Toolbox; diff --git a/src/components/Tutorial/Assessment.js b/src/components/Tutorial/Assessment.js index fa4d1c4..5dd24b7 100644 --- a/src/components/Tutorial/Assessment.js +++ b/src/components/Tutorial/Assessment.js @@ -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 ( -
- {currentTask.headline} -
- +
+ + {currentTask.headline} + +
+ +
+ - - - {Blockly.Msg.tutorials_assessment_task} + + + + {Blockly.Msg.tutorials_assessment_task} + {currentTask.text} -
+
); - }; + } } 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) +); diff --git a/src/components/Tutorial/Instruction.js b/src/components/Tutorial/Instruction.js index ade6dfb..fc72447 100644 --- a/src/components/Tutorial/Instruction.js +++ b/src/components/Tutorial/Instruction.js @@ -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 (
- {step.headline} - {step.text} - {isHardware ? - : null} - {areRequirements > 0 ? - : null} - {step.media ? - step.media.picture ? -
- -
- : step.media.youtube ? - /*16:9; width: 800px; height: width/16*9=450px*/ -
-
-