Skip to content
This repository has been archived by the owner on Jan 23, 2021. It is now read-only.

Commit

Permalink
project selection
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlexisReliefApps
AlexisReliefApps committed Aug 24, 2018
1 parent a65e282 commit b7b0f3e
Show file tree
Hide file tree
Showing 5 changed files with 71 additions and 73 deletions.
3 changes: 2 additions & 1 deletion README.old.md
View file
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
# hot-dashboard
# hot-dashboard
# Victory doc : https://formidable.com/open-source/victory/docs/victory-chart/
2 changes: 1 addition & 1 deletion public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
</head>
<body>
<noscript>
You need to enable JavaScript to run this Home.
You need to enable JavaScript to run the HOT dashboard.
</noscript>
<div id="root"></div>
<!--
Expand Down
10 changes: 5 additions & 5 deletions src/components/FilterTabs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,19 +28,19 @@ class FilterTabs extends Component {
let selectedContent = []; //Object sended to container (Home)

// Initialize all content state to false
let selectedPageName = ''
let selectedcontentName = ''
let mainContentChanged = false;
let capacityBuildingContentChanged = false;
let awarenessContentChanged = false;

// Check which button is clicked
if (content === 'main') { mainContentChanged = true; selectedPageName='Main'; }
else if(content === 'capacity_building') { capacityBuildingContentChanged = true; selectedPageName='Capacity building'; }
else if(content === 'awareness') { awarenessContentChanged = true; selectedPageName='Awareness'; }
if (content === 'main') { mainContentChanged = true; selectedcontentName='Main'; }
else if(content === 'capacity_building') { capacityBuildingContentChanged = true; selectedcontentName='Capacity building'; }
else if(content === 'awareness') { awarenessContentChanged = true; selectedcontentName='Awareness'; }

// Push new item to the array to send
selectedContent.push({
pageName : selectedPageName,
contentName : selectedcontentName,
mainContent : mainContentChanged,
capacityBuildingContent : capacityBuildingContentChanged,
awarenessContent : awarenessContentChanged
Expand Down
71 changes: 31 additions & 40 deletions src/components/Header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import React, { Component } from 'react';
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import Grid from '@material-ui/core/Grid';


Expand All @@ -28,10 +27,23 @@ class Header extends Component {
this.selectProjectFromMiniMenu = this.selectProjectFromMiniMenu.bind(this);

this.state = {
anchorProject : null,
anchorProject : null,
selectedProject : 'Global'
}
}

//------------------------------------------------------------------------//
//------------------------------- General --------------------------------//
//------------------------------------------------------------------------//

/** Set the first letter of a string to uppercase **/
upperCaseFirstChar(string){
return string[0].toUpperCase() + string.substring(1);
}
//------------------------------------------------------------------------//
//------------------------------ Mini Menu -------------------------------//
//------------------------------------------------------------------------//

/** Open Mini Menu **/
openMiniMenu = event => {
this.setState({
Expand All @@ -45,52 +57,40 @@ class Header extends Component {
};


/** Open content & close mini menu **/
selectProjectFromMiniMenu = (content) => () => {
let selectedProject = []; //Object sended to container (Home)

// // Initialize all content state to false
// let selectedPageName = ''
// let mainContentChanged = false;
// let trainingContentChanged = false;
// let updateDataContentChanged = false;
/** Seleting a project in the mini menu **/
selectProjectFromMiniMenu = (projectName) => () => {

// // Check which button is clicked
// if (content === 'global') { mainContentChanged = true; selectedPageName='Global'; }
// else if(content === 'training') { trainingContentChanged = true; selectedPageName='Training'; }
// else if(content === 'upload') { updateDataContentChanged = true; selectedPageName='Upload'; }
// Uppercase the first letter of the project name
let projectNameUppercase = this.upperCaseFirstChar(projectName);

// // Push new item to the array to send
// selectedProject.push({
// pageName : selectedPageName,
// mainContent : mainContentChanged,
// trainingContent : trainingContentChanged,
// updateContent : updateDataContentChanged
// })

// Close the mini menu
this.setState({ anchorProject: null });
// Close the mini menu + Change the title with the project selected
this.setState({
anchorProject : null,
selectedProject : projectNameUppercase
});

// Sending the array
// this.props.sendToHome(selectedProject)
//Sending the project
this.props.sendToHome(projectNameUppercase)
};


//------------------------------------------------------------------------//
//-------------------------------- Render --------------------------------//
//------------------------------------------------------------------------//

render() {
const { anchorProject } = this.state;

var projectsList = this.props.importedProjects.map((item) => {
return (
<MenuItem key={item.projectname} onClick={this.selectProjectFromMiniMenu(item.projectname)}> {item.projectname[0].toUpperCase() + item.projectname.substring(1)} </MenuItem>
<MenuItem key={item.projectname} onClick={this.selectProjectFromMiniMenu(item.projectname)}> {this.upperCaseFirstChar(item.projectname)} </MenuItem>
);
});

return (
<div className="header-component">

{/* First row */}
<header className="header">

{/* 'Project' button */}
<Button style = {Buttons}
aria-owns = {anchorProject ? 'MiniMenuGlobal' : null}
Expand All @@ -107,17 +107,8 @@ class Header extends Component {
{projectsList}
</Menu>

{/* Update Data button
<Button style = {Buttons}
variant = "contained"
component = "span">
Upload
<CloudUploadIcon className="update-data-button-icon"/>
</Button> */}

{/* Title */}
<h2 className="header-title">HOT Overview - {this.props.pageName}</h2>

<h2 className="header-title">{this.state.selectedProject} Overview - {this.props.contentName}</h2>
</header>
</div>
);
Expand Down
58 changes: 32 additions & 26 deletions src/containers/Home/Home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,29 +11,29 @@ import AwarenessContent from '../../components/Content/AwarenessContent'
/** CSS **/
import './Home.css';

/** Services **/
import PreProcessingService from '../../services/PreProcessingService';

/** Material **/
import Divider from '@material-ui/core/Divider';
import Divider from '@material-ui/core/Divider';

const preProcessingService = new PreProcessingService();
/** Services **/
import PreProcessingService from '../../services/PreProcessingService';

const preProcessingService = new PreProcessingService();


/** Victory doc : https://formidable.com/open-source/victory/docs/victory-chart/ **/
class Home extends React.Component {
constructor(props) {
super(props)
this.selectProjectFromHeader = this.selectProjectFromHeader.bind(this);
this.selectContentFromFilterTabs = this.selectContentFromFilterTabs.bind(this);

this.state = {
menuLeft : false, // State of the left menu.
mainContentSelected : true, // When Main Content is selected
capacityBuildingContentSelected : false, // When Training Content is selected
awarenessContentSelected : false, // When updateDataSelected Content is selected
pageName : 'Global', // Name of the actual page
menuLeft : false, // State of the left menu.
mainContentSelected : true, // When Main Content is selected
capacityBuildingContentSelected : false, // When Training Content is selected
awarenessContentSelected : false, // When updateDataSelected Content is selected

projectName : 'Global', // Name of the actual project
contentName : 'Main', // Name of the actual content

importedProjects : [],
importedIndicators : [],
Expand Down Expand Up @@ -71,30 +71,29 @@ class Home extends React.Component {
importedProjects : projectsFromAPI,
importedIndicators : dataFromAPI
})
console.log("importedProjects HOME", this.state.importedProjects)
console.log("importedProjects HOME", this.state.importedProjects)
console.log('importedIndicators HOME', this.state.importedIndicators)
console.log('projectName HOME', this.state.projectName)

}


//------------------------------------------------------------------------//
//----------------------- Mini Menu ( Filter Tabs) -----------------------//
//---------------------- Project & Content display -----------------------//
//------------------------------------------------------------------------//

/** Select the project from the header button **/
selectProjectFromHeader(selectedProject){
/** Selecting the project from the header button **/
selectProjectFromHeader(selectedProjectFromHeader){

this.setState({
anchorGlobal : null,
pageName : selectedProject[0].pageName,
mainContentSelected : selectedProject[0].mainContent,
capacityBuildingContentSelected : selectedProject[0].trainingContent,
awarenessContentSelected : selectedProject[0].updateContent
projectName : selectedProjectFromHeader
});
}

/** Select the new content chosen in the filter tabs component **/
/** Selecting the new content chosen in the filter tabs component **/
selectContentFromFilterTabs(selectedContent){
this.setState({
pageName : selectedContent[0].pageName,
contentName : selectedContent[0].contentName,
mainContentSelected : selectedContent[0].mainContent,
capacityBuildingContentSelected : selectedContent[0].capacityBuildingContent,
awarenessContentSelected : selectedContent[0].awarenessContent
Expand All @@ -107,21 +106,28 @@ class Home extends React.Component {
//------------------------------------------------------------------------//

render() {
const { mainContentSelected } = this.state;
const { capacityBuildingContentSelected } = this.state;
const { awarenessContentSelected } = this.state;
const { importedIndicators } = this.state;


return (
<div className="Home">

{/* Header */}
<Header sendToHome={this.selectProjectFromHeader} pageName={this.state.pageName} importedProjects={this.state.importedProjects}></Header>
<Header sendToHome={this.selectProjectFromHeader} contentName={this.state.contentName} importedProjects={this.state.importedProjects}></Header>

{/* Filter Tabs */}
<FilterTabs sendToHome={this.selectContentFromFilterTabs}></FilterTabs>

{/* Line between filter component & content */}
<Divider />

{/* Contents */}
{this.state.mainContentSelected && (<MainContent importedIndicators = {this.state.importedIndicators.global}></MainContent>)}
{this.state.capacityBuildingContentSelected && (<CapacityBuildingContent importedIndicators = {this.state.importedIndicators.global}></CapacityBuildingContent>)}
{this.state.awarenessContentSelected && (<AwarenessContent></AwarenessContent>)}
{mainContentSelected && (<MainContent importedIndicators = {importedIndicators.global}></MainContent>)}
{capacityBuildingContentSelected && (<CapacityBuildingContent importedIndicators = {importedIndicators.global}></CapacityBuildingContent>)}
{awarenessContentSelected && (<AwarenessContent></AwarenessContent>)}
</div>
);
}
Expand Down

0 comments on commit b7b0f3e

Please sign in to comment.