New <thing> buttons in sidebar
This commit is contained in:
Tulir Asokan
parent
9a21c6ade8
commit
3e661aa887
@ -68,11 +68,21 @@ export async function getPlugin(id) {
|
||||
return await resp.json()
|
||||
}
|
||||
|
||||
export async function uploadPlugin(data) {
|
||||
const resp = await fetch(`${BASE_PATH}/plugins/upload`, {
|
||||
export async function uploadPlugin(data, id) {
|
||||
let resp
|
||||
if (id) {
|
||||
resp = await fetch(`${BASE_PATH}/plugin/${id}`, {
|
||||
headers: getHeaders("applcation/zip"),
|
||||
body: data,
|
||||
method: "PUT",
|
||||
})
|
||||
} else {
|
||||
resp = await fetch(`${BASE_PATH}/plugins/upload`, {
|
||||
headers: getHeaders("application/zip"),
|
||||
body: data,
|
||||
method: "POST",
|
||||
})
|
||||
}
|
||||
return await resp.json()
|
||||
}
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@ import React, { Component } from "react"
|
||||
|
||||
class ClientView extends Component {
|
||||
render() {
|
||||
return <div>{this.props.client.displayname}</div>
|
||||
return <div>{this.props.displayname}</div>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -14,8 +14,9 @@
|
||||
// You should have received a copy of the GNU Affero General Public License
|
||||
// along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
import React, { Component } from "react"
|
||||
import { Route, Redirect } from "react-router-dom"
|
||||
import { Route, Switch, Link } from "react-router-dom"
|
||||
import api from "../api"
|
||||
import { ReactComponent as Plus } from "../res/plus.svg"
|
||||
import InstanceListEntry from "./instance/ListEntry"
|
||||
import InstanceView from "./instance/View"
|
||||
import ClientListEntry from "./client/ListEntry"
|
||||
@ -62,41 +63,55 @@ class Dashboard extends Component {
|
||||
if (!entry) {
|
||||
return "Not found :("
|
||||
}
|
||||
return React.createElement(type, { [field]: entry })
|
||||
return React.createElement(type, entry)
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div className="dashboard">
|
||||
<div className="title">
|
||||
<Link to="/" className="title">
|
||||
<img src="/favicon.png" alt=""/>
|
||||
Maubot Manager
|
||||
</div>
|
||||
</Link>
|
||||
<div className="topbar">
|
||||
{localStorage.username}
|
||||
</div>
|
||||
<nav className="sidebar">
|
||||
<div className="instances list">
|
||||
<h3 className="title">Instances</h3>
|
||||
<div className="title">
|
||||
<h2>Instances</h2>
|
||||
<Link to="/new/instance"><Plus/></Link>
|
||||
</div>
|
||||
{this.renderList("instance", InstanceListEntry)}
|
||||
</div>
|
||||
<div className="clients list">
|
||||
<h3 className="title">Clients</h3>
|
||||
<div className="title">
|
||||
<h2>Clients</h2>
|
||||
<Link to="/new/client"><Plus/></Link>
|
||||
</div>
|
||||
{this.renderList("client", ClientListEntry)}
|
||||
</div>
|
||||
<div className="plugins list">
|
||||
<h3 className="title">Plugins</h3>
|
||||
<div className="title">
|
||||
<h2>Plugins</h2>
|
||||
<Link to="/new/plugin"><Plus/></Link>
|
||||
</div>
|
||||
{this.renderList("plugin", PluginListEntry)}
|
||||
</div>
|
||||
</nav>
|
||||
<main>
|
||||
<main className="dashboard">
|
||||
<Switch>
|
||||
<Route path="/" exact render={() => "Hello, World!"}/>
|
||||
<Route path="/new/instance" render={() => <InstanceView/>}/>
|
||||
<Route path="/new/client" render={() => <ClientView/>}/>
|
||||
<Route path="/new/plugin" render={() => <PluginView/>}/>
|
||||
<Route path="/instance/:id" render={({ match }) =>
|
||||
this.renderView("instance", InstanceView, match.params.id)}/>
|
||||
<Route path="/client/:id" render={({ match }) =>
|
||||
this.renderView("client", ClientView, match.params.id)}/>
|
||||
<Route path="/plugin/:id" render={({ match }) =>
|
||||
this.renderView("plugin", PluginView, match.params.id)}/>
|
||||
<Route render={() => <Redirect to={{ pathname: "/" }}/>}/>
|
||||
<Route render={() => "Not found :("}/>
|
||||
</Switch>
|
||||
</main>
|
||||
</div>
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@ import React, { Component } from "react"
|
||||
|
||||
class InstanceView extends Component {
|
||||
render() {
|
||||
return <div>{this.props.instance.id}</div>
|
||||
return <div>{this.props.id}</div>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@ import React, { Component } from "react"
|
||||
|
||||
class PluginView extends Component {
|
||||
render() {
|
||||
return <div>{this.props.plugin.id}</div>
|
||||
return <div>{this.props.id}</div>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
5
maubot/management/frontend/src/res/plus.svg
Normal file
5
maubot/management/frontend/src/res/plus.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path fill="#000000" d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 432 B |
@ -19,7 +19,7 @@
|
||||
display: grid
|
||||
height: 100%
|
||||
|
||||
> .title
|
||||
> a.title
|
||||
grid-area: title
|
||||
display: flex
|
||||
align-items: center
|
||||
@ -29,6 +29,7 @@
|
||||
font-weight: bold
|
||||
|
||||
color: $text-color
|
||||
text-decoration: none
|
||||
|
||||
z-index: 1
|
||||
|
||||
@ -40,7 +41,7 @@
|
||||
max-width: 2rem
|
||||
margin-right: .5rem
|
||||
|
||||
> .topbar
|
||||
> div.topbar
|
||||
grid-area: topbar
|
||||
display: flex
|
||||
align-items: center
|
||||
@ -53,5 +54,5 @@
|
||||
|
||||
@import "sidebar"
|
||||
|
||||
> .dashboard
|
||||
> main.dashboard
|
||||
grid-area: main
|
||||
|
||||
@ -24,8 +24,16 @@
|
||||
div.list
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
h3.title
|
||||
div.title
|
||||
h2
|
||||
margin: 0
|
||||
display: inline-block
|
||||
|
||||
font-size: 1.25rem
|
||||
|
||||
a
|
||||
display: inline-block
|
||||
float: right
|
||||
|
||||
a.entry
|
||||
display: block
|
||||
|
||||
Loading…
Reference in New Issue
Block a user