65 lines
2.6 KiB
JavaScript
65 lines
2.6 KiB
JavaScript
import { router } from '../router.js'
|
|
import { i18n } from '../i18n.js'
|
|
import { auth } from '../services/auth.js'
|
|
import './app-header.js'
|
|
import './app-footer.js'
|
|
|
|
class AppShell extends HTMLElement {
|
|
constructor() {
|
|
super()
|
|
this.main = null
|
|
}
|
|
|
|
connectedCallback() {
|
|
if (!this.querySelector('#router-outlet')) {
|
|
this.innerHTML = /* html */`
|
|
<app-header></app-header>
|
|
<main class="container" id="router-outlet"></main>
|
|
<app-footer></app-footer>
|
|
<div id="auth-modal-slot"></div>
|
|
`
|
|
}
|
|
this.main = this.querySelector('#router-outlet')
|
|
this.setupRouter()
|
|
this.loadAuthModal()
|
|
|
|
i18n.subscribe(() => {
|
|
this.querySelector('app-header').updateTranslations()
|
|
this.querySelector('app-footer').updateTranslations()
|
|
})
|
|
}
|
|
|
|
async loadAuthModal() {
|
|
await import('./auth-modal.js')
|
|
this.querySelector('#auth-modal-slot').innerHTML = '<auth-modal hidden></auth-modal>'
|
|
}
|
|
|
|
setupRouter() {
|
|
router.setOutlet(this.main)
|
|
|
|
const lazy = (path) => () => import(path)
|
|
|
|
router.setNotFoundLoader(lazy('./pages/page-not-found.js'))
|
|
router
|
|
.register('/', 'page-home', lazy('./pages/page-home.js'))
|
|
.register('/search', 'page-home', lazy('./pages/page-home.js'))
|
|
.register('/listing/:id', 'page-listing', lazy('./pages/page-listing.js'))
|
|
.register('/create', 'page-create', lazy('./pages/page-create.js'))
|
|
.register('/edit/:id', 'page-create', lazy('./pages/page-create.js'))
|
|
.register('/favorites', 'page-favorites', lazy('./pages/page-favorites.js'))
|
|
.register('/my-listings', 'page-my-listings', lazy('./pages/page-my-listings.js'))
|
|
.register('/messages', 'page-messages', lazy('./pages/page-messages.js'))
|
|
.register('/settings', 'page-settings', lazy('./pages/page-settings.js'))
|
|
.register('/notifications', 'page-notifications', lazy('./pages/page-notifications.js'))
|
|
.register('/privacy', 'page-privacy', lazy('./pages/page-privacy.js'))
|
|
.register('/terms', 'page-terms', lazy('./pages/page-terms.js'))
|
|
.register('/about', 'page-about', lazy('./pages/page-about.js'))
|
|
.register('/contact', 'page-contact', lazy('./pages/page-contact.js'))
|
|
.register('/imprint', 'page-imprint', lazy('./pages/page-imprint.js'))
|
|
|
|
router.handleRouteChange()
|
|
}
|
|
}
|
|
|
|
customElements.define('app-shell', AppShell)
|