You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
197 lines
5.5 KiB
197 lines
5.5 KiB
import React, { Component } from "react";
|
|
import ReactDOM from "react-dom";
|
|
import {
|
|
ProSidebar,
|
|
Menu,
|
|
MenuItem,
|
|
SubMenu,
|
|
SidebarHeader,
|
|
SidebarFooter,
|
|
SidebarContent
|
|
} from "react-pro-sidebar";
|
|
//import "react-pro-sidebar/dist/css/styles.css";
|
|
import MenuPage from "../menu";
|
|
import "../../pages/style.css";
|
|
import FullCard from "../Cards/fullCard";
|
|
//var view = false;
|
|
class NavBar extends Component {
|
|
ui = {
|
|
menu: {
|
|
text: "Меню"
|
|
},
|
|
catalog: {
|
|
text: "Каталог"
|
|
}
|
|
};
|
|
checkAlias(text) {
|
|
//console.log( "aliases:\t" + this.props.aliases)
|
|
return text;
|
|
try {
|
|
return this.props.aliases[text];
|
|
//console.log.log(this.props.aliases[text]);
|
|
} catch (e) {
|
|
return text;
|
|
//console.log(e);
|
|
}
|
|
}
|
|
viewPakegeInfo(pkgName) {
|
|
const url = "/find?pkg=" + "pkgNme";
|
|
const response = fetch(url);
|
|
|
|
if (response.ok) {
|
|
// если HTTP-статус в диапазоне 200-299
|
|
// получаем тело ответа (см. про этот метод ниже)
|
|
let res = response.json();
|
|
ReactDOM.render(
|
|
<FullCard
|
|
PackageName={res}
|
|
PropMain={this.props.rec}
|
|
icons={this.props.icons}
|
|
/>,
|
|
document.getElementById("HomePage")
|
|
);
|
|
} else {
|
|
alert("Ошибка HTTP: " + response.status);
|
|
}
|
|
|
|
console.log(pkgName);
|
|
}
|
|
findPakg(pkg) {
|
|
this.viewPakegeInfo(pkg);
|
|
}
|
|
render() {
|
|
return (
|
|
<ProSidebar
|
|
id="navBar"
|
|
style={{
|
|
background: "2e323f",
|
|
position: "fixed",
|
|
height: "100vh",
|
|
left: "-280px"
|
|
}}
|
|
>
|
|
<SidebarHeader>
|
|
<div
|
|
style={{
|
|
padding: "24px",
|
|
textTransform: "uppercase",
|
|
fontWeight: "bold",
|
|
fontSize: "14px",
|
|
letterSpacing: "1px",
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
whiteSpace: "nowrap",
|
|
paddingLeft: "12px"
|
|
}}
|
|
>
|
|
Webport
|
|
</div>
|
|
|
|
<MenuItem>
|
|
<div
|
|
className="user-pic"
|
|
style={{
|
|
width: "60px",
|
|
marginRight: "3px",
|
|
float: "left",
|
|
paddingLeft: "12px"
|
|
}}
|
|
>
|
|
<img
|
|
style={{ width: "56px", height: "56px" }}
|
|
className="img-responsive img-rounded"
|
|
src="https://raw.githubusercontent.com/azouaoui-med/pro-sidebar-template/gh-pages/src/img/user.jpg"
|
|
alt="User picture"
|
|
/>
|
|
</div>
|
|
<div
|
|
className="user-info"
|
|
style={{ float: "left", width: " 100%" }}
|
|
>
|
|
<span className="user-name">
|
|
Jhon
|
|
<strong>Smith</strong>
|
|
</span>
|
|
<span
|
|
className="user-role"
|
|
style={{ width: "100vw", color: "green" }}
|
|
>
|
|
Guest
|
|
</span>
|
|
{/* <span className="user-status">
|
|
<i className="fa fa-circle"></i>
|
|
<span>Online</span>
|
|
</span>*/}
|
|
</div>
|
|
</MenuItem>
|
|
<MenuItem style={{}}>
|
|
<input
|
|
id="inS"
|
|
name="inS"
|
|
classname="form-control"
|
|
type="text"
|
|
placeholder="Введите имя пакета"
|
|
onChange={(e) => this.findPakg(e.target.value)}
|
|
style={{
|
|
fontSize: "1.2em",
|
|
margin: "10px",
|
|
backgroundColor: "rgba(81, 81, 81, 0.5)",
|
|
border: "none",
|
|
padding: "5px",
|
|
//ackground: "#2e233f",
|
|
//borderRadius: "15px",
|
|
//border: "3px inset #2e322f",
|
|
color: "#c7c7c7"
|
|
}}
|
|
/>
|
|
</MenuItem>
|
|
</SidebarHeader>
|
|
<SidebarContent style={{ overflowX: "clip" }}>
|
|
<Menu>
|
|
<MenuPage
|
|
menuItem={this.props.menuItem}
|
|
title={this.ui.menu.text}
|
|
/>
|
|
<MenuItem
|
|
title={this.ui.catalog.text}
|
|
style={{ paddingRight: "0px" }}
|
|
>
|
|
<SubMenu title={this.ui.catalog.text}>
|
|
{Object.keys(this.props.category).map((k, i) => (
|
|
<MenuItem
|
|
style={{
|
|
paddingRight: "0px",
|
|
width: "100%"
|
|
}}
|
|
>
|
|
<SubMenu title={this.checkAlias(k)}>
|
|
{this.props.category[k].map((pn, j) => (
|
|
<MenuItem
|
|
onClick={() =>
|
|
this.viewPakegeInfo(
|
|
this.props.category[k][i] +
|
|
"/" +
|
|
this.props.category[k][j]
|
|
)
|
|
}
|
|
style={{
|
|
//borderBottom: "1px solid red ",
|
|
width: "100%"
|
|
}}
|
|
>
|
|
{pn}
|
|
</MenuItem>
|
|
))}
|
|
</SubMenu>
|
|
</MenuItem>
|
|
))}
|
|
</SubMenu>
|
|
</MenuItem>
|
|
</Menu>
|
|
</SidebarContent>
|
|
</ProSidebar>
|
|
);
|
|
}
|
|
}
|
|
export default NavBar;
|