New <thing> buttons in sidebar

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

View File

@ -68,11 +68,21 @@ export async function getPlugin(id) {
return await resp.json() return await resp.json()
} }
export async function uploadPlugin(data) { export async function uploadPlugin(data, id) {
const resp = await fetch(`${BASE_PATH}/plugins/upload`, { let resp
headers: getHeaders("application/zip"), if (id) {
body: data, 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() return await resp.json()
} }

View File

@ -17,7 +17,7 @@ import React, { Component } from "react"
class ClientView extends Component { class ClientView extends Component {
render() { render() {
return <div>{this.props.client.displayname}</div> return <div>{this.props.displayname}</div>
} }
} }

View File

@ -14,8 +14,9 @@
// You should have received a copy of the GNU Affero General Public License // 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/>. // along with this program. If not, see <https://www.gnu.org/licenses/>.
import React, { Component } from "react" 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 api from "../api"
import { ReactComponent as Plus } from "../res/plus.svg"
import InstanceListEntry from "./instance/ListEntry" import InstanceListEntry from "./instance/ListEntry"
import InstanceView from "./instance/View" import InstanceView from "./instance/View"
import ClientListEntry from "./client/ListEntry" import ClientListEntry from "./client/ListEntry"
@ -62,41 +63,55 @@ class Dashboard extends Component {
if (!entry) { if (!entry) {
return "Not found :(" return "Not found :("
} }
return React.createElement(type, { [field]: entry }) return React.createElement(type, entry)
} }
render() { render() {
return <div className="dashboard"> return <div className="dashboard">
<div className="title"> <Link to="/" className="title">
<img src="/favicon.png" alt=""/> <img src="/favicon.png" alt=""/>
Maubot Manager Maubot Manager
</div> </Link>
<div className="topbar"> <div className="topbar">
{localStorage.username} {localStorage.username}
</div> </div>
<nav className="sidebar"> <nav className="sidebar">
<div className="instances list"> <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)} {this.renderList("instance", InstanceListEntry)}
</div> </div>
<div className="clients list"> <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)} {this.renderList("client", ClientListEntry)}
</div> </div>
<div className="plugins list"> <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)} {this.renderList("plugin", PluginListEntry)}
</div> </div>
</nav> </nav>
<main> <main className="dashboard">
<Route path="/" exact render={() => "Hello, World!"}/> <Switch>
<Route path="/instance/:id" render={({ match }) => <Route path="/" exact render={() => "Hello, World!"}/>
this.renderView("instance", InstanceView, match.params.id)}/> <Route path="/new/instance" render={() => <InstanceView/>}/>
<Route path="/client/:id" render={({ match }) => <Route path="/new/client" render={() => <ClientView/>}/>
this.renderView("client", ClientView, match.params.id)}/> <Route path="/new/plugin" render={() => <PluginView/>}/>
<Route path="/plugin/:id" render={({ match }) => <Route path="/instance/:id" render={({ match }) =>
this.renderView("plugin", PluginView, match.params.id)}/> this.renderView("instance", InstanceView, match.params.id)}/>
<Route render={() => <Redirect to={{ pathname: "/" }}/>}/> <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> </main>
</div> </div>
} }

View File

@ -17,7 +17,7 @@ import React, { Component } from "react"
class InstanceView extends Component { class InstanceView extends Component {
render() { render() {
return <div>{this.props.instance.id}</div> return <div>{this.props.id}</div>
} }
} }

View File

@ -17,7 +17,7 @@ import React, { Component } from "react"
class PluginView extends Component { class PluginView extends Component {
render() { render() {
return <div>{this.props.plugin.id}</div> return <div>{this.props.id}</div>
} }
} }

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>

After

Width:  |  Height:  |  Size: 432 B

View File

@ -19,7 +19,7 @@
display: grid display: grid
height: 100% height: 100%
> .title > a.title
grid-area: title grid-area: title
display: flex display: flex
align-items: center align-items: center
@ -29,6 +29,7 @@
font-weight: bold font-weight: bold
color: $text-color color: $text-color
text-decoration: none
z-index: 1 z-index: 1
@ -40,7 +41,7 @@
max-width: 2rem max-width: 2rem
margin-right: .5rem margin-right: .5rem
> .topbar > div.topbar
grid-area: topbar grid-area: topbar
display: flex display: flex
align-items: center align-items: center
@ -53,5 +54,5 @@
@import "sidebar" @import "sidebar"
> .dashboard > main.dashboard
grid-area: main grid-area: main

View File

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