65 lines
1.8 KiB
JavaScript
65 lines
1.8 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'
|
|
import './auth-modal.js'
|
|
import './pages/page-home.js'
|
|
import './pages/page-listing.js'
|
|
import './pages/page-create.js'
|
|
import './pages/page-favorites.js'
|
|
import './pages/page-my-listings.js'
|
|
import './pages/page-messages.js'
|
|
import './pages/page-settings.js'
|
|
import './pages/page-not-found.js'
|
|
|
|
class AppShell extends HTMLElement {
|
|
constructor() {
|
|
super()
|
|
this.main = null
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.render()
|
|
this.setupRouter()
|
|
|
|
i18n.subscribe(() => {
|
|
this.querySelector('app-header').updateTranslations()
|
|
this.querySelector('app-footer').updateTranslations()
|
|
})
|
|
}
|
|
|
|
render() {
|
|
this.innerHTML = /* html */`
|
|
<app-header></app-header>
|
|
<main class="container" id="router-outlet"></main>
|
|
<app-footer></app-footer>
|
|
<auth-modal hidden></auth-modal>
|
|
`
|
|
|
|
this.main = this.querySelector('#router-outlet')
|
|
|
|
// Try to restore session
|
|
auth.tryRestoreSession()
|
|
}
|
|
|
|
setupRouter() {
|
|
router.setOutlet(this.main)
|
|
|
|
router
|
|
.register('/', 'page-home')
|
|
.register('/search', 'page-home') // Redirect search to home
|
|
.register('/listing/:id', 'page-listing')
|
|
.register('/create', 'page-create')
|
|
.register('/edit/:id', 'page-create')
|
|
.register('/favorites', 'page-favorites')
|
|
.register('/my-listings', 'page-my-listings')
|
|
.register('/messages', 'page-messages')
|
|
.register('/settings', 'page-settings')
|
|
|
|
router.handleRouteChange()
|
|
}
|
|
}
|
|
|
|
customElements.define('app-shell', AppShell)
|