View changed, map partially operationnal

.babelrc

+{
+    "presets": [
+        "env",
+        "react",
+        "es2015",
+        "stage-1"
+    ],
+    "plugins": [
+        "transform-class-properties"
+    ]
+}
\ No newline at end of file

backend/static/css/leaflet.css

-../../../node_modules/leaflet/dist/leaflet.css
\ No newline at end of file

backend/urls.py

@@ -54,7 +54,7 @@ from rest_framework.documentation import include_docs_urls
 
 
 urlpatterns = [
-    url(r'^$', views.home, name='home'),
+    # url(r'^$', views.home, name='home'),
     url(r'^api-docs/', include_docs_urls(title='Outgoing API'))
 ]
 

backend/views.py

@@ -2,6 +2,7 @@ from django.shortcuts import render
 from backend.models.university import Campus
 
 
-def home(request):
-    campus = Campus.objects.filter(is_main_campus=True).select_related()
-    return render(request, 'rex/home.html', {'campus': campus})
+# def home(request):
+#     campus = Campus.objects.filter(is_main_campus=True).select_related()
+#     return render(request, 'rex/home.html', {'campus': campus})
+# TODO clean old stuff (remove it)
\ No newline at end of file

frontend/apps.py

+from django.apps import AppConfig
+
+
+class FrontendConfig(AppConfig):
+    name = 'frontend'

frontend/src/components/App.js

+import React from "react";
+import ReactDOM from "react-dom";
+import Dashboard from "./Dashboard";
+import UnivMap from './UnivMap';
+
+const App = () => (
+    <Dashboard />
+);
+
+const wrapper = document.getElementById("app");
+
+wrapper ? ReactDOM.render(<App />, wrapper) : null;
\ No newline at end of file

frontend/src/components/Dashboard.js

