77 lines
2.8 KiB
JavaScript
77 lines
2.8 KiB
JavaScript
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 = "# Markdown Test \n ## Markdown Test 2 \n ### Markdown Test 3";
|
|
|
|
// 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>
|
|
);
|
|
} |