Commit 5ed3f5e8 authored by Florent Chehab's avatar Florent Chehab
Browse files

View changed, map partially operationnal

parent f7b3fc08
Pipeline #26449 failed with stages
in 1 minute and 26 seconds
{
"presets": [
"env",
"react",
"es2015",
"stage-1"
],
"plugins": [
"transform-class-properties"
]
}
\ No newline at end of file
../../../node_modules/leaflet/dist/leaflet.css
\ No newline at end of file
...@@ -54,7 +54,7 @@ from rest_framework.documentation import include_docs_urls ...@@ -54,7 +54,7 @@ from rest_framework.documentation import include_docs_urls
urlpatterns = [ urlpatterns = [
url(r'^$', views.home, name='home'), # url(r'^$', views.home, name='home'),
url(r'^api-docs/', include_docs_urls(title='Outgoing API')) url(r'^api-docs/', include_docs_urls(title='Outgoing API'))
] ]
......
...@@ -2,6 +2,7 @@ from django.shortcuts import render ...@@ -2,6 +2,7 @@ from django.shortcuts import render
from backend.models.university import Campus from backend.models.university import Campus
def home(request): # def home(request):
campus = Campus.objects.filter(is_main_campus=True).select_related() # campus = Campus.objects.filter(is_main_campus=True).select_related()
return render(request, 'rex/home.html', {'campus': campus}) # return render(request, 'rex/home.html', {'campus': campus})
# TODO clean old stuff (remove it)
\ No newline at end of file
from django.apps import AppConfig
class FrontendConfig(AppConfig):
name = 'frontend'
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
// 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);
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>
)
}
}
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>
);
import App from "./components/App";
\ No newline at end of file
../../../../node_modules/leaflet/dist/leaflet.css
\ No newline at end of file
This diff is collapsed.
<!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
from django.urls import path
from . import views
urlpatterns = [
path('', views.index),
]
from django.shortcuts import render
def index(request):
return render(request, 'frontend/index.html')
...@@ -32,7 +32,8 @@ INSTALLED_APPS = [ ...@@ -32,7 +32,8 @@ INSTALLED_APPS = [
'rest_framework', 'rest_framework',
'rest_framework.authtoken', 'rest_framework.authtoken',
'main_website', 'main_website',
'backend' 'backend',
'frontend'
] ]
MIDDLEWARE = [ MIDDLEWARE = [
......
...@@ -2,9 +2,9 @@ from django.conf import settings ...@@ -2,9 +2,9 @@ from django.conf import settings
from django.conf.urls.static import static from django.conf.urls.static import static
from django.conf.urls import include, url from django.conf.urls import include, url
from django.contrib import admin from django.contrib import admin
from django.views.generic.base import RedirectView
import django_cas_ng.views import django_cas_ng.views
urlpatterns = [ urlpatterns = [
url(r'^admin/', admin.site.urls), url(r'^admin/', admin.site.urls),
url(r'^user/login$', url(r'^user/login$',
...@@ -16,5 +16,7 @@ urlpatterns = [ ...@@ -16,5 +16,7 @@ urlpatterns = [
url(r'^user/callback$', url(r'^user/callback$',
django_cas_ng.views.callback, django_cas_ng.views.callback,
name='cas_ng_proxy_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')), url(r'', include('backend.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
This diff is collapsed.
...@@ -4,6 +4,8 @@ ...@@ -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)", "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", "main": "manage.py",
"scripts": { "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" "test": "echo \"Error: no test specified\" && exit 1"
}, },
"repository": { "repository": {
...@@ -13,7 +15,28 @@ ...@@ -13,7 +15,28 @@
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"leaflet": "^1.3.1",
"leaflet.markercluster": "^1.3.0" "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"
} }
} }
Markdown is supported
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