+// Inspired by https://github.com/mui-org/material-ui/tree/master/docs/src/pages/page-layout-examples/dashboard
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import Drawer from '@material-ui/core/Drawer';
+import List from '@material-ui/core/List';
+import Typography from '@material-ui/core/Typography';
+import Divider from '@material-ui/core/Divider';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+import Chip from '@material-ui/core/Chip';
+import Avatar from '@material-ui/core/Avatar';
+import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
+import ScoolIcon from '@material-ui/icons/School';
+import UnivMap from './UnivMap'
+import Paper from '@material-ui/core/Paper';
+import { mainListItems, secondaryListItems } from './listItems';
+
+const drawerWidth = 240;
+
+const styles = theme => ({
+    root: {
+        display: 'flex',
+    },
+    toolbar: {
+        paddingRight: 24, // keep right padding when drawer closed
+    },
+    toolbarIcon: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        padding: '0 8px',
+        ...theme.mixins.toolbar,
+    },
+
+    chip: {
+        margin: theme.spacing.unit,
+    },
+    menuButton: {
+        marginRight: 4,
+    },
+    hideIt: {
+        display: 'none',
+    },
+    title: {
+        flexGrow: 1,
+    },
+    drawerPaper: {
+        position: 'relative',
+        whiteSpace: 'nowrap',
+        width: drawerWidth,
+        transition: theme.transitions.create('width', {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.enteringScreen,
+        }),
+    },
+    drawerPaperClose: {
+        overflowX: 'hidden',
+        transition: theme.transitions.create('width', {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+        width: theme.spacing.unit * 7,
+        [theme.breakpoints.up('sm')]: {
+            width: theme.spacing.unit * 9,
+        },
+    },
+    content: {
+        flexGrow: 1,
+        padding: theme.spacing.unit * 3,
+        height: '100vh',
+        overflow: 'auto',
+    },
+    chartContainer: {
+        marginLeft: -22,
+    },
+    tableContainer: {
+        height: 320,
+    },
+    myPaper: {
+        padding: 16
+    }
+});
+
+class Dashboard extends React.Component {
+    state = {
+        open: true,
+    };
+
+    handleDrawerOpen = () => {
+        this.setState({ open: true });
+    };
+
+    handleDrawerClose = () => {
+        this.setState({ open: false });
+    };
+
+    render() {
+        const { classes } = this.props;
+
+        return (
+            <React.Fragment>
+                <CssBaseline />
+                <div className={classes.root}>
+                    <Drawer
+                        variant="permanent"
+                        classes={{
+                            paper: classNames(classes.drawerPaper, !this.state.open && classes.drawerPaperClose),
+                        }}
+                        open={this.state.open}
+                    >
+                        <div className={classNames(classes.toolbarIcon)}>
+                            <div className={(!this.state.open) && classes.hideIt}>
+                                <Chip
+                                    avatar={<Avatar> <ScoolIcon /> </Avatar>}
+                                    label="Outgoing REX"
+                                    className={classes.chip}
+                                    color="primary"
+                                />
+                            </div>
+                            <IconButton onClick={this.handleDrawerOpen} className={classNames(classes.menuButton,
+                                this.state.open && classes.hideIt)}>
+                                <MenuIcon />
+                            </IconButton>
+                            <IconButton onClick={this.handleDrawerClose} className={classNames(classes.menuButton,
+                                (!this.state.open) && classes.hideIt)}>
+                                <ChevronLeftIcon />
+                            </IconButton>
+                        </div>
+
+
+
+                        <Divider />
+                        <List>{mainListItems}</List>
+                        <Divider />
+                        <List>{secondaryListItems}</List>
+                    </Drawer>
+
+                    <main className={classes.content}>
+                        <Paper className={classes.myPaper}>
+                            <Typography variant="display1" gutterBottom>
+                                Exploration Cartographique
+                        </Typography>
+
+
+                            <UnivMap />
+                        </Paper>
+
+
+
+                    </main>
+                </div>
+            </React.Fragment>
+        );
+    }
+}
+
+Dashboard.propTypes = {
+    classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Dashboard);

frontend/src/components/UnivMap.js

+import React, { Component } from 'react';
+import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
+// import MarkerClusterGroup from 'react-leaflet-markercluster';
+
+
+// var Stamen_Watercolor = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', {
+//     attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+//     subdomains: 'abcd',
+//     minZoom: 1,
+//     maxZoom: 18,
+//     ext: 'png'
+// });
+
+// var Stamen_Label = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-labels/{z}/{x}/{y}.{ext}', {
+//     attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+//     subdomains: 'abcd',
+//     minZoom: 1,
+//     maxZoom: 18,
+//     ext: 'png'
+// });
+
+// var OpenStreetMap_France = L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
+//     maxZoom: 20,
+//     attribution: '&copy; Openstreetmap France | &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+// });
+
+// var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+//     attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
+// });
+
+// var Stamen = L.layerGroup();
+// Stamen_Watercolor.addTo(Stamen);
+// Stamen_Label.addTo(Stamen);
+
+// var baseLayers = {
+//     "Stamen Watercolor": Stamen,
+//     "OpenStreetMap": OpenStreetMap_France,
+//     "Satellite": Esri_WorldImagery
+// };
+
+// End of handling of layers, now let's handle markers.
+
+
+
+export default class UnivMap extends Component {
+    state = {
+        lat: 51.505,
+        lng: -0.09,
+        zoom: 13,
+        height: '200px'
+    }
+
+    render() {
+        const position = [this.state.lat, this.state.lng]
+        return (
+            <Map center={position} zoom={this.state.zoom} style={{ height: "500px" }}>
+                <TileLayer
+                    attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
+                    url="https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png"
+                />
+                <Marker position={position}>
+                    <Popup>
+                        A pretty CSS3 popup. <br /> Easily customizable.
+	                </Popup>
+                </Marker>
+            </Map>
+        )
+    }
+}
+
+

frontend/src/components/listItems.js

+import React from 'react';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListSubheader from '@material-ui/core/ListSubheader';
+import MapIcon from '@material-ui/icons/Map';
+import LocationCityIcon from '@material-ui/icons/LocationCity';
+import PeopleIcon from '@material-ui/icons/People';
+import BarChartIcon from '@material-ui/icons/BarChart';
+import LayersIcon from '@material-ui/icons/Layers';
+import AssignmentIcon from '@material-ui/icons/Assignment';
+
+export const mainListItems = (
+    <div>
+        <ListItem button>
+            <ListItemIcon>
+                <MapIcon />
+            </ListItemIcon>
+            <ListItemText primary="Carte" />
+        </ListItem>
+        <ListItem button>
+            <ListItemIcon>
+                <LocationCityIcon />
+            </ListItemIcon>
+            <ListItemText primary="Université" />
+        </ListItem>
+        <ListItem button>
+            <ListItemIcon>
+                <PeopleIcon />
+            </ListItemIcon>
+            <ListItemText primary="????" />
+        </ListItem>
+        <ListItem button>
+            <ListItemIcon>
+                <BarChartIcon />
+            </ListItemIcon>
+            <ListItemText primary="???" />
+        </ListItem>
+    </div>
+);
+
+export const secondaryListItems = (
+    <div>
+        <ListSubheader inset>Mes listes</ListSubheader>
+        <ListItem button>
+            <ListItemIcon>
+                <AssignmentIcon />
+            </ListItemIcon>
+            <ListItemText primary="Liste 1" />
+        </ListItem>
+        <ListItem button>
+            <ListItemIcon>
+                <AssignmentIcon />
+            </ListItemIcon>
+            <ListItemText primary="Liste 2" />
+        </ListItem>
+        <ListItem button>
+            <ListItemIcon>
+                <AssignmentIcon />
+            </ListItemIcon>
+            <ListItemText primary="Liste 3" />
+        </ListItem>
+    </div>
+);

frontend/src/index.js

+import App from "./components/App";
\ No newline at end of file

frontend/static/frontend/css/leaflet.css

+../../../../node_modules/leaflet/dist/leaflet.css
\ No newline at end of file

frontend/templates/frontend/index.html

+<!DOCTYPE html>
+<html>
+
+  <head>
+    <meta charset="utf-8">
+    <title>Outgoing REX</title>
+  </head>
+
+  <body>
+    <div id="app" class="columns">
+      <!-- React -->
+    </div>
+  </body>
+
+  {% load static %}
+  <link rel="stylesheet" href="{% static '/frontend/css/leaflet.css' %}"/>
+  <script src="{% static "/frontend/main.js" %}"></script>
+  <noscript>Cette application nécessite Javascript... Merci de l'activer ou d'utiliser un navigateur approprié.</noscript> 
+</html>
\ No newline at end of file

frontend/urls.py

+from django.urls import path
+from . import views
+
+
+urlpatterns = [
+    path('', views.index),
+]

frontend/views.py

+from django.shortcuts import render
+
+
+def index(request):
+    return render(request, 'frontend/index.html')

general/settings.py

@@ -32,7 +32,8 @@ INSTALLED_APPS = [
     'rest_framework',
     'rest_framework.authtoken',
     'main_website',
-    'backend'
+    'backend',
+    'frontend'
 ]
 
 MIDDLEWARE = [

general/urls.py

@@ -2,9 +2,9 @@ from django.conf import settings
 from django.conf.urls.static import static
 from django.conf.urls import include, url
 from django.contrib import admin
+from django.views.generic.base import RedirectView
 import django_cas_ng.views
 
-
 urlpatterns = [
     url(r'^admin/', admin.site.urls),
     url(r'^user/login$',
@@ -16,5 +16,7 @@ urlpatterns = [
     url(r'^user/callback$',
         django_cas_ng.views.callback,
         name='cas_ng_proxy_callback'),
+    url(r'^app/', include('frontend.urls')),
+    url(r'^$', RedirectView.as_view(url='./app/'), name='go to real home'),
     url(r'', include('backend.urls')),
 ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

package.json

@@ -4,6 +4,8 @@
   "description": "[![build](/../badges/master/build.svg)](https://gitlab.utc.fr/chehabfl/outgoing_rex/pipelines) [![coverage](/../badges/master/coverage.svg)](https://chehabfl.gitlab.utc.fr/outgoing_rex/) [![License](https://img.shields.io/badge/License-BSD%202--Clause-green.svg)](https://opensource.org/licenses/BSD-2-Clause)",
   "main": "manage.py",
   "scripts": {
+    "dev": "webpack --mode development ./frontend/src/index.js --output ./frontend/static/frontend/main.js",
+    "build": "webpack --mode production ./frontend/src/index.js --output ./frontend/static/frontend/main.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -13,7 +15,28 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "leaflet": "^1.3.1",
     "leaflet.markercluster": "^1.3.0"
+  },
+  "devDependencies": {
+    "@material-ui/core": "^1.5.1",
+    "@material-ui/icons": "^2.0.3",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.5",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-1": "^6.24.1",
+    "css-loader": "^1.0.0",
+    "leaflet": "^1.3.4",
+    "prop-types": "^15.6.2",
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2",
+    "react-leaflet": "^2.0.1",
+    "react-script": "^2.0.5",
+    "recharts": "^1.1.0",
+    "weak-key": "^1.0.1",
+    "webpack": "^4.17.0",
+    "webpack-cli": "^3.1.0"
   }
 }

webpack.config.js

+module.exports = {
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: "babel-loader"
+                }
+            }
+        ]
+    }
+};
\ No newline at end of file