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

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
urlpatterns = [
url(r'^$', views.home, name='home'),
# url(r'^$', views.home, name='home'),
url(r'^api-docs/', include_docs_urls(title='Outgoing API'))
]
......
......@@ -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
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 = [
'rest_framework',
'rest_framework.authtoken',
'main_website',
'backend'
'backend',
'frontend'
]
MIDDLEWARE = [
......
......@@ -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)
This diff is collapsed.
......@@ -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"
}
}
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
\ No newline at end of file
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