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.
324 lines
9.3 KiB
324 lines
9.3 KiB
import React, { Component } from "react";
|
|
import ReactDOM from "react-dom";
|
|
//import axios from "axios";
|
|
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";
|
|
import UserProfilePage from "../../pages/profile";
|
|
//var view = false;
|
|
class NavBar extends Component {
|
|
user = { username: "Demo", userStatus: "Guest" };
|
|
|
|
ui = {
|
|
menu: {
|
|
text: "Меню"
|
|
},
|
|
catalog: {
|
|
text: "Каталог"
|
|
}
|
|
};
|
|
styles = {
|
|
desktop: {
|
|
background: "2e323f",
|
|
//position: "ralative",
|
|
display: "inline",
|
|
//display: "none",
|
|
//height: "100%",
|
|
left: "-50px",
|
|
//width: "",
|
|
float: "left"
|
|
},
|
|
mobile: {
|
|
background: "2e323f",
|
|
position: "fixed",
|
|
display: "none",
|
|
height: "100%",
|
|
left: "300px",
|
|
width: "200px"
|
|
}
|
|
};
|
|
viewMobile() {
|
|
return (
|
|
<ProSidebar
|
|
id="navBar"
|
|
style={{
|
|
height: "100vh",
|
|
marginTop: "40px"
|
|
|
|
/*
|
|
navigator.userAgentData.mobile
|
|
? this.styles.mobile
|
|
: this.styles.desktop
|
|
*/
|
|
// navigator.userAgentData.mobile
|
|
}}
|
|
>
|
|
<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"
|
|
}}
|
|
>
|
|
<div
|
|
style={{ width: "56px", height: "56px", background: "green" }}
|
|
className="img-responsive img-rounded"
|
|
//src="https://raw.githubusercontent.com/azouaoui-med/pro-sidebar-template/gh-pages/src/img/user.jpg"
|
|
alt="User picture"
|
|
onClick={() => (
|
|
//(document.getElementById("backBtn").style.display = "block"),
|
|
//(document.getElementById("container").style.display = "none"),
|
|
(document.getElementById("containerInfo").style.display =
|
|
"block"),
|
|
ReactDOM.render(
|
|
<UserProfilePage
|
|
Ipkgs={this.props.Ipkgs}
|
|
catalog={this.props.category}
|
|
/>,
|
|
document.getElementById("containerInfo")
|
|
)
|
|
)}
|
|
></div>
|
|
</div>
|
|
<div
|
|
className="user-info"
|
|
style={{ float: "left", width: " 100%" }}
|
|
>
|
|
<span className="user-name">{this.user.username}</span>
|
|
<span
|
|
className="user-role"
|
|
style={{ width: "100vw", color: "green" }}
|
|
>
|
|
{this.user.userStatus}
|
|
</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" }}
|
|
>
|
|
{/*CATALOG */}
|
|
|
|
<SubMenu title={this.ui.catalog.text}>
|
|
{Object.keys(this.props.category).map((k, i) => (
|
|
<MenuItem
|
|
style={{
|
|
paddingRight: "0px",
|
|
width: "100vw",
|
|
float: "left"
|
|
}}
|
|
>
|
|
{
|
|
//
|
|
}
|
|
<SubMenu
|
|
title={
|
|
this.checkAlias(k) +
|
|
" (" +
|
|
this.props.category[k].length +
|
|
")"
|
|
}
|
|
>
|
|
{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>
|
|
);
|
|
}
|
|
viewOther() {
|
|
return (
|
|
<Menu style={{ display: "inline", overflowY: "scroll", width: "200px" }}>
|
|
<MenuPage
|
|
menuItem={this.props.menuItem}
|
|
title={this.ui.menu.text}
|
|
style={{ paddingRight: "0px", float: "left" }}
|
|
/>
|
|
<MenuItem
|
|
title={this.ui.catalog.text}
|
|
style={{ paddingRight: "0px", float: "left", overflowY: "scroll" }}
|
|
>
|
|
{/*CATALOG
|
|
|
|
<SubMenu title={this.ui.catalog.text} style={{ overflowY: "scroll" }}>
|
|
{Object.keys(this.props.category).map((k, i) => (
|
|
<MenuItem
|
|
style={{
|
|
paddingRight: "0px",
|
|
width: "100vw"
|
|
}}
|
|
>
|
|
{
|
|
//
|
|
}
|
|
<SubMenu
|
|
title={
|
|
this.checkAlias(k) +
|
|
" (" +
|
|
this.props.category[k].length +
|
|
")"
|
|
}
|
|
>
|
|
{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>
|
|
);
|
|
}
|
|
|
|
checkAlias(text) {
|
|
//console.log( "aliases:\t" + this.props.aliases)
|
|
//return text;
|
|
if (text in this.props.aliases) {
|
|
return this.props.aliases[text];
|
|
//console.log(this.props.aliases[text]);
|
|
} else {
|
|
return text;
|
|
//console.log(e);
|
|
}
|
|
}
|
|
viewPakegeInfo(pkgName) {
|
|
const url = this.props.ServerAdress + "/find?pkg=" + pkgName;
|
|
console.log(url, { mode: "no-cors" });
|
|
fetch(url, ["POST"])
|
|
.then((response) => response.json())
|
|
// .then(commits => alert(commits[0].author.login))
|
|
.catch((error) => {
|
|
console.error("Error:", error);
|
|
});
|
|
/*try {
|
|
portage_list[pkgName];
|
|
} catch (e) {*/
|
|
|
|
document.getElementById("containerInfo").display = "block";
|
|
ReactDOM.render(
|
|
<FullCard
|
|
PackageName={pkgName}
|
|
PropMain={this.props.rec}
|
|
icons={this.props.icons}
|
|
/>,
|
|
document.getElementById("containerInfo")
|
|
);
|
|
|
|
console.log(pkgName);
|
|
}
|
|
findPakg(pkg) {
|
|
this.viewPakegeInfo(pkg);
|
|
}
|
|
render() {
|
|
return navigator.userAgentData.mobile
|
|
? this.viewMobile()
|
|
: this.viewOther();
|
|
}
|
|
}
|
|
export default NavBar;
|