From a8704316acd640f252a1a0df72dcef5bf7642a26 Mon Sep 17 00:00:00 2001 From: fbruc03 <65135023+fbruc03@users.noreply.github.com> Date: Tue, 8 Nov 2022 15:59:09 +0100 Subject: [PATCH] sensorwiki with tabs and only one request --- package.json | 1 + src/actions/sensorwikiActions.js | 18 +++++ src/actions/workspaceActions.js | 5 ++ .../Blockly/blocks/sensebox-sensors.js | 11 +++ src/components/Blockly/msg/de/ui.js | 12 ++- src/components/Blockly/msg/en/ui.js | 16 +++- src/components/DeviceSelection.js | 61 +++++++-------- src/components/SensorInfo.js | 78 +++++++++++++++++++ src/components/TooltipViewer.js | 77 +++++++++++++++--- src/index.js | 5 ++ src/reducers/index.js | 6 +- src/reducers/sensorwikiReducer.js | 10 +++ 12 files changed, 252 insertions(+), 48 deletions(-) create mode 100644 src/actions/sensorwikiActions.js create mode 100644 src/components/SensorInfo.js create mode 100644 src/reducers/sensorwikiReducer.js diff --git a/package.json b/package.json index 418a0a5..03fad70 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/react-fontawesome": "^0.1.19", "@material-ui/core": "^4.12.4", + "@material-ui/lab": "^4.0.0-alpha.61", "@monaco-editor/react": "^4.3.1", "@testing-library/jest-dom": "^5.16.1", "@testing-library/react": "^12.1.2", diff --git a/src/actions/sensorwikiActions.js b/src/actions/sensorwikiActions.js new file mode 100644 index 0000000..9f959be --- /dev/null +++ b/src/actions/sensorwikiActions.js @@ -0,0 +1,18 @@ +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) + } + } +} \ No newline at end of file diff --git a/src/actions/workspaceActions.js b/src/actions/workspaceActions.js index f16da0a..bb04611 100644 --- a/src/actions/workspaceActions.js +++ b/src/actions/workspaceActions.js @@ -20,6 +20,11 @@ export const onChangeCode = () => (dispatch, getState) => { if (selectedBlock !== null) { code.helpurl = selectedBlock.helpUrl code.tooltip = selectedBlock.tooltip + if (selectedBlock.data) { + code.data = selectedBlock.data + } else { + code.data = null + } } else if (selectedBlock === null) { code.tooltip = Blockly.Msg.tooltip_hint code.helpurl = '' diff --git a/src/components/Blockly/blocks/sensebox-sensors.js b/src/components/Blockly/blocks/sensebox-sensors.js index 12929a7..c06e321 100644 --- a/src/components/Blockly/blocks/sensebox-sensors.js +++ b/src/components/Blockly/blocks/sensebox-sensors.js @@ -26,6 +26,7 @@ Blockly.Blocks["sensebox_sensor_temp_hum"] = { this.setColour(getColour().sensebox); this.setTooltip(Blockly.Msg.senseBox_temp_hum_tooltip); this.setHelpUrl(Blockly.Msg.senseBox_temp_hum_helpurl); + this.data = "hdc1080"; }, }; @@ -51,6 +52,7 @@ Blockly.Blocks["sensebox_sensor_uv_light"] = { this.setColour(getColour().sensebox); this.setTooltip(Blockly.Msg.senseBox_uv_light_tooltip); this.setHelpUrl(Blockly.Msg.senseBox_uv_light_helpurl); + this.data = "veml6070"; }, }; @@ -91,6 +93,7 @@ Blockly.Blocks["sensebox_sensor_bmx055_accelerometer"] = { this.setColour(getColour().sensebox); this.setTooltip(Blockly.Msg.senseBox_bmx055_accelerometer_tooltip); this.setHelpUrl(Blockly.Msg.senseBox_bmx055_helpurl); + this.data = "bmx055"; }, }; @@ -122,6 +125,7 @@ Blockly.Blocks["sensebox_sensor_sds011"] = { this.setColour(getColour().sensebox); this.setTooltip(Blockly.Msg.senseBox_sds011_tooltip); this.setHelpUrl(Blockly.Msg.senseBox_sds011_helpurl); + this.data = "sds011"; }, }; @@ -155,6 +159,7 @@ Blockly.Blocks["sensebox_sensor_pressure"] = { this.setOutput(true, Types.DECIMAL.typeName); this.setTooltip(Blockly.Msg.senseBox_pressure_tooltip); this.setHelpUrl(Blockly.Msg.senseBox_pressure_helpurl); + this.data = "bmp280"; this.getField("NAME").setValidator( function (val) { this.updateShape_(val === "Altitude"); @@ -201,6 +206,7 @@ Blockly.Blocks["sensebox_sensor_bme680_bsec"] = { this.setColour(getColour().sensebox); this.setTooltip(Blockly.Msg.senseBox_bme_tooltip); this.setHelpUrl(Blockly.Msg.senseBox_bme680_helpurl); + this.data = "bme680"; }, }; @@ -245,6 +251,7 @@ Blockly.Blocks["sensebox_sensor_ultrasonic_ranger"] = { this.setOutput(true, Types.NUMBER.typeName); this.setTooltip(Blockly.Msg.senseBox_ultrasonic_tooltip); this.setHelpUrl(Blockly.Msg.senseBox_ultrasonic_helpurl); + this.data = "hc-sr04"; }, /** * Parse XML to restore the number of pins available. @@ -382,6 +389,7 @@ Blockly.Blocks["sensebox_scd30"] = { this.setColour(getColour().sensebox); this.setTooltip(Blockly.Msg.senseBox_scd_tooltip); this.setHelpUrl(Blockly.Msg.senseBox_scd_helpurl); + this.data = "scd30"; }, onchange: function (e) { var dropdown = this.getFieldValue("dropdown"); @@ -448,6 +456,7 @@ Blockly.Blocks["sensebox_sensor_truebner_smt50"] = { this.setOutput(true, Types.NUMBER.typeName); this.setTooltip(Blockly.Msg.senseBox_smt50_tooltip); this.setHelpUrl(Blockly.Msg.senseBox_smt50_helpurl); + this.data = "smt50"; }, }; @@ -470,6 +479,7 @@ Blockly.Blocks["sensebox_sensor_watertemperature"] = { .appendField(new Blockly.FieldDropdown(dropdownOptions), "Port"); this.setOutput(true, Types.NUMBER.typeName); this.setTooltip(Blockly.Msg.senseBox_watertemperature_tip); + this.data = "ds18b20"; }, }; @@ -542,6 +552,7 @@ Blockly.Blocks["sensebox_sensor_dps310"] = { this.setOutput(true, Types.DECIMAL.typeName); this.setTooltip(Blockly.Msg.senseBox_sensor_dps310_tooltip); this.setHelpUrl(Blockly.Msg.senseBox_sensor_dps310_helpurl); + this.data = "dps310"; this.getField("NAME").setValidator( function (val) { this.updateShape_(val === "Altitude"); diff --git a/src/components/Blockly/msg/de/ui.js b/src/components/Blockly/msg/de/ui.js index e11f9f9..68cb899 100644 --- a/src/components/Blockly/msg/de/ui.js +++ b/src/components/Blockly/msg/de/ui.js @@ -311,5 +311,15 @@ export const UI = { 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_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 " }; diff --git a/src/components/Blockly/msg/en/ui.js b/src/components/Blockly/msg/en/ui.js index 6a1e685..928fba7 100644 --- a/src/components/Blockly/msg/en/ui.js +++ b/src/components/Blockly/msg/en/ui.js @@ -300,13 +300,21 @@ export const UI = { codeeditor_compile_progress: "Your code will now be compiled and then downloaded to your computer", - /** - * Device Selction - * */ + /** + * Device Selction + * */ deviceselection_head: "Which board are you using?", deviceselection_keep_selection: "Save my choice (You can change the board later in the settings)", deviceselection_footnote: "Here you can access the old blockly Version for 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 ", }; diff --git a/src/components/DeviceSelection.js b/src/components/DeviceSelection.js index 4f0768f..cd7a4ff 100644 --- a/src/components/DeviceSelection.js +++ b/src/components/DeviceSelection.js @@ -30,36 +30,35 @@ class DeviceSeclection extends Component { super(props); this.state = { open: true, - selectedBoard : "", + selectedBoard: "", saveSettings: false, }; } toggleDialog = () => { - + this.props.setBoard(this.state.selectedBoard) }; onChange = (e) => { if (e.target.checked) { - this.setState({ saveSettings: true}); + this.setState({ saveSettings: true }); } else { - this.setState({ saveSettings: false}); + this.setState({ saveSettings: false }); } }; 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}) + root.style.setProperty('--url', `url(${value === "mcu" ? mcu_opacity : mini_opacity})`); + this.setState({ selectedBoard: value }) this.props.setBoard(value) this.setState({ open: !this.state }); - - + + }; render() { @@ -72,21 +71,21 @@ class DeviceSeclection extends Component { title={Blockly.Msg.deviceselection_head} content={""} onClick={this.toggleDialog} - disabled={this.state.selectedBoard===""} + disabled={this.state.selectedBoard === ""} >
- + - this.onclick(e, "mcu")}> - + this.onclick(e, "mcu")}> +

