Added new modules and updated existing logic
This commit is contained in:
Dieter Neumann
@@ -0,0 +1,138 @@
|
||||
@{
|
||||
ViewData["Title"] = "Event Logs";
|
||||
}
|
||||
|
||||
<div class="animate__animated animate__fadeIn">
|
||||
<div class="row items-center q-mb-lg">
|
||||
<div class="col">
|
||||
<h1 class="text-h4 text-weight-bold text-primary q-ma-none">System Audit Logs</h1>
|
||||
<div class="text-subtitle2 text-grey-6 uppercase q-mt-xs" style="letter-spacing: 1px">Internal Activity Tracking</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<q-btn flat round color="primary" icon="refresh" v-on:click="onRequest({ pagination })">
|
||||
<q-tooltip>Refresh Data</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-card flat class="clean-card overflow-hidden">
|
||||
<q-table
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
row-key="id"
|
||||
v-model:pagination="pagination"
|
||||
:loading="loading"
|
||||
:filter="filter"
|
||||
binary-state-sort
|
||||
v-on:request="onRequest"
|
||||
flat
|
||||
bordered
|
||||
class="no-shadow"
|
||||
:rows-per-page-options="[10, 20, 50, 100]"
|
||||
>
|
||||
<template v-slot:top-right>
|
||||
<q-input borderless dense debounce="300" v-model="filter" placeholder="Search logs...">
|
||||
<template v-slot:append>
|
||||
<q-icon name="search"></q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
|
||||
<template v-slot:body-cell-level="props">
|
||||
<q-td :props="props">
|
||||
<q-badge :color="getLevelColor(props.value)" rounded>
|
||||
{{ props.value }}
|
||||
</q-badge>
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<template v-slot:body-cell-timestamp="props">
|
||||
<q-td :props="props">
|
||||
{{ formatDate(props.value) }}
|
||||
</q-td>
|
||||
</template>
|
||||
</q-table>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.uppercase { text-transform: uppercase; font-size: 0.7rem; }
|
||||
.clean-card { border-radius: 12px; }
|
||||
</style>
|
||||
|
||||
@section Scripts {
|
||||
<script>
|
||||
app.mixin({
|
||||
data() {
|
||||
return {
|
||||
filter: '',
|
||||
loading: false,
|
||||
pagination: {
|
||||
sortBy: 'timestamp',
|
||||
descending: true,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
rowsNumber: 0
|
||||
},
|
||||
columns: [
|
||||
{ name: 'timestamp', label: 'Timestamp (UTC)', field: 'timestamp', align: 'left', sortable: true },
|
||||
{ name: 'level', label: 'Level', field: 'level', align: 'center', sortable: true },
|
||||
{ name: 'category', label: 'Category', field: 'category', align: 'left', sortable: true },
|
||||
{ name: 'message', label: 'Message', field: 'message', align: 'left', sortable: false },
|
||||
{ name: 'userId', label: 'User ID', field: 'userId', align: 'left', sortable: true }
|
||||
],
|
||||
rows: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.onRequest({
|
||||
pagination: this.pagination,
|
||||
filter: this.filter
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
async onRequest(props) {
|
||||
const { page, rowsPerPage, sortBy, descending } = props.pagination;
|
||||
const filter = props.filter;
|
||||
|
||||
this.loading = true;
|
||||
|
||||
try {
|
||||
const url = `/Account/GetEventLogsData?page=${page}&rowsPerPage=${rowsPerPage}&filter=${filter || ''}`;
|
||||
const response = await fetch(url);
|
||||
const data = await response.json();
|
||||
|
||||
this.rows = data.items;
|
||||
this.pagination.rowsNumber = data.totalItems;
|
||||
this.pagination.page = page;
|
||||
this.pagination.rowsPerPage = rowsPerPage;
|
||||
this.pagination.sortBy = sortBy;
|
||||
this.pagination.descending = descending;
|
||||
} catch (error) {
|
||||
console.error('Fetch error:', error);
|
||||
this.$q.notify({
|
||||
color: 'negative',
|
||||
message: 'Failed to load logs',
|
||||
icon: 'report_problem'
|
||||
});
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
getLevelColor(level) {
|
||||
switch (level?.toLowerCase()) {
|
||||
case 'info': return 'blue-6';
|
||||
case 'warning': return 'orange-8';
|
||||
case 'error': return 'negative';
|
||||
default: return 'grey-6';
|
||||
}
|
||||
},
|
||||
formatDate(val) {
|
||||
if (!val) return '—';
|
||||
const date = new Date(val);
|
||||
return date.toLocaleString();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
}
|
||||
@@ -0,0 +1,157 @@
|
||||
@{
|
||||
ViewData["Title"] = "Token Store";
|
||||
}
|
||||
|
||||
<div class="animate__animated animate__fadeIn">
|
||||
<div class="row items-center q-mb-lg">
|
||||
<div class="col">
|
||||
<h1 class="text-h4 text-weight-bold text-primary q-ma-none">Identity Store</h1>
|
||||
<div class="text-subtitle2 text-grey-6 uppercase q-mt-xs" style="letter-spacing: 1px">Refresh Token Management</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<q-btn flat round color="primary" icon="refresh" v-on:click="onRequest({ pagination })">
|
||||
<q-tooltip>Refresh Data</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-card flat class="clean-card overflow-hidden">
|
||||
<q-table
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
row-key="id"
|
||||
v-model:pagination="pagination"
|
||||
:loading="loading"
|
||||
:filter="filter"
|
||||
binary-state-sort
|
||||
v-on:request="onRequest"
|
||||
flat
|
||||
bordered
|
||||
class="no-shadow"
|
||||
:rows-per-page-options="[10, 20, 50]"
|
||||
>
|
||||
<template v-slot:top-right>
|
||||
<q-input borderless dense debounce="300" v-model="filter" placeholder="Search tokens...">
|
||||
<template v-slot:append>
|
||||
<q-icon name="search"></q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
|
||||
<template v-slot:body-cell-provider="props">
|
||||
<q-td :props="props">
|
||||
<div class="row items-center">
|
||||
<q-icon :name="getProviderIcon(props.value)"
|
||||
:color="getProviderColor(props.value)"
|
||||
size="20px"
|
||||
class="q-mr-sm"></q-icon>
|
||||
{{ props.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<template v-slot:body-cell-enabled="props">
|
||||
<q-td :props="props" class="text-center">
|
||||
<q-icon :name="props.value ? 'check_circle' : 'cancel'"
|
||||
:color="props.value ? 'positive' : 'grey-5'"
|
||||
size="20px"></q-icon>
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<template v-slot:body-cell-lastUpdated="props">
|
||||
<q-td :props="props">
|
||||
{{ formatDate(props.value) }}
|
||||
</q-td>
|
||||
</template>
|
||||
</q-table>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.uppercase { text-transform: uppercase; font-size: 0.7rem; }
|
||||
.clean-card { border-radius: 12px; }
|
||||
</style>
|
||||
|
||||
@section Scripts {
|
||||
<script>
|
||||
app.mixin({
|
||||
data() {
|
||||
return {
|
||||
filter: '',
|
||||
loading: false,
|
||||
pagination: {
|
||||
sortBy: 'lastUpdated',
|
||||
descending: true,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
rowsNumber: 0
|
||||
},
|
||||
columns: [
|
||||
{ name: 'userId', label: 'User ID (GUID)', field: 'userId', align: 'left', sortable: true },
|
||||
{ name: 'userEmail', label: 'Email / Account ID', field: 'userEmail', align: 'left', sortable: true },
|
||||
{ name: 'tenant', label: 'Tenant ID / Domain', field: 'tenant', align: 'left', sortable: true },
|
||||
{ name: 'provider', label: 'Provider', field: 'provider', align: 'left', sortable: true },
|
||||
{ name: 'lastUpdated', label: 'Last Updated (UTC)', field: 'lastUpdated', align: 'left', sortable: true },
|
||||
{ name: 'enabled', label: 'Active', field: 'enabled', align: 'center', sortable: true }
|
||||
],
|
||||
rows: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.onRequest({
|
||||
pagination: this.pagination,
|
||||
filter: this.filter
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
async onRequest(props) {
|
||||
const { page, rowsPerPage, sortBy, descending } = props.pagination;
|
||||
const filter = props.filter;
|
||||
|
||||
this.loading = true;
|
||||
|
||||
try {
|
||||
const url = `/Account/GetTokensData?page=${page}&rowsPerPage=${rowsPerPage}&filter=${filter || ''}`;
|
||||
const response = await fetch(url);
|
||||
const data = await response.json();
|
||||
|
||||
this.rows = data.items;
|
||||
this.pagination.rowsNumber = data.totalItems;
|
||||
this.pagination.page = page;
|
||||
this.pagination.rowsPerPage = rowsPerPage;
|
||||
this.pagination.sortBy = sortBy;
|
||||
this.pagination.descending = descending;
|
||||
} catch (error) {
|
||||
console.error('Fetch error:', error);
|
||||
this.$q.notify({
|
||||
color: 'negative',
|
||||
message: 'Failed to load tokens',
|
||||
icon: 'report_problem'
|
||||
});
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
getProviderIcon(provider) {
|
||||
switch (provider?.toLowerCase()) {
|
||||
case 'microsoft': return 'widgets';
|
||||
case 'google': return 'login';
|
||||
default: return 'help';
|
||||
}
|
||||
},
|
||||
getProviderColor(provider) {
|
||||
switch (provider?.toLowerCase()) {
|
||||
case 'microsoft': return 'blue-7';
|
||||
case 'google': return 'positive';
|
||||
default: return 'grey-7';
|
||||
}
|
||||
},
|
||||
formatDate(val) {
|
||||
if (!val) return '—';
|
||||
const date = new Date(val);
|
||||
return date.toLocaleString();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
}
|
||||
@@ -1,62 +1,182 @@
|
||||
@{
|
||||
ViewData["Title"] = "Start Page";
|
||||
var pictureUrl = User.FindFirst("app.picture")?.Value
|
||||
?? User.FindFirst(System.Security.Claims.ClaimTypes.Uri)?.Value;
|
||||
var isSubscribed = ViewData["IsSubscribed"] as bool? ?? false;
|
||||
var lastRun = ViewData["WorkerLastRun"] as string;
|
||||
var nextRun = ViewData["WorkerNextRun"] as string;
|
||||
var lastResult = ViewData["WorkerLastResult"] as string;
|
||||
}
|
||||
ViewData["Title"] = "Dashboard";
|
||||
var portraitUrl = User.FindFirst("app.picture")?.Value
|
||||
?? User.FindFirst(System.Security.Claims.ClaimTypes.Uri)?.Value;
|
||||
var isSubscribed = ViewData["IsSubscribed"] as bool? ?? false;
|
||||
var lastRun = ViewData["WorkerLastRun"] as string;
|
||||
var nextRun = ViewData["WorkerNextRun"] as string;
|
||||
var lastResult = ViewData["WorkerLastResult"] as string;
|
||||
}
|
||||
|
||||
<div class="text-center">
|
||||
<h1 class="display-4">Welcome to Hotline Planner</h1>
|
||||
|
||||
@if (User.Identity != null && User.Identity.IsAuthenticated)
|
||||
{
|
||||
@if (!string.IsNullOrEmpty(pictureUrl))
|
||||
{
|
||||
<img src="@pictureUrl" alt="Profile Picture" style="width: 80px; height: 80px; border-radius: 50%; margin-bottom: 15px;" />
|
||||
}
|
||||
else
|
||||
{
|
||||
<!-- Placeholder for users without a profile picture (e.g., from Microsoft login) -->
|
||||
<div style="width: 80px; height: 80px; border-radius: 50%; background-color: #ddd; display: inline-block; margin-bottom: 15px;"></div>
|
||||
}
|
||||
|
||||
<h4 class="lead">Hello, @User.Identity.Name!</h4>
|
||||
<p>You have successfully logged in.</p>
|
||||
<div class="mb-3">
|
||||
<form asp-controller="Account" asp-action="ToggleSubscription" method="post" style="display:inline-block;">
|
||||
<button type="submit" class="btn btn-outline-secondary">
|
||||
@(isSubscribed ? "Deactivate Calendar" : "Activate Calendar")
|
||||
</button>
|
||||
</form>
|
||||
<span class="ms-2">Status: <strong>@(isSubscribed ? "Active" : "Inactive")</strong></span>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div>Last run: <strong>@(lastRun ?? "n/a")</strong></div>
|
||||
<div>Next run: <strong>@(nextRun ?? "n/a")</strong></div>
|
||||
<div>Last result: <strong>@(lastResult ?? "n/a")</strong></div>
|
||||
</div>
|
||||
<form asp-controller="Account" asp-action="CreateCalendarEvent" method="post">
|
||||
<button type="submit" class="btn btn-outline-primary">Add Calendar Event</button>
|
||||
</form>
|
||||
<form asp-controller="Account" asp-action="Logout" method="post">
|
||||
<button type="submit" class="btn btn-outline-danger">Log Out</button>
|
||||
</form>
|
||||
}
|
||||
else
|
||||
{
|
||||
<p class="lead">Please sign in to continue.</p>
|
||||
<div class="d-grid gap-2 col-md-4 mx-auto">
|
||||
<form asp-controller="Account" asp-action="ExternalLogin" method="post">
|
||||
<input type="hidden" name="provider" value="Microsoft" />
|
||||
<button type="submit" class="btn btn-lg btn-primary w-100">Login with Microsoft</button>
|
||||
</form>
|
||||
<form asp-controller="Account" asp-action="ExternalLogin" method="post">
|
||||
<input type="hidden" name="provider" value="Google" />
|
||||
<button type="submit" class="btn btn-lg btn-success w-100">Login with Google</button>
|
||||
</form>
|
||||
<div class="row q-col-gutter-xl justify-center items-center" style="min-height: 70vh">
|
||||
<div class="col-12 col-md-8 col-lg-6">
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="text-center q-mb-xl">
|
||||
<h1 class="text-h3 text-weight-bold text-primary q-mb-sm">NextGen Dashboard</h1>
|
||||
<p class="text-subtitle1 text-grey-7">Real-time enterprise calendar synchronization</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- AUTHENTICATED VIEW -->
|
||||
<div v-if="isAuthenticated" class="animate__animated animate__fadeIn">
|
||||
<q-card flat class="clean-card q-mb-lg overflow-hidden">
|
||||
<q-card-section class="q-pa-xl bg-grey-1 text-center border-bottom">
|
||||
@if (!string.IsNullOrEmpty(portraitUrl))
|
||||
{
|
||||
<q-avatar size="100px" class="q-mb-md shadow-1 border-white">
|
||||
<img src="@portraitUrl">
|
||||
</q-avatar>
|
||||
}
|
||||
else
|
||||
{
|
||||
<q-avatar size="100px" font-size="48px" color="primary" text-color="white" icon="person" class="q-mb-md shadow-1"></q-avatar>
|
||||
}
|
||||
<div class="text-h5 text-weight-bold text-grey-9">{{userName}}</div>
|
||||
<div class="text-caption text-grey-6 text-uppercase q-mt-xs" style="letter-spacing: 1px">Active Session</div>
|
||||
<q-btn flat dense rounded color="grey-6" icon="refresh" label="Update Photo" size="sm" class="q-mt-md" v-on:click="refreshPhoto"></q-btn>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section class="q-pa-lg">
|
||||
<div class="row items-center justify-between q-mb-lg">
|
||||
<div class="text-subtitle1 text-weight-bold">Engine Status</div>
|
||||
<q-chip :color="isSubscribed ? 'positive' : 'grey-4'"
|
||||
:text-color="isSubscribed ? 'white' : 'grey-9'"
|
||||
:icon="isSubscribed ? 'check_circle' : 'pause_circle'"
|
||||
class="q-px-md">
|
||||
{{ isSubscribed ? 'Running' : 'Paused' }}
|
||||
</q-chip>
|
||||
</div>
|
||||
|
||||
<div class="bg-grey-1 q-pa-md rounded-borders border">
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-4 text-center border-right">
|
||||
<div class="text-caption text-grey-6 uppercase">Last Sync</div>
|
||||
<div class="text-weight-bold text-grey-9">{{ lastRun || 'Waiting...' }}</div>
|
||||
</div>
|
||||
<div class="col-4 text-center border-right">
|
||||
<div class="text-caption text-grey-6 uppercase">Next Run</div>
|
||||
<div class="text-weight-bold text-grey-9 text-primary">{{ nextRun || 'Scheduled' }}</div>
|
||||
</div>
|
||||
<div class="col-4 text-center">
|
||||
<div class="text-caption text-grey-6 uppercase">Health</div>
|
||||
<div>
|
||||
<q-badge :color="lastResult === 'Success' ? 'positive' : 'negative'" v-if="lastResult" rounded>
|
||||
{{ lastResult }}
|
||||
</q-badge>
|
||||
<span v-else class="text-grey-4">—</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="center" class="q-pb-xl q-px-xl">
|
||||
<q-btn :label="isSubscribed ? 'Stop Sync Engine' : 'Start Sync Engine'"
|
||||
:color="isSubscribed ? 'negative' : 'primary'"
|
||||
:icon="isSubscribed ? 'stop' : 'play_arrow'"
|
||||
unelevated
|
||||
rounded
|
||||
size="lg"
|
||||
class="full-width q-py-md text-weight-bold"
|
||||
v-on:click="toggleSubscription"></q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-12 col-sm-4">
|
||||
<q-btn outline color="secondary" icon="update" label="Manual Sync" class="full-width q-py-md rounded-borders" v-on:click="createEvent"></q-btn>
|
||||
</div>
|
||||
<div class="col-12 col-sm-4">
|
||||
<q-btn outline color="grey-7" icon="event" label="View Logs" class="full-width q-py-md rounded-borders" href="/Account/EventLogs"></q-btn>
|
||||
</div>
|
||||
<div class="col-12 col-sm-4">
|
||||
<q-btn flat color="grey-6" icon="logout" label="End Session" class="full-width q-py-md rounded-borders" v-on:click="logout"></q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LOGIN VIEW -->
|
||||
<div v-else class="animate__animated animate__fadeIn">
|
||||
<q-card flat class="clean-card q-pa-xl text-center">
|
||||
<q-avatar size="80px" color="blue-1" text-color="primary" icon="security" class="q-mb-lg"></q-avatar>
|
||||
<div class="text-h5 text-weight-bold q-mb-sm text-grey-9">Identity Portal</div>
|
||||
<p class="text-body1 text-grey-7 q-mb-xl">Please sign in with your enterprise credentials to access the NextGen synchronization platform.</p>
|
||||
|
||||
<div class="column q-gutter-md">
|
||||
<q-btn unelevated color="primary" size="lg" rounded v-on:click="login('Microsoft')" class="full-width q-py-md shadow-1">
|
||||
<q-icon name="widgets" class="q-mr-sm"></q-icon>
|
||||
Connect via Microsoft 365
|
||||
</q-btn>
|
||||
|
||||
<q-btn outline color="grey-7" size="lg" rounded v-on:click="login('Google')" class="full-width q-py-md">
|
||||
<q-icon name="login" class="q-mr-sm" color="negative"></q-icon>
|
||||
Connect via Google Workspace
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div class="q-mt-xl text-caption text-grey-5 flex flex-center items-center">
|
||||
<q-icon name="lock" class="q-mr-xs"></q-icon> Protected by secure RSA 4096-bit encryption
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.border-bottom { border-bottom: 1px solid rgba(0,0,0,0.05); }
|
||||
.border-right { border-right: 1px solid rgba(0,0,0,0.05); }
|
||||
.border { border: 1px solid rgba(0,0,0,0.05); }
|
||||
.uppercase { text-transform: uppercase; font-size: 0.65rem; letter-spacing: 1px; margin-bottom: 4px; }
|
||||
</style>
|
||||
|
||||
@section Scripts {
|
||||
<script>
|
||||
app.mixin({
|
||||
data() {
|
||||
return {
|
||||
isSubscribed: @(isSubscribed.ToString().ToLower()),
|
||||
lastRun: '@lastRun',
|
||||
nextRun: '@nextRun',
|
||||
lastResult: '@lastResult'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
login(provider) {
|
||||
const form = document.createElement('form');
|
||||
form.method = 'POST';
|
||||
form.action = '/Account/ExternalLogin';
|
||||
|
||||
const providerInput = document.createElement('input');
|
||||
providerInput.type = 'hidden';
|
||||
providerInput.name = 'provider';
|
||||
providerInput.value = provider;
|
||||
|
||||
form.appendChild(providerInput);
|
||||
document.body.appendChild(form);
|
||||
form.submit();
|
||||
},
|
||||
toggleSubscription() {
|
||||
const form = document.createElement('form');
|
||||
form.method = 'POST';
|
||||
form.action = '/Account/ToggleSubscription';
|
||||
document.body.appendChild(form);
|
||||
form.submit();
|
||||
},
|
||||
createEvent() {
|
||||
const form = document.createElement('form');
|
||||
form.method = 'POST';
|
||||
form.action = '/Account/CreateCalendarEvent';
|
||||
document.body.appendChild(form);
|
||||
form.submit();
|
||||
},
|
||||
refreshPhoto() {
|
||||
const form = document.createElement('form');
|
||||
form.method = 'POST';
|
||||
form.action = '/Account/SyncProfilePicture';
|
||||
document.body.appendChild(form);
|
||||
form.submit();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
}
|
||||
|
||||
@@ -3,48 +3,222 @@
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>@ViewData["Title"] - HotlinePlanner</title>
|
||||
<script type="importmap"></script>
|
||||
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="~/HotlinePlanner.styles.css" asp-append-version="true" />
|
||||
<title>@ViewData["Title"] - Hotline Planner</title>
|
||||
|
||||
<!-- Premium Typography & Icons -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" type="text/css">
|
||||
<link href="https://cdn.jsdelivr.net/npm/animate.css@4.0.0/animate.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- Quasar CSS (Stable CDN) -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/quasar@2.14.2/dist/quasar.prod.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--brand-primary: #1976D2;
|
||||
--brand-secondary: #26A69A;
|
||||
--bg-light: #F8F9FA;
|
||||
--border-color: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Outfit', sans-serif;
|
||||
background-color: var(--bg-light);
|
||||
color: #1D1D1D;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.clean-header {
|
||||
background: white !important;
|
||||
color: #1D1D1D !important;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.clean-card {
|
||||
background: white;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.02);
|
||||
}
|
||||
|
||||
[v-cloak] { display: none !important; }
|
||||
|
||||
.q-toolbar__title {
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.5px;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.q-btn {
|
||||
text-transform: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav-active {
|
||||
color: var(--brand-primary) !important;
|
||||
background: rgba(25, 118, 210, 0.05);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.border-top { border-top: 1px solid var(--border-color); }
|
||||
|
||||
/* Page scale transition */
|
||||
.page-fade-enter-active, .page-fade-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.page-fade-enter-from { opacity: 0; transform: scale(0.99); }
|
||||
.page-fade-leave-to { opacity: 0; transform: scale(1.01); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">HotlinePlanner</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
|
||||
aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
|
||||
<ul class="navbar-nav flex-grow-1">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div id="q-app" v-cloak>
|
||||
<q-layout view="lHh Lpr lFf">
|
||||
<q-header elevated class="clean-header">
|
||||
<q-toolbar class="q-px-lg">
|
||||
<q-btn flat round dense icon="menu" color="primary" v-on:click="leftDrawerOpen = !leftDrawerOpen"></q-btn>
|
||||
<q-toolbar-title class="text-primary">
|
||||
Hotline Planner
|
||||
</q-toolbar-title>
|
||||
<div class="gt-xs text-grey-6 q-mr-lg">NextGen v{{appVersion}}</div>
|
||||
|
||||
<div v-if="isAuthenticated">
|
||||
<q-btn flat no-caps color="primary" class="q-px-md">
|
||||
<q-avatar size="32px" class="q-mr-sm">
|
||||
<q-icon name="account_circle" size="32px"></q-icon>
|
||||
</q-avatar>
|
||||
<span class="gt-sm">{{userName}}</span>
|
||||
<q-menu transition-show="jump-down" transition-hide="jump-up" class="clean-card shadow-12">
|
||||
<q-list style="min-width: 200px">
|
||||
<q-item class="q-py-md">
|
||||
<q-item-section avatar>
|
||||
<q-avatar icon="person" color="grey-2" text-color="primary"></q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label class="text-weight-bold">{{userName}}</q-item-label>
|
||||
<q-item-label caption>Administrator</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-separator></q-separator>
|
||||
<q-item clickable v-v-close-popup v-on:click="logout">
|
||||
<q-item-section avatar>
|
||||
<q-icon name="logout" color="negative"></q-icon>
|
||||
</q-item-section>
|
||||
<q-item-section class="text-negative">Sign Out</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-toolbar>
|
||||
</q-header>
|
||||
|
||||
<q-drawer v-model="leftDrawerOpen" bordered class="bg-white" :width="260">
|
||||
<q-scroll-area class="fit">
|
||||
<q-list padding class="q-mt-md">
|
||||
<q-item-label header class="text-weight-bold text-uppercase text-grey-6 q-px-lg" style="font-size: 0.7rem; letter-spacing: 1px;">Navigation</q-item-label>
|
||||
|
||||
<q-item clickable tag="a" href="/" class="q-mx-md q-mb-xs rounded-borders" active-class="nav-active" :active="isCurrentPath('/')">
|
||||
<q-item-section avatar>
|
||||
<q-icon name="dashboard"></q-icon>
|
||||
</q-item-section>
|
||||
<q-item-section>Dashboard</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item-label header class="text-weight-bold text-uppercase text-grey-6 q-px-lg q-mt-md" style="font-size: 0.7rem; letter-spacing: 1px;">Auditing</q-item-label>
|
||||
|
||||
<q-item clickable tag="a" href="/Account/EventLogs" class="q-mx-md q-mb-xs rounded-borders" active-class="nav-active" :active="isCurrentPath('/Account/EventLogs')">
|
||||
<q-item-section avatar>
|
||||
<q-icon name="assignment"></q-icon>
|
||||
</q-item-section>
|
||||
<q-item-section>Event Logs</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item clickable tag="a" href="/Account/Tokens" class="q-mx-md q-mb-xs rounded-borders" active-class="nav-active" :active="isCurrentPath('/Account/Tokens')">
|
||||
<q-item-section avatar>
|
||||
<q-icon name="vpn_key"></q-icon>
|
||||
</q-item-section>
|
||||
<q-item-section>Token Store</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item-label header class="text-weight-bold text-uppercase text-grey-6 q-px-lg q-mt-md" style="font-size: 0.7rem; letter-spacing: 1px;">System</q-item-label>
|
||||
|
||||
<q-item clickable tag="a" href="/Home/Privacy" class="q-mx-md rounded-borders" active-class="nav-active" :active="isCurrentPath('/Home/Privacy')">
|
||||
<q-item-section avatar>
|
||||
<q-icon name="security"></q-icon>
|
||||
</q-item-section>
|
||||
<q-item-section>Privacy Policy</q-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-scroll-area>
|
||||
</q-drawer>
|
||||
|
||||
<q-page-container>
|
||||
<q-page class="q-pa-xl">
|
||||
<div class="max-width-1200 q-mx-auto">
|
||||
@RenderBody()
|
||||
</div>
|
||||
</q-page>
|
||||
</q-page-container>
|
||||
|
||||
<q-footer class="bg-white text-grey-6 q-pa-md text-center border-top">
|
||||
<div class="text-caption">
|
||||
© @DateTime.Now.Year - Hotline Planner NextGen - Secure Workforce Intelligence
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="container">
|
||||
<main role="main" class="pb-3">
|
||||
@RenderBody()
|
||||
</main>
|
||||
</q-footer>
|
||||
</q-layout>
|
||||
</div>
|
||||
|
||||
<footer class="border-top footer text-muted">
|
||||
<div class="container">
|
||||
© 2026 - HotlinePlanner - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="~/lib/jquery/dist/jquery.min.js"></script>
|
||||
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="~/js/site.js" asp-append-version="true"></script>
|
||||
<!-- Vue 3 & Quasar (Stable CDNs) -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/quasar@2.14.2/dist/quasar.umd.prod.js"></script>
|
||||
|
||||
<script>
|
||||
const app = Vue.createApp({
|
||||
data() {
|
||||
return {
|
||||
leftDrawerOpen: false,
|
||||
appVersion: '2.0.0',
|
||||
isAuthenticated: @(User.Identity?.IsAuthenticated.ToString().ToLower() ?? "false"),
|
||||
userName: '@(User.Identity?.Name ?? "")'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
logout() {
|
||||
const form = document.createElement('form');
|
||||
form.method = 'POST';
|
||||
form.action = '/Account/Logout';
|
||||
document.body.appendChild(form);
|
||||
form.submit();
|
||||
},
|
||||
isCurrentPath(path) {
|
||||
return window.location.pathname === path;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
app.use(Quasar, {
|
||||
config: {
|
||||
brand: {
|
||||
primary: '#1976D2',
|
||||
secondary: '#26A69A',
|
||||
accent: '#9C27B0',
|
||||
dark: '#1D1D1D',
|
||||
positive: '#2E7D32',
|
||||
negative: '#D32F2F',
|
||||
info: '#0288D1',
|
||||
warning: '#F57C00'
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@await RenderSectionAsync("Scripts", required: false)
|
||||
|
||||
<script>
|
||||
if (!window.vueAppMounted) {
|
||||
app.mount('#q-app');
|
||||
window.vueAppMounted = true;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user