Left side submenu

[kodmanyagha]

I love your project. This is so fast to develop and easy to use this is very fine. My question is that: how can we make submenu? I look to documentation but I didn't find. Thanks.

[fzaninotto]

Write a Custom Menu.

[velociwabbit]

Once again i have code that does exactly what kodmanyagha requested. It bypasses layer, menu and admin and uses two classes directly from material ui (master and fullwidthsection). It also provides column selection and integrates (loosely via iframes) three.js and google mapping.

I am more than willing to share it but no takers.'

I had to do it because i needed sub-menus and collapsing left side.

(Don't want to step on toes ... just trying to be helpful.)

Also i have charting interface that is 1/2 done if anyone is interested.

[Phocea]

@velociwabbit Why not simply share your code in your reply of this issue ? Even if closed it will still be referenced for further searches. In a collaborative world I dont see how you could step on anyone toes :)

[kodepareek]

Please do share your charting code. Will be useful.

[velociwabbit]

ok, i will clean it up and post it asap ...update...

After looking at my code for the last few minutes I realized that i pulled out ALL of the AOR code, or I rewrote it to be much less grandiose (it does not abstract for language translation or stemming etc.). Also i ripped out andy ReferenceFetch , ReferenceManyFetch code because it was very hard to debug through redux and redux forms.

Finally I rewrote the List, Filter, Rest Data Acquisition and other plumbing functions to be less abstracted which makes them less flexible but infinitely easier to debug and understand.

I also tried to rip out all of redux forms and redux but instead settled on a consolidated state table-like set of functions so that i could better understand what was happening in these additional libraries that are so inscrutable. (They remind me of a rubix cube... Simple at the beginning but after a few twists and turns...good luck!)

I also did the same for Material UI (a good package but a bit wordy for my tastes).
I now have a subset of both AOR and Material UI that i use that is about 1500-2000 loc plus about 300 svg images in a separate file.

My goal with this new code base was to make it React Native capable. Since then I have learned that the performance of this new reductionist version of aor and mui is performant enough so that a native react app is unnecessary.

I think what I need to do is to open up a separate repository for my code so that others who have also been so frustrated as I have with AOR (or the AOR management who are so quick to dismiss anything that is not their own IP ) can take advantage of my efforts.

AOR was great learning experience (of what to avoid as much as what to do) and MUI is a neat idea but anyone who would bet their company on using libraries such as they are without substantially removing and reducing the code base will be in for an interesting ride? lesson? challenge?

[velociwabbit]

In the meantime here are a couple of modules that deliver some of the functions... (you have to glue them to your app but hopefully they will be instructive) This first one is the right drawer component with submenus that are selectable. Hopefully all the needed components other than Drawer , the svgIcons required (the generic placeholder I included below is called "LeftIcon" but there are a couple of other icons that i created as well which can be swapped for any mui svgicon) and ListItem which you need to grab from mui) are included

const  BeforeAfterWrapper = props=>   (   <div style = {{ padding: 24,  boxSizing: 'border-box', paddingTop: 48, paddingBottom: 48,  backgroundColor :  '#212121' , textAlign: 'center', }} >
                                            <div  style={{ boxSizing: 'border-box', content: "' '", display: 'table', }}   key='::before'/>
                                                {  React.cloneElement(  props.children, null)}
                                                <div  style={{ boxSizing: 'border-box', content: "' '", clear: 'both',  display: 'table', }} key='::after' />
                                            </div>   )
class Master extends Component {

