126 lines
3.1 KiB
TypeScript
126 lines
3.1 KiB
TypeScript
import * as plugins from '../../plugins.js';
|
|
|
|
import {
|
|
customElement,
|
|
DeesElement,
|
|
property,
|
|
html,
|
|
cssManager,
|
|
unsafeCSS,
|
|
css,
|
|
type TemplateResult
|
|
} from '@design.estate/dees-element';
|
|
|
|
import { LeleAccountNavigation } from './navigation.js';
|
|
|
|
import * as views from './views/index.js';
|
|
import * as accountstate from '../../states/accountstate.js';
|
|
|
|
import { commitinfo } from '../../../dist_ts/00_commitinfo_data.js';
|
|
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'idp-accountcontent': IdpAccountContent;
|
|
}
|
|
}
|
|
|
|
@customElement('idp-accountcontent')
|
|
export class IdpAccountContent extends DeesElement {
|
|
|
|
public subrouter: plugins.deesDomtools.plugins.smartrouter.SmartRouter;
|
|
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
color: #fff;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
height: 100%;
|
|
width: 100%;
|
|
background: ${cssManager.bdTheme('#eeeeeb', '#000000')}
|
|
}
|
|
:host([hidden]) {
|
|
display: none;
|
|
}
|
|
.main {
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
bottom: 0px;
|
|
}
|
|
|
|
lele-accountnavigation {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
height: 100vh;
|
|
width: 200px;
|
|
}
|
|
.viewcontainer {
|
|
will-change: transform;
|
|
position: absolute;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
width: calc(100vw - 200px);
|
|
height: 100vh;
|
|
overflow-y: scroll;
|
|
overscroll-behavior: contain;
|
|
transition: all 0.3s;
|
|
opacity: 1;
|
|
}
|
|
|
|
.viewcontainer.changing {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
<style></style>
|
|
<div class="main">
|
|
<lele-accountnavigation></lele-accountnavigation>
|
|
<div class="viewcontainer">
|
|
<!--<lele-accountview-subscription></lele-accountview-subscription>-->
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
|
|
super.firstUpdated(_changedProperties);
|
|
await this.domtoolsPromise;
|
|
this.subrouter = this.domtools.router.createSubRouter('/account');
|
|
const viewcontainer: HTMLDivElement = this.shadowRoot.querySelector('.viewcontainer');
|
|
|
|
const cleanupViews = async () => {
|
|
for (const child of viewcontainer.children) {
|
|
viewcontainer.removeChild(child);
|
|
}
|
|
};
|
|
|
|
viewcontainer.append(new views.BaseView());
|
|
console.log(`loaded base view`);
|
|
|
|
this.subrouter.on('/org/:orgName/billing', async () => {
|
|
viewcontainer.classList.add('changing');
|
|
await this.domtools.convenience.smartdelay.delayFor(300);
|
|
console.log('We are viewing the billing page');
|
|
await cleanupViews();
|
|
viewcontainer.append(new views.SubscriptionView());
|
|
viewcontainer.classList.remove('changing');
|
|
await this.domtools.convenience.smartdelay.delayFor(300);
|
|
});
|
|
|
|
this.subrouter._handleRouteState();
|
|
}
|
|
}
|