Commit b99b1056 authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Merge remote-tracking branch 'origin/master' into facility-cards

parents 84ce895b bfa123da
......@@ -2,7 +2,7 @@
"env": {
"browser": true,
"commonjs": true,
"es6": false,
"es6": true,
"node": true
},
"parserOptions": {
......
......@@ -3,12 +3,14 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"autosuggest-highlight": "^3.1.0",
"classnames": "^2.2.5",
"history": "^4.6.3",
"immutability-helper": "^2.3.0",
"material-ui": "next",
"material-ui-icons": "^1.0.0-alpha.19",
"react": "^15.6.1",
"react-autosuggest": "^9.3.2",
"react-dom": "^15.6.1",
"react-redux": "^5.0.5",
"react-router-dom": "^4.1.2",
......
export const TOGGLE_DRAWER = 'TOGGLE_DRAWER';
export const SET_FACILITIES = 'SET_FACILITIES';
export const GET_FACILITIES = 'GET_FACILITIES';
export const SET_SIDEBAR = 'SET_SIDEBAR';
\ No newline at end of file
export const SET_SIDEBAR = 'SET_SIDEBAR';
export const SET_SEARCH_TERM = 'SET_SEARCH_TERM';
\ No newline at end of file
import { TOGGLE_DRAWER,SET_SIDEBAR } from './action-types';
import { TOGGLE_DRAWER,SET_SIDEBAR,SET_SEARCH_TERM,SET_FILTERED_LIST } from './action-types';
export const toggleDrawer = () => ({
type:TOGGLE_DRAWER,
......@@ -7,4 +7,10 @@ export const toggleDrawer = () => ({
export const setSidebar = (facility) => ({
type:SET_SIDEBAR,
facility,
})
\ No newline at end of file
})
export const setSearchTerm = (term) => ({
type:SET_SEARCH_TERM,
term,
})
......@@ -20,6 +20,7 @@ const styleSheet = {
height: '100%',
display: 'flex',
flexWrap: 'wrap',
overflowY:'scroll',
}
}
......
......@@ -5,9 +5,48 @@ import {connect} from 'react-redux';
import {toggleDrawer} from '../actions/ui';
import AppBar from '../components/AppBar';
import Sidebar from '../components/Sidebar';
import {getFacilities, setFacilities} from '../actions/api'
import {getFacilities, setFacilities} from '../actions/api';
import Button from 'material-ui/Button';
import CardContainer from '../components/CardContainer'
import CardContainer from '../components/CardContainer';
import SearchBar from './SearchBar';
const suggestions = [
{ label: 'Afghanistan' },
{ label: 'Aland Islands' },
{ label: 'Albania' },
{ label: 'Algeria' },
{ label: 'American Samoa' },
{ label: 'Andorra' },
{ label: 'Angola' },
{ label: 'Anguilla' },
{ label: 'Antarctica' },
{ label: 'Antigua and Barbuda' },
{ label: 'Argentina' },
{ label: 'Armenia' },
{ label: 'Aruba' },
{ label: 'Australia' },
{ label: 'Austria' },
{ label: 'Azerbaijan' },
{ label: 'Bahamas' },
{ label: 'Bahrain' },
{ label: 'Bangladesh' },
{ label: 'Barbados' },
{ label: 'Belarus' },
{ label: 'Belgium' },
{ label: 'Belize' },
{ label: 'Benin' },
{ label: 'Bermuda' },
{ label: 'Bhutan' },
{ label: 'Bolivia, Plurinational State of' },
{ label: 'Bonaire, Sint Eustatius and Saba' },
{ label: 'Bosnia and Herzegovina' },
{ label: 'Botswana' },
{ label: 'Bouvet Island' },
{ label: 'Brazil' },
{ label: 'British Indian Ocean Territory' },
{ label: 'Brunei Darussalam' },
];
class Layout extends React.Component {
constructor(props){
super(props);
......@@ -31,6 +70,7 @@ class Layout extends React.Component {
{/* <Button raised onClick={getFacilities} className={classes.button}>
Default
</Button> */}
<SearchBar suggestions={suggestions}/>
<CardContainer facilities={this.props.facilities}/>
</div>
<Sidebar facility={sidebarFacility}/>
......@@ -55,7 +95,7 @@ const styleSheet = {
boxSizing:'border-box',
flex:'1 1 100%',
height:'100%',
margin:16,
padding:16,
},
}
......
import React from 'react';
import PropTypes from 'prop-types';
import Autosuggest from 'react-autosuggest';
import TextField from 'material-ui/TextField';
import Paper from 'material-ui/Paper';
import { MenuItem } from 'material-ui/Menu';
import match from 'autosuggest-highlight/match';
import parse from 'autosuggest-highlight/parse';
import { withStyles } from 'material-ui/styles';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { setSearchTerm} from '../actions/ui';
import Search from 'material-ui-icons/Search'
import Input from 'material-ui/Input';
// import Select from 'material-ui/Select';
const createSuggestions = () => {
}
function renderInput(inputProps) {
const { classes, home, value, ref, ...other } = inputProps;
return (
<TextField
autoFocus={home}
className={classes.textField}
value={value}
inputRef={ref}
InputProps={{
classes: {
input: classes.input,
},
disableUnderline:true,
...other,
}}
/>
);
}
function renderSuggestion(suggestion, { query, isHighlighted }) {
const matches = match(suggestion.label, query);
const parts = parse(suggestion.label, matches);
return (
<MenuItem selected={isHighlighted} component="div">
<div>
{parts.map((part, index) => {
return part.highlight ? (
<span key={index} style={{ fontWeight: 300 }}>
{part.text}
</span>
) : (
<strong key={index} style={{ fontWeight: 500 }}>
{part.text}
</strong>
);
})}
</div>
</MenuItem>
);
}
function renderSuggestionsContainer(options) {
const { containerProps, children } = options;
return (
<Paper {...containerProps} square>
{children}
</Paper>
);
}
function getSuggestionValue(suggestion) {
return suggestion.label;
}
function getSuggestions(value,suggestions) {
const inputValue = value.trim().toLowerCase();
const inputLength = inputValue.length;
let count = 0;
return inputLength === 0
? []
: suggestions.filter(suggestion => {
const keep =
count < 5 && suggestion.label.toLowerCase().slice(0, inputLength) === inputValue;
if (keep) {
count += 1;
}
return keep;
});
}
const styles = theme => ({
container: {
flexGrow: 1,
position: 'relative',
// height: 40,
},
suggestionsContainerOpen: {
position: 'absolute',
zIndex:1000,
marginTop: theme.spacing.unit,
marginBottom: theme.spacing.unit * 3,
left: 0,
right: 0,
},
suggestion: {
display: 'block',
},
suggestionsList: {
margin: 0,
padding: 0,
listStyleType: 'none',
},
textField: {
width: '100%',
height:48,
},
input:{
height:40,
marginLeft:8,
},
paperBackground:{
height:54,
width:600,
display:'flex',
margin:'0px auto 16px auto',
},
rightSearchContainer:{
height:'100%',
display:'flex',
alignItems:'center',
marginLeft:8,
marginRight:8,
},
searchIcon:{
display:'block',
opacity:.54,
}
});
class IntegrationAutosuggest extends React.Component {
state = {
value: '',
// suggestions: [],
};
handleSuggestionsFetchRequested = ({ value }) => {
this.setState({
suggestions: getSuggestions(value,this.props.suggestions),
});
};
handleSuggestionsClearRequested = () => {
this.setState({
suggestions: [],
});
};
handleChange = (event, { newValue }) => {
this.setState({
value: newValue,
});
this.props.setSearchTerm(newValue)
};
render() {
const { classes,setSearchTerm,suggestions } = this.props;
return (
<Paper className={classes.paperBackground}>
<Autosuggest
theme={{
container: classes.container,
suggestionsContainerOpen: classes.suggestionsContainerOpen,
suggestionsList: classes.suggestionsList,
suggestion: classes.suggestion,
}}
renderInputComponent={renderInput}
suggestions={getSuggestions(this.state.value,suggestions)}
onSuggestionsFetchRequested={this.handleSuggestionsFetchRequested}
onSuggestionsClearRequested={this.handleSuggestionsClearRequested}
renderSuggestionsContainer={renderSuggestionsContainer}
getSuggestionValue={getSuggestionValue}
renderSuggestion={renderSuggestion}
inputProps={{
autoFocus: true,
classes,
placeholder: 'names, locations, etc',
value: this.state.value,
onChange: this.handleChange,
}}
/>
<div className={classes.rightSearchContainer}>
{/* <Select
native
value={this.state.age}
onChange={this.handleChange('age')}
input={<Input id="age-native-simple" />}
>
<option value="" />
<option value={10}>Ten</option>
<option value={20}>Twenty</option>
<option value={30}>Thirty</option>
</Select> */}
<Search className={classes.searchIcon}/>
</div>
</Paper>
);
}
}
IntegrationAutosuggest.propTypes = {
classes: PropTypes.object.isRequired,
};
export default compose(connect(null,{setSearchTerm}),withStyles(styles))(IntegrationAutosuggest);
\ No newline at end of file
......@@ -8,7 +8,7 @@ height: 100%;
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #fafafa;
background-color: #f1f2f6;
}
body>#root{
width:100%;
......
......@@ -19,6 +19,11 @@ import green from 'material-ui/colors/green';
// Create a history of your choosing (we're using a browser history in this case)
const history = createHistory()
const extension = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
if(extension){
const enhance = compose(
applyMiddleware(ReduxThunk,routerMiddleware(history))
,extension)
}
const enhance = compose(
applyMiddleware(ReduxThunk,routerMiddleware(history))
,extension)
......
import {TOGGLE_DRAWER,SET_SIDEBAR } from '../actions/action-types'
import {TOGGLE_DRAWER,SET_SIDEBAR,SET_SEARCH_TERM,SET_FILTERED_LIST } from '../actions/action-types'
function isOpen(state=false,action){
switch (action.type) {
......@@ -8,9 +8,11 @@ function isOpen(state=false,action){
return state
}
}
const drawer = (state={},action) => ({
isOpen:isOpen(state.isOpen,action)
})
const sidebar = (state={},action) => {
switch(action.type){
case SET_SIDEBAR:
......@@ -19,8 +21,29 @@ const sidebar = (state={},action) => {
return {}
}
}
const searchbarState = {
term:'',
filteredList:[],
}
const filterList = (state) =>{
}
const search = (state=searchbarState,facilities=[],action) =>{
switch(action.type){
case SET_SEARCH_TERM:
return Object.assign({},state,{
term:action.term,
});
default:
return state;
}
}
const ui = (state={},action) =>({
drawer:drawer(state.drawer,action),
sidebar:sidebar(state.sidbar,action),
search: search(state.search,state.facilities,action),
})
export default ui;
const theme = {
"direction": "ltr",
"palette": {
"common": {
"black": "#000",
"white": "#fff",
"transparent": "rgba(0, 0, 0, 0)",
"fullBlack": "rgba(0, 0, 0, 1)",
"darkBlack": "rgba(0, 0, 0, 0.87)",
"lightBlack": "rgba(0, 0, 0, 0.54)",
"minBlack": "rgba(0, 0, 0, 0.26)",
"faintBlack": "rgba(0, 0, 0, 0.12)",
"fullWhite": "rgba(255, 255, 255, 1)",
"darkWhite": "rgba(255, 255, 255, 0.87)",
"lightWhite": "rgba(255, 255, 255, 0.54)"
},
"type": "light",
"primary": {
"50": "#e3f2fd",
"100": "#bbdefb",
"200": "#90caf9",
"300": "#64b5f6",
"400": "#42a5f5",
"500": "#2196f3",
"600": "#1e88e5",
"700": "#1976d2",
"800": "#1565c0",
"900": "#0d47a1",
"A100": "#82b1ff",
"A200": "#448aff",
"A400": "#2979ff",
"A700": "#2962ff",
"contrastDefaultColor": "light"
},
"secondary": {
"50": "#fce4ec",
"100": "#f8bbd0",
"200": "#f48fb1",
"300": "#f06292",
"400": "#ec407a",
"500": "#e91e63",
"600": "#d81b60",
"700": "#c2185b",
"800": "#ad1457",
"900": "#880e4f",
"A100": "#ff80ab",
"A200": "#ff4081",
"A400": "#f50057",
"A700": "#c51162",
"contrastDefaultColor": "light"
},
"error": {
"50": "#ffebee",
"100": "#ffcdd2",
"200": "#ef9a9a",
"300": "#e57373",
"400": "#ef5350",
"500": "#f44336",
"600": "#e53935",
"700": "#d32f2f",
"800": "#c62828",
"900": "#b71c1c",
"A100": "#ff8a80",
"A200": "#ff5252",
"A400": "#ff1744",
"A700": "#d50000",
"contrastDefaultColor": "light"
},
"grey": {
"50": "#fafafa",
"100": "#f5f5f5",
"200": "#eeeeee",
"300": "#e0e0e0",
"400": "#bdbdbd",
"500": "#9e9e9e",
"600": "#757575",
"700": "#616161",
"800": "#424242",
"900": "#212121",
"A100": "#d5d5d5",
"A200": "#aaaaaa",
"A400": "#303030",
"A700": "#616161",
"contrastDefaultColor": "dark"
},
"shades": {
"dark": {
"text": {
"primary": "rgba(255, 255, 255, 1)",
"secondary": "rgba(255, 255, 255, 0.7)",
"disabled": "rgba(255, 255, 255, 0.5)",
"hint": "rgba(255, 255, 255, 0.5)",
"icon": "rgba(255, 255, 255, 0.5)",
"divider": "rgba(255, 255, 255, 0.12)",
"lightDivider": "rgba(255, 255, 255, 0.075)"
},
"input": {
"bottomLine": "rgba(255, 255, 255, 0.7)",
"helperText": "rgba(255, 255, 255, 0.7)",
"labelText": "rgba(255, 255, 255, 0.7)",
"inputText": "rgba(255, 255, 255, 1)",
"disabled": "rgba(255, 255, 255, 0.5)"
},
"action": {
"active": "rgba(255, 255, 255, 1)",
"disabled": "rgba(255, 255, 255, 0.3)"
},
"background": {
"default": "#303030",
"paper": "#424242",
"appBar": "#212121",
"contentFrame": "#212121",
"status": "#000"
}
},
"light": {
"text": {
"primary": "rgba(0, 0, 0, 0.87)",
"secondary": "rgba(0, 0, 0, 0.54)",
"disabled": "rgba(0, 0, 0, 0.38)",
"hint": "rgba(0, 0, 0, 0.38)",
"icon": "rgba(0, 0, 0, 0.38)",
"divider": "rgba(0, 0, 0, 0.12)",
"lightDivider": "rgba(0, 0, 0, 0.075)"
},
"input": {
"bottomLine": "rgba(0, 0, 0, 0.42)",
"helperText": "rgba(0, 0, 0, 0.54)",
"labelText": "rgba(0, 0, 0, 0.54)",
"inputText": "rgba(0, 0, 0, 0.87)",
"disabled": "rgba(0, 0, 0, 0.42)"
},
"action": {
"active": "rgba(0, 0, 0, 0.54)",
"disabled": "rgba(0, 0, 0, 0.26)"
},
"background": {
"default": "#fafafa",
"paper": "#fff",
"appBar": "#f5f5f5",
"contentFrame": "#eeeeee"
}
}
},
"text": {
"primary": "rgba(0, 0, 0, 0.87)",
"secondary": "rgba(0, 0, 0, 0.54)",
"disabled": "rgba(0, 0, 0, 0.38)",
"hint": "rgba(0, 0, 0, 0.38)",
"icon": "rgba(0, 0, 0, 0.38)",
"divider": "rgba(0, 0, 0, 0.12)",
"lightDivider": "rgba(0, 0, 0, 0.075)"
},
"input": {
"bottomLine": "rgba(0, 0, 0, 0.42)",
"helperText": "rgba(0, 0, 0, 0.54)",
"labelText": "rgba(0, 0, 0, 0.54)",
"inputText": "rgba(0, 0, 0, 0.87)",
"disabled": "rgba(0, 0, 0, 0.42)"
},
"action": {
"active": "rgba(0, 0, 0, 0.54)",
"disabled": "rgba(0, 0, 0, 0.26)"
},
"background": {
"default": "#fafafa",
"paper": "#fff",
"appBar": "#f5f5f5",
"contentFrame": "#eeeeee"
}
},
"typography": {
"fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
"fontSize": 14,
"fontWeightLight": 300,
"fontWeightRegular": 400,
"fontWeightMedium": 500,
"display4": {
"fontSize": 112,
"fontWeight": 300,
"fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
"letterSpacing": "-.04em",
"lineHeight": 1,