sensorwiki with tabs and only one request

2022-11-08 15:59:09 +01:00
parent e00617ac78
commit a8704316ac
12 changed files with 252 additions and 48 deletions
@@ -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>
+    );
+}