agatha/maubot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

New <thing> buttons in sidebar

Browse Source
This commit is contained in:
Tulir Asokan 2018-11-08 17:25:22 +02:00
parent 9a21c6ade8
commit 3e661aa887
8 changed files with 68 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
maubot/management/frontend/src/api.js
View File

@ -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`, {
headers: getHeaders("application/zip"),
body: data,
})
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()
}

2
maubot/management/frontend/src/dashboard/client/View.js
View File

@ -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>
}
}

47
maubot/management/frontend/src/dashboard/index.js
View File

@ -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>
<Route path="/" exact render={() => "Hello, World!"}/>
<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: "/" }}/>}/>
<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={() => "Not found :("}/>
</Switch>
</main>
</div>
}

2
maubot/management/frontend/src/dashboard/instance/View.js
View File

@ -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>
}
}

2
maubot/management/frontend/src/dashboard/plugin/View.js
View File

@ -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
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 432 B

7
maubot/management/frontend/src/style/pages/dashboard.sass
View File

@ -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

12
maubot/management/frontend/src/style/pages/sidebar.sass
View File

@ -24,8 +24,16 @@
div.list
margin-bottom: 1.5rem
h3.title
margin: 0
div.title
h2
margin: 0
display: inline-block
font-size: 1.25rem
a
display: inline-block
float: right
a.entry
display: block