tabs

src/components/HorizontalTimeline.tsx

@@ -41,13 +41,16 @@ function TimeItem({tag, title, children, pic, author, tabid}: ItemProps){
     return rows; 
   }
   
-  export function TimeHori({tab}: {tab: string}){
-    let nod = undefined; 
-    if (tab = ""){
+  export function TimeHori({tab}:{tab: string}){
+    let nod; 
+    /* console.log("TimeHori") */
+    if (tab === ""){  
       nod = <AllItems></AllItems>
+      /* console.log("Tab = ''") */
     }
     else{
-      nod = <getTypeItems ta={tab}></getTypeItems>
+      /* console.log("Tab") */
+      nod = getItemsByType(tab);
     }
     return(
     <div>
@@ -93,7 +96,7 @@ function TimeItem({tag, title, children, pic, author, tabid}: ItemProps){
     }
   
   
-    function openCity({cityName}:{cityName: string}) {
+     export function openCity({cityName}:{cityName: string}) {
         const opencity =  (event : React.MouseEvent<HTMLButtonElement, MouseEvent>) =>{
           var i, tabcontent, tablinks;
         tabcontent = document.getElementsByClassName("tabcontent");
@@ -137,24 +140,27 @@ function TimeItem({tag, title, children, pic, author, tabid}: ItemProps){
         }
         return rows; 
       }
+
       
-      export function getTypeItems({ta}: {ta: string}){
+      export function getItemsByType(tabid: string) {
         let rows = []
-        for ( let i = 0;  i < data.length; i++){
-          if (ta = data[i].tag)
-          rows.push(<TimeItem 
-            title={data[i].title}
-            pic={data[i].pic}
-            tag={data[i].tag}
-            author={data[i].author}
-            tabid={data[i].tabid}
-            >
-              {data[i].text}
-            </TimeItem>)
+        for (let i = 0; i < data.length; i++) {
+            if (tabid === data[i].tag) {
+                rows.push(<TimeItem
+                    key={i}
+                    title={data[i].title}
+                    pic={data[i].pic}
+                    tag={data[i].tag}
+                    author={data[i].author}
+                    tabid={data[i].tabid}
+                >
+                    {data[i].text}
+                </TimeItem>)
+            }
         }
         return rows; 
-      }
-      
+    }
+    
       
       let data = [
         {

src/contents/human-practices.tsx

@@ -8,7 +8,7 @@
 - Filter mit HalbkreisDing als Tabsteuerung | Einteilung nach Bereich (Academia, Insustry, ..., und auch nach Delivery und Mechanism) 
 - DNA Strang als Timeline? 
 */
-import { TimeHori, getTypeItems } from "../components/HorizontalTimeline";
+import { TimeHori } from "../components/HorizontalTimeline";
 import { AllPopus } from "../components/HorizontalTimeline";
 import { BFHStyleTabs } from "../components/Tabs";
 
@@ -82,25 +82,64 @@ let tabbys =[
   },
 ]
 
-export function HumanPractices() {
+let tabtabs = [
+  {
+    node: <TimeHori tab="" ></TimeHori>, 
+    eid: "All"
+  },
+  {
+    node: <TimeHori tab="Academia" ></TimeHori>,
+    eid: "Academia"
+  },
+  {
+    node: <TimeHori tab="Patient" ></TimeHori>,
+    eid: "Patient"
+  },
+  {
+    node: <TimeHori tab="Medical Professional" ></TimeHori>,
+    eid: "Medical"
+  }
+
+]
 
-  return (
+export function HumanPractices() {
+ 
+  return (  
     <>
     <HPButtonrow/>
     <AllPopus></AllPopus>
-    <TimeHori></TimeHori>
+    <BFHStyleTabs data={tabtabs}></BFHStyleTabs>
     <BFHStyleTabs data={tabbys}></BFHStyleTabs>
     </>
   );
 }
 
+export function openTab({cityName}:{cityName: string}) {
+  const opencity =  (event : React.MouseEvent<HTMLButtonElement, MouseEvent>) =>{
+    var i, tabcontent, tablinks;
+  tabcontent = document.getElementsByClassName("tabcontent");
+  for (i = 0; i < tabcontent.length; i++) {
+    (tabcontent[i] as HTMLElement).style.display = "none";
+  }
+  tablinks = document.getElementsByClassName("tablinks");
+  for (i = 0; i < tablinks.length; i++) {
+    tablinks[i].className = tablinks[i].className.replace(" active", "");
+  }
+  document.getElementById(cityName)!.style.display = "block";
+  event.currentTarget.className += " active";
+  }
+  return opencity; 
+}
+
+
 
 export function HPButtonrow(){
 
     return(
         <>
         <div className="row align-items-center bottom-buttons">
-            
+            <button onClick={openTab({cityName: "Patient"})}> Patient</button>
+            <button onClick={openTab({cityName: "All"})}> All</button>
         </div>
         </>
     )