From 5bcbfd999e21b89e0fdab6a7be860e6761b67337 Mon Sep 17 00:00:00 2001
From: Henrique Varella Ehrenfried <h.v.ehrenfried@hotmail.com>
Date: Fri, 15 Jun 2018 10:21:55 -0300
Subject: [PATCH] Add first version of the list in the right
---
.../src/Components/IterativeCollapsible.js | 31 +++++++
smppir-checkin-portal/src/Pages/Map.js | 91 +++++++++++++++++--
.../src/Pages/Styles/Map.css | 25 ++++-
3 files changed, 137 insertions(+), 10 deletions(-)
create mode 100644 smppir-checkin-portal/src/Components/IterativeCollapsible.js
diff --git a/smppir-checkin-portal/src/Components/IterativeCollapsible.js b/smppir-checkin-portal/src/Components/IterativeCollapsible.js
new file mode 100644
index 0000000..8242873
--- /dev/null
+++ b/smppir-checkin-portal/src/Components/IterativeCollapsible.js
@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import { CollapsibleItem, Collapsible } from 'react-materialize'
+
+class IterativeCollapsible extends Component {
+ constructor(props) {
+ super(props);
+ this.state={
+ 'redirect':false,
+ 'credentials': {}
+ }
+ }
+ render() {
+ console.log(this.props)
+ return (
+ <div id={this.props.id}>
+ <Collapsible className={this.props.classes}>
+ {
+ this.props.items.map(it => {
+ return <CollapsibleItem className={it.classes} header={typeof it.name === 'object' ? `${it.name[0]} - ${it.name[1]}`: `${it.name}`}>
+ {it.content}
+ </CollapsibleItem>
+ })
+ }
+ </Collapsible>
+ </div>
+ );
+ }
+
+}
+
+export default IterativeCollapsible;
\ No newline at end of file
diff --git a/smppir-checkin-portal/src/Pages/Map.js b/smppir-checkin-portal/src/Pages/Map.js
index daa01b3..d77e476 100644
--- a/smppir-checkin-portal/src/Pages/Map.js
+++ b/smppir-checkin-portal/src/Pages/Map.js
@@ -1,15 +1,16 @@
import React, { Component } from 'react';
import './Styles/MainPage.css';
import BarraBrasil from '../Components/BarraBrasil'
-import { Card, Row, Col, Breadcrumb, MenuItem } from 'react-materialize'
+import { Card, Row, Col, Breadcrumb, MenuItem, Collapsible, CollapsibleItem } from 'react-materialize'
import AppFooter from '../Components/AppFooter'
import NavigationBar from '../Components/NavigationBar'
+import IterativeCollapsible from '../Components/IterativeCollapsible'
import { Redirect } from 'react-router-dom'
import MapComponent from '../Components/MapComponent'
import {URL} from '../env'
import DataFrame from 'dataframe-js';
-import './Styles/Login.css'
+import './Styles/Map.css'
import axios from 'axios';
class Map extends Component {
@@ -18,19 +19,27 @@ class Map extends Component {
this.state={
'redirect':false,
'credentials': {},
- 'data': undefined, //it's a dataframe
+ 'geolocationsDF': undefined, //it's a dataframe
+ 'categoriesDF': undefined, //it's a dataframe
'latLng': []
}
+ this.outerCollapsibleItems = this.outerCollapsibleItems.bind(this)
}
componentWillMount(){
axios.get(`${URL}geolocations`).then((resp) => {
- let response = resp.data.result
- let df = new DataFrame(response)
- let latLng = df.select('latitude', 'longitude','geolocation_name').toCollection()
- this.setState({data: df, latLng: latLng})
+ axios.get(`${URL}categories`).then((resp2) => {
+ let response = resp.data.result
+ let response2 = resp2.data.result
+ let df = new DataFrame(response)
+ let df2 = new DataFrame(response2)
+ let latLng = df.select('latitude', 'longitude','geolocation_name').toCollection()
+ this.setState({geolocationsDF: df, categoriesDF: df2, latLng: latLng})
+ })
})
}
render() {
+ let items = this.outerCollapsibleItems()
+ console.log(items)
if (this.state.redirect){
return <Redirect to='/welcome'/>
}
@@ -44,7 +53,23 @@ class Map extends Component {
<MenuItem>Mapa</MenuItem>
</Breadcrumb>
<Row>
- <Col s={12} m={10} offset={'m1'}>
+ <Col s={12} m={2}>
+ <Card id={'Map-locations'}>
+ {
+ items ?
+ <IterativeCollapsible
+ id="outerMapCollapsible"
+ classes="category-list"
+ items={
+ items
+ }
+ />
+ :
+ ''
+ }
+ </Card>
+ </Col>
+ <Col s={12} m={10}>
<Card className='white' textClassName='black-text'>
<MapComponent readOnly={true} markers={this.state.latLng}/>
</Card>
@@ -55,6 +80,56 @@ class Map extends Component {
);
}
}
+ outerCollapsibleItems(){
+ // {classes, name, content}
+ console.log(this.state)
+ if(this.state.categoriesDF){
+ let names = this.state.categoriesDF.select('id','category_name').toArray()
+ let geolocations = this.state.geolocationsDF.toCollection()
+ let classes = 'GreengAnchor Custom-padding-list'
+ let content = {}
+ let returnArray = []
+ let names_len = names.length
+
+ //Initialize 'content' as an object of arrays
+ for(let i = 0; i < names.length; i++){
+ content[names[i][0]] = []
+ }
+
+ for(let i = 0; i < geolocations.length; i++){
+ content[geolocations[i].category_id].push(geolocations[i])
+ }
+ console.log("names :::", names)
+ console.log("names_len :::", names_len)
+ for(let i = 0; i < names_len; i++){
+ console.log("Index :::", i)
+ let aux = this.innerCollapsibleItems(content, names[i])
+ console.log('aux :::', aux)
+ returnArray.push({name: names[i], classes: classes, content: <IterativeCollapsible
+ id="innerMapCollapsible"
+ classes="location-list"
+ items={aux}
+ />})
+ console.log(returnArray)
+ }
+ return returnArray
+ }
+ }
+ innerCollapsibleItems(content, key){
+ console.log("Olá")
+ let items = []
+ let received_array = Object.values(content[key[0]])
+ for(let i = 0; i < received_array.length; i++){
+ items.push({classes: 'OrangeAnchor Custom-padding-list', name: received_array[i].geolocation_name, content:
+ <div>
+ <p><b>Local: </b>{received_array[i].geolocation_name}</p>
+ <p><b>Latitude: </b>{received_array[i].latitude}</p>
+ <p><b>Longitude: </b>{received_array[i].longitude}</p>
+ </div>
+ })
+ }
+ return (items)
+ }
}
export default Map;
\ No newline at end of file
diff --git a/smppir-checkin-portal/src/Pages/Styles/Map.css b/smppir-checkin-portal/src/Pages/Styles/Map.css
index aaa1129..a84c6a0 100644
--- a/smppir-checkin-portal/src/Pages/Styles/Map.css
+++ b/smppir-checkin-portal/src/Pages/Styles/Map.css
@@ -1,3 +1,24 @@
-.listLocations{
- height: 723px;
+#Map-locations{
+ max-height: 723px;
+ overflow-y: scroll;
+}
+.category-list{
+ box-shadow: none;
+}
+.location-list{
+ box-shadow: none;
+}
+.OrangeAnchor > .collapsible-header{
+ background-color: rgb(239, 155, 3);
+ color: white;
+}
+.GreengAnchor > .collapsible-header{
+ background-color: rgb(32, 134, 1);
+ color: white;
+}
+.Custom-padding-list > .collapsible-body{
+ padding-left: 7pt;
+ padding-right: 7pt;
+ padding-top: 1pt;
+ padding-bottom: 1pt;
}
\ No newline at end of file
--
GitLab