Created
October 12, 2017 20:49
-
-
Save elparkino/1ef382119fd57ad923cfd79686ae3baf to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Anchor from '@trendmicro/react-anchor'; | |
import Dropdown from '@trendmicro/react-dropdown'; | |
import Navbar from '@trendmicro/react-navbar'; | |
import { Nav, NavDropdown, NavItem, MenuItem } from '@trendmicro/react-navs'; | |
import PropTypes from 'prop-types'; | |
import React from 'react'; | |
import { StickyContainer, Sticky } from 'react-sticky'; | |
// Be sure to include styles at some point, probably during your bootstraping | |
import '@trendmicro/react-dropdown/dist/react-dropdown.css'; | |
import '@trendmicro/react-navs/dist/react-navs.min.css'; | |
import '@trendmicro/react-navbar/dist/react-navbar.min.css'; | |
import './styles.scss' | |
let objectCounter = 0; | |
const generateId = function(){ | |
const id = objectCounter; | |
objectCounter += 1; | |
return id; | |
} | |
let graph = { | |
nodes: {}, | |
edges: {} | |
}; | |
const noop = () => {}; | |
const NODE_TYPES = { | |
Project: { | |
kind: 'proto', | |
properties: {} | |
}, | |
User: { | |
kind: 'proto', | |
properties: {} | |
}, | |
Pilot: { | |
kind: 'proto', | |
properties: {} | |
}, | |
Job: { | |
kind: 'proto', | |
properties: {} | |
}, | |
Role: { | |
kind: 'proto', | |
properties: { | |
permissions: [], | |
name: 'user' | |
} | |
}, | |
Status: { | |
kind: 'proto', | |
properties: {} | |
}, | |
TypeOf: { | |
kind: 'proto', | |
properties: { | |
} | |
}, | |
Owner: { | |
kind: 'proto', | |
properties: {} | |
}, | |
Operator: { | |
kind: 'proto', | |
properties: {} | |
} | |
} | |
const ADMIN_PERMISSION = {action : 'edit', grant: true, resource: '*'}; | |
for (var nodeProto in NODE_TYPES) { | |
let proto = NODE_TYPES[nodeProto]; | |
proto.properties.nodeType = nodeProto; | |
proto.id = generateId() | |
graph.nodes[proto.id] = proto; | |
} | |
function PilotRole(props = {}){ | |
const ROLE = this, | |
ROLE_TYPE = NODE_TYPES.Role.properties.nodeType, | |
ROLE_NAME = 'pilot'; | |
ROLE.kind = ROLE_TYPE; | |
ROLE.id = generateId(); | |
this.properties = Object.assign({}, NODE_TYPES.Pilot.properties, props, {name: ROLE_NAME, permissions: [ADMIN_PERMISSION] }); | |
const roleIndex = edge => { | |
if(!edge || !edge.target || !edge.target.properties){ | |
return false; | |
} | |
const isTypeOfEdge = edge.kind === NODE_TYPES.TypeOf.properties.nodeType, | |
isRoleTarget = edge.target.kind === ROLE.kind, | |
roleTypeExists = edge.target.properties.name && edge.target.properties.name === ROLE.properties.name | |
return isTypeOfEdge && isRoleTarget && roleTypeExists | |
}; | |
const edges = Object.values(graph.edges) | |
if(edges.findIndex(roleIndex) === -1){ | |
graph.edges[ROLE.id] = { | |
kind: NODE_TYPES.TypeOf.properties.nodeType, | |
source: NODE_TYPES.Role, | |
target: NODE_TYPES.Pilot | |
} | |
} | |
} | |
class Pilot{ | |
constructor(props = {}){ | |
this.id = generateId(); | |
this.kind = 'user'; | |
this.properties = Object.assign({}, NODE_TYPES.User, props) | |
this.properties.role = Pilot.register() | |
graph.nodes[this.id] = this; | |
} | |
static register(){ | |
const type = new PilotRole() | |
const typeRelation = { | |
id: generateId(), | |
kind: NODE_TYPES.TypeOf.properties.nodeType, | |
source: this, | |
target: type | |
} | |
graph.edges[typeRelation.id] = typeRelation; | |
return type; | |
} | |
} | |
function getUser(){ | |
return fetch('https://randomuser.me/api/') | |
.then(response => { | |
return response.json() | |
}) | |
.then(function({results}){ | |
const user = results[0]; | |
console.log(user) //eslint-disable-line | |
let pilot = new Pilot(user); | |
console.log(graph, pilot); //eslint-disable-line | |
}) | |
} | |
const StickyNavbar = ({ state, actions }) => { | |
return ( | |
<StickyContainer> | |
<Sticky> | |
<Navbar> | |
<Navbar.Header> | |
<Anchor | |
componentClass="button" | |
style={{ | |
backgroundColor: 'transparent', | |
border: 'none', | |
padding: '10px' | |
}} | |
onClick={() => {getUser()}} | |
> | |
<div> | |
<svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40" style={{ | |
verticalAlign: 'middle' | |
}}><g><path d="m37.3 30v2.9q0 0.5-0.4 1t-1 0.4h-31.5q-0.6 0-1-0.4t-0.4-1v-2.9q0-0.6 0.4-1t1-0.4h31.5q0.5 0 1 0.4t0.4 1z m0-11.4v2.8q0 0.6-0.4 1t-1 0.5h-31.5q-0.6 0-1-0.5t-0.4-1v-2.8q0-0.6 0.4-1t1-0.5h31.5q0.5 0 1 0.5t0.4 1z m0-11.5v2.9q0 0.6-0.4 1t-1 0.4h-31.5q-0.6 0-1-0.4t-0.4-1v-2.9q0-0.5 0.4-1t1-0.4h31.5q0.5 0 1 0.4t0.4 1z"></path></g></svg> | |
</div> | |
</Anchor> | |
</Navbar.Header> | |
<Nav | |
navStyle="navbar" | |
activeKey={state.tab} | |
onSelect={actions.selectTab} | |
> | |
<NavItem className="text-center" style={{ minWidth: 72 }}> | |
<span>Active Node Name</span> | |
</NavItem> | |
{/* <NavDropdown | |
open={false} | |
onToggle={noop} | |
autoOpen | |
noCaret | |
eventKey="dashboard" | |
title="Dashboard" | |
> | |
<MenuItem eventKey="dashboard.1">Menu Item 1</MenuItem> | |
<MenuItem eventKey="dashboard.2">Menu Item 2</MenuItem> | |
<MenuItem eventKey="dashboard.3">Menu Item 3</MenuItem> | |
<MenuItem eventKey="dashboard.4">Menu Item 4</MenuItem> | |
</NavDropdown> | |
<NavDropdown | |
open={false} | |
onToggle={noop} | |
autoOpen | |
noCaret | |
eventKey="administration" | |
title="Administration" | |
> | |
<MenuItem eventKey="administration.1">Menu Item 1</MenuItem> | |
<MenuItem eventKey="administration.2">Menu Item 2</MenuItem> | |
<MenuItem eventKey="administration.3">Menu Item 3</MenuItem> | |
<Dropdown.SubMenu eventKey="administration.4" title="Menu item 4" onSelect={actions.selectTab}> | |
<MenuItem eventKey="administration.4.1"> | |
Second level item one | |
</MenuItem> | |
<MenuItem eventKey="administration.4.2"> | |
Second level item two | |
</MenuItem> | |
</Dropdown.SubMenu> | |
</NavDropdown> */} | |
</Nav> | |
</Navbar> | |
</Sticky> | |
</StickyContainer> | |
); | |
}; | |
StickyNavbar.propTypes = { | |
state: PropTypes.object, | |
actions: PropTypes.object | |
}; | |
export default StickyNavbar; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment