habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: add API Drawer

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-08-05 22:04:31 +02:00
parent 562eb8af95
commit fdd8e66b91
8 changed files with 109 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/interfaces/AdminInterface.ts
View File

@ -24,7 +24,7 @@ import "../elements/messages/MessageContainer";
import "../elements/notifications/NotificationDrawer";
import "../elements/sidebar/Sidebar";
import { until } from "lit-html/directives/until";
import { EVENT_NOTIFICATION_TOGGLE, EVENT_SIDEBAR_TOGGLE, VERSION } from "../constants";
import { EVENT_API_DRAWER_TOGGLE, EVENT_NOTIFICATION_DRAWER_TOGGLE, EVENT_SIDEBAR_TOGGLE, VERSION } from "../constants";
import { AdminApi } from "authentik-api";
import { DEFAULT_CONFIG } from "../api/Config";
import { WebsocketClient } from "../common/ws";
@ -37,6 +37,9 @@ export class AdminInterface extends LitElement {
@property({ type: Boolean })
notificationOpen = false;
@property({ type: Boolean })
apiDrawerOpen = false;
ws: WebsocketClient;
static get styles(): CSSResult[] {
@ -67,9 +70,12 @@ export class AdminInterface extends LitElement {
window.addEventListener(EVENT_SIDEBAR_TOGGLE, () => {
this.sidebarOpen = !this.sidebarOpen;
});
window.addEventListener(EVENT_NOTIFICATION_TOGGLE, () => {
window.addEventListener(EVENT_NOTIFICATION_DRAWER_TOGGLE, () => {
this.notificationOpen = !this.notificationOpen;
});
window.addEventListener(EVENT_API_DRAWER_TOGGLE, () => {
this.apiDrawerOpen = !this.apiDrawerOpen;
});
}
render(): TemplateResult {
@ -81,7 +87,7 @@ export class AdminInterface extends LitElement {
</ak-sidebar>
<div class="pf-c-page__drawer">
<div
class="pf-c-drawer ${this.notificationOpen
class="pf-c-drawer ${this.notificationOpen || this.apiDrawerOpen
? "pf-m-expanded"
: "pf-m-collapsed"}"
>
@ -100,8 +106,8 @@ export class AdminInterface extends LitElement {
</main>
</div>
</div>
<ak-notification-drawer class="pf-c-drawer__panel pf-m-width-33">
</ak-notification-drawer>
${this.notificationOpen ? html`<ak-notification-drawer class="pf-c-drawer__panel pf-m-width-33"></ak-notification-drawer>` : html``}
${this.apiDrawerOpen ? html`<ak-api-drawer class="pf-c-drawer__panel pf-m-width-33"></ak-api-drawer>` : html``}
</div>
</div>
</div>