Skip to content
Snippets Groups Projects
Select Git revision
  • main default protected
1 result
Blame Permalink
Forked from 2024 Competition / Bielefeld-CeBiTec
944 commits behind the upstream repository.
team.tsx 12.86 KiB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265 






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: JSX.Element[]  = []
  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 (data[index].igemjob.length  == 1) {
          jobs +=  data[index].igemjob[i]
        }
        else 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: JSX.Element[]  = [];
    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: JSX.Element[]  = []; 
    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: JSX.Element[]  = [];  
    for (let i = 0; i < data[index].biggestchallenge.length; i++) {
      challs.push(<li key={`d${i}`}>{data[index].biggestchallenge[i]}</li>); 
    }
    // bestparts
    let bests: JSX.Element[]  = [];  
    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 lab 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 steckbriefbuttonrow" 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: JSX.Element[]  = []
  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: JSX.Element[]  = [];
    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: JSX.Element[]  = []; 
    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: JSX.Element[]  = [];  
    for (let i = 0; i < data[index].biggestchallenge.length; i++) {
      challs.push(<li key={`b${i}`}>{data[index].biggestchallenge[i]}</li>); 
    }
    // bestparts
    let bests: JSX.Element[]  = [];  
    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 lab 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 steckbriefbuttonrow" 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;  
}