Skip to content
Snippets Groups Projects
Select Git revision
  • edcb2724c5929a5ca1ea2d864c4337f4d153dded
  • main default protected
  • revert-fe5b7d7f
  • 1-eld-bfh-pdf-mobile
  • revert-0c60a8f4
  • revert-bfeadc1a
  • react-branch
  • main-backup
  • wiki-contribution
9 results

resS.tsx

Blame
  • team.tsx 12.55 KiB
    import { advisors, instructor, pis, SteckbriefInterface, teammembers } from "../data/steckbriefe";
    import { useTabNavigation } from "../utils/TabNavigation";
    import { BackUp } from "../components/Buttons";
    import { Section } from "../components/sections";
    
    
    export function Team() {
      useTabNavigation();
      let teambriefe = createSteckbriefe(teammembers); 
      let advisorbriefe = createPiSteckbriefe(advisors); 
      let sinan = createPiSteckbriefe(instructor); 
      let pibriefe = createPiSteckbriefe(pis)
      return (
        <>
          <br/>
    
          <br/>
          <Section title="Members" id="members">
          {teambriefe}
          </Section>
    
          <Section title="Instructor" id="instructor">
          {sinan}
          </Section>
          <Section title="Advisors" id="Advisors">
          {advisorbriefe}
          </Section>
          <Section title="Principal Investigators" id="PIS">
          {pibriefe}
          </Section>
          <BackUp/> 
        </>
      );
    }
    
    
    
    function createSteckbriefe(data: Array<SteckbriefInterface>){
      let briefe = []
      for (let index = 0; index < data.length; index++) {
        let thename = "" + data[index].vorname + data[index].nachname; 
        // Conditional head of
        var headof = <></>; 
        if(data[index].headof){
          var headof = <><div className=""> <b>Head of:</b> {data[index].headof} </div> <br/></>; 
        }
        // Jobs
        var jobs = ""; 
        for (let i = 0; i < data[index].igemjob.length; i++) {
            if (i + 1 == data[index].igemjob.length ) {
              jobs += " and " + data[index].igemjob[i];
            }
            else if(i + 2 == data[index].igemjob.length){
              jobs +=  data[index].igemjob[i]
              //console.log(`bei i+2 ist es ${data[index].hobbies[i]}`)
            }
            else{
              jobs +=  data[index].igemjob[i] + ", ";
            }
        }
        // Funfacts 
        var funfacts = [];
        for (let i = 0; i < data[index].funfacts.length; i++) {
          funfacts.push(<li key={`f${i}`}> {data[index].funfacts[i]} </li>); 
        }
        // Hobbies
        var hobbs = ""; 
        for (let i = 0; i < data[index].hobbies.length; i++) {
          if (i + 1 == data[index].hobbies.length ) {
            //console.log(`bei i+1 ist es ${data[index].hobbies[i]}`)
            hobbs += " and " + data[index].hobbies[i];
          }
          else if(i + 2 == data[index].hobbies.length){
            hobbs +=  data[index].hobbies[i]
            //console.log(`bei i+2 ist es ${data[index].hobbies[i]}`)
          }
          else{
            //console.log(`bei ${i} ist es ${data[index].hobbies[i]}`)
            hobbs +=  data[index].hobbies[i] + ", ";
          }
        }
        // Whyigem
        var why = []; 
        for (let i = 0; i < data[index].whyigem.length; i++) {
          why.push(<p>{data[index].whyigem[i]}</p>); 
        }
        //Title
        let title = ""; 
        if (data[index].title) {
          title = data[index].title!; 
        }
        // challenges
        let challs = [];  
        for (let i = 0; i < data[index].biggestchallenge.length; i++) {
          challs.push(<li key={`d${i}`}>{data[index].biggestchallenge[i]}</li>); 
        }
        // bestparts
        let bests = [];  
        for (let i = 0; i < data[index].bestpart.length; i++) {
          bests.push(<li key={`e${i}`}>{data[index].bestpart[i]}</li>); 
        }
        let frontbriefclass = "frontbrief frontbrief"+thename; 
        let backbriefclass = "backbrief backbrief"+thename;
    
        let picture = <div className="col-2 lnp center"><img src={data[index].zweitfoto} style={{display: "none"}} className={"img team-img "+backbriefclass}/><img src={data[index].hauptfoto} className={"img team-img "+frontbriefclass}></img></div> 
        let namerow = <div className="row"><div className="team-name"> {title} {data[index].vorname} {data[index].nachname} <span className="pronouns"> ({data[index].pronouns}) </span> </div>  <div className="col"> <a href={data[index].linkedinurl}> <img className="team-socials" src="https://static.igem.wiki/teams/5247/design/icons/linkedin.png" /> </a></div> </div>; 
        let frontparagraph = <div className={"row " + frontbriefclass}> <h6>Why I took part in iGem</h6> {why} </div> ; 
        let facts = <div className={frontbriefclass}><div className=""> <b>Age:</b> {data[index].age} </div> <br/> {headof} <div> <b>Part of:</b> {jobs}</div> <br/> <div className=""> <b>Major:</b> {data[index].studiengang} </div> <br/> <div className=""> <b>Scientific interests:</b> {data[index].scientificinterests} </div> </div>; 
        let backbutton =  <div className={backbriefclass} style={{display: "none"}}>   <div className="parent-button"><button onClick={flipBack(thename)} className="frontbutton">Click me</button></div></div>
        let funfactlist = <div className={backbriefclass} style={{display: "none"}}><b>Funfacts: </b><ul> {funfacts}</ul></div>
        let favmusic = <><h6>Favourite music:</h6><p>{data[index].favlabmusic}</p></>
        let hobbielist = <><h6>Hobbies:</h6> <p> {hobbs} </p></>
        let backparagraph = <div className={"row "+backbriefclass} style={{display: "none"}}>{favmusic}{hobbielist}</div> 
        let paragraphs = <div className="steckbody"> {frontparagraph} {backparagraph} </div>
        let frontbutton =  <div className={frontbriefclass}> <div className="parent-button"><button onClick={flip(thename)} className="frontbutton">Click me</button></div></div>
        let challenges = <div> <h6>What were the biggest challenges?</h6> <ul> {challs} </ul> </div>
        let bestpart = <div> <h6>What were the best parts?</h6> <ul> {bests} </ul></div> ; 
        let details = <div> <br/> {challenges} {bestpart} </div>
        let hole = 
                <div> 
                  <div className="row steckbrief"> {picture}  
                    <div className="col-5"> 
                      <div className="row"> {namerow}
                      <hr/>  
                      </div>   
                      {paragraphs}     
                    </div> 
                    <div className="col-4 brieffacts">
                      <br/><br/>  {funfactlist} {facts} 
                    </div>                   
                    </div> <div className="row" style={{marginTop: "1rem", marginBottom: "1rem"}}> <div className="col-2"> {frontbutton} {backbutton}</div>  <div className="col"><details className={frontbriefclass} ><summary> <b>Personal motivation and challenges</b> </summary><div> {details}</div></details></div>                                                                                                                                                        </div> 
                </div>
        let whole = <div  className={"steckbrief-box"} id={thename}> {hole} </div>; 
        briefe.push(whole); 
      }
      return briefe; 
    }
    
    function createPiSteckbriefe(data: Array<SteckbriefInterface>){
      let briefe = []
      for (let index = 0; index < data.length; index++) {
        let thename = "" + data[index].vorname + data[index].nachname; 
        // Conditional head of
        var headof = <></>; 
        if(data[index].headof){
          var headof = <><div className=""> <b>iGem-Job:</b> {data[index].headof} </div> <br/></>; 
        }
        // Jobs
        var jobs = ""; 
        for (let i = 0; i < data[index].igemjob.length; i++) {
            if (i + 1 == data[index].igemjob.length ) {
              jobs += " and " + data[index].igemjob[i];
            }
            else{
              jobs +=  data[index].igemjob[i] + ", ";
            }
        }
        // Funfacts 
        var funfacts = [];
        for (let i = 0; i < data[index].funfacts.length; i++) {
          funfacts.push(<li key={`a${i}`}> {data[index].funfacts[i]} </li>); 
        }
        // Hobbies
        var hobbs = ""; 
        for (let i = 0; i < data[index].hobbies.length; i++) {
          if (i + 1 == data[index].hobbies.length ) {
            hobbs += " and " + data[index].hobbies[i];
          }
          else if(i + 2 == data[index].hobbies.length){
            hobbs +=  data[index].hobbies[i]
            //console.log(`bei i+2 ist es ${data[index].hobbies[i]}`)
          }
          else{
            hobbs +=  data[index].hobbies[i] + ", ";
          }
        }
        // Whyigem
        var why = []; 
        for (let i = 0; i < data[index].whyigem.length; i++) {
          why.push(<p>{data[index].whyigem[i]}</p>); 
        }
        //Title
        let title = ""; 
        if (data[index].title) {
          title = data[index].title!; 
        }
        // challenges
        let challs = [];  
        for (let i = 0; i < data[index].biggestchallenge.length; i++) {
          challs.push(<li key={`b${i}`}>{data[index].biggestchallenge[i]}</li>); 
        }
        // bestparts
        let bests = [];  
        for (let i = 0; i < data[index].bestpart.length; i++) {
          bests.push(<li key={`c${i}`}>{data[index].bestpart[i]}</li>); 
        }
        let frontbriefclass = "frontbrief frontbrief"+thename; 
        let backbriefclass = "backbrief backbrief"+thename;
    
        let picture = <div className="col-2 lnp center"><img src={data[index].zweitfoto} style={{display: "none"}} className={"img team-img "+backbriefclass}/><img src={data[index].hauptfoto} className={"img team-img "+frontbriefclass}></img></div> 
        let namerow = <div className="row"><div className="team-name"> {title} {data[index].vorname} {data[index].nachname} <span className="pronouns"> ({data[index].pronouns}) </span> </div>  <div className="col"> <a href={data[index].linkedinurl}> <img className="team-socials" src="https://static.igem.wiki/teams/5247/design/icons/linkedin.png" /> </a></div> </div>; 
        let frontparagraph = <div className={"row " + frontbriefclass}> <h6>Why I took part in iGem</h6> {why} </div> ; 
        let facts = <div className={frontbriefclass}><div className=""> <b>Age:</b> {data[index].age} </div> <br/> {headof} <div> <b>Affiliation:</b> {jobs}</div> <br/> <div className=""> <b>Regular Job:</b> {data[index].studiengang} </div> <br/> <div className=""> <b>Scientific interests:</b> {data[index].scientificinterests} </div> </div>; 
        let backbutton =  <div className={backbriefclass} style={{display: "none"}}>   <div className="parent-button"><button onClick={flipBack(thename)} className="frontbutton">Click me</button></div></div>
        let funfactlist = <div className={backbriefclass} style={{display: "none"}}><b>Funfacts: </b><ul> {funfacts}</ul></div>
        let favmusic = <><h6>Favourite music:</h6><p>{data[index].favlabmusic}</p></>
        let hobbielist = <><h6>Hobbies:</h6> <p> {hobbs} </p></>
        let backparagraph = <div className={"row "+backbriefclass} style={{display: "none"}}>{favmusic}{hobbielist}</div> 
        let paragraphs = <div className="steckbody"> {frontparagraph} {backparagraph} </div>
        let frontbutton =  <div className={frontbriefclass}> <div className="parent-button"><button onClick={flip(thename)} className="frontbutton">Click me</button></div></div>
        let challenges = <div> <h6>What were the biggest challenges?</h6> <ul> {challs} </ul> </div>
        let bestpart = <div> <h6>What were the best parts?</h6> <ul> {bests} </ul></div> ; 
        let details = <div> <br/> {challenges} {bestpart} </div>
        let hole = 
                <div> 
                  <div className="row steckbrief"> {picture}  
                    <div className="col-5"> 
                      <div className="row"> {namerow}
                      <hr/>  
                      </div>   
                      {paragraphs}     
                    </div> 
                    <div className="col-4 brieffacts">
                      <br/><br/>  {funfactlist} {facts} 
                    </div>                   
                    </div> <div className="row" style={{marginTop: "1rem", marginBottom: "1rem"}}> <div className="col-2"> {frontbutton} {backbutton}</div>  <div className="col"><details className={frontbriefclass} ><summary> <b>Personal motivation and challenges</b> </summary><div> {details}</div></details></div>                                                                                                                                                        </div> 
                </div>
        let whole = <div  className={"steckbrief-box"} id={thename}> {hole} </div>; 
        briefe.push(whole); 
      }
      return briefe; 
    }
    
    
    
    function flip(element: string){
      const flipp = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
        let elementsToHide = document.getElementsByClassName("frontbrief"+element);
          for (let i = 0; i < elementsToHide.length; i++) {
            (elementsToHide[i] as HTMLElement).style.display = "none";
          }
        let elementsToFind = document.getElementsByClassName("backbrief"+element);
        for (let i = 0; i < elementsToFind.length; i++) {
          (elementsToFind[i] as HTMLElement).style.display = "block";
        }
      }
      return flipp; 
    }
    
    function flipBack(element: string){
      const flippback = (_event: React.MouseEvent<HTMLElement, MouseEvent>) => {
        let elementsToHide = document.getElementsByClassName("backbrief"+element);
          for (let i = 0; i < elementsToHide.length; i++) {
            (elementsToHide[i] as HTMLElement).style.display = "none";
          }
        let elementsToFind = document.getElementsByClassName("frontbrief"+element);
        for (let i = 0; i < elementsToFind.length; i++) {
          (elementsToFind[i] as HTMLElement).style.display = "block";
        }
      }
      return flippback;  
    }