More Components

frontend/src/components/university/UniversityTemplate.js

@@ -4,20 +4,21 @@ import { withStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
-import PhoneIcon from '@material-ui/icons/Phone';
-import FavoriteIcon from '@material-ui/icons/Favorite';
-import PersonPinIcon from '@material-ui/icons/PersonPin';
-import HelpIcon from '@material-ui/icons/Help';
-import ShoppingBasket from '@material-ui/icons/ShoppingBasket';
-import ThumbDown from '@material-ui/icons/ThumbDown';
-import ThumbUp from '@material-ui/icons/ThumbUp';
+import StarsIcon from '@material-ui/icons/Stars';
+import LocationOnIcon from '@material-ui/icons/LocationOn';
+import AttachMoneyIcon from '@material-ui/icons/AttachMoney';
+import HistoryIcon from '@material-ui/icons/History';
+import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
 import Typography from '@material-ui/core/Typography';
-import AwesomeSlider from 'react-awesome-slider';
-import AwsSliderStyles from 'react-awesome-slider/src/styles';
-import Lorem from 'react-lorem-component';
 
 import CoverGallery from './CoverGallery';
 
+import CampusesTab from './tabs/CampusesTab';
+import GeneralInfoTab from './tabs/GeneralInfoTab';
+import MoreTab from './tabs/MoreTab';
+import PreviousDeparturesTab from './tabs/PreviousDeparturesTab';
+import ScholarshipsTab from './tabs/ScholarshipsTab';
+
 function TabContainer(props) {
   return (
     <Typography component="div" style={{ padding: 8 * 3 }}>
@@ -68,6 +69,9 @@ class UniversityTemplate extends React.Component {
       body = d.getElementsByTagName('body')[0],
       width = w.innerWidth || documentElement.clientWidth || body.clientWidth,
       height = w.innerHeight || documentElement.clientHeight || body.clientHeight;
+
+    const { univId } = this.props;
+
     return (
       <div>
 
@@ -75,7 +79,7 @@ class UniversityTemplate extends React.Component {
           <CoverGallery></CoverGallery>
         </div>
         <div className={classes.root}>
-          <AppBar position="sticky" color="default">
+          <AppBar position="sticky" color="default" style={{ minHeight: "72px" }}>
             <Tabs
               value={value}
               onChange={this.handleChange}
@@ -85,18 +89,18 @@ class UniversityTemplate extends React.Component {
               indicatorColor="primary"
               textColor="primary"
             >
-              <Tab label="Généralités" icon={<PhoneIcon />} />
-              <Tab label="Précédents départs" icon={<HelpIcon />} />
-              <Tab label="Campus" icon={<FavoriteIcon />} />
-              <Tab label="Bourses" icon={<PersonPinIcon />} />
-              <Tab label="Autres" icon={<ShoppingBasket />} />
+              <Tab label="Généralités" icon={<StarsIcon />} />
+              <Tab label="Précédents départs" icon={<HistoryIcon />} />
+              <Tab label="Campus" icon={<LocationOnIcon />} />
+              <Tab label="Bourses" icon={<AttachMoneyIcon />} />
+              <Tab label="Autres" icon={<MoreHorizIcon />} />
             </Tabs>
           </AppBar>
-          {value === 0 && <TabContainer>Item One <Lorem count={10} /></TabContainer>}
-          {value === 1 && <TabContainer>Item Two</TabContainer>}
-          {value === 2 && <TabContainer>Item Three</TabContainer>}
-          {value === 3 && <TabContainer>Item Four</TabContainer>}
-          {value === 4 && <TabContainer>Item Five</TabContainer>}
+          {value === 0 && <TabContainer> <GeneralInfoTab univId={univId} /> </TabContainer>}
+          {value === 1 && <TabContainer> <PreviousDeparturesTab univId={univId} /> </TabContainer>}
+          {value === 2 && <TabContainer> <CampusesTab univId={univId} /> </TabContainer>}
+          {value === 3 && <TabContainer> <ScholarshipsTab univId={univId} /> </TabContainer>}
+          {value === 4 && <TabContainer> <MoreTab univId={univId} /> </TabContainer>}
         </div>
       </div>
 

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

+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import Tooltip from '@material-ui/core/Tooltip';
+import Button from '@material-ui/core/Button';
+import Badge from '@material-ui/core/Badge';
+import Grid from '@material-ui/core/Grid';
+
+import SettingsBackRestoreIcon from '@material-ui/icons/SettingsBackupRestore';
+import CreateIcon from '@material-ui/icons/Create';
+import VerifiedUserIcon from '@material-ui/icons/VerifiedUser';
+
+
+
+import red from '@material-ui/core/colors/red';
+import orange from '@material-ui/core/colors/orange';
+import green from '@material-ui/core/colors/green';
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+  },
+  green: {
+    color: green.A700,
+  },
+  orange: {
+    color: orange.A700,
+  },
+  red: {
+    color: red.A700
+  },
+  disabled: {
+    color: theme.palette.action.disabled
+  },
+  button: {
+    margin: 0.5 * theme.spacing.unit,
+  },
+})
+
+class GenericModule extends React.Component {
+  render() {
+    const { classes } = this.props;
+    return (
+      <div className={classes.root}>
+        <Grid container spacing={24}>
+          <Grid item xs={6}>
+            Titre
+          </Grid>
+          <Grid item xs={6} style={{ textAlign: 'right' }}>
+            <Tooltip title="Informations sur la modération" placement="top">
+              <Button variant="fab" mini aria-label="Restorer" className={classes.button}>
+                <Badge className={classes.margin} badgeContent={4} color="secondary">
+                  <VerifiedUserIcon className={classes.red} />
+                </Badge>
+              </Button>
+
+            </Tooltip>
+
+            <Tooltip title="Informations sur les possibilités d'éditions" placement="top">
+              <Button variant="fab" mini aria-label="Restorer" className={classes.button}>
+                <CreateIcon className={classes.green} />
+              </Button>
+            </Tooltip>
+
+            <Tooltip title="Informations sur les versions disponibles" placement="top">
+              <Button variant="fab" mini aria-label="Restorer" className={classes.button}>
+                <Badge className={classes.margin} badgeContent={4} color="secondary">
+
+                  <SettingsBackRestoreIcon className={classes.orange} />
+                </Badge>
+
+              </Button>
+            </Tooltip>
+          </Grid>
+
+        </Grid>
+      </div>
+    )
+  }
+}
+
+export default withStyles(styles, { withTheme: true })(GenericModule);
\ No newline at end of file

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

+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import MyComponent from '../../MyComponent';
+
+const styles = theme => ({
+  root: {},
+});
+
+class CampusesTab extends MyComponent {
+
+  myRender() {
+    return (
+      <div>
+        Informations sur les campus
+      </div>
+    );
+  }
+
+}
+
+// CampusesTab.propTypes = {
+//   classes: PropTypes.object.isRequired,
+//   univId: PropTypes.string.isRequired,
+// };
+
+export default withStyles(styles)(CampusesTab);
\ No newline at end of file

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

+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import MyComponent from '../../MyComponent';
+
+import GenericModule from '../modules/GenericModule';
+
+const styles = theme => ({
+  root: {},
+});
+
+class GeneralInfo extends MyComponent {
+
+  myRender() {
+    return (
+      <div>
+        Informations Générales
+        <GenericModule/>
+      </div>
+    );
+  }
+
+}
+
+// GeneralInfo.propTypes = {
+//   classes: PropTypes.object.isRequired,
+//   univId: PropTypes.string.isRequired,
+// };
+
+export default withStyles(styles)(GeneralInfo);
\ No newline at end of file

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

+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import MyComponent from '../../MyComponent';
+
+const styles = theme => ({
+  root: {},
+});
+
+class MoreTab extends MyComponent {
+
+  myRender() {
+    return (
+      <div>
+        C'est la pluie des tags ici !!
+      </div>
+    );
+  }
+
+}
+
+// MoreTab.propTypes = {
+//   classes: PropTypes.object.isRequired,
+//   univId: PropTypes.string.isRequired,
+// };
+
+export default withStyles(styles)(MoreTab);
\ No newline at end of file

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

+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import MyComponent from '../../MyComponent';
+
+const styles = theme => ({
+  root: {},
+});
+
+class PreviousDeparturesTab extends MyComponent {
+
+  myRender() {
+    return (
+      <div>
+        Précédents départs
+      </div>
+    );
+  }
+
+}
+
+// PreviousDeparturesTab.propTypes = {
+//   classes: PropTypes.object.isRequired,
+//   univId: PropTypes.string.isRequired,
+// };
+
+export default withStyles(styles)(PreviousDeparturesTab);
\ No newline at end of file

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

+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import MyComponent from '../../MyComponent';
+
+const styles = theme => ({
+  root: {},
+});
+
+class ScholarshipsTab extends MyComponent {
+
+  myRender() {
+    return (
+      <div>
+        Toutes les informations sur les bourses
+      </div>
+    );
+  }
+
+}
+
+// ScholarshipsTab.propTypes = {
+//   classes: PropTypes.object.isRequired,
+//   univId: PropTypes.string.isRequired,
+// };
+
+export default withStyles(styles)(ScholarshipsTab);
\ No newline at end of file