Merge pull request #28 from lars-reimann/Dokumenations-Anzeige-Schoen…

…-Machen

Dokumenations anzeige schoen machen

client/src/Components/App/App.tsx

@@ -4,10 +4,12 @@ import ParameterView from "../ParameterView/ParameterView";
 import TreeView from "../TreeView/TreeView";
 
 function App() {
+    const [parameters, setParameters] = useState([]);
+
     return (
         <div className="App">
-            <TreeView />
-            <ParameterView parameters={null}/>
+            <TreeView setParameters={setParameters}/>
+            <ParameterView inputParameters={parameters}/>
         </div>
     );
 }

client/src/Components/ParameterView/DocumentationText.tsx

@@ -0,0 +1,25 @@
+import React, {useState} from "react";
+import "./ParameterView.css";
+
+// @ts-ignore
+const DocumentationText = ({inputText}) => {
+
+    const [readMore,setReadMore] = useState(false);
+    const moreTextOption = inputText.length > 50
+
+    const linkName = readMore ? '[Read less]' : '[Read more]'
+
+    return (
+        <div>
+            <p>{!readMore && inputText.substr(0, 50)}
+                {readMore && inputText}
+                <button className="read-more-button" onClick={()=>{setReadMore(!readMore)}}>
+                    {moreTextOption && linkName}
+                </button>
+            </p>
+
+        </div>
+    );
+};
+
+export default DocumentationText;

client/src/Components/ParameterView/ParameterNode.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import "./ParameterView.css";
+import DocumentationText from "./DocumentationText";
+import PythonParameter from "../../model/PythonParameter";
+
+type ParameterProps = {inputParameter: PythonParameter}
+
+const ParameterNode = ({inputParameter}: ParameterProps) => {
+    return (
+        <div className="parametersList">
+
+            <span className="parameter-name">
+                <h4>{inputParameter?.name}</h4>
+            </span>
+
+            <DocumentationText inputText={inputParameter?.docstring}/>
+        </div>
+    );
+};
+
+export default ParameterNode;
+

client/src/Components/ParameterView/ParameterView.css

@@ -0,0 +1,42 @@
+.parameterViewDiv{
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    padding-right: 1rem;
+}
+
+.parameterViewDiv h2{
+    padding-top: 1rem;
+    padding-left: 1rem;
+}
+
+.parameterViewDiv a{
+    padding-left: .5rem;
+}
+
+.parametersList {
+    padding-left: 1rem;
+    padding-bottom: .5rem;
+}
+
+.parameter-name {
+    font-weight: bold;
+}
+
+.visibility-indicator {
+    display: inline-block;
+    width: 1rem;
+}
+
+.read-more-button {
+    background: none!important;
+    border: none;
+    /*padding: 0!important;*/
+    padding-left: 0.5rem;
+    /*optional*/
+    font-family: arial, sans-serif;
+    /*input has OS specific font-family*/
+    color: #069;
+    text-decoration: underline;
+    cursor: pointer;
+}

client/src/Components/ParameterView/ParameterView.tsx

@@ -0,0 +1,24 @@
+import ParameterNode from "./ParameterNode";
+import React from "react";
+import PythonParameter from "../../model/PythonParameter";
+
+type ParameterViewProps = {inputParameters: PythonParameter[]}
+
+const ParameterView = ({inputParameters}: ParameterViewProps) => {
+
+    return (
+
+        <div className="parameterViewDiv">
+            <h2>Parameters</h2>
+            {
+                inputParameters?.map(function (parameters) {
+                    return (<ParameterNode key={parameters.name} inputParameter={parameters} />)
+                })
+            }
+
+        </div>
+    )
+};
+
+export default ParameterView;
+