69 lines
3.0 KiB
HTML
69 lines
3.0 KiB
HTML
<p-toast position="top-right"></p-toast>
|
|
<p-confirmDialog [style]="{ width: '28rem' }"></p-confirmDialog>
|
|
|
|
<div class="api-connection-banner" *ngIf="apiSnapshot().state === 'offline'">
|
|
<div class="api-connection-banner__content">
|
|
<strong>{{ 'footer.apiOfflineTitle' | translate }}</strong>
|
|
<span>{{ 'footer.apiOfflineMessage' | translate }}</span>
|
|
</div>
|
|
<button type="button" class="api-connection-banner__action" (click)="refreshApiStatus()">{{ 'footer.retry' | translate }}</button>
|
|
</div>
|
|
|
|
<ng-container *ngIf="auth.isLoggedIn(); else authView">
|
|
<div class="layout-shell" [class.layout-shell--collapsed]="layout.collapsed()">
|
|
<div class="layout-overlay" [class.is-visible]="layout.mobileOpen()" (click)="layout.closeMobileSidebar()"></div>
|
|
|
|
<aside class="layout-sidebar" [class.is-open]="layout.mobileOpen()">
|
|
<app-sidebar [collapsed]="layout.collapsed()" [items]="menuItems" (navigate)="layout.closeMobileSidebar()"></app-sidebar>
|
|
</aside>
|
|
|
|
<div class="layout-main">
|
|
<app-topbar
|
|
[pageTitle]="currentPageTitle"
|
|
[username]="auth.user()?.username || 'admin'"
|
|
[lang]="language.current()"
|
|
[languages]="languageOptions"
|
|
[themeMode]="theme.mode()"
|
|
(menuClick)="layout.toggleSidebar()"
|
|
(themeClick)="toggleTheme()"
|
|
(languageChange)="changeLanguage($event)"
|
|
(logoutClick)="logout()"
|
|
></app-topbar>
|
|
|
|
<main class="layout-content">
|
|
<router-outlet />
|
|
</main>
|
|
|
|
<footer class="layout-footer">
|
|
<div class="layout-footer__author">
|
|
<span class="layout-footer__author-label">{{ 'footer.authorLabel' | translate }}</span>
|
|
<strong>{{ author }}</strong>
|
|
<a [href]="authorUrl" target="_blank" rel="noreferrer">{{ authorHandle }}</a>
|
|
</div>
|
|
<span class="layout-footer__status" [ngClass]="apiStatusClass">{{ 'footer.apiLabel' | translate }}: {{ apiStateLabelKey() | translate }}</span>
|
|
<span>{{ 'footer.apiLatencyLabel' | translate }}: {{ apiLatencyLabel() }}</span>
|
|
<a href="/docs" target="_blank" rel="noreferrer">{{ 'footer.apiDocs' | translate }}</a>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-template #authView>
|
|
<div class="app-auth-view">
|
|
<main class="app-auth-view__content">
|
|
<router-outlet />
|
|
</main>
|
|
|
|
<footer class="layout-footer layout-footer--auth">
|
|
<div class="layout-footer__author">
|
|
<span class="layout-footer__author-label">{{ 'footer.authorLabel' | translate }}</span>
|
|
<strong>{{ author }}</strong>
|
|
<a [href]="authorUrl" target="_blank" rel="noreferrer">{{ authorHandle }}</a>
|
|
</div>
|
|
<span class="layout-footer__status" [ngClass]="apiStatusClass">{{ 'footer.apiLabel' | translate }}: {{ apiStateLabelKey() | translate }}</span>
|
|
<span>{{ 'footer.apiLatencyLabel' | translate }}: {{ apiLatencyLabel() }}</span>
|
|
<a href="/docs" target="_blank" rel="noreferrer">{{ 'footer.apiDocs' | translate }}</a>
|
|
</footer>
|
|
</div>
|
|
</ng-template>
|