Verified Commit 9dc406fa authored by Sandro Lutz's avatar Sandro Lutz
Browse files

Add Board pages

parent e3ada02f
{
"members": [
{
"role": "president",
"name": "Antonia Mosberger"
},
{
"role": "quaestor",
"name": "Luzian Bieri"
},
{
"role": "it",
"name": "Sandro Lutz"
},
{
"role": "information",
"name": "Patricia Schmid"
},
{
"role": "eventPlanning",
"name": "Lina Gehri"
},
{
"role": "eventPlanning",
"name": "Betty Lory"
},
{
"role": "eventPlanning",
"name": "Ian Boschung"
},
{
"role": "universityPolicyItet",
"name": "Daniel Biek"
},
{
"role": "universityPolicyMavt",
"name": "Julia Jäggi"
},
{
"role": "externalRelations",
"name": "Silvio Geel"
},
{
"role": "externalRelations",
"name": "Marie Matos"
},
{
"role": "infrastructure",
"name": "Lukas Eberle"
}
]
}
{
"members": [
{
"role": "president",
"name": "Antonia Mosberger"
},
{
"role": "quaestor",
"name": "Luzian Bieri"
},
{
"role": "it",
"name": "vakant"
},
{
"role": "information",
"name": "Patricia Schmid"
},
{
"role": "eventPlanning",
"name": "Ian Boschung"
},
{
"role": "eventPlanning",
"name": "Betty Lory"
},
{
"role": "eventPlanning",
"name": "Max Aspect"
},
{
"role": "universityPolicyItet",
"name": "Lioba Heimbach"
},
{
"role": "universityPolicyMavt",
"name": "Julia Jäggi"
},
{
"role": "externalRelations",
"name": "Silvio Geel"
},
{
"role": "externalRelations",
"name": "Leon Hinderling"
},
{
"role": "infrastructure",
"name": "Lukas Eberle"
}
]
}
import React, { useCallback } from 'react'
import { useStaticQuery, graphql } from 'gatsby'
import { FormattedMessage, Link, useIntl } from 'gatsby-plugin-intl'
import { makeStyles } from '@material-ui/core/styles'
import { Typography } from '@material-ui/core'
import Alert from '@material-ui/lab/Alert'
import Layout from '../../components/layout'
import ImageGroup from '../../components/board/imageGroup'
const useStyles = makeStyles(
{
root: {
textAlign: 'center',
paddingTop: '5em',
},
alert: {
margin: '2em auto',
},
title: {
textAlign: 'center',
margin: '1em 0',
},
members: {
listStyle: 'none',
padding: 0,
margin: 0,
fontSize: '1.75em',
lineHeight: '1.75em',
},
name: {
fontWeight: 'bold',
},
role: {
fontStyle: 'italic',
margin: '.25em',
},
},
{ name: 'boardHistory' }
)
const BoardHistoryPage = () => {
const classes = useStyles()
const intl = useIntl()
const {
json: { nodes: jsonNodes },
images: { nodes: imageNodes },
} = useStaticQuery(
graphql`
query BoardHistory {
json: allFile(
filter: {
sourceInstanceName: { eq: "board_history" }
extension: { eq: "json" }
}
sort: { fields: name, order: DESC }
) {
nodes {
data: childHistoryJson {
members {
name
role
}
}
name
}
}
images: allFile(
filter: {
sourceInstanceName: { eq: "board_history" }
extension: { ne: "json" }
}
sort: { fields: name, order: DESC }
) {
nodes {
name
publicURL
}
}
}
`
)
const data = useCallback(() => {
return jsonNodes.map(jsonData => ({
members: jsonData.data.members,
name: jsonData.name,
image: (imageNodes.find(node => node.name === jsonData.name) || {})
.publicURL,
}))
}, [jsonNodes, imageNodes])
return (
<Layout seoProps={{ title: 'board.old.title' }}>
<div>
<Alert className={classes.alert} severity="info">
<div>
<FormattedMessage id="board.old.notice" />
&nbsp;
<Link to="/board">
<FormattedMessage id="board.old.link" />
</Link>
</div>
</Alert>
<Typography className={classes.title} variant="h3">
<FormattedMessage id="board.old.title" />
</Typography>
{data().map(item => {
const [name, year, semester] = item.name.match(/([0-9]{4})(hs|fs)/)
const title = `${intl.formatMessage({
id: `board.old.${semester}`,
})} ${year}`
return (
<ImageGroup key={name} title={title} image={item.image}>
<ul className={classes.members}>
{item.members.map((member, index) => {
return (
<li key={index}>
<span className={classes.name}>{member.name}</span>
<span className={classes.role}>
(<FormattedMessage id={`board.roles.${member.role}`} />)
</span>
</li>
)
})}
</ul>
</ImageGroup>
)
})}
</div>
</Layout>
)
}
export default BoardHistoryPage
import React, { useState, useCallback } from 'react'
import { useStaticQuery, graphql } from 'gatsby'
import { FormattedMessage, Link, useIntl } from 'gatsby-plugin-intl'
import { makeStyles } from '@material-ui/core/styles'
import { Tabs, Tab, Typography } from '@material-ui/core'
import Alert from '@material-ui/lab/Alert'
import Layout from '../../components/layout'
import Image from '../../components/general/image'
import ImageGroup from '../../components/board/imageGroup'
import TabPanel from '../../components/general/tabPanel'
import TranslatedContent from '../../components/general/translatedContent'
import board_roles from '../../content/board/board_roles.json'
const useStyles = makeStyles(
{
root: {
textAlign: 'center',
paddingTop: '5em',
},
alert: {
margin: '2em auto',
},
boardImage: {
borderRadius: '4px',
overflow: 'hidden',
marginBottom: '8em',
},
title: {
textAlign: 'center',
margin: '1em 0',
},
tabs: {
width: '100%',
},
portraitDescription: {
padding: '1em',
},
},
{ name: 'board' }
)
const BoardPage = () => {
const [values, setValues] = useState({})
const classes = useStyles()
const intl = useIntl()
const {
json: { nodes: jsonNodes },
images: { nodes: imageNodes },
boardImage: { nodes: boardImageNodes },
} = useStaticQuery(
graphql`
query Board {
json: allFile(
filter: {
sourceInstanceName: { eq: "board" }
extension: { eq: "json" }
name: { ne: "_example" }
}
sort: { fields: name, order: ASC }
) {
nodes {
data: childCurrentJson {
showRoles
portraits {
role
name
description {
de
en
}
}
}
name
}
}
images: allFile(
filter: {
sourceInstanceName: { eq: "board" }
extension: { ne: "json" }
}
sort: { fields: name, order: ASC }
) {
nodes {
name
publicURL
}
}
boardImage: allFile(
filter: {
sourceInstanceName: { eq: "board" }
name: { eq: "board" }
extension: { ne: "json" }
}
limit: 1
) {
nodes {
publicURL
}
}
}
`
)
const data = useCallback(() => {
return jsonNodes.map(jsonData => ({
...jsonData.data,
name: jsonData.name,
image: (imageNodes.find(node => node.name === jsonData.name) || {})
.publicURL,
}))
}, [jsonNodes, imageNodes])
const boardImage =
boardImageNodes && boardImageNodes.length > 0
? boardImageNodes[0].publicURL
: null
const handleTabChange = (group, newValue) => {
const nextValues = { ...values, [group]: newValue }
setValues(nextValues)
}
return (
<Layout seoProps={{ title: 'board.title' }}>
<div>
<Alert className={classes.alert} severity="info">
<div>
<FormattedMessage id="board.current.notice" />
&nbsp;
<Link to="/board/history">
<FormattedMessage id="board.current.link" />
</Link>
</div>
</Alert>
<Typography className={classes.title} variant="h3">
<FormattedMessage id="board.title" />
</Typography>
{boardImage && (
<div className={classes.boardImage}>
<Image
src={boardImage}
alt={intl.formatMessage({ id: 'board.title' })}
ratioX={3}
ratioY={2}
/>
</div>
)}
<div>
{data().map((item, groupIndex) => {
const roles = new Set(
item.portraits.map(portrait =>
intl.formatMessage({ id: `board.roles.${portrait.role}` })
)
)
const value = values[groupIndex] || 0
return (
<ImageGroup
key={groupIndex}
title={item.showRoles ? Array.from(roles).join(' & ') : null}
image={item.image}
>
<Tabs
className={classes.tabs}
value={value}
variant="fullWidth"
onChange={(_, newValue) =>
handleTabChange(groupIndex, newValue)
}
>
{item.portraits.map((portrait, portraitIndex) => (
<Tab key={portraitIndex} value={0} label={portrait.name} />
))}
</Tabs>
{item.portraits.map((portrait, portraitIndex) => {
const role = board_roles[portrait.role]
return (
<TabPanel
key={portraitIndex}
value={value}
index={portraitIndex}
className={classes.portraitDescription}
>
<TranslatedContent
content={portrait.description}
parseMarkdown
/>
{role && (
<React.Fragment>
<Typography variant="h6">
<FormattedMessage id="board.tasks" />
</Typography>
<TranslatedContent content={role} parseMarkdown />
</React.Fragment>
)}
</TabPanel>
)
})}
</ImageGroup>
)
})}
</div>
</div>
</Layout>
)
}
export default BoardPage
......@@ -38,6 +38,18 @@ export const createTheme = type => {
},
},
typography: {
h1: {
fontSize: '3.5rem',
},
h2: {
fontSize: '3rem',
},
h3: {
fontSize: '2.5rem',
},
h4: {
fontSize: '2rem',
},
body1: {
fontSize: '1.2em',
},
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment