Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
328b9a141f |
@@ -14,7 +14,6 @@
|
|||||||
"@fortawesome/free-solid-svg-icons": "^5.15.4",
|
"@fortawesome/free-solid-svg-icons": "^5.15.4",
|
||||||
"@fortawesome/react-fontawesome": "^0.1.19",
|
"@fortawesome/react-fontawesome": "^0.1.19",
|
||||||
"@material-ui/core": "^4.12.4",
|
"@material-ui/core": "^4.12.4",
|
||||||
"@material-ui/lab": "^4.0.0-alpha.61",
|
|
||||||
"@monaco-editor/react": "^4.3.1",
|
"@monaco-editor/react": "^4.3.1",
|
||||||
"@testing-library/jest-dom": "^5.16.1",
|
"@testing-library/jest-dom": "^5.16.1",
|
||||||
"@testing-library/react": "^12.1.2",
|
"@testing-library/react": "^12.1.2",
|
||||||
@@ -42,7 +41,6 @@
|
|||||||
"reactour": "^1.18.7",
|
"reactour": "^1.18.7",
|
||||||
"redux": "^4.2.0",
|
"redux": "^4.2.0",
|
||||||
"redux-thunk": "^2.4.1",
|
"redux-thunk": "^2.4.1",
|
||||||
"rehype-raw": "^6.1.1",
|
|
||||||
"remark-gemoji": "^7.0.1",
|
"remark-gemoji": "^7.0.1",
|
||||||
"remark-gfm": "^3.0.1",
|
"remark-gfm": "^3.0.1",
|
||||||
"styled-components": "^4.4.1",
|
"styled-components": "^4.4.1",
|
||||||
|
|||||||
@@ -1,13 +1,8 @@
|
|||||||
import {
|
import {
|
||||||
BOARD,
|
BOARD,
|
||||||
} from "./types";
|
} from "./types";
|
||||||
import mini_opacity from "../data/mini_opacity.png"
|
|
||||||
import mcu_opacity from "../data/mcu_opacity.png"
|
|
||||||
|
|
||||||
export const setBoard = (board) => (dispatch) => {
|
export const setBoard = (board) => (dispatch) => {
|
||||||
window.sessionStorage.setItem("board", board);
|
|
||||||
const root = document.querySelector(':root');
|
|
||||||
root.style.setProperty('--url', `url(${board === "mcu" ? mcu_opacity : mini_opacity})`);
|
|
||||||
dispatch({
|
dispatch({
|
||||||
type: BOARD,
|
type: BOARD,
|
||||||
payload: board,
|
payload: board,
|
||||||
|
|||||||
@@ -1,18 +0,0 @@
|
|||||||
import axios from 'axios'
|
|
||||||
|
|
||||||
const fetchSensorWikiSuccess = sensors => ({
|
|
||||||
type: 'FETCH_SENSORWIKI_SUCCESS',
|
|
||||||
payload: { sensors }
|
|
||||||
})
|
|
||||||
|
|
||||||
export const fetchSensors = () => {
|
|
||||||
return async dispatch => {
|
|
||||||
try {
|
|
||||||
let sensors = await axios.get('https://api.sensors.wiki/sensors/all')
|
|
||||||
dispatch(fetchSensorWikiSuccess(sensors.data))
|
|
||||||
}
|
|
||||||
catch(e){
|
|
||||||
console.log(e)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -301,21 +301,12 @@ export const resetTutorial = () => (dispatch, getState) => {
|
|||||||
hardware: [],
|
hardware: [],
|
||||||
requirements: [],
|
requirements: [],
|
||||||
},
|
},
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
type: "finalpage",
|
|
||||||
headline: "",
|
|
||||||
text: "",
|
|
||||||
samplesolutions: false,
|
|
||||||
solutions: [],
|
|
||||||
furthertutorials: false,
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
dispatch(tutorialSteps(steps));
|
dispatch(tutorialSteps(steps));
|
||||||
dispatch({
|
dispatch({
|
||||||
type: BUILDER_ERROR,
|
type: BUILDER_ERROR,
|
||||||
payload: {
|
payload: {
|
||||||
steps: [{}, {}],
|
steps: [{}],
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -20,15 +20,9 @@ export const onChangeCode = () => (dispatch, getState) => {
|
|||||||
if (selectedBlock !== null) {
|
if (selectedBlock !== null) {
|
||||||
code.helpurl = selectedBlock.helpUrl
|
code.helpurl = selectedBlock.helpUrl
|
||||||
code.tooltip = selectedBlock.tooltip
|
code.tooltip = selectedBlock.tooltip
|
||||||
if (selectedBlock.data) {
|
|
||||||
code.data = selectedBlock.data
|
|
||||||
} else {
|
|
||||||
code.data = null
|
|
||||||
}
|
|
||||||
} else if (selectedBlock === null) {
|
} else if (selectedBlock === null) {
|
||||||
code.tooltip = Blockly.Msg.tooltip_hint
|
code.tooltip = Blockly.Msg.tooltip_hint
|
||||||
code.helpurl = ''
|
code.helpurl = ''
|
||||||
code.data = null
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -26,7 +26,6 @@ Blockly.Blocks["sensebox_sensor_temp_hum"] = {
|
|||||||
this.setColour(getColour().sensebox);
|
this.setColour(getColour().sensebox);
|
||||||
this.setTooltip(Blockly.Msg.senseBox_temp_hum_tooltip);
|
this.setTooltip(Blockly.Msg.senseBox_temp_hum_tooltip);
|
||||||
this.setHelpUrl(Blockly.Msg.senseBox_temp_hum_helpurl);
|
this.setHelpUrl(Blockly.Msg.senseBox_temp_hum_helpurl);
|
||||||
this.data = {name: "hdc1080", connection: "I2C"};
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -52,7 +51,6 @@ Blockly.Blocks["sensebox_sensor_uv_light"] = {
|
|||||||
this.setColour(getColour().sensebox);
|
this.setColour(getColour().sensebox);
|
||||||
this.setTooltip(Blockly.Msg.senseBox_uv_light_tooltip);
|
this.setTooltip(Blockly.Msg.senseBox_uv_light_tooltip);
|
||||||
this.setHelpUrl(Blockly.Msg.senseBox_uv_light_helpurl);
|
this.setHelpUrl(Blockly.Msg.senseBox_uv_light_helpurl);
|
||||||
this.data = {name: "veml6070"};
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -93,7 +91,6 @@ Blockly.Blocks["sensebox_sensor_bmx055_accelerometer"] = {
|
|||||||
this.setColour(getColour().sensebox);
|
this.setColour(getColour().sensebox);
|
||||||
this.setTooltip(Blockly.Msg.senseBox_bmx055_accelerometer_tooltip);
|
this.setTooltip(Blockly.Msg.senseBox_bmx055_accelerometer_tooltip);
|
||||||
this.setHelpUrl(Blockly.Msg.senseBox_bmx055_helpurl);
|
this.setHelpUrl(Blockly.Msg.senseBox_bmx055_helpurl);
|
||||||
this.data = {name: "bmx055"};
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -125,7 +122,6 @@ Blockly.Blocks["sensebox_sensor_sds011"] = {
|
|||||||
this.setColour(getColour().sensebox);
|
this.setColour(getColour().sensebox);
|
||||||
this.setTooltip(Blockly.Msg.senseBox_sds011_tooltip);
|
this.setTooltip(Blockly.Msg.senseBox_sds011_tooltip);
|
||||||
this.setHelpUrl(Blockly.Msg.senseBox_sds011_helpurl);
|
this.setHelpUrl(Blockly.Msg.senseBox_sds011_helpurl);
|
||||||
this.data = {name: "sds011"};
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -159,7 +155,6 @@ Blockly.Blocks["sensebox_sensor_pressure"] = {
|
|||||||
this.setOutput(true, Types.DECIMAL.typeName);
|
this.setOutput(true, Types.DECIMAL.typeName);
|
||||||
this.setTooltip(Blockly.Msg.senseBox_pressure_tooltip);
|
this.setTooltip(Blockly.Msg.senseBox_pressure_tooltip);
|
||||||
this.setHelpUrl(Blockly.Msg.senseBox_pressure_helpurl);
|
this.setHelpUrl(Blockly.Msg.senseBox_pressure_helpurl);
|
||||||
this.data = {name: "bmp280"};
|
|
||||||
this.getField("NAME").setValidator(
|
this.getField("NAME").setValidator(
|
||||||
function (val) {
|
function (val) {
|
||||||
this.updateShape_(val === "Altitude");
|
this.updateShape_(val === "Altitude");
|
||||||
@@ -206,7 +201,6 @@ Blockly.Blocks["sensebox_sensor_bme680_bsec"] = {
|
|||||||
this.setColour(getColour().sensebox);
|
this.setColour(getColour().sensebox);
|
||||||
this.setTooltip(Blockly.Msg.senseBox_bme_tooltip);
|
this.setTooltip(Blockly.Msg.senseBox_bme_tooltip);
|
||||||
this.setHelpUrl(Blockly.Msg.senseBox_bme680_helpurl);
|
this.setHelpUrl(Blockly.Msg.senseBox_bme680_helpurl);
|
||||||
this.data = {name: "bme680"};
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -251,7 +245,6 @@ Blockly.Blocks["sensebox_sensor_ultrasonic_ranger"] = {
|
|||||||
this.setOutput(true, Types.NUMBER.typeName);
|
this.setOutput(true, Types.NUMBER.typeName);
|
||||||
this.setTooltip(Blockly.Msg.senseBox_ultrasonic_tooltip);
|
this.setTooltip(Blockly.Msg.senseBox_ultrasonic_tooltip);
|
||||||
this.setHelpUrl(Blockly.Msg.senseBox_ultrasonic_helpurl);
|
this.setHelpUrl(Blockly.Msg.senseBox_ultrasonic_helpurl);
|
||||||
this.data = {name: "hc-sr04"};
|
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* Parse XML to restore the number of pins available.
|
* Parse XML to restore the number of pins available.
|
||||||
@@ -389,7 +382,6 @@ Blockly.Blocks["sensebox_scd30"] = {
|
|||||||
this.setColour(getColour().sensebox);
|
this.setColour(getColour().sensebox);
|
||||||
this.setTooltip(Blockly.Msg.senseBox_scd_tooltip);
|
this.setTooltip(Blockly.Msg.senseBox_scd_tooltip);
|
||||||
this.setHelpUrl(Blockly.Msg.senseBox_scd_helpurl);
|
this.setHelpUrl(Blockly.Msg.senseBox_scd_helpurl);
|
||||||
this.data = {name: "scd30"};
|
|
||||||
},
|
},
|
||||||
onchange: function (e) {
|
onchange: function (e) {
|
||||||
var dropdown = this.getFieldValue("dropdown");
|
var dropdown = this.getFieldValue("dropdown");
|
||||||
@@ -456,7 +448,6 @@ Blockly.Blocks["sensebox_sensor_truebner_smt50"] = {
|
|||||||
this.setOutput(true, Types.NUMBER.typeName);
|
this.setOutput(true, Types.NUMBER.typeName);
|
||||||
this.setTooltip(Blockly.Msg.senseBox_smt50_tooltip);
|
this.setTooltip(Blockly.Msg.senseBox_smt50_tooltip);
|
||||||
this.setHelpUrl(Blockly.Msg.senseBox_smt50_helpurl);
|
this.setHelpUrl(Blockly.Msg.senseBox_smt50_helpurl);
|
||||||
this.data = {name: "smt50"};
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -479,7 +470,6 @@ Blockly.Blocks["sensebox_sensor_watertemperature"] = {
|
|||||||
.appendField(new Blockly.FieldDropdown(dropdownOptions), "Port");
|
.appendField(new Blockly.FieldDropdown(dropdownOptions), "Port");
|
||||||
this.setOutput(true, Types.NUMBER.typeName);
|
this.setOutput(true, Types.NUMBER.typeName);
|
||||||
this.setTooltip(Blockly.Msg.senseBox_watertemperature_tip);
|
this.setTooltip(Blockly.Msg.senseBox_watertemperature_tip);
|
||||||
this.data = {name: "ds18b20"};
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -552,7 +542,6 @@ Blockly.Blocks["sensebox_sensor_dps310"] = {
|
|||||||
this.setOutput(true, Types.DECIMAL.typeName);
|
this.setOutput(true, Types.DECIMAL.typeName);
|
||||||
this.setTooltip(Blockly.Msg.senseBox_sensor_dps310_tooltip);
|
this.setTooltip(Blockly.Msg.senseBox_sensor_dps310_tooltip);
|
||||||
this.setHelpUrl(Blockly.Msg.senseBox_sensor_dps310_helpurl);
|
this.setHelpUrl(Blockly.Msg.senseBox_sensor_dps310_helpurl);
|
||||||
this.data = {name: "dps310"};
|
|
||||||
this.getField("NAME").setValidator(
|
this.getField("NAME").setValidator(
|
||||||
function (val) {
|
function (val) {
|
||||||
this.updateShape_(val === "Altitude");
|
this.updateShape_(val === "Altitude");
|
||||||
|
|||||||
@@ -9,10 +9,10 @@ Blockly.Blocks["variables_set_dynamic"] = {
|
|||||||
this.setPreviousStatement(true, null);
|
this.setPreviousStatement(true, null);
|
||||||
this.setNextStatement(true, null);
|
this.setNextStatement(true, null);
|
||||||
this.appendValueInput("VALUE")
|
this.appendValueInput("VALUE")
|
||||||
.appendField(Blockly.Msg.variables_set, Blockly.Msg.variables_set)
|
.appendField("set", "set")
|
||||||
// .appendField("", "type")
|
.appendField("", "type")
|
||||||
.appendField(new Blockly.FieldVariable("VAR"), "VAR")
|
.appendField(new Blockly.FieldVariable("VAR"), "VAR")
|
||||||
.appendField(Blockly.Msg.variables_to);
|
.appendField("to");
|
||||||
},
|
},
|
||||||
onchange: function (e) {
|
onchange: function (e) {
|
||||||
let variableID = this.getFieldValue("VAR");
|
let variableID = this.getFieldValue("VAR");
|
||||||
|
|||||||
@@ -19,12 +19,10 @@ export const UI = {
|
|||||||
variable_DECIMAL: "Kommazahl (float)",
|
variable_DECIMAL: "Kommazahl (float)",
|
||||||
variables_TEXT: "Text (string)",
|
variables_TEXT: "Text (string)",
|
||||||
variables_ARRAY: "Array (array)",
|
variables_ARRAY: "Array (array)",
|
||||||
variables_CHARACTER: "Buchstabe (char)",
|
variables_CHARACTER: "char (char)",
|
||||||
variables_BOOLEAN: "Boolean (boolean)",
|
variables_BOOLEAN: "Boolean (boolean)",
|
||||||
variables_NULL: "void (void)",
|
variables_NULL: "void (void)",
|
||||||
variables_UNDEF: "undefined",
|
variables_UNDEF: "undefined",
|
||||||
variables_set: "Schreibe",
|
|
||||||
variables_to: "",
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Tooltips
|
* Tooltips
|
||||||
@@ -152,7 +150,6 @@ export const UI = {
|
|||||||
button_next: "nächster Schritt",
|
button_next: "nächster Schritt",
|
||||||
button_tutorial_overview: "Tutorial Übersicht",
|
button_tutorial_overview: "Tutorial Übersicht",
|
||||||
button_login: "Anmelden",
|
button_login: "Anmelden",
|
||||||
button_createVariable: "Typisierte Variable erstellen",
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
@@ -314,15 +311,5 @@ export const UI = {
|
|||||||
deviceselection_head: "Welches Board benutzt du?",
|
deviceselection_head: "Welches Board benutzt du?",
|
||||||
deviceselection_keep_selection: "Speichere meine Auswahl fürs nächste Mal (Du kannst das Board später in den Einstellungen wechseln)",
|
deviceselection_keep_selection: "Speichere meine Auswahl fürs nächste Mal (Du kannst das Board später in den Einstellungen wechseln)",
|
||||||
deviceselection_footnote: "Hier kommst du zur alten Blockly Version für den ",
|
deviceselection_footnote: "Hier kommst du zur alten Blockly Version für den ",
|
||||||
deviceselection_footnote_02: "oder die",
|
deviceselection_footnote_02: "oder die"
|
||||||
|
|
||||||
/**
|
|
||||||
* Sensor Markdown Information
|
|
||||||
*/
|
|
||||||
sensorinfo_info: "Informationen zum Sensor",
|
|
||||||
sensorinfo_description: "Beschreibung",
|
|
||||||
sensorinfo_measurable_phenos: "Messbare Phänomene",
|
|
||||||
sensorinfo_manufacturer: "Hersteller",
|
|
||||||
sensorinfo_lifetime: "Lebensdauer",
|
|
||||||
sensorinfo_explanation: "Diese Informationen wurden aus [sensors.wiki](https://sensors.wiki) entnommen. Für weitere Informationen besuchen Sie den Abschnitt über diesen Sensor "
|
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -15,16 +15,14 @@ export const UI = {
|
|||||||
toolbox_motors: "Motors",
|
toolbox_motors: "Motors",
|
||||||
variable_NUMBER: "Number (int)",
|
variable_NUMBER: "Number (int)",
|
||||||
variable_SHORT_NUMBER: "char",
|
variable_SHORT_NUMBER: "char",
|
||||||
variable_LONG: "Big number (long)",
|
variable_LONG: " Zahl (long)",
|
||||||
variable_DECIMAL: "Decimal (float)",
|
variable_DECIMAL: "Decimal (float)",
|
||||||
variables_TEXT: "Text (string)",
|
variables_TEXT: "Text (string)",
|
||||||
variables_ARRAY: "Array (array)",
|
variables_ARRAY: "Array (array)",
|
||||||
variables_CHARACTER: "Character (char)",
|
variables_CHARACTER: "char (char)",
|
||||||
variables_BOOLEAN: "Boolean (boolean)",
|
variables_BOOLEAN: "Boolean (boolean)",
|
||||||
variables_NULL: "void (void)",
|
variables_NULL: "void (void)",
|
||||||
variables_UNDEF: "undefined",
|
variables_UNDEF: "undefined",
|
||||||
variables_set: "set",
|
|
||||||
variables_to: "to",
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Tooltips
|
* Tooltips
|
||||||
@@ -147,7 +145,6 @@ export const UI = {
|
|||||||
button_next: "Next step",
|
button_next: "Next step",
|
||||||
button_tutorial_overview: "Tutorial overview",
|
button_tutorial_overview: "Tutorial overview",
|
||||||
button_login: "Login",
|
button_login: "Login",
|
||||||
button_createVariable: "Create Typed Variable",
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
@@ -311,13 +308,5 @@ export const UI = {
|
|||||||
deviceselection_footnote: "Here you can access the old blockly Version for the",
|
deviceselection_footnote: "Here you can access the old blockly Version for the",
|
||||||
deviceselection_footnote_02: "or the",
|
deviceselection_footnote_02: "or the",
|
||||||
|
|
||||||
/**
|
|
||||||
* Sensor Markdown Information
|
|
||||||
* */
|
|
||||||
sensorinfo_info: "Informationen regarding the Sensor",
|
|
||||||
sensorinfo_description: "Description",
|
|
||||||
sensorinfo_measurable_phenos: "Measurable Phenomena",
|
|
||||||
sensorinfo_manufacturer: "Manufacturer",
|
|
||||||
sensorinfo_lifetime: "Lifetime",
|
|
||||||
sensorinfo_explanation: "This information was fetched from [sensors.wiki](https://sensors.wiki). For more information visit the section on this sensor ",
|
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -16,6 +16,7 @@ class Toolbox extends React.Component {
|
|||||||
this.props.workspace,
|
this.props.workspace,
|
||||||
"callbackName",
|
"callbackName",
|
||||||
[
|
[
|
||||||
|
[`${Blockly.Msg.variable_SHORT_NUMBER}`, "char"],
|
||||||
[`${Blockly.Msg.variable_NUMBER}`, "int"],
|
[`${Blockly.Msg.variable_NUMBER}`, "int"],
|
||||||
[`${Blockly.Msg.variable_LONG}`, "long"],
|
[`${Blockly.Msg.variable_LONG}`, "long"],
|
||||||
[`${Blockly.Msg.variable_DECIMAL}`, "float"],
|
[`${Blockly.Msg.variable_DECIMAL}`, "float"],
|
||||||
@@ -32,7 +33,7 @@ class Toolbox extends React.Component {
|
|||||||
|
|
||||||
// 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", Blockly.Msg.button_createVariable);
|
button.setAttribute("text", "Create Typed Variable");
|
||||||
button.setAttribute("callbackKey", "callbackName");
|
button.setAttribute("callbackKey", "callbackName");
|
||||||
|
|
||||||
xmlList.push(button);
|
xmlList.push(button);
|
||||||
@@ -40,7 +41,6 @@ class Toolbox extends React.Component {
|
|||||||
// This gets all the variables that the user creates and adds them to the
|
// This gets all the variables that the user creates and adds them to the
|
||||||
// flyout.
|
// flyout.
|
||||||
const blockList = Blockly.VariablesDynamic.flyoutCategoryBlocks(workspace);
|
const blockList = Blockly.VariablesDynamic.flyoutCategoryBlocks(workspace);
|
||||||
console.log(blockList);
|
|
||||||
xmlList = xmlList.concat(blockList);
|
xmlList = xmlList.concat(blockList);
|
||||||
return xmlList;
|
return xmlList;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -11,7 +11,6 @@ import Sidebar from "./Sidebar";
|
|||||||
import Dialog from "../Dialog";
|
import Dialog from "../Dialog";
|
||||||
import SaveIcon from "./SaveIcon";
|
import SaveIcon from "./SaveIcon";
|
||||||
import store from "../../store";
|
import store from "../../store";
|
||||||
import DeviceSelection from "../DeviceSelection";
|
|
||||||
|
|
||||||
const CodeEditor = (props) => {
|
const CodeEditor = (props) => {
|
||||||
//const [filehandle, setFileHandle] = useState();
|
//const [filehandle, setFileHandle] = useState();
|
||||||
@@ -193,7 +192,6 @@ void loop() {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Grid>
|
</Grid>
|
||||||
<DeviceSelection />
|
|
||||||
<Grid item lg={4} md={4}>
|
<Grid item lg={4} md={4}>
|
||||||
<Button
|
<Button
|
||||||
style={{ padding: "1rem", margin: "1rem" }}
|
style={{ padding: "1rem", margin: "1rem" }}
|
||||||
|
|||||||
@@ -7,6 +7,8 @@ import { withStyles } from "@material-ui/core/styles";
|
|||||||
import * as Blockly from "blockly";
|
import * as Blockly from "blockly";
|
||||||
import { IconButton, Grid, Avatar, Typography } from "@material-ui/core";
|
import { IconButton, Grid, Avatar, Typography } from "@material-ui/core";
|
||||||
import { setBoard } from "../actions/boardAction";
|
import { setBoard } from "../actions/boardAction";
|
||||||
|
import mini_opacity from "../data/mini_opacity.png"
|
||||||
|
import mcu_opacity from "../data/mcu_opacity.png"
|
||||||
|
|
||||||
const styles = (theme) => ({
|
const styles = (theme) => ({
|
||||||
link: {
|
link: {
|
||||||
@@ -27,29 +29,30 @@ class DeviceSeclection extends Component {
|
|||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
open: props.selectedBoard ? false : true,
|
open: this.props.selectedBoard !== "" ? false : true,
|
||||||
selectedBoard: "",
|
selectedBoard : this.props.selectedBoard,
|
||||||
saveSettings: false,
|
saveSettings: false,
|
||||||
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleDialog = () => {
|
toggleDialog = () => {
|
||||||
|
|
||||||
this.props.setBoard(this.state.selectedBoard)
|
this.props.setBoard(this.state.selectedBoard)
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
onChange = (e) => {
|
|
||||||
if (e.target.checked) {
|
|
||||||
this.setState({ saveSettings: true });
|
|
||||||
} else {
|
|
||||||
this.setState({ saveSettings: false });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
onclick = (e, value) => {
|
onclick = (e, value) => {
|
||||||
|
console.log(e, value)
|
||||||
|
const root = document.querySelector(':root');
|
||||||
|
root.style.setProperty('--url', `url(${value === "mcu" ? mcu_opacity : mini_opacity })`);
|
||||||
this.setState({selectedBoard: value})
|
this.setState({selectedBoard: value})
|
||||||
this.props.setBoard(value)
|
this.props.setBoard(value)
|
||||||
this.setState({ open: !this.state });
|
this.setState({ open: !this.state });
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
@@ -80,6 +83,7 @@ class DeviceSeclection extends Component {
|
|||||||
</IconButton>
|
</IconButton>
|
||||||
<p>senseBox MCU</p>
|
<p>senseBox MCU</p>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
{/* <Grid item xs={4}>
|
{/* <Grid item xs={4}>
|
||||||
<IconButton onClick={(e) => this.onclick(e, "esp")}>
|
<IconButton onClick={(e) => this.onclick(e, "esp")}>
|
||||||
<Avatar
|
<Avatar
|
||||||
|
|||||||
@@ -8,7 +8,6 @@ import Button from "@material-ui/core/Button";
|
|||||||
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 ReactMarkdown from "react-markdown";
|
import ReactMarkdown from "react-markdown";
|
||||||
import rehypeRaw from "rehype-raw";
|
|
||||||
import Container from "@material-ui/core/Container";
|
import Container from "@material-ui/core/Container";
|
||||||
import ExpansionPanel from "@material-ui/core/ExpansionPanel";
|
import ExpansionPanel from "@material-ui/core/ExpansionPanel";
|
||||||
import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
|
import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
|
||||||
@@ -62,7 +61,6 @@ class Faq extends Component {
|
|||||||
className="news"
|
className="news"
|
||||||
allowDangerousHtml="true"
|
allowDangerousHtml="true"
|
||||||
children={object.answer}
|
children={object.answer}
|
||||||
rehypePlugins={[rehypeRaw]}
|
|
||||||
></ReactMarkdown>
|
></ReactMarkdown>
|
||||||
</Typography>
|
</Typography>
|
||||||
</ExpansionPanelDetails>
|
</ExpansionPanelDetails>
|
||||||
|
|||||||
@@ -187,6 +187,7 @@ class Home extends Component {
|
|||||||
</Grid>
|
</Grid>
|
||||||
) : null}
|
) : null}
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
<DeviceSelection />
|
<DeviceSelection />
|
||||||
{/* <HintTutorialExists /> */}
|
{/* <HintTutorialExists /> */}
|
||||||
{this.props.platform ? (
|
{this.props.platform ? (
|
||||||
|
|||||||
@@ -18,7 +18,6 @@ import Divider from "@material-ui/core/Divider";
|
|||||||
import Typography from "@material-ui/core/Typography";
|
import Typography from "@material-ui/core/Typography";
|
||||||
import Backdrop from "@material-ui/core/Backdrop";
|
import Backdrop from "@material-ui/core/Backdrop";
|
||||||
import CircularProgress from "@material-ui/core/CircularProgress";
|
import CircularProgress from "@material-ui/core/CircularProgress";
|
||||||
import DeviceSelection from "../DeviceSelection";
|
|
||||||
|
|
||||||
const styles = (theme) => ({
|
const styles = (theme) => ({
|
||||||
link: {
|
link: {
|
||||||
@@ -61,7 +60,8 @@ class ProjectHome extends Component {
|
|||||||
this.setState({
|
this.setState({
|
||||||
snackbar: true,
|
snackbar: true,
|
||||||
key: Date.now(),
|
key: Date.now(),
|
||||||
message: `Dein angefragtes ${type === "gallery" ? "Galerie-" : ""
|
message: `Dein angefragtes ${
|
||||||
|
type === "gallery" ? "Galerie-" : ""
|
||||||
}Projekt konnte nicht gefunden werden.`,
|
}Projekt konnte nicht gefunden werden.`,
|
||||||
type: "error",
|
type: "error",
|
||||||
});
|
});
|
||||||
@@ -108,7 +108,6 @@ class ProjectHome extends Component {
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<h1>{data}</h1>
|
<h1>{data}</h1>
|
||||||
<DeviceSelection />
|
|
||||||
{this.props.progress ? (
|
{this.props.progress ? (
|
||||||
<Backdrop open invisible>
|
<Backdrop open invisible>
|
||||||
<CircularProgress color="primary" />
|
<CircularProgress color="primary" />
|
||||||
@@ -128,7 +127,8 @@ class ProjectHome extends Component {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Link
|
<Link
|
||||||
to={`/${data === "Projekte" ? "project" : "gallery"
|
to={`/${
|
||||||
|
data === "Projekte" ? "project" : "gallery"
|
||||||
}/${project._id}`}
|
}/${project._id}`}
|
||||||
style={{ textDecoration: "none", color: "inherit" }}
|
style={{ textDecoration: "none", color: "inherit" }}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -1,77 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import Box from "@material-ui/core/Box";
|
|
||||||
import Tab from "@material-ui/core/Tab";
|
|
||||||
import TabContext from "@material-ui/lab/TabContext";
|
|
||||||
import TabList from "@material-ui/lab/TabList";
|
|
||||||
import TabPanel from "@material-ui/lab/TabPanel";
|
|
||||||
import store from "../store";
|
|
||||||
import ReactMarkdown from "react-markdown";
|
|
||||||
import * as Blockly from "blockly";
|
|
||||||
|
|
||||||
|
|
||||||
export default function LabTabs() {
|
|
||||||
const [value, setValue] = React.useState('1');
|
|
||||||
|
|
||||||
const handleChange = (event, newValue) => {
|
|
||||||
setValue(newValue);
|
|
||||||
};
|
|
||||||
|
|
||||||
// get the description in the current language if no lang is give return english or the first one
|
|
||||||
function filterLanguage(options) {
|
|
||||||
var lang;
|
|
||||||
if (window.localStorage.getItem("locale")) {
|
|
||||||
lang = window.localStorage.getItem("locale").split("_")[0];
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
lang = "en";
|
|
||||||
}
|
|
||||||
for (var i = 0; i < options.length; i++) {
|
|
||||||
if (options[i].languageCode === lang) {
|
|
||||||
return options[i].text;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return options[0].text;
|
|
||||||
}
|
|
||||||
var currentStore = store.getState();
|
|
||||||
// ALL SENSOR DATA FROM WIKI
|
|
||||||
var sensorData = currentStore.sensorwiki;
|
|
||||||
// NAME OF SELECTED BLOCK
|
|
||||||
var sensorName = currentStore.workspace.code.data.name;
|
|
||||||
// SEARCH ALL DATA FOR SELECTED BLOCK NAME
|
|
||||||
var sensorInfo = sensorData.find(function (element) {
|
|
||||||
return element.slug === sensorName;
|
|
||||||
});
|
|
||||||
if (sensorInfo) {
|
|
||||||
sensorInfo.markdown = "Coming soon...";
|
|
||||||
|
|
||||||
// GET DESCRIPTION OF SELECTED BLOCK
|
|
||||||
sensorInfo.details = `# ${sensorName.toUpperCase()}
|
|
||||||
${Blockly.Msg.sensorinfo_explanation} [${sensorName.toUpperCase()}](https://sensors.wiki/sensor/detail/${sensorName})
|
|
||||||
## ${Blockly.Msg.sensorinfo_description}
|
|
||||||
${filterLanguage(sensorInfo.description.item)}
|
|
||||||
## ${Blockly.Msg.sensorinfo_measurable_phenos}
|
|
||||||
## ${Blockly.Msg.sensorinfo_manufacturer}
|
|
||||||
${sensorInfo.manufacturer}
|
|
||||||
## ${Blockly.Msg.sensorinfo_lifetime}
|
|
||||||
${sensorInfo.lifePeriod}`
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Box sx={{ width: '100%', typography: 'body1' }}>
|
|
||||||
<TabContext value={value}>
|
|
||||||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
|
||||||
<TabList onChange={handleChange}>
|
|
||||||
<Tab label="Basic Information" value="1" />
|
|
||||||
<Tab label="Details" value="2" />
|
|
||||||
</TabList>
|
|
||||||
</Box>
|
|
||||||
<TabPanel value="1">
|
|
||||||
{sensorInfo ? <ReactMarkdown>{sensorInfo.markdown}</ReactMarkdown> : "No data available"}
|
|
||||||
</TabPanel>
|
|
||||||
<TabPanel value="2">
|
|
||||||
{sensorInfo ? <ReactMarkdown>{sensorInfo.details}</ReactMarkdown> : "No data available"}
|
|
||||||
</TabPanel>
|
|
||||||
</TabContext>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,41 +1,17 @@
|
|||||||
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 withWidth from "@material-ui/core/withWidth";
|
import withWidth from "@material-ui/core/withWidth";
|
||||||
import { Button, Card } from "@material-ui/core";
|
|
||||||
|
import { Card } from "@material-ui/core";
|
||||||
import * as Blockly from "blockly";
|
import * as Blockly from "blockly";
|
||||||
import CardContent from "@material-ui/core/CardContent";
|
import CardContent from "@material-ui/core/CardContent";
|
||||||
|
|
||||||
import Typography from "@material-ui/core/Typography";
|
import Typography from "@material-ui/core/Typography";
|
||||||
import ReactMarkdown from "react-markdown";
|
import ReactMarkdown from "react-markdown";
|
||||||
import Dialog from "@material-ui/core/Dialog";
|
|
||||||
import DialogActions from "@material-ui/core/DialogActions";
|
|
||||||
import DialogContent from "@material-ui/core/DialogContent";
|
|
||||||
import Slide from "@material-ui/core/Slide";
|
|
||||||
import SensorInfo from "./SensorInfo";
|
|
||||||
import store from "../store";
|
|
||||||
|
|
||||||
const Transition = React.forwardRef(function Transition(props, ref) {
|
|
||||||
return <Slide direction="up" ref={ref} {...props} />;
|
|
||||||
});
|
|
||||||
|
|
||||||
class TooltipViewer extends Component {
|
class TooltipViewer extends Component {
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.inputRef = React.createRef();
|
|
||||||
this.state = {
|
|
||||||
open: false,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
toggleDialog = () => {
|
|
||||||
this.setState({ open: !this.state });
|
|
||||||
};
|
|
||||||
|
|
||||||
openDialog = () => {
|
|
||||||
this.setState({ open: true });
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Card
|
<Card
|
||||||
@@ -53,46 +29,14 @@ class TooltipViewer extends Component {
|
|||||||
{Blockly.Msg.tooltip_viewer}
|
{Blockly.Msg.tooltip_viewer}
|
||||||
</Typography>
|
</Typography>
|
||||||
|
|
||||||
<Typography variant="body2" component="p">
|
|
||||||
<ReactMarkdown linkTarget="_blank">
|
<ReactMarkdown linkTarget="_blank">
|
||||||
{this.props.tooltip}
|
{this.props.tooltip}
|
||||||
</ReactMarkdown>
|
</ReactMarkdown>
|
||||||
{store.getState().workspace.code.data ? (
|
|
||||||
<Button
|
{this.props.helpurl !== "" ? (
|
||||||
label="Mehr"
|
|
||||||
variant="contained"
|
|
||||||
color="primary"
|
|
||||||
onClick={() => {
|
|
||||||
this.openDialog();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Sensor Informationen
|
|
||||||
</Button>
|
|
||||||
) : (
|
|
||||||
<ReactMarkdown>{`${Blockly.Msg.tooltip_moreInformation} [${Blockly.Msg.labels_here}](${this.props.helpurl})`}</ReactMarkdown>
|
<ReactMarkdown>{`${Blockly.Msg.tooltip_moreInformation} [${Blockly.Msg.labels_here}](${this.props.helpurl})`}</ReactMarkdown>
|
||||||
)}
|
) : null}
|
||||||
</Typography>
|
|
||||||
</CardContent>
|
</CardContent>
|
||||||
{store.getState().workspace.code.data ? (<Dialog
|
|
||||||
open={this.state.open}
|
|
||||||
TransitionComponent={Transition}
|
|
||||||
keepMounted
|
|
||||||
aria-describedby="alert-dialog-slide-description"
|
|
||||||
onClose={() => {
|
|
||||||
this.toggleDialog();
|
|
||||||
}}
|
|
||||||
maxWidth={"md"}
|
|
||||||
fullWidth={true}
|
|
||||||
>
|
|
||||||
<DialogContent>
|
|
||||||
<SensorInfo></SensorInfo>
|
|
||||||
</DialogContent>
|
|
||||||
<DialogActions>
|
|
||||||
<Button onClick={() => {
|
|
||||||
this.toggleDialog();
|
|
||||||
}}>Close</Button>
|
|
||||||
</DialogActions>
|
|
||||||
</Dialog>) : (null)}
|
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -259,7 +259,7 @@ class Builder extends Component {
|
|||||||
window.scrollTo(0, 0);
|
window.scrollTo(0, 0);
|
||||||
};
|
};
|
||||||
|
|
||||||
submit = () => {;
|
submit = () => {
|
||||||
var isError = this.props.checkError();
|
var isError = this.props.checkError();
|
||||||
if (isError) {
|
if (isError) {
|
||||||
this.setState({
|
this.setState({
|
||||||
@@ -273,8 +273,6 @@ class Builder extends Component {
|
|||||||
} else {
|
} else {
|
||||||
// export steps without attribute 'url'
|
// export steps without attribute 'url'
|
||||||
var steps = this.props.steps;
|
var steps = this.props.steps;
|
||||||
// console.log(steps);
|
|
||||||
var length = steps.length;
|
|
||||||
var newTutorial = new FormData();
|
var newTutorial = new FormData();
|
||||||
newTutorial.append("title", this.props.title);
|
newTutorial.append("title", this.props.title);
|
||||||
newTutorial.append("difficulty", this.props.difficulty);
|
newTutorial.append("difficulty", this.props.difficulty);
|
||||||
@@ -301,30 +299,11 @@ class Builder extends Component {
|
|||||||
newTutorial.append(`steps[${i}][hardware][${j}]`, hardware);
|
newTutorial.append(`steps[${i}][hardware][${j}]`, hardware);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if (i === length-1 && step.type === "finalpage") {
|
|
||||||
newTutorial.append(`steps[${i}][samplesolutions]`, step.samplesolutions);
|
|
||||||
newTutorial.append(`steps[${i}][furthertutorials]`, step.furthertutorials);
|
|
||||||
|
|
||||||
if (step.samplesolutions === true) {
|
|
||||||
var solutionindex = 0;
|
|
||||||
steps.forEach((solutionstep) => {
|
|
||||||
if (solutionstep.type === "task"&& solutionstep.xml) {
|
|
||||||
newTutorial.append(`steps[${i}][solutions][${solutionindex}][type]`, solutionstep.type);
|
|
||||||
newTutorial.append(`steps[${i}][solutions][${solutionindex}][headline]`, solutionstep.headline);
|
|
||||||
newTutorial.append(`steps[${i}][solutions][${solutionindex}][xml]`, solutionstep.xml);
|
|
||||||
solutionindex++;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (step.xml) {
|
if (step.xml) {
|
||||||
// optional
|
// optional
|
||||||
newTutorial.append(`steps[${i}][xml]`, step.xml);
|
newTutorial.append(`steps[${i}][xml]`, step.xml);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
for (const pair of newTutorial.entries()) {
|
|
||||||
console.log(`${pair[0]}, ${pair[1]}`);
|
|
||||||
}
|
|
||||||
return newTutorial;
|
return newTutorial;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,107 +0,0 @@
|
|||||||
import React, { Component } from "react";
|
|
||||||
import PropTypes from "prop-types";
|
|
||||||
import { connect } from "react-redux";
|
|
||||||
import { changeContent } from "../../../actions/tutorialBuilderActions";
|
|
||||||
|
|
||||||
import { withStyles } from "@material-ui/core/styles";
|
|
||||||
import Switch from "@material-ui/core/Switch";
|
|
||||||
import FormGroup from '@material-ui/core/FormGroup';
|
|
||||||
import FormControlLabel from "@material-ui/core/FormControlLabel";
|
|
||||||
|
|
||||||
const styles = (theme) => ({
|
|
||||||
errorColor: {
|
|
||||||
color: theme.palette.error.dark,
|
|
||||||
},
|
|
||||||
errorBorder: {
|
|
||||||
border: `1px solid ${theme.palette.error.dark}`,
|
|
||||||
},
|
|
||||||
errorButton: {
|
|
||||||
marginTop: "5px",
|
|
||||||
height: "40px",
|
|
||||||
backgroundColor: theme.palette.error.dark,
|
|
||||||
"&:hover": {
|
|
||||||
backgroundColor: theme.palette.error.dark,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
class FinalPageOptions extends Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
checkedSampleSolutions: props.checkedSampleSolutions,
|
|
||||||
checkedFurtherTutorials: props.checkedFurtherTutorials,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
onChangeSampleSolutions = (value) => {
|
|
||||||
var oldValue = this.state.checked;
|
|
||||||
this.setState({ checked: value });
|
|
||||||
if (oldValue !== value) {
|
|
||||||
this.props.changeContent(value, this.props.index, "samplesolutions");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
onChangeFurtherTutorials = (value) => {
|
|
||||||
var oldValue = this.state.checked;
|
|
||||||
this.setState({ checked: value });
|
|
||||||
if (oldValue !== value) {
|
|
||||||
this.props.changeContent(value, this.props.index, "furthertutorials");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
var steps = this.props.steps;
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
marginBottom: "10px",
|
|
||||||
padding: "18.5px 14px",
|
|
||||||
borderRadius: "25px",
|
|
||||||
border: "1px solid lightgrey",
|
|
||||||
width: "calc(100% - 28px)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<FormGroup>
|
|
||||||
<FormControlLabel
|
|
||||||
labelPlacement="end"
|
|
||||||
label={
|
|
||||||
"Musterlösung(en) der Aufgabe(n) auf der Abschlussseite anzeigen"
|
|
||||||
}
|
|
||||||
control={
|
|
||||||
<Switch
|
|
||||||
checked={this.state.checked}
|
|
||||||
onChange={(e) => this.onChangeSampleSolutions(e.target.checked)}
|
|
||||||
color="primary"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<FormControlLabel
|
|
||||||
labelPlacement="end"
|
|
||||||
label={
|
|
||||||
"Vorschläge für weitere Tutorials auf der Abschlussseite anzeigen"
|
|
||||||
}
|
|
||||||
control={
|
|
||||||
<Switch
|
|
||||||
checked={this.state.checked}
|
|
||||||
onChange={(e) => this.onChangeFurtherTutorials(e.target.checked)}
|
|
||||||
color="primary"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</FormGroup>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
FinalPageOptions.propTypes = {
|
|
||||||
changeContent: PropTypes.func.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
const mapStateToProps = (state) => ({
|
|
||||||
});
|
|
||||||
|
|
||||||
export default connect(mapStateToProps, {
|
|
||||||
changeContent,
|
|
||||||
})(withStyles(styles, { withTheme: true })(FinalPageOptions));
|
|
||||||
@@ -29,7 +29,6 @@ import {
|
|||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
|
|
||||||
import MarkdownEditor from "./MarkdownEditor";
|
import MarkdownEditor from "./MarkdownEditor";
|
||||||
import FinalPageOptions from "./FinalPageOptions";
|
|
||||||
|
|
||||||
const styles = (theme) => ({
|
const styles = (theme) => ({
|
||||||
button: {
|
button: {
|
||||||
@@ -56,8 +55,6 @@ class Step extends Component {
|
|||||||
render() {
|
render() {
|
||||||
var index = this.props.index;
|
var index = this.props.index;
|
||||||
var steps = this.props.steps;
|
var steps = this.props.steps;
|
||||||
// console.log(this.props.steps);
|
|
||||||
// console.log(this.props.step);
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
@@ -67,21 +64,12 @@ class Step extends Component {
|
|||||||
marginBottom: "20px",
|
marginBottom: "20px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{this.props.step.type !== "finalpage" ? (
|
|
||||||
<Typography
|
<Typography
|
||||||
variant="h6"
|
variant="h6"
|
||||||
style={{ marginBottom: "10px", marginLeft: "4px" }}
|
style={{ marginBottom: "10px", marginLeft: "4px" }}
|
||||||
>
|
>
|
||||||
Schritt {index + 1}
|
Schritt {index + 1}
|
||||||
</Typography>
|
</Typography>
|
||||||
) : (
|
|
||||||
<Typography
|
|
||||||
variant="h6"
|
|
||||||
style={{ marginBottom: "10px", marginLeft: "4px" }}
|
|
||||||
>
|
|
||||||
Abschlussseite
|
|
||||||
</Typography>
|
|
||||||
)}
|
|
||||||
<div style={{ display: "flex", position: "relative" }}>
|
<div style={{ display: "flex", position: "relative" }}>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
@@ -92,8 +80,6 @@ class Step extends Component {
|
|||||||
bottom: "10px",
|
bottom: "10px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{this.props.step.type !== "finalpage" ? (
|
|
||||||
<div>
|
|
||||||
<Tooltip title="Schritt hinzufügen" arrow>
|
<Tooltip title="Schritt hinzufügen" arrow>
|
||||||
<IconButton
|
<IconButton
|
||||||
className={this.props.classes.button}
|
className={this.props.classes.button}
|
||||||
@@ -123,7 +109,7 @@ class Step extends Component {
|
|||||||
arrow
|
arrow
|
||||||
>
|
>
|
||||||
<IconButton
|
<IconButton
|
||||||
disabled={index >= this.props.steps.length - 2}
|
disabled={index === steps.length - 1}
|
||||||
className={this.props.classes.button}
|
className={this.props.classes.button}
|
||||||
style={{ marginBottom: "5px" }}
|
style={{ marginBottom: "5px" }}
|
||||||
onClick={() => this.props.changeStepIndex(index, index + 1)}
|
onClick={() => this.props.changeStepIndex(index, index + 1)}
|
||||||
@@ -133,7 +119,7 @@ class Step extends Component {
|
|||||||
</Tooltip>
|
</Tooltip>
|
||||||
<Tooltip title={`Schritt ${index + 1} löschen`} arrow>
|
<Tooltip title={`Schritt ${index + 1} löschen`} arrow>
|
||||||
<IconButton
|
<IconButton
|
||||||
disabled={index === 0 && index === steps.length - 1}
|
disabled={index === 0}
|
||||||
className={clsx(
|
className={clsx(
|
||||||
this.props.classes.button,
|
this.props.classes.button,
|
||||||
this.props.classes.delete
|
this.props.classes.delete
|
||||||
@@ -146,12 +132,8 @@ class Step extends Component {
|
|||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
<div style={{ width: "100%", marginLeft: "54px" }}>
|
<div style={{ width: "100%", marginLeft: "54px" }}>
|
||||||
{this.props.step.type !== "finalpage" ? (
|
|
||||||
<StepType value={this.props.step.type} index={index} />
|
<StepType value={this.props.step.type} index={index} />
|
||||||
) : null}
|
|
||||||
<Textfield
|
<Textfield
|
||||||
value={this.props.step.headline}
|
value={this.props.step.headline}
|
||||||
property={"headline"}
|
property={"headline"}
|
||||||
@@ -196,21 +178,12 @@ class Step extends Component {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
{this.props.step.type !== "finalpage" ? (
|
|
||||||
<BlocklyExample
|
<BlocklyExample
|
||||||
value={this.props.step.xml}
|
value={this.props.step.xml}
|
||||||
index={index}
|
index={index}
|
||||||
task={this.props.step.type === "task"}
|
task={this.props.step.type === "task"}
|
||||||
error={this.props.error.steps[index].xml ? true : false}
|
error={this.props.error.steps[index].xml ? true : false}
|
||||||
/>
|
/>
|
||||||
) : (
|
|
||||||
<FinalPageOptions
|
|
||||||
steps={steps}
|
|
||||||
checkedSampleSolutions={this.props.step.samplesolutions}
|
|
||||||
checkedFurtherTutorials={this.props.step.furthertutorials}
|
|
||||||
index={index}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,430 +0,0 @@
|
|||||||
import React, { Component } from "react";
|
|
||||||
import { connect } from "react-redux";
|
|
||||||
import axios from "axios";
|
|
||||||
|
|
||||||
import BlocklyWindow from "../Blockly/BlocklyWindow";
|
|
||||||
|
|
||||||
import clsx from "clsx";
|
|
||||||
import { alpha } from "@material-ui/core/styles";
|
|
||||||
import { withStyles } from "@material-ui/core/styles";
|
|
||||||
|
|
||||||
import {
|
|
||||||
faCheck,
|
|
||||||
faTimes,
|
|
||||||
} from "@fortawesome/free-solid-svg-icons";
|
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
import ReactStars from "react-rating-stars-component";
|
|
||||||
import Grid from "@material-ui/core/Grid";
|
|
||||||
import Typography from "@material-ui/core/Typography";
|
|
||||||
import Paper from "@material-ui/core/Paper";
|
|
||||||
import ReactMarkdown from "react-markdown";
|
|
||||||
import remarkGfm from "remark-gfm";
|
|
||||||
import remarkGemoji from "remark-gemoji";
|
|
||||||
import Dialog from "../Dialog";
|
|
||||||
import { IconButton } from "@material-ui/core";
|
|
||||||
import { clearMessages } from "../../actions/messageActions";
|
|
||||||
|
|
||||||
import * as Blockly from "blockly/core";
|
|
||||||
|
|
||||||
// import { getTutorials,
|
|
||||||
// tutorialProgress,
|
|
||||||
// resetTutorial
|
|
||||||
// } from "../../actions/tutorialActions";
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const styles = (theme) => ({
|
|
||||||
outerDiv: {
|
|
||||||
position: "absolute",
|
|
||||||
right: "-30px",
|
|
||||||
bottom: "-30px",
|
|
||||||
width: "160px",
|
|
||||||
height: "160px",
|
|
||||||
color: alpha(theme.palette.secondary.main, 0.6),
|
|
||||||
},
|
|
||||||
outerDivError: {
|
|
||||||
stroke: alpha(theme.palette.error.dark, 0.6),
|
|
||||||
color: alpha(theme.palette.error.dark, 0.6),
|
|
||||||
},
|
|
||||||
outerDivSuccess: {
|
|
||||||
stroke: alpha(theme.palette.primary.main, 0.6),
|
|
||||||
color: alpha(theme.palette.primary.main, 0.6),
|
|
||||||
},
|
|
||||||
outerDivOther: {
|
|
||||||
stroke: alpha(theme.palette.secondary.main, 0.6),
|
|
||||||
},
|
|
||||||
innerDiv: {
|
|
||||||
width: "inherit",
|
|
||||||
height: "inherit",
|
|
||||||
display: "table-cell",
|
|
||||||
verticalAlign: "middle",
|
|
||||||
textAlign: "center",
|
|
||||||
},
|
|
||||||
// button: {
|
|
||||||
// backgroundColor: theme.palette.primary.main,
|
|
||||||
// color: theme.palette.primary.contrastText,
|
|
||||||
// width: "40px",
|
|
||||||
// height: "40px",
|
|
||||||
// "&:hover": {
|
|
||||||
// backgroundColor: theme.palette.primary.main,
|
|
||||||
// color: theme.palette.primary.contrastText,
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// link: {
|
|
||||||
// color: theme.palette.primary.main,
|
|
||||||
// textDecoration: "none",
|
|
||||||
// "&:hover": {
|
|
||||||
// color: theme.palette.primary.main,
|
|
||||||
// textDecoration: "underline",
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
});
|
|
||||||
|
|
||||||
class FinalPage extends Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
open: false,
|
|
||||||
title: "",
|
|
||||||
content: "",
|
|
||||||
tutorials: [],
|
|
||||||
randomtutorials: [],
|
|
||||||
activeXML: "",
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillMount() {
|
|
||||||
if (this.props.step.furthertutorials === true) {
|
|
||||||
axios
|
|
||||||
.get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial`)
|
|
||||||
.then((res) => {
|
|
||||||
this.setState({ tutorials: res.data.tutorials });
|
|
||||||
this.setState({ randomtutorials: this.getRandomTutorials(this.state.tutorials, 3) });
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
toggleDialog = (solution) => {
|
|
||||||
console.log(solution)
|
|
||||||
if (this.state.open === true) {
|
|
||||||
this.setState({ open: !this.state.open, title: "", activeXML: "" });
|
|
||||||
} else if (this.state.open === false) {
|
|
||||||
this.setState({ open: !this.state.open, title: "Task - " + solution.headline, activeXML: solution.xml });
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
getRandomTutorials = (tutorials, n) => {
|
|
||||||
var length = tutorials.length;
|
|
||||||
var taken = new Array(length);
|
|
||||||
var result = new Array(n);
|
|
||||||
if (n > length)
|
|
||||||
throw new RangeError("getRandom: more elements taken than available");
|
|
||||||
while (n--) {
|
|
||||||
var x = Math.floor(Math.random() * length);
|
|
||||||
result[n] = tutorials[x in taken ? taken[x] : x];
|
|
||||||
taken[x] = --length in taken ? taken[length] : length;
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
// toggleDialog = (solution) => {
|
|
||||||
// this.setState({ open: !this.state.open });
|
|
||||||
// // if (solution) {
|
|
||||||
// // this.setState({ open: !this.state.open, activeSolution: solution });
|
|
||||||
// // } else {
|
|
||||||
// // this.setState({ open: !this.state.open, activeSolution: null });
|
|
||||||
// // }
|
|
||||||
// };
|
|
||||||
|
|
||||||
render() {
|
|
||||||
var step = this.props.step;
|
|
||||||
var tutorials = this.state.tutorials;
|
|
||||||
var randomtutorials = this.state.randomtutorials;
|
|
||||||
// var randomtutorials = this.getRandomTutorials(tutorials, 3);
|
|
||||||
// console.log(randomtutorials)
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Typography>
|
|
||||||
<ReactMarkdown
|
|
||||||
className={"tutorial"}
|
|
||||||
linkTarget={"_blank"}
|
|
||||||
skipHtml={false}
|
|
||||||
allowDangerousHtml={true}
|
|
||||||
remarkPlugins={[remarkGfm, remarkGemoji]}
|
|
||||||
>
|
|
||||||
{step.text}
|
|
||||||
</ReactMarkdown>
|
|
||||||
</Typography>
|
|
||||||
{step.media ? (
|
|
||||||
step.media.picture ? (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: "center",
|
|
||||||
marginBottom: "5px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src={`${process.env.REACT_APP_BLOCKLY_API}/media/${step.media.picture.path}`}
|
|
||||||
alt=""
|
|
||||||
style={{ maxHeight: "40vH", maxWidth: "100%" }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
) : step.media.youtube ? (
|
|
||||||
/*16:9; width: 800px; height: width/16*9=450px*/
|
|
||||||
<div style={{ maxWidth: "800px", margin: "auto" }}>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
position: "relative",
|
|
||||||
height: 0,
|
|
||||||
paddingBottom: "calc(100% / 16 * 9)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<iframe
|
|
||||||
title={step.media.youtube}
|
|
||||||
style={{
|
|
||||||
position: "absolute",
|
|
||||||
top: "0",
|
|
||||||
left: "0",
|
|
||||||
width: "100%",
|
|
||||||
maxWidth: "800px",
|
|
||||||
height: "100%",
|
|
||||||
maxHeight: "450px",
|
|
||||||
}}
|
|
||||||
src={`https://www.youtube.com/embed/${step.media.youtube}`}
|
|
||||||
frameBorder="0"
|
|
||||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
|
||||||
allowFullScreen
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : null
|
|
||||||
) : null}
|
|
||||||
{step.samplesolutions === true ? (
|
|
||||||
<div>
|
|
||||||
<h2 style={{ justifyContent: "center" }}>Musterlösungen</h2>
|
|
||||||
<Grid
|
|
||||||
container
|
|
||||||
spacing={2}
|
|
||||||
style={{ marginBottom: "5px", justifyContent: "space-evenly" }}
|
|
||||||
>
|
|
||||||
{step.solutions.map((solution) => {
|
|
||||||
return (
|
|
||||||
<Grid
|
|
||||||
item
|
|
||||||
xs={12}
|
|
||||||
sm={6}
|
|
||||||
md={4}
|
|
||||||
xl={3}
|
|
||||||
style={{ display: "flex", justifyContent: "center" }}
|
|
||||||
// onclick={this.toggleDialog(solution)}
|
|
||||||
>
|
|
||||||
<IconButton
|
|
||||||
onClick={() => this.toggleDialog(solution)}
|
|
||||||
>
|
|
||||||
<Paper
|
|
||||||
style={{
|
|
||||||
padding: "10px",
|
|
||||||
position: "relative",
|
|
||||||
overflow: "hidden",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<h3>{"Task - " + solution.headline}</h3>
|
|
||||||
<BlocklyWindow
|
|
||||||
svg
|
|
||||||
blockDisabled
|
|
||||||
initialXml={solution.xml}
|
|
||||||
/>
|
|
||||||
</Paper>
|
|
||||||
</IconButton>
|
|
||||||
</Grid>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Grid>
|
|
||||||
|
|
||||||
<Dialog
|
|
||||||
open={this.state.open}
|
|
||||||
onClose={this.toggleDialog}
|
|
||||||
onClick={this.toggleDialog}
|
|
||||||
title={this.state.title}
|
|
||||||
button={Blockly.Msg.button_close}
|
|
||||||
>
|
|
||||||
<BlocklyWindow
|
|
||||||
svg
|
|
||||||
blockDisabled
|
|
||||||
initialXml={this.state.activeXML}
|
|
||||||
/>
|
|
||||||
</Dialog>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{step.furthertutorials === true ? (
|
|
||||||
<div>
|
|
||||||
<h2 style={{ justifyContent: "center" }}>Weitere Tutorials</h2>
|
|
||||||
<Grid
|
|
||||||
container
|
|
||||||
spacing={2}
|
|
||||||
style={{ justifyContent: "space-evenly" }}
|
|
||||||
>
|
|
||||||
{randomtutorials.map((tutorial, i) => {
|
|
||||||
var status = this.props.status.filter(
|
|
||||||
(status) => status._id === tutorial._id
|
|
||||||
)[0];
|
|
||||||
var tasks = status.tasks;
|
|
||||||
var error =
|
|
||||||
status.tasks.filter((task) => task.type === "error").length > 0;
|
|
||||||
var success =
|
|
||||||
status.tasks.filter((task) => task.type === "success").length /
|
|
||||||
tasks.length;
|
|
||||||
var tutorialStatus =
|
|
||||||
success === 1 ? "Success" : error ? "Error" : "Other";
|
|
||||||
const firstExample = {
|
|
||||||
size: 30,
|
|
||||||
value: tutorial.difficulty,
|
|
||||||
edit: false,
|
|
||||||
isHalf: true,
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<Grid item xs={12} sm={6} md={4} xl={3} key={i} style={{}}>
|
|
||||||
<Link
|
|
||||||
to={`/tutorial/${tutorial._id}`}
|
|
||||||
style={{ textDecoration: "none", color: "inherit" }}
|
|
||||||
>
|
|
||||||
<Paper
|
|
||||||
style={{
|
|
||||||
height: "150px",
|
|
||||||
padding: "10px",
|
|
||||||
position: "relative",
|
|
||||||
overflow: "hidden",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{tutorial.title}
|
|
||||||
<ReactStars {...firstExample} />
|
|
||||||
<div
|
|
||||||
className={clsx(this.props.classes.outerDiv)}
|
|
||||||
style={{ width: "160px", height: "160px", border: 0 }}
|
|
||||||
>
|
|
||||||
<svg style={{ width: "100%", height: "100%" }}>
|
|
||||||
{error || success === 1 ? (
|
|
||||||
<circle
|
|
||||||
className={
|
|
||||||
error
|
|
||||||
? this.props.classes.outerDivError
|
|
||||||
: this.props.classes.outerDivSuccess
|
|
||||||
}
|
|
||||||
style={{
|
|
||||||
transform: "rotate(-44deg)",
|
|
||||||
transformOrigin: "50% 50%",
|
|
||||||
}}
|
|
||||||
r="75"
|
|
||||||
cx="50%"
|
|
||||||
cy="50%"
|
|
||||||
fill="none"
|
|
||||||
stroke-width="10"
|
|
||||||
></circle>
|
|
||||||
) : (
|
|
||||||
<circle
|
|
||||||
className={this.props.classes.outerDivOther}
|
|
||||||
style={{
|
|
||||||
transform: "rotate(-44deg)",
|
|
||||||
transformOrigin: "50% 50%",
|
|
||||||
}}
|
|
||||||
r="75"
|
|
||||||
cx="50%"
|
|
||||||
cy="50%"
|
|
||||||
fill="none"
|
|
||||||
stroke-width="10"
|
|
||||||
stroke-dashoffset={`${75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
|
|
||||||
}`}
|
|
||||||
stroke-dasharray={`${75 * 2 * Math.PI * (1 - (50 / 100 - success / 2))
|
|
||||||
} ${75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
|
|
||||||
}`}
|
|
||||||
></circle>
|
|
||||||
)}
|
|
||||||
{success < 1 && !error ? (
|
|
||||||
<circle
|
|
||||||
className={this.props.classes.outerDivSuccess}
|
|
||||||
style={{
|
|
||||||
transform: "rotate(-44deg)",
|
|
||||||
transformOrigin: "50% 50%",
|
|
||||||
}}
|
|
||||||
r="75"
|
|
||||||
cx="50%"
|
|
||||||
cy="50%"
|
|
||||||
fill="none"
|
|
||||||
stroke-width="10"
|
|
||||||
stroke-dashoffset={`${75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
|
|
||||||
}`}
|
|
||||||
stroke-dasharray={`${75 * 2 * Math.PI}`}
|
|
||||||
></circle>
|
|
||||||
) : null}
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className={clsx(
|
|
||||||
this.props.classes.outerDiv,
|
|
||||||
tutorialStatus === "Error"
|
|
||||||
? this.props.classes.outerDivError
|
|
||||||
: tutorialStatus === "Success"
|
|
||||||
? this.props.classes.outerDivSuccess
|
|
||||||
: null
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className={this.props.classes.innerDiv}>
|
|
||||||
{error || success === 1 ? (
|
|
||||||
<FontAwesomeIcon
|
|
||||||
size="4x"
|
|
||||||
icon={
|
|
||||||
tutorialStatus === "Success" ? faCheck : faTimes
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Typography
|
|
||||||
variant="h3"
|
|
||||||
className={
|
|
||||||
success > 0
|
|
||||||
? this.props.classes.outerDivSuccess
|
|
||||||
: {}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{Math.round(success * 100)}%
|
|
||||||
</Typography>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Paper>
|
|
||||||
</Link>
|
|
||||||
</Grid>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Grid>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const mapStateToProps = (state) => ({
|
|
||||||
tutorials: state.tutorial.tutorials,
|
|
||||||
status: state.tutorial.status,
|
|
||||||
isLoading: state.tutorial.progress,
|
|
||||||
message: state.message,
|
|
||||||
progress: state.auth.progress,
|
|
||||||
user: state.auth.user,
|
|
||||||
authProgress: state.auth.progress,
|
|
||||||
});
|
|
||||||
|
|
||||||
export default connect(mapStateToProps, {
|
|
||||||
// getTutorials,
|
|
||||||
// resetTutorial,
|
|
||||||
// tutorialProgress,
|
|
||||||
clearMessages,
|
|
||||||
})(withStyles(styles, { withTheme: true })(FinalPage));
|
|
||||||
@@ -31,9 +31,6 @@ const styles = (theme) => ({
|
|||||||
width: "24px",
|
width: "24px",
|
||||||
height: "24px",
|
height: "24px",
|
||||||
},
|
},
|
||||||
stepIconSuccess: {
|
|
||||||
borderColor: theme.palette.primary.main,
|
|
||||||
},
|
|
||||||
stepIconLargeSuccess: {
|
stepIconLargeSuccess: {
|
||||||
borderColor: theme.palette.primary.main,
|
borderColor: theme.palette.primary.main,
|
||||||
},
|
},
|
||||||
@@ -133,25 +130,12 @@ class StepperVertical extends Component {
|
|||||||
"stepIconLarge" + taskStatus
|
"stepIconLarge" + taskStatus
|
||||||
]
|
]
|
||||||
)
|
)
|
||||||
: step.type === "instruction"
|
: i === activeStep
|
||||||
? i === activeStep
|
|
||||||
? clsx(
|
? clsx(
|
||||||
this.props.classes.stepIcon,
|
this.props.classes.stepIcon,
|
||||||
this.props.classes.stepIconActiveOther
|
this.props.classes.stepIconActiveOther
|
||||||
)
|
)
|
||||||
: clsx(this.props.classes.stepIcon)
|
: clsx(this.props.classes.stepIcon),
|
||||||
: step.type === "finalpage"
|
|
||||||
? i === activeStep
|
|
||||||
? clsx(
|
|
||||||
this.props.classes.stepIcon,
|
|
||||||
this.props.classes.stepIconSuccess,
|
|
||||||
this.props.classes.stepIconActiveSuccess
|
|
||||||
)
|
|
||||||
: clsx(
|
|
||||||
this.props.classes.stepIcon,
|
|
||||||
this.props.classes.stepIconSuccess
|
|
||||||
)
|
|
||||||
: null,
|
|
||||||
}}
|
}}
|
||||||
></StepLabel>
|
></StepLabel>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -17,7 +17,6 @@ import StepperHorizontal from "./StepperHorizontal";
|
|||||||
import StepperVertical from "./StepperVertical";
|
import StepperVertical from "./StepperVertical";
|
||||||
import Instruction from "./Instruction";
|
import Instruction from "./Instruction";
|
||||||
import Assessment from "./Assessment";
|
import Assessment from "./Assessment";
|
||||||
import FinalPage from "./FinalPage";
|
|
||||||
import NotFound from "../NotFound";
|
import NotFound from "../NotFound";
|
||||||
import * as Blockly from "blockly";
|
import * as Blockly from "blockly";
|
||||||
import { detectWhitespacesAndReturnReadableResult } from "../../helpers/whitespace";
|
import { detectWhitespacesAndReturnReadableResult } from "../../helpers/whitespace";
|
||||||
@@ -75,9 +74,7 @@ class Tutorial extends Component {
|
|||||||
(() => {
|
(() => {
|
||||||
var tutorial = this.props.tutorial;
|
var tutorial = this.props.tutorial;
|
||||||
var steps = this.props.tutorial.steps;
|
var steps = this.props.tutorial.steps;
|
||||||
console.log(steps)
|
|
||||||
var step = steps[this.props.activeStep];
|
var step = steps[this.props.activeStep];
|
||||||
console.log(step)
|
|
||||||
var name = `${detectWhitespacesAndReturnReadableResult(
|
var name = `${detectWhitespacesAndReturnReadableResult(
|
||||||
tutorial.title
|
tutorial.title
|
||||||
)}_${detectWhitespacesAndReturnReadableResult(step.headline)}`;
|
)}_${detectWhitespacesAndReturnReadableResult(step.headline)}`;
|
||||||
@@ -110,10 +107,8 @@ class Tutorial extends Component {
|
|||||||
{step ? (
|
{step ? (
|
||||||
step.type === "instruction" ? (
|
step.type === "instruction" ? (
|
||||||
<Instruction step={step} />
|
<Instruction step={step} />
|
||||||
) : step.type === "task" ? (
|
|
||||||
<Assessment step={step} name={name} />
|
|
||||||
) : (
|
) : (
|
||||||
<FinalPage step={step} />
|
<Assessment step={step} name={name} />
|
||||||
) // if step.type === 'assessment'
|
) // if step.type === 'assessment'
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
|
|||||||
@@ -37,7 +37,6 @@ import Tooltip from "@material-ui/core/Tooltip";
|
|||||||
import IconButton from "@material-ui/core/IconButton";
|
import IconButton from "@material-ui/core/IconButton";
|
||||||
import Snackbar from "../Snackbar";
|
import Snackbar from "../Snackbar";
|
||||||
import Divider from "@material-ui/core/Divider";
|
import Divider from "@material-ui/core/Divider";
|
||||||
import DeviceSelection from "../DeviceSelection";
|
|
||||||
|
|
||||||
const styles = (theme) => ({
|
const styles = (theme) => ({
|
||||||
outerDiv: {
|
outerDiv: {
|
||||||
@@ -244,10 +243,13 @@ class TutorialHome extends Component {
|
|||||||
cy="50%"
|
cy="50%"
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke-width="10"
|
stroke-width="10"
|
||||||
stroke-dashoffset={`${75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
|
stroke-dashoffset={`${
|
||||||
|
75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
|
||||||
}`}
|
}`}
|
||||||
stroke-dasharray={`${75 * 2 * Math.PI * (1 - (50 / 100 - success / 2))
|
stroke-dasharray={`${
|
||||||
} ${75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
|
75 * 2 * Math.PI * (1 - (50 / 100 - success / 2))
|
||||||
|
} ${
|
||||||
|
75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
|
||||||
}`}
|
}`}
|
||||||
></circle>
|
></circle>
|
||||||
)}
|
)}
|
||||||
@@ -263,7 +265,8 @@ class TutorialHome extends Component {
|
|||||||
cy="50%"
|
cy="50%"
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke-width="10"
|
stroke-width="10"
|
||||||
stroke-dashoffset={`${75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
|
stroke-dashoffset={`${
|
||||||
|
75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
|
||||||
}`}
|
}`}
|
||||||
stroke-dasharray={`${75 * 2 * Math.PI}`}
|
stroke-dasharray={`${75 * 2 * Math.PI}`}
|
||||||
></circle>
|
></circle>
|
||||||
@@ -308,7 +311,6 @@ class TutorialHome extends Component {
|
|||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</Grid>
|
</Grid>
|
||||||
<DeviceSelection />
|
|
||||||
{this.props.user ? (
|
{this.props.user ? (
|
||||||
<div>
|
<div>
|
||||||
<h2>User Tutorials</h2>
|
<h2>User Tutorials</h2>
|
||||||
|
|||||||
@@ -38,19 +38,6 @@ export class Login extends Component {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
if (this.props.message.id === "LOGIN_FAIL") {
|
|
||||||
this.setState({
|
|
||||||
email: "",
|
|
||||||
password: "",
|
|
||||||
snackbar: true,
|
|
||||||
key: Date.now(),
|
|
||||||
message: Blockly.Msg.messages_LOGIN_FAIL,
|
|
||||||
type: "error",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidUpdate(props) {
|
componentDidUpdate(props) {
|
||||||
const { message } = this.props;
|
const { message } = this.props;
|
||||||
if (message !== props.message) {
|
if (message !== props.message) {
|
||||||
|
|||||||
@@ -15,13 +15,11 @@ const compareNumberOfBlocks = (originalBlocks, userBlocks) => {
|
|||||||
var blocks;
|
var blocks;
|
||||||
if(originalBlocks.length > userBlocks.length){
|
if(originalBlocks.length > userBlocks.length){
|
||||||
blocks = originalBlocks.length-userBlocks.length;
|
blocks = originalBlocks.length-userBlocks.length;
|
||||||
//return {text: `Es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} zu wenig verwendet.`, type: 'error'};
|
return {text: `Es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} zu wenig verwendet.`, type: 'error'};
|
||||||
return {text: `Du kannst deinen Programmcode kompilieren, aber es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} weniger verwendet als in der hinterlegten Lösung.`, type: 'success'};
|
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
blocks = userBlocks.length-originalBlocks.length;
|
blocks = userBlocks.length-originalBlocks.length;
|
||||||
//return {text: `Es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} zu viel verwendet.`, type: 'error'};
|
return {text: `Es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} zu viel verwendet.`, type: 'error'};
|
||||||
return {text: `Du kannst deinen Programmcode kompilieren, aber es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} mehr verwendet als in der hinterlegten Lösung.`, type: 'success'};
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -3,12 +3,7 @@ import ReactDOM from "react-dom";
|
|||||||
import "./index.css";
|
import "./index.css";
|
||||||
import App from "./App";
|
import App from "./App";
|
||||||
import * as serviceWorker from "./serviceWorker";
|
import * as serviceWorker from "./serviceWorker";
|
||||||
import store from "./store";
|
|
||||||
import { fetchSensors } from "./actions/sensorwikiActions";
|
|
||||||
|
|
||||||
store.dispatch(fetchSensors());
|
|
||||||
|
|
||||||
fetchSensors();
|
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
|
|||||||
@@ -1,20 +1,9 @@
|
|||||||
import { BOARD } from '../actions/types';
|
import { BOARD } from '../actions/types';
|
||||||
import mini_opacity from "../data/mini_opacity.png"
|
|
||||||
import mcu_opacity from "../data/mcu_opacity.png"
|
|
||||||
|
|
||||||
const initialValue = () => {
|
const initialValue = () => {
|
||||||
if (window.sessionStorage.getItem("board")) {
|
return "";
|
||||||
setBackgroundImage(window.sessionStorage.getItem("board"));
|
|
||||||
return window.sessionStorage.getItem("board");
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const setBackgroundImage = (board) => {
|
|
||||||
const root = document.querySelector(':root');
|
|
||||||
root.style.setProperty('--url', `url(${board === "mcu" ? mcu_opacity : mini_opacity})`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const initialState = {
|
const initialState = {
|
||||||
board: initialValue()
|
board: initialValue()
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -6,8 +6,7 @@ import generalReducer from './generalReducer';
|
|||||||
import projectReducer from './projectReducer';
|
import projectReducer from './projectReducer';
|
||||||
import messageReducer from './messageReducer';
|
import messageReducer from './messageReducer';
|
||||||
import authReducer from './authReducer';
|
import authReducer from './authReducer';
|
||||||
import boardReducer from './boardReducer';
|
import boardReducer from './boardReducer'
|
||||||
import sensorwikiReducer from './sensorwikiReducer';
|
|
||||||
|
|
||||||
export default combineReducers({
|
export default combineReducers({
|
||||||
auth: authReducer,
|
auth: authReducer,
|
||||||
@@ -17,6 +16,5 @@ export default combineReducers({
|
|||||||
builder: tutorialBuilderReducer,
|
builder: tutorialBuilderReducer,
|
||||||
project: projectReducer,
|
project: projectReducer,
|
||||||
general: generalReducer,
|
general: generalReducer,
|
||||||
message: messageReducer,
|
message: messageReducer
|
||||||
sensorwiki: sensorwikiReducer
|
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,10 +0,0 @@
|
|||||||
const sensors = (state = [] , action) => {
|
|
||||||
switch(action.type) {
|
|
||||||
case 'FETCH_SENSORWIKI_SUCCESS':
|
|
||||||
return action.payload.sensors
|
|
||||||
default:
|
|
||||||
return state
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default sensors
|
|
||||||
@@ -33,18 +33,9 @@ const initialState = {
|
|||||||
hardware: [],
|
hardware: [],
|
||||||
requirements: [],
|
requirements: [],
|
||||||
},
|
},
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
type: "finalpage",
|
|
||||||
headline: "",
|
|
||||||
text: "",
|
|
||||||
samplesolutions: false,
|
|
||||||
solutions: [],
|
|
||||||
furthertutorials: false,
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
error: {
|
error: {
|
||||||
steps: [{},{}],
|
steps: [{}],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user