  static propTypes          =   {   children            : PropTypes.node,  location: PropTypes.object, }
  static contextTypes       =   {   router              : PropTypes.object.isRequired,                 }
        state               =   {   navDrawerOpen       : false     , noalarm : true ,  }
         onLeftIconButton   = () => {  this.setState({    navDrawerOpen: !this.state.navDrawerOpen,     })  }
        onTouchTapHeader    = () => {  this.context.router.push('/');    this.onLeftIconButton();   }
Render(){  return
 ( <div>
                            <div style={{position:"fixed" ,top:0 ,zIndex:1101 ,width:"100%" ,display:"flex" ,backgroundColor:  this.state.noalarm ?   "#00bcd4" : "#ff4081"  ,paddingLeft:24 ,paddingRight:24 ,color:"rgba(0, 0, 0, 0.87)" ,transition:"all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms" ,boxSizing:"border-box" ,fontFamily:"Roboto, sans-serif" ,WebkitTapHighlightColor:"rgba(0,0,0,0)" ,boxShadow:"0 1px 6px rgba(0, 0, 0, 0.12),  0 1px 4px rgba(0, 0, 0, 0.12)", borderRadius:"0px"  }}> 
                            <IconButton  tooltip="Toggle Menu" style={{ marginTop   :0,   marginRight:0,   marginLeft: -16,    }} iconStyle={{ fill : "#ffffff", verticalAlign: 'top', color: "#ffffff",  width : 36,   height : 36, fontSize  : 36,     }} onTouchTap={this.onLeftIconButton}  >
                             {<ArcherIcon   /> }
                            </IconButton>
                            <div style={{ whiteSpace  : 'nowrap'  , overflow: 'hidden' , textOverflow: 'ellipsis', margin: 0, marginTop:2,  paddingTop: 0, letterSpacing: 0, fontSize: 20, fontWeight: 400, color:"#ffffff", height: 64, lineHeight: '64px', boxFlex : 1 , flex: '1', }} >
                                  <span> {'Name'}  
                                         {<span style={{ float: 'right',}} >
                                            <HomeButton/>
                                            <IconButton  tooltip="View Alerts" style={{ marginTop   :0,   marginRight:0,   marginLeft: -16,    }} iconStyle={{ fill :  this.state.noalarm ?   "#00bcd4" : "#ffffff", verticalAlign: 'top', color:this.state.noalarm ?   "#00bcd4" : "#ffffff",  width : 36,   height : 36, fontSize  : 36,     }}  containerElement={ <Link to={{ pathname : "/warnings"     }}/>}  >
                                            {<LeftIcon  /> }
                                            </IconButton>                                          
                                            { <AutoUpdt setAutoUpdate={this.setAutoUpdate.bind(this)}  iconColor={"#ffffff"}  icon={<ArcherIcon  />} />  }</span> }
                                </span>                   
                            </div>
                     </div>
                     <div style = {{ padding: 24,  boxSizing: 'border-box', paddingTop: 48, paddingBottom: 48,  margin : margin , }}>
                        <div  style={{ boxSizing: 'border-box', content: "' '", display: 'table', }}   key='::before'/>
                           {  React.cloneElement( this.props.children, null)}
                        <div  style={{ boxSizing: 'border-box', content: "' '", clear: 'both',  display: 'table', }} key='::after' />
                    </div>
                    <Drawer docked={false} open={this.state.navDrawerOpen} onRequestChange={this.onLeftIconButton} containerStyle={{zIndex: 1200 }}      >
                         <div style={{ cursor: 'pointer', fontSize: 24, color: '#ffffff' , lineHeight: '64px', fontWeight: 300 , backgroundColor: '#00bcd4',   paddingLeft: 24,   marginBottom: 8,  }}  onTouchTap={this.onTouchTapHeader}><HomeButton/>{'Archimedes'  }</div>
                            <ListItem  key={"admin"         }  primaryTogglesNestedList={true}                 primaryText={ 'Admin'        } leftIcon={<LeftIcon  />    }   nestedItems={[
                            <ListItem  key={"users"          }  containerElement={ <Link to={{ pathname : "/users"   , state: "" }}/>}      primaryText={ 'Users'        } leftIcon={<LeftIcon />   } />  ,
                            <ListItem  key={"items"          }  containerElement={ <Link to={{ pathname : "/items"   , state: "" }}/>}      primaryText={ 'Items'        } leftIcon={<LeftIcon />   } />  ,
                            <ListItem  key={"compo"          }  containerElement={ <Link to={{ pathname : "/compo"   , state: "" }}/>}      primaryText={ 'Components'   } leftIcon={<LeftIcon />   } />  ,
                            <ListItem  key={"rdefs"          }  containerElement={ <Link to={{ pathname : "/rdefs"   , state: "" }}/>}      primaryText={ 'Discovery'    } leftIcon={<LeftIcon />   } />  ,
                            <ListItem  key={"cdefs"          }  containerElement={ <Link to={{ pathname : "/cdefs"   , state: "" }}/>}      primaryText={ 'Controls'     } leftIcon={<LeftIcon />   } />  ,
                            <ListItem  key={"types"          }  containerElement={ <Link to={{ pathname : "/types"   , state: "" }}/>}      primaryText={ 'WarnTypes'    } leftIcon={<LeftIcon />   } />  ,
                            <ListItem  key={"range"          }  containerElement={ <Link to={{ pathname : "/range"   , state: "" }}/>}      primaryText={ 'RangeProfiles'} leftIcon={<LeftIcon />   } />  ,
                            <ListItem  key={"battx"          }  containerElement={ <Link to={{ pathname : "/battx"   , state: "" }}/>}      primaryText={ 'Batteries'    } leftIcon={<LeftIcon />   } />          
                           ]}/>  
                            <ListItem  key={"threejs"      }  containerElement={ <Link to={"/threejs" } />}                                 primaryText={ "Temp 3D"      } leftIcon={<ActionChangeHistory/>} />
                            <ListItem  key={"threehs"      }  containerElement={ <Link to={"/threehs" } />}                                 primaryText={ "Humidity 3D"  } leftIcon={<ActionChangeHistory/>} />

                            <ListItem  key={"telemetry"     }  primaryTogglesNestedList={true}                                              primaryText={ 'Sensors'      } leftIcon={<LeftIcon   />  }  nestedItems={[
                            <ListItem  key={"sensors"       }  containerElement={ <Link to={{ pathname : "/sensors"     , state: "" }}/>}   primaryText={ 'Temp/Humid'   } leftIcon={<LeftIcon   />  } />          ,
                            <ListItem  key={"temp"          }  containerElement={ <Link to={{ pathname : "/temp"        , state: "" }}/>}   primaryText={ 'Temp'         } leftIcon={<LeftIcon   />  } />          ,
                            <ListItem  key={"humidity"      }  containerElement={ <Link to={{ pathname : "/humidity"    , state: "" }}/>}   primaryText={ 'Humidity'     } leftIcon={<LeftIcon   />  } />          ,

                            <ListItem  key={"air"           }  primaryTogglesNestedList={true}                                              primaryText={ 'AirData'      } leftIcon={<LeftIcon   />  } nestedItems={[
                            <ListItem  key={"airmonitor"    }  containerElement={ <Link to={{ pathname : "/airmonitor"  , state: "" }}/>}   primaryText={ 'AirMonitor'   } leftIcon={<LeftIcon   />  } />          ,
                            <ListItem  key={"airpressure"   }  containerElement={ <Link to={{ pathname : "/airpressure" , state: "" }}/>}   primaryText={ 'Pressure'     } leftIcon={<LeftIcon   />  } />          ,
                            <ListItem  key={"airspeed"      }  containerElement={ <Link to={{ pathname : "/airspeed"    , state: "" }}/>}   primaryText={ 'Air Speed'    } leftIcon={<LeftIcon   />  } />          ,
                            <ListItem  key={"particle"      }  containerElement={ <Link to={{ pathname : "/particle"    , state: "" }}/>}   primaryText={ 'Particles'    } leftIcon={<LeftIcon   />  } />          ,
                            ]}/> 
                        ]}/>
                            <ListItem  key={"power"        }  containerElement={ <Link to={{ pathname : "/power"        , state: "" }}/>}   primaryText={ 'Power'        } leftIcon={<LeftIcon     />  } /> 
                            <ListItem  key={"equipment"     }  containerElement={ <Link to={{ pathname : "/equipment"   , state: "" }}/>}   primaryText={ 'Assets'       } leftIcon={<LeftIcon     />  } />                
                            <ListItem  key={"warnings"      }  containerElement={ <Link to={{ pathname : "/warnings"    , state: "" }}/>}   primaryText={ 'Warnings'     } leftIcon={<LeftIcon     />  } />   
                            <ListItem  key={"sensorid"     }  containerElement={ <Link to={{ pathname : "/sensorid"     , state: "" }}/>}   primaryText={ 'Mapping'      } leftIcon={<LeftIcon     />  } /> 
                            <ListItem  key={"logout"       }  containerElement={ <Link to={"/logout"  } />}                                 primaryText={ ""             } leftIcon={<LeftIcon     />   } />
                   </Drawer>
                    <BeforeAfterWrapper  >
                        <p style={{ margin : '0 auto' , padding: 0,fontFamily:"Roboto, sans-serif", color: 'rgba(255, 255, 255, 0.54)',  maxWidth: 500, } }>
                         {'We do  monitoring systems.'}
                         {<br/>}
                         {<span>Copyright &copy; 2016 - 2017 </span>}
                          <a style={{ color : 'rgba(255, 255, 255, 0.87)'  , }}  href=" ">{ ' Generic Company.  '}</a>{'All Rights Reserved. '}
                        </p>
                  </BeforeAfterWrapper>

                  </div>)

[fzaninotto]

OK, I'm locking this conversation, @velociwabbit please stop trolling here.