schuelerlabor-cleverlab/smarti
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sensorwiki with tabs and only one request

Browse Source
This commit is contained in:
fbruc03 2022-11-08 15:59:09 +01:00
parent e00617ac78
commit a8704316ac
12 changed files with 252 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

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

18
src/actions/sensorwikiActions.js Normal file
View File

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

5
src/actions/workspaceActions.js
View File

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

11
src/components/Blockly/blocks/sensebox-sensors.js
View File

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

12
src/components/Blockly/msg/de/ui.js
View File

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

16
src/components/Blockly/msg/en/ui.js
View File

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

61
src/components/DeviceSelection.js
View File

@ -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 === ""}
>
<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")}>
<Avatar
alt="Sensebox MCU"
src="/media/hardware/senseboxmcu.png"
style={{
border: this.state.selectedBoard === "mcu" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
width:"20vw",
height: "20vw"
}}
/>
<IconButton onClick={(e) => this.onclick(e, "mcu")}>
<Avatar
alt="Sensebox MCU"
src="/media/hardware/senseboxmcu.png"
style={{
border: this.state.selectedBoard === "mcu" ? 'medium solid DeepSkyBlue' : "0.1px solid lightgray",
width: "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
alt="Sensebox Mini"
src="/media/hardware/senseboxmcumini.png"
style={{
border: this.state.selectedBoard === "mini" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
width:"20vw",
height: "20vw"
}}
/>
<Avatar
alt="Sensebox Mini"
src="/media/hardware/senseboxmcumini.png"
style={{
border: this.state.selectedBoard === "mini" ? 'medium solid DeepSkyBlue' : "0.1px solid lightgray",
width: "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));

78
src/components/SensorInfo.js Normal file
View File

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

77
src/components/TooltipViewer.js
View File

@ -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 <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">
{this.props.tooltip}
</ReactMarkdown>
<Typography variant="body2" component="p">
<ReactMarkdown linkTarget="_blank">
{this.props.tooltip}
</ReactMarkdown>
{this.props.helpurl !== "" ? (
<ReactMarkdown>{`${Blockly.Msg.tooltip_moreInformation} [${Blockly.Msg.labels_here}](${this.props.helpurl})`}</ReactMarkdown>
) : null}
{store.getState().workspace.code.data ? (
<Button
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>
);
}

5
src/index.js
View File

@ -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>

6
src/reducers/index.js
View File

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

10
src/reducers/sensorwikiReducer.js Normal file
View File

@ -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