senseBox MCU

 @@ -107,15 +106,15 @@ class DeviceSeclection extends Component { */} this.onclick(e, "mini")}> - +

senseBox MCU:mini

 @@ -155,5 +154,5 @@ const mapStateToProps = (state) => ({ export default connect( mapStateToProps, - {setBoard} + { setBoard } )(withStyles(styles, { withTheme: true })(DeviceSeclection)); diff --git a/src/components/SensorInfo.js b/src/components/SensorInfo.js new file mode 100644 index 0000000..8b5f42b --- /dev/null +++ b/src/components/SensorInfo.js @@ -0,0 +1,78 @@ +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 + function filterLanguage(options) { + console.log(options); + if (window.localStorage.getItem("locale")) { + var lang = window.localStorage.getItem("locale").split("_")[0]; + } + else { + var lang = "en"; + } + for (var i = 0; i < options.length; i++) { + console.log(options[i].languageCode, lang); + 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; + // SEARCH ALL DATA FOR SELECTED BLOCK NAME + var sensorInfo = sensorData.find(function (element) { + return element.slug === sensorName; + }); + console.log("SENSOR INFO: ", sensorInfo); + if (sensorInfo) { + sensorInfo.markdown = "# Markdown Test \n ## Markdown Test 2 \n ### Markdown Test 3"; + 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 ( + + + + + + + + + + {sensorInfo ? {sensorInfo.markdown} : "No data available"} + + + {sensorInfo ? {sensorInfo.details} : "No data available"} + + + + ); +} \ No newline at end of file diff --git a/src/components/TooltipViewer.js b/src/components/TooltipViewer.js index 7d69a57..c57e583 100644 --- a/src/components/TooltipViewer.js +++ b/src/components/TooltipViewer.js @@ -1,17 +1,41 @@ import React, { Component } from "react"; import PropTypes from "prop-types"; import { connect } from "react-redux"; - import withWidth from "@material-ui/core/withWidth"; - -import { Card } from "@material-ui/core"; +import { Button, Card } from "@material-ui/core"; import * as Blockly from "blockly"; import CardContent from "@material-ui/core/CardContent"; - import Typography from "@material-ui/core/Typography"; 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 ; +}); 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() { return ( - - {this.props.tooltip} - + + + {this.props.tooltip} + - {this.props.helpurl !== "" ? ( - {`${Blockly.Msg.tooltip_moreInformation} [${Blockly.Msg.labels_here}](${this.props.helpurl})`} - ) : null} + {store.getState().workspace.code.data ? ( + + ) : ( + {`${Blockly.Msg.tooltip_moreInformation} [${Blockly.Msg.labels_here}](${this.props.helpurl})`} + )} + + { + this.toggleDialog(); + }} + maxWidth={"md"} + fullWidth={true} + > + + + + + + + ); } diff --git a/src/index.js b/src/index.js index fad5562..b777259 100644 --- a/src/index.js +++ b/src/index.js @@ -3,7 +3,12 @@ import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import * as serviceWorker from "./serviceWorker"; +import store from "./store"; +import { fetchSensors } from "./actions/sensorwikiActions"; +store.dispatch(fetchSensors()); + +fetchSensors(); ReactDOM.render( diff --git a/src/reducers/index.js b/src/reducers/index.js index 57e99e5..241e4df 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -6,7 +6,8 @@ import generalReducer from './generalReducer'; import projectReducer from './projectReducer'; import messageReducer from './messageReducer'; import authReducer from './authReducer'; -import boardReducer from './boardReducer' +import boardReducer from './boardReducer'; +import sensorwikiReducer from './sensorwikiReducer'; export default combineReducers({ auth: authReducer, @@ -16,5 +17,6 @@ export default combineReducers({ builder: tutorialBuilderReducer, project: projectReducer, general: generalReducer, - message: messageReducer + message: messageReducer, + sensorwiki: sensorwikiReducer }); diff --git a/src/reducers/sensorwikiReducer.js b/src/reducers/sensorwikiReducer.js new file mode 100644 index 0000000..349b602 --- /dev/null +++ b/src/reducers/sensorwikiReducer.js @@ -0,0 +1,10 @@ +const sensors = (state = [] , action) => { + switch(action.type) { + case 'FETCH_SENSORWIKI_SUCCESS': + return action.payload.sensors + default: + return state + } +} + +export default sensors \ No newline at end of file