Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Rex Dri
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Service Desk
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Operations
Operations
Environments
Packages & Registries
Packages & Registries
Container Registry
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Julien Jerphanion
Rex Dri
Commits
70d6f0b6
Commit
70d6f0b6
authored
Sep 05, 2018
by
Florent Chehab
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Settings added, color selection operationnal
parent
b822f1d8
Changes
18
Hide whitespace changes
Inline
Side-by-side
Showing
18 changed files
with
801 additions
and
149 deletions
+801
-149
frontend/src/actions/action-types.js
frontend/src/actions/action-types.js
+1
-0
frontend/src/actions/theme.js
frontend/src/actions/theme.js
+13
-0
frontend/src/components/App.js
frontend/src/components/App.js
+140
-140
frontend/src/components/ThemeProvider.js
frontend/src/components/ThemeProvider.js
+33
-0
frontend/src/components/map/UnivMap.js
frontend/src/components/map/UnivMap.js
+2
-2
frontend/src/components/pages/PageSettings.js
frontend/src/components/pages/PageSettings.js
+37
-0
frontend/src/components/settings/ColorDemo.js
frontend/src/components/settings/ColorDemo.js
+108
-0
frontend/src/components/settings/ColorTools.js
frontend/src/components/settings/ColorTools.js
+251
-0
frontend/src/components/settings/Settings.js
frontend/src/components/settings/Settings.js
+54
-0
frontend/src/components/template/listItems.js
frontend/src/components/template/listItems.js
+10
-0
frontend/src/index.js
frontend/src/index.js
+6
-5
frontend/src/reducers/filter.js
frontend/src/reducers/filter.js
+1
-1
frontend/src/reducers/index.js
frontend/src/reducers/index.js
+2
-0
frontend/src/reducers/search.js
frontend/src/reducers/search.js
+24
-0
frontend/src/reducers/theme.js
frontend/src/reducers/theme.js
+20
-0
frontend/templates/frontend/index.html
frontend/templates/frontend/index.html
+5
-1
package-lock.json
package-lock.json
+92
-0
package.json
package.json
+2
-0
No files found.
frontend/src/actions/action-types.js
View file @
70d6f0b6
export
const
SAVE_MAIN_MAP_POSITION
=
'
SAVE_MAIN_MAP_POSITION
'
;
export
const
SAVE_SELECTED_UNIVERSITIES
=
'
SAVE_SELECTED_UNIVERSITIES
'
;
export
const
SAVE_FILTER_CONFIG
=
'
SAVE_FILTER_CONFIG
'
;
export
const
SAVE_APP_THEME
=
'
SAVE_APP_THEME
'
;
frontend/src/actions/theme.js
0 → 100644
View file @
70d6f0b6
import
{
SAVE_APP_THEME
}
from
"
./action-types
"
;
export
function
saveAppTheme
(
theme
)
{
return
{
type
:
SAVE_APP_THEME
,
theme
};
}
frontend/src/components/App.js
View file @
70d6f0b6
...
...
@@ -22,12 +22,12 @@ import MyComponent from './MyComponent'
// import route Components here
import
{
Route
,
Route
,
}
from
'
react-router-dom
'
;
import
{
countriesFetchData
,
currenciesFetchData
,
countriesFetchData
,
currenciesFetchData
,
}
from
'
../generated/actions
'
;
...
...
@@ -35,160 +35,160 @@ import PageMap from './pages/PageMap';
import
PageHome
from
'
./pages/PageHome
'
;
import
PageFilter
from
'
./pages/PageFilter
'
;
import
PageSearch
from
'
./pages/PageSearch
'
;
import
PageSettings
from
'
./pages/PageSettings
'
;
const
drawerWidth
=
240
;
const
styles
=
theme
=>
({
root
:
{
display
:
'
flex
'
,
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
,
},
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
},
null
:
{}
},
content
:
{
flexGrow
:
1
,
padding
:
theme
.
spacing
.
unit
*
3
,
height
:
'
100vh
'
,
overflow
:
'
auto
'
,
},
chartContainer
:
{
marginLeft
:
-
22
,
},
tableContainer
:
{
height
:
320
,
},
myPaper
:
{
padding
:
16
},
null
:
{}
});
class
App
extends
MyComponent
{
state
=
{
open
:
true
,
};
handleDrawerOpen
=
()
=>
{
this
.
setState
({
open
:
true
});
};
handleDrawerClose
=
()
=>
{
this
.
setState
({
open
:
false
});
};
myRender
()
{
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
=
{
classNames
((
!
this
.
state
.
open
)
&&
classes
.
hideIt
,
classes
.
null
)}
>
<
Chip
avatar
=
{
<
Avatar
>
<
SchoolIcon
/>
<
/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
}
>
<
Route
path
=
"
/app/
"
exact
=
{
true
}
component
=
{
PageHome
}
/
>
<
Route
path
=
"
/app/search
"
component
=
{
PageSearch
}
/
>
<
Route
path
=
"
/app/map
"
component
=
{
PageMap
}
/
>
<
Route
path
=
"
/app/filter
"
component
=
{
PageFilter
}
/
>
<
/main
>
<
/div
>
<
/React.Fragment
>
);
}
state
=
{
open
:
true
,
};
handleDrawerOpen
=
()
=>
{
this
.
setState
({
open
:
true
});
};
handleDrawerClose
=
()
=>
{
this
.
setState
({
open
:
false
});
};
myRender
()
{
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
=
{
classNames
((
!
this
.
state
.
open
)
&&
classes
.
hideIt
,
classes
.
null
)}
>
<
Chip
avatar
=
{
<
Avatar
>
<
SchoolIcon
/>
<
/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
}
>
<
Route
path
=
"
/app/
"
exact
=
{
true
}
component
=
{
PageHome
}
/
>
<
Route
path
=
"
/app/search
"
component
=
{
PageSearch
}
/
>
<
Route
path
=
"
/app/map
"
component
=
{
PageMap
}
/
>
<
Route
path
=
"
/app/filter
"
component
=
{
PageFilter
}
/
>
<
Route
path
=
"
/app/settings
"
component
=
{
PageSettings
}
/
>
<
/main
>
<
/div
>
<
/React.Fragment
>
);
}
}
App
.
propTypes
=
{
classes
:
PropTypes
.
object
.
isRequired
,
classes
:
PropTypes
.
object
.
isRequired
,
};
const
mapStateToProps
=
(
state
)
=>
{
return
{
countries
:
state
.
countries
,
currencies
:
state
.
currencies
}
return
{
countries
:
state
.
countries
,
currencies
:
state
.
currencies
}
};
const
mapDispatchToProps
=
(
dispatch
)
=>
{
return
{
fetchData
:
{
countries
:
()
=>
dispatch
(
countriesFetchData
()),
currencies
:
()
=>
dispatch
(
currenciesFetchData
()),
}
};
return
{
fetchData
:
{
countries
:
()
=>
dispatch
(
countriesFetchData
()),
currencies
:
()
=>
dispatch
(
currenciesFetchData
()),
}
};
};
export
default
connect
(
mapStateToProps
,
mapDispatchToProps
)(
withStyles
(
styles
)(
App
));
export
default
connect
(
mapStateToProps
,
mapDispatchToProps
)(
withStyles
(
styles
,
{
withTheme
:
true
}
)(
App
));
frontend/src/components/ThemeProvider.js
0 → 100644
View file @
70d6f0b6
import
React
from
"
react
"
;
import
MuiThemeProvider
from
'
@material-ui/core/styles/MuiThemeProvider
'
;
import
createMuiTheme
from
'
@material-ui/core/styles/createMuiTheme
'
;
import
{
connect
}
from
"
react-redux
"
;
import
{
BrowserRouter
as
Router
,
Route
}
from
'
react-router-dom
'
;
class
ThemeProvider
extends
React
.
Component
{
render
()
{
console
.
log
(
"
ici
"
)
return
(
<
div
>
<
MuiThemeProvider
theme
=
{
createMuiTheme
(
this
.
props
.
theme
)}
>
<
Router
>
{
this
.
props
.
children
}
<
/Router
>
<
/MuiThemeProvider
>
<
/div
>
)
}
}
const
mapStateToProps
=
(
state
)
=>
{
return
{
theme
:
state
.
app
.
appTheme
};
};
export
default
connect
(
mapStateToProps
)(
ThemeProvider
);
frontend/src/components/map/UnivMap.js
View file @
70d6f0b6
...
...
@@ -36,13 +36,13 @@ class UnivMap extends MyComponent {
}
saveLeafletInstance
=
(
l
)
=>
{
this
.
setState
(
Object
.
assign
(
this
.
state
,
{
this
.
setState
(
Object
.
assign
(
{},
this
.
state
,
{
leaflet_instance
:
l
,
}))
}
saveSelectedLayer
=
(
e
)
=>
{
this
.
setState
(
Object
.
assign
(
this
.
state
,
{
this
.
setState
(
Object
.
assign
(
{},
this
.
state
,
{
selected_layer
:
e
.
name
,
}))
}
...
...
frontend/src/components/pages/PageSettings.js
0 → 100644
View file @
70d6f0b6
import
React
from
'
react
'
;
import
PropTypes
from
'
prop-types
'
;
import
{
withStyles
}
from
'
@material-ui/core/styles
'
;
import
Grid
from
'
@material-ui/core/Grid
'
;
import
Typography
from
'
@material-ui/core/Typography
'
;
import
Settings
from
'
../settings/Settings
'
;
import
Paper
from
'
@material-ui/core/Paper
'
;
const
styles
=
theme
=>
({
myPaper
:
{
padding
:
16
}
});
class
PageSettings
extends
React
.
Component
{
render
()
{
const
{
classes
}
=
this
.
props
;
return
(
<
Paper
className
=
{
classes
.
myPaper
}
>
<
Grid
container
spacing
=
{
24
}
>
<
Grid
item
xs
=
{
11
}
>
<
Typography
variant
=
"
display1
"
gutterBottom
>
Paramètres
<
/Typography
>
<
/Grid
>
<
/Grid
>
<
Settings
/>
<
/Paper
>
);
}
}
PageSettings
.
propTypes
=
{
classes
:
PropTypes
.
object
.
isRequired
,
};
export
default
withStyles
(
styles
)(
PageSettings
);
frontend/src/components/settings/ColorDemo.js
0 → 100644
View file @
70d6f0b6
import
React
from
'
react
'
;
import
PropTypes
from
'
prop-types
'
;
import
{
withStyles
}
from
'
@material-ui/core/styles
'
;
import
AppBar
from
'
@material-ui/core/AppBar
'
;
import
Toolbar
from
'
@material-ui/core/Toolbar
'
;
import
Button
from
'
@material-ui/core/Button
'
;
import
IconButton
from
'
@material-ui/core/IconButton
'
;
import
MenuIcon
from
'
@material-ui/icons/Menu
'
;
import
Typography
from
'
@material-ui/core/Typography
'
;
import
AddIcon
from
'
@material-ui/icons/Add
'
;
// import MarkdownElement from '@material-ui/docs/MarkdownElement';
const
styles
=
theme
=>
({
root
:
{
position
:
'
relative
'
,
overflow
:
'
hidden
'
,
},
appFrame
:
{
position
:
'
relative
'
,
height
:
390
,
backgroundColor
:
theme
.
palette
.
background
.
paper
,
},
statusBar
:
{
width
:
'
100%
'
,
height
:
24
,
},
menuButton
:
{
marginLeft
:
-
12
,
marginRight
:
20
,
},
code
:
{
marginTop
:
theme
.
spacing
.
unit
,
'
& pre
'
:
{
margin
:
'
0px !important
'
,
},
},
fab
:
{
position
:
'
absolute
'
,
bottom
:
theme
.
spacing
.
unit
*
2
,
right
:
theme
.
spacing
.
unit
*
2
,
},
});
function
ColorDemo
(
props
)
{
const
{
classes
,
data
,
theme
}
=
props
;
const
primary
=
{
main
:
data
.
primary
,
output
:
data
.
primaryShade
===
4
?
`
${
data
.
primaryHue
}
`
:
`{
main: '
${
data
.
primary
}
',
}`
,
};
const
secondary
=
{
main
:
data
.
secondary
,
output
:
data
.
secondaryShade
===
11
?
`
${
data
.
secondaryHue
}
`
:
`{
main: '
${
data
.
secondary
}
',
}`
,
};
theme
.
palette
.
augmentColor
(
primary
);
theme
.
palette
.
augmentColor
(
secondary
);
return
(
<
div
className
=
{
classes
.
root
}
>
<
div
className
=
{
classes
.
appFrame
}
>
<
div
className
=
{
classes
.
statusBar
}
style
=
{{
backgroundColor
:
primary
.
dark
}}
/
>
<
AppBar
position
=
"
static
"
style
=
{{
backgroundColor
:
primary
.
main
}}
>
<
Toolbar
style
=
{{
color
:
primary
.
contrastText
}}
>
<
IconButton
className
=
{
classes
.
menuButton
}
color
=
"
inherit
"
aria
-
label
=
"
Menu
"
>
<
MenuIcon
/>
<
/IconButton
>
<
Typography
variant
=
"
title
"
color
=
"
inherit
"
>
Color
sample
<
/Typography
>
<
/Toolbar
>
<
/AppBar
>
{
/* <MarkdownElement
dir="ltr"
className={classes.code}
text={`\`\`\`jsx
{
palette: {
primary: ${primary.output},
secondary: ${secondary.output},
},
}
\`\`\``}
/> */
}
<
Button
variant
=
"
fab
"
className
=
{
classes
.
fab
}
style
=
{{
backgroundColor
:
secondary
.
main
}}
>
<
AddIcon
nativeColor
=
{
secondary
.
contrastText
}
/
>
<
/Button
>
<
/div
>
<
/div
>
);
}
ColorDemo
.
propTypes
=
{
classes
:
PropTypes
.
object
.
isRequired
,
data
:
PropTypes
.
object
.
isRequired
,
theme
:
PropTypes
.
object
.
isRequired
,
};
export
default
withStyles
(
styles
,
{
withTheme
:
true
})(
ColorDemo
);
\ No newline at end of file
frontend/src/components/settings/ColorTools.js
0 → 100644
View file @
70d6f0b6
// Taken from https://github.com/mui-org/material-ui/blob/master/docs/src/pages/style/color/ColorTool.js
// MIT Licence and modified
import
React
from
'
react
'
;
import
PropTypes
from
'
prop-types
'
;
import
{
connect
}
from
'
react-redux
'
;
import
compose
from
'
recompose/compose
'
;
import
{
withStyles
}
from
'
@material-ui/core/styles
'
;
import
*
as
colors
from
'
@material-ui/core/colors
'
;
import
Grid
from
'
@material-ui/core/Grid
'
;
import
Input
from
'
@material-ui/core/Input
'
;
import
Radio
from
'
@material-ui/core/Radio
'
;
import
Tooltip
from
'
@material-ui/core/Tooltip
'
;
import
Typography
from
'
@material-ui/core/Typography
'
;
import
Button
from
'
@material-ui/core/Button
'
;
import
CheckIcon
from
'
@material-ui/icons/Check
'
;
import
Slider
from
'
@material-ui/lab/Slider
'
;
import
{
rgbToHex
}
from
'
@material-ui/core/styles/colorManipulator
'
;
import
{
capitalize
}
from
'
@material-ui/core/utils/helpers
'
;
// import actionTypes from 'docs/src/modules/redux/actionTypes';
import
ColorDemo
from
'
./ColorDemo
'
;
import
{
saveAppTheme
}
from
'
../../actions/theme
'
;
const
hues
=
Object
.
keys
(
colors
).
slice
(
1
,
17
);
const
shades
=
[
900
,
800
,
700
,
600
,
500
,
400
,
300
,
200
,
100
,
50
,
'
A700
'
,
'
A400
'
,
'
A200
'
,
'
A100
'
];
const
styles
=
theme
=>
({
radio
:
{
width
:
48
,
height
:
48
,
},
radioSelected
:
{
width
:
48
,
height
:
48
,
border
:
'
1px solid white
'
,
color
:
theme
.
palette
.
common
.
white
,
display
:
'
flex
'
,
justifyContent
:
'
center
'
,
alignItems
:
'
center
'
,
},
swatch
:
{
width
:
192
,
},
sliderContainer
:
{
display
:
'
flex
'
,
alignItems
:
'
center
'
,
marginTop
:
theme
.
spacing
.
unit
*
2
,
marginBottom
:
theme
.
spacing
.
unit
,
},
slider
:
{
width
:
'
calc(100% - 80px)
'
,
},
colorBar
:
{
marginTop
:
theme
.
spacing
.
unit
*
2
,
},
colorSquare
:
{
width
:
64
,
height
:
64
,
display
:
'
flex
'
,
justifyContent
:
'
center
'
,
alignItems
:
'
center
'
,
},
});
class
ColorTool
extends
React
.
Component
{
state
=
{
primary
:
'
#2196f3
'
,
secondary
:
'
#f50057
'
,
primaryInput
:
'
#2196f3
'
,
secondaryInput
:
'
#f50057
'
,
primaryHue
:
'
blue
'
,
secondaryHue
:
'
pink
'
,
primaryShade
:
4
,
secondaryShade
:
11
,
};
handleChangeColor
=
name
=>
event
=>
{
const
isRgb
=
string
=>
/#
?([
0-9a-f
]{6})
/i
.
test
(
string
);
const
{
target
:
{
value
:
color
},
}
=
event
;
this
.
setState
({
[
`
${
name
}
Input`
]:
color
,
});
if
(
isRgb
(
color
))
{
thi