Source: components/webgis/reboot/subcomponents/Menu.js

import React from 'react';
import getTranslation from '../../../../i18n/'
import AddressSearch from '../../AddressSearch';

/**
 * The menu of the web gis. Users can select the active layer that is displayed here
 */
class Menu extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            activeExperts: null,
            showMenuItems: false,
            switchDialog: false
        }
    }

    /**
     * Change the active layer
     * @param  {} id - ID of the new active layer
     */
    toggleLayer(id) {
        let layers = this.props.layers;
        layers.map(layer => {
            if(layer.id === id) {
                if(id < 100) {
                    layer.active = !layer.active;
                } else {
                    layer.active = !layer.active;
                    if(layer.children.length > 0) {
                        layer.children.map(child => {
                            if(child.id === id) {
                                child.active = !child.active
                            }
                        })
                    }
                }
            } else {
                if(id < 100) {
                    layer.children.map(child => {
                        if(child.id === id) {
                             child.active = true;
                             layer.active = true;
                             
                        } else {
                            if(child.children.length > 0) {
                                child.children.map(chi => {
                                    if(chi.id === id) {
                                        chi.active = true;
                                    } else {
                                        chi.active = false
                                    }
                                    
                                })
                            } else {
                                child.active = false;
                            }
                            
                        }
                    })
                } else {
                    if(layer.children.length > 0) {

                        layer.children.map(child => {
                            if(child.id === id) {
                                child.active = !child.active
                            }
                        })
                    }
                }
            }
        })
        this.props.toggleLayer(layers);
    }

    /**
     * Toggle full menu display (mobile only)
     */
    toggleMenuItems() {
        this.setState({ showMenuItems: !this.state.showMenuItems })
    }

    /**
     * Show local experts of a selected occupation on the map
     * @param {*} group - Selected group of experts
     */
    showExperts(group) {
        if(group !== this.state.activeExperts) {
          if(group === 0) {
            this.setState({ experts : this.props.localExperts, activeExperts: 0 })
          } else {
            this.setState({ experts : this.props.localExperts.filter(expert => expert.occupation.indexOf(group) !== -1), activeExperts: group})
          }
        }
      }

    /**
     * Zoom the map to a local expert
     * @param {} id - ID of the expert
     */
    zoomToExpert(id) {
        this.props.zoomToExpert(id)
    }

    render() {
        const order = ["general_information", "open-loop_potential", "closed-loop_potential", "conflict_map"];

        let layers = [];
        order.map(item => {
            let layerItem = this.props.layers.find(layer => layer.group_key === item);
            if(layerItem) layers.push(layerItem);
        })
        
        return(
            <div className="webgis-menu">
            
                <div className="webgis-menu-header">
                <h2 className="area-name">
                    <span className="area-title" onClick={this.props.showInfoPane}><i className="fas fa-info-circle" aria-hidden="true"></i>
                    {this.props.activeArea.uri ? getTranslation(this.props.activeArea.name) : 'Pilotarea'}</span><span className="show-menu-items" onClick={() => this.toggleMenuItems()}><i className="fas fa-caret-down"></i></span><span className="switch-dialog" onClick={this.props.switchDialog}><i className="fa fa-bars" aria-hidden="true"></i></span>
                </h2>
                </div>
                <div className={"menu-items "+(this.state.showMenuItems ? "show-menu" : "hide-menu")}>
                    <AddressSearch addressSearchSuccess={this.props.addressSearchSuccess} boundary={this.props.bounds} fetching={this.props.fetching} geocodeAddress={this.props.geocodeAddress} />
                    <h2>{getTranslation("webgis.layers")}:</h2>
                    <ul className="layer-list">
                        {layers.map(layer =>
                            <React.Fragment key={layer.id}>
                            {layer.webgis &&
                                <li className={((layer.children.length > 0) && (layer.active) ? "submenu-active " : "webgis-sub-not-open ") + (((layer.active) && (layer.children.length === 0)) ? "active-layer" : "not-active-layer")} key={layer.id}>
                                <span onClick={() => this.toggleLayer(layer.id)}>{(layer.children.length > 0 ? getTranslation(layer.group_key+".label") : getTranslation(layer.key+".label"))}</span>
                                {((layer.children.length !== 0) && (layer.active)) &&
                                    <ul className="webgis-submenu">
                                        {layer.children.map(sublayer =>
                                            <React.Fragment key={sublayer.id}>
                                            {sublayer.webgis &&
                                                <li className={((sublayer.active && sublayer.children.length === 0) ? "active-layer " : "not-active-layer " + (sublayer.children.length > 0 ? "sublayer-children" : "no-sublayer-children"))} key={sublayer.id}>
                                                <span onClick={() => this.toggleLayer(sublayer.id)}>{getTranslation(sublayer.key+".label")}</span>
                                                {((sublayer.children.length !== 0) && (sublayer.active)) &&
                                                    <ul className="webgis-submenu">
                                                        {sublayer.children.map(subsublayer =>
                                                            <React.Fragment key={subsublayer.id}>
                                                            {subsublayer.webgis &&
                                                                <li className={(subsublayer.active ? "active-layer" : "not-active-layer")} key={subsublayer.id}><span onClick={() => this.toggleLayer(subsublayer.id)}>{subsublayer.short_description[this.props.activeLanguage] ? subsublayer.short_description[this.props.activeLanguage] : subsublayer.short_description.English}</span></li>
                                                            }
                                                            </React.Fragment>
                                                        )}
                                                    </ul>
                                                }
                                                </li>
                                            }
                                            </React.Fragment>
                                        )}
                                    </ul>
                                }
                                </li>
                            }
                            </React.Fragment>
                        )}
                        {this.props.measurements.length > 0 &&
                            <li onClick={() => this.props.toggleMeasurements()} className={(this.props.showMeasurements ? 'active-layer' : 'not-active-layer')}><span className="field-measurement"><i className="fas fa-map-marked"></i> {getTranslation("webgis.field_measurements")}</span></li>
                        }
                    </ul>
                    <h2>{getTranslation("local_experts.label")}:</h2>
                    <ul className="experts-local">
                    {this.props.expertGroups.map(group =>
                        <li className={(this.state.activeExperts === group.id ? "active-layer submenu-active" : "not-active-layer")} onClick={() => this.showExperts(group.id)} key={"group-"+group.id}>{getTranslation(group.label)} <span className="expert-count">{group.count}</span>
                        {this.state.activeExperts === group.id &&
                            <ul className="webgis-submenu">
                                {this.state.experts.map(expert =>
                                <li key={expert.id} className="not-active-layer" onClick={() => this.zoomToExpert(expert.id)}>{expert.name}, <strong>{expert.city}</strong></li>
                                )}
                            </ul>
                        }
                        </li>
                    )}
                    </ul>
                </div>
            </div>
        )
    }
}

export default Menu;