Introduction of more modules and handling of importance level

frontend/src/components/university/modules/GenericModule.js

@@ -3,6 +3,8 @@ import { withStyles } from '@material-ui/core/styles';
 import Tooltip from '@material-ui/core/Tooltip';
 import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
+import classNames from 'classnames';
+
 
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
@@ -14,6 +16,7 @@ import SettingsBackRestoreIcon from '@material-ui/icons/SettingsBackupRestore';
 import CreateIcon from '@material-ui/icons/Create';
 import VerifiedUserIcon from '@material-ui/icons/VerifiedUser';
 import LinkIcon from '@material-ui/icons/Link';
+import NotificationImportantIcon from '@material-ui/icons/NotificationImportant';
 
 import FullScreenDialog from '../../shared/FullScreenDialog';
 import MyBadge from '../../shared/MyBadge';
@@ -59,8 +62,59 @@ const styles = theme => ({
   chip: {
     margin: theme.spacing.unit,
   },
+  titleContainer:{
+    display: "flex",
+    alignItems: "center",
+  },
+  titleIcon: {
+    paddingRight: theme.spacing.unit,
+    fontSize: theme.typography.display1.fontSize
+  }
 })
 
+function renderTitle() {
+  const { title, classes, importanceLevel } = this.props;
+  if (title) {
+    if (importanceLevel) {
+      let c = classNames(classes.titleIcon);
+      if (importanceLevel == "IMPORTANT"){  
+        c = classNames(classes.titleIcon, classes.red)
+      } else if (importanceLevel == "important"){
+        c = classNames(classes.titleIcon, classes.orange)
+      }
+      return (
+        <div className={classes.titleContainer}>
+          <NotificationImportantIcon className={c} />
+          <Typography variant='display1'>{title}</Typography>
+        </div>
+      )
+    } else {
+      return (
+        <Typography variant='display1'>{title}</Typography>
+      )
+    }
+  } else {
+    return (<div></div>)
+  }
+
+
+}
+
+function renderUpdateInfo() {
+  const { automaticData } = this.props;
+
+  if (automaticData) {
+    return (
+      <Typography variant='caption'>Dernière mise à jour le 08/09/2018 à 15h20</Typography>
+    )
+  } else {
+    return (
+      <Typography variant='caption'>Mis à jour par <em>chehabfl</em> le 08/09/2018 à 15h20</Typography>
+    )
+  }
+
+}
+
 function renderFirstRow() {
   const { classes, title, automaticData, theme } = this.props;
 
@@ -74,11 +128,12 @@ function renderFirstRow() {
     classVersion = "disabled";
   }
 
+
   return (
     <Grid container spacing={8}>
       <Grid item xs>
-        <Typography variant='display1'> {title} </Typography>
-        <Typography variant='caption'> Mis à jour par <em>chehabfl</em> le 08/09/2018 à 15h20</Typography>
+        {renderTitle.bind(this)()}
+        {renderUpdateInfo.bind(this)()}
       </Grid>
       <Grid item xs={4} style={{ textAlign: 'right' }}>
 
@@ -186,7 +241,8 @@ class GenericModule extends React.Component {
 
 
 GenericModule.defaultProps = {
-  title: "Titre du module",
+  title: null,
+  importanceLevel: null,
   automaticData: false,
   usefulLinks: []
 };

frontend/src/components/university/modules/PreviousDeparture.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import ExpansionPanel from '@material-ui/core/ExpansionPanel';
+import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
+import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
+import Typography from '@material-ui/core/Typography';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import Divider from '@material-ui/core/Divider';
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+  },
+  heading: {
+    fontSize: theme.typography.pxToRem(15),
+    fontWeight: theme.typography.fontWeightRegular,
+  },
+});
+
+function SimpleExpansionPanel(props) {
+  const { classes } = props;
+  return (
+    <div className={classes.root}>
+      <ExpansionPanel>
+        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography className={classes.heading}><em>En lire d'avantage...</em> </Typography>
+        </ExpansionPanelSummary>
+        <ExpansionPanelDetails>
+          <Divider />
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
+            sit amet blandit leo lobortis eget.
+          </Typography>
+        </ExpansionPanelDetails>
+      </ExpansionPanel>
+    </div>
+  );
+}
+
+SimpleExpansionPanel.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(SimpleExpansionPanel);

frontend/src/components/university/modules/UniversityDri.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Paper from '@material-ui/core/Paper';
+import Tooltip from '@material-ui/core/Tooltip';
+import Button from '@material-ui/core/Button';
+
+import MyComponent from '../../MyComponent';
+import TextLink from '../../other/TextLink';
+import GenericModule from './GenericModule';
+import Grid from '@material-ui/core/Grid';
+import Divider from '@material-ui/core/Divider';
+
+import AddIcon from '@material-ui/icons/Add';
+
+
+import green from '@material-ui/core/colors/green';
+
+
+const styles = theme => ({
+  root: {
+    padding: 3 * theme.spacing.unit,
+    flexGrow: 1,
+  },
+  green: {
+    color: green.A200,
+  },
+  button: {
+    width: 5 * theme.spacing.unit,
+    height: 5 * theme.spacing.unit,
+    boxShadow: 'none',
+    marginBottom: theme.spacing.unit,
+  },
+});
+
+
+
+
+class UniversityDri extends React.Component {
+  render() {
+    const { classes, theme } = this.props;
+    return (
+      <Paper className={classes.root}>
+        <Grid container spacing={8} alignItems='center'>
+          <Grid item xs>
+            <Typography variant='title' align='center' color="textSecondary"><em>Informations émanant de la DRI</em></Typography>
+          </Grid>
+          <Grid item xs={2} style={{ textAlign: 'right' }}>
+
+            <Tooltip title="Ajouter un élément" placement="top">
+              <div style={{ display: 'inline-block' }}> {/* Needed to fire events for the tooltip! */}
+                <Button variant='fab' mini aria-label="Ajouter un élément DRI" disabled={false} style={{ backgroundColor: green.A700 }} className={classes.button}>
+                  <AddIcon />
+                </Button>
+              </div>
+            </Tooltip>
+
+          </Grid>
+
+        </Grid>
+
+        <Divider />
+        <GenericModule title={"DRI"} importanceLevel={'IMPORTANT'}/>
+      </Paper>
+    )
+  }
+}
+
+export default withStyles(styles, { withTheme: true })(UniversityDri);

frontend/src/components/university/modules/UniversityGeneral.js

@@ -30,7 +30,7 @@ class UniversityGeneral extends React.Component {
           </Grid>
           <Grid item xs>
             <Typography variant='headline'> École Polytechnique Fédérale de Lausanne</Typography>
-            <Typography variant='title'> EPFL</Typography>
+            <Typography variant='title'>EPFL</Typography>
             <Divider />
             <Typography variant='subheading'>Lausanne, Suisse</Typography>
             <Typography variant='body1'> Site internet : <TextLink href={"https://www.epfl.ch"}> www.epfl.ch </TextLink> </Typography>

frontend/src/components/university/tabs/GeneralInfoTab.js

@@ -12,6 +12,7 @@ import Lorem from 'react-lorem-component';
 
 import UniversityGeneral from '../modules/UniversityGeneral';
 import UniversitySemestersDates from '../modules/UniversitySemestersDates';
+import UniversityDri from '../modules/UniversityDri';
 import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
 
 const styles = theme => ({
@@ -35,17 +36,17 @@ class GeneralInfo extends MyComponent {
       return (
         <div className={classes.root1}>
 
-          <div style={{ flexGrow: 6, paddingRight: 2 * theme.spacing.unit }}>
+          <div style={{ flexGrow: 8, paddingRight: 2 * theme.spacing.unit }}>
             <Grid container direction='column' >
               <Grid item xs style={{ paddingBottom: 2 * theme.spacing.unit }} >
                 <UniversityGeneral />
               </Grid>
               <Grid item xs>
-                <GenericModule title={"DRI"} />
+                <UniversityDri />
               </Grid>
             </Grid>
           </div>
-          <div style={{ flexGrow: 4 }} >
+          <div style={{ flexGrow: 6 }} >
             <Grid container direction='column' >
               <Grid item xs style={{ paddingBottom: 2 * theme.spacing.unit }}>
                 <UniversitySemestersDates />
@@ -68,7 +69,7 @@ class GeneralInfo extends MyComponent {
               <UniversityGeneral />
             </Grid>
             <Grid item xs={12}>
-              <GenericModule title={"DRI"} />
+              <UniversityDri />
             </Grid>
             <Grid item xs={12}>
               <UniversitySemestersDates />

frontend/src/components/university/tabs/PreviousDeparturesTab.js

@@ -3,6 +3,9 @@ import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import MyComponent from '../../MyComponent';
 
+import PreviousDeparture from '../modules/PreviousDeparture';
+import GenericModule from '../modules/GenericModule';
+
 const styles = theme => ({
   root: {},
 });
@@ -11,9 +14,9 @@ class PreviousDeparturesTab extends MyComponent {
 
   myRender() {
     return (
-      <div>
-        Précédents départs
-      </div>
+      <GenericModule title="Florent Chehab | GI05~FDD | Automne 2018~échange">
+        <PreviousDeparture />
+      </GenericModule>
     );
   }