sensorwiki with tabs and only one request

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",

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)
+        }
+    }
+}

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 = ''

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");

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 "
 };

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 ",
 };

src/components/DeviceSelection.js

@@ -30,7 +30,7 @@ class DeviceSeclection extends Component {
     super(props);
     this.state = {
       open: true,
-      selectedBoard : "",
+      selectedBoard: "",
       saveSettings: false,
 
     };
@@ -44,17 +44,16 @@ class DeviceSeclection extends Component {
 
   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 })`);
+    root.style.setProperty('--url', `url(${value === "mcu" ? mcu_opacity : mini_opacity})`);
-    this.setState({selectedBoard: value})
+    this.setState({ selectedBoard: value })
     this.props.setBoard(value)
     this.setState({ open: !this.state });
 
@@ -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 === ""}
       >
         <div>
-          <Grid container spacing={2} style={{  textAlign : "center" }}>
+          <Grid container spacing={2} style={{ textAlign: "center" }}>
             <Grid item xs={6}>
-            <IconButton onClick={(e) => this.onclick(e, "mcu")}>
+              <IconButton onClick={(e) => this.onclick(e, "mcu")}>
-              <Avatar
+                <Avatar
-                alt="Sensebox MCU"
+                  alt="Sensebox MCU"
-                src="/media/hardware/senseboxmcu.png"
+                  src="/media/hardware/senseboxmcu.png"
-                style={{
+                  style={{
-                  border: this.state.selectedBoard === "mcu" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
+                    border: this.state.selectedBoard === "mcu" ? 'medium solid DeepSkyBlue' : "0.1px solid lightgray",
-                  width:"20vw",
+                    width: "20vw",
-                  height: "20vw"
+                    height: "20vw"
-               }}
+                  }}
-              />
+                />
               </IconButton>
               <p>senseBox MCU</p>
             </Grid>
@@ -107,15 +106,15 @@ class DeviceSeclection extends Component {
             </Grid> */}
             <Grid item xs={6}>
               <IconButton onClick={(e) => this.onclick(e, "mini")}>
-              <Avatar
+                <Avatar
-                alt="Sensebox Mini"
+                  alt="Sensebox Mini"
-                src="/media/hardware/senseboxmcumini.png"
+                  src="/media/hardware/senseboxmcumini.png"
-                 style={{
+                  style={{
-                  border: this.state.selectedBoard === "mini" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
+                    border: this.state.selectedBoard === "mini" ? 'medium solid DeepSkyBlue' : "0.1px solid lightgray",
-                  width:"20vw",
+                    width: "20vw",
-                  height: "20vw"
+                    height: "20vw"
-               }}
+                  }}
-              />
+                />
               </IconButton>
               <p>senseBox MCU:mini</p>
             </Grid>
@@ -155,5 +154,5 @@ const mapStateToProps = (state) => ({
 
 export default connect(
   mapStateToProps,
-  {setBoard}
+  { setBoard }
 )(withStyles(styles, { withTheme: true })(DeviceSeclection));

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 (
+        <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>
+    );
+}

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 { Button, Card } from "@material-ui/core";
-import { 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 <Slide direction="up" ref={ref} {...props} />;
+});
 
 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 (
       <Card
@@ -29,14 +53,47 @@ class TooltipViewer extends Component {
             {Blockly.Msg.tooltip_viewer}
           </Typography>
 
-          <ReactMarkdown linkTarget="_blank">
+          <Typography variant="body2" component="p">
-            {this.props.tooltip}
+            <ReactMarkdown linkTarget="_blank">
-          </ReactMarkdown>
+              {this.props.tooltip}
+            </ReactMarkdown>
 
-          {this.props.helpurl !== "" ? (
+            {store.getState().workspace.code.data ? (
-            <ReactMarkdown>{`${Blockly.Msg.tooltip_moreInformation} [${Blockly.Msg.labels_here}](${this.props.helpurl})`}</ReactMarkdown>
+              <Button
-          ) : null}
+                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>
+            )}
+          </Typography>
         </CardContent>
+        <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>
       </Card>
     );
   }

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(
   <React.StrictMode>

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
 });

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