Add project files.
This commit is contained in:
@@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<base href="/" />
|
||||
<ResourcePreloader />
|
||||
<link rel="stylesheet" href="app.min.css" />
|
||||
<ImportMap />
|
||||
<link rel="icon" type="image/png" href="favicon.png" />
|
||||
<HeadOutlet />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<Routes />
|
||||
<ReconnectModal />
|
||||
<script src="@Assets["_framework/blazor.web.js"]"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,23 @@
|
||||
@inherits LayoutComponentBase
|
||||
|
||||
<div class="flex flex-col sm:flex-row relative min-h-screen">
|
||||
<div class="bg-gradient-to-b from-[#052767] to-[#3a0647] sm:w-[250px] sm:h-screen sm:sticky sm:top-0">
|
||||
<NavMenu />
|
||||
</div>
|
||||
|
||||
<main class="flex-1 flex flex-col">
|
||||
<div class="bg-[#f7f7f7] border-b border-[#d6d5d5] flex items-center justify-between sm:justify-end h-14 sm:sticky sm:top-0 z-10 px-4 sm:px-8">
|
||||
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank" class="whitespace-nowrap sm:ml-6 no-underline hover:underline overflow-hidden text-ellipsis">About</a>
|
||||
</div>
|
||||
|
||||
<article class="px-4 sm:px-8 py-4">
|
||||
@Body
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div id="blazor-error-ui" class="hidden fixed bottom-0 left-0 w-full bg-[#ffffe0] p-3 shadow-[0_-1px_2px_rgba(0,0,0,0.2)] z-[1000]" data-nosnippet>
|
||||
An unhandled error has occurred.
|
||||
<a href="." class="underline text-blue-600">Reload</a>
|
||||
<span class="dismiss cursor-pointer absolute right-3 top-2 text-gray-700">🗙</span>
|
||||
</div>
|
||||
@@ -0,0 +1,32 @@
|
||||
<div class="min-h-[3.5rem] bg-black/40 flex items-center px-3 relative">
|
||||
<div class="container-fluid">
|
||||
<a class="text-[1.1rem] text-white no-underline" href="">Tmt.SaqaTravel</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="checkbox" title="Navigation menu" class="peer appearance-none cursor-pointer w-14 h-10 text-white absolute top-2 right-4 border border-white/10 rounded bg-[url('data:image/svg+xml,%3csvg_xmlns=%27http://www.w3.org/2000/svg%27_viewBox=%270_0_30_30%27%3e%3cpath_stroke=%27rgba(255,255,255,0.55)%27_stroke-linecap=%27round%27_stroke-miterlimit=%2710%27_stroke-width=%272%27_d=%27M4_7h22M4_15h22M4_23h22%27/%3e%3c/svg%3e')] bg-no-repeat bg-center bg-[length:1.75rem] checked:bg-white/50 sm:hidden" />
|
||||
|
||||
<div class="hidden peer-checked:block sm:block sm:h-[calc(100vh-3.5rem)] sm:overflow-y-auto" onclick="document.querySelector('.peer').click()">
|
||||
<nav class="flex flex-col">
|
||||
<div class="text-[0.9rem] pb-2 pt-4 px-3">
|
||||
<NavLink class="flex items-center h-12 w-full text-[#d7d7d7] rounded hover:bg-white/10 hover:text-white transition-colors px-3 [&.active]:bg-white/[0.37] [&.active]:text-white" href="" Match="NavLinkMatch.All">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-5 h-5 mr-3" viewBox="0 0 16 16" aria-hidden="true"><path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z" /></svg>
|
||||
Home
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<div class="text-[0.9rem] pb-2 px-3">
|
||||
<NavLink class="flex items-center h-12 w-full text-[#d7d7d7] rounded hover:bg-white/10 hover:text-white transition-colors px-3 [&.active]:bg-white/[0.37] [&.active]:text-white" href="counter">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-5 h-5 mr-3" viewBox="0 0 16 16" aria-hidden="true"><path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z" /></svg>
|
||||
Counter
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<div class="text-[0.9rem] pb-4 px-3">
|
||||
<NavLink class="flex items-center h-12 w-full text-[#d7d7d7] rounded hover:bg-white/10 hover:text-white transition-colors px-3 [&.active]:bg-white/[0.37] [&.active]:text-white" href="weather">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-5 h-5 mr-3" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z" /></svg>
|
||||
Weather
|
||||
</NavLink>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -0,0 +1,118 @@
|
||||
<style>
|
||||
.components-reconnect-first-attempt-visible,
|
||||
.components-reconnect-repeated-attempt-visible,
|
||||
.components-reconnect-failed-visible,
|
||||
.components-pause-visible,
|
||||
.components-resume-failed-visible,
|
||||
.components-rejoining-animation {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
|
||||
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
|
||||
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
|
||||
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
|
||||
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
|
||||
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
|
||||
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<dialog id="components-reconnect-modal" class="bg-white w-80 my-[20vh] mx-auto p-8 rounded-lg shadow-lg opacity-0 transition-all duration-500 backdrop:bg-black/40 backdrop:animate-[fadeIn_0.5s_ease-in-out] open:animate-[slideUp_1.5s_cubic-bezier(0.05,0.89,0.25,1.02)_0.3s,fadeIn_0.5s_ease-in-out_0.3s]" data-nosnippet>
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<div class="components-rejoining-animation relative w-20 h-20" aria-hidden="true">
|
||||
<div class="absolute border-[3px] border-[#0087ff] rounded-full animate-[ping_1.5s_cubic-bezier(0,0.2,0.8,1)_infinite]"></div>
|
||||
<div class="absolute border-[3px] border-[#0087ff] rounded-full animate-[ping_1.5s_cubic-bezier(0,0.2,0.8,1)_infinite] -delay-500"></div>
|
||||
</div>
|
||||
<p class="components-reconnect-first-attempt-visible m-0 text-center">
|
||||
Rejoining the server...
|
||||
</p>
|
||||
<p class="components-reconnect-repeated-attempt-visible m-0 text-center">
|
||||
Rejoin failed... trying again in <span id="components-seconds-to-next-attempt"></span> seconds.
|
||||
</p>
|
||||
<p class="components-reconnect-failed-visible m-0 text-center">
|
||||
Failed to rejoin.<br />Please retry or reload the page.
|
||||
</p>
|
||||
<button id="components-reconnect-button" class="components-reconnect-failed-visible border-0 bg-[#6b9ed2] text-white py-1 px-6 rounded hover:bg-[#3b6ea2] active:bg-[#6b9ed2]">
|
||||
Retry
|
||||
</button>
|
||||
<p class="components-pause-visible m-0 text-center">
|
||||
The session has been paused by the server.
|
||||
</p>
|
||||
<p class="components-resume-failed-visible m-0 text-center">
|
||||
Failed to resume the session.<br />Please retry or reload the page.
|
||||
</p>
|
||||
<button id="components-resume-button" class="components-pause-visible components-resume-failed-visible border-0 bg-[#6b9ed2] text-white py-1 px-6 rounded hover:bg-[#3b6ea2] active:bg-[#6b9ed2]">
|
||||
Resume
|
||||
</button>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
// Set up event handlers
|
||||
const reconnectModal = document.getElementById("components-reconnect-modal");
|
||||
reconnectModal.addEventListener("components-reconnect-state-changed", handleReconnectStateChanged);
|
||||
|
||||
const retryButton = document.getElementById("components-reconnect-button");
|
||||
retryButton.addEventListener("click", retry);
|
||||
|
||||
const resumeButton = document.getElementById("components-resume-button");
|
||||
resumeButton.addEventListener("click", resume);
|
||||
|
||||
function handleReconnectStateChanged(event) {
|
||||
if (event.detail.state === "show") {
|
||||
reconnectModal.showModal();
|
||||
} else if (event.detail.state === "hide") {
|
||||
reconnectModal.close();
|
||||
} else if (event.detail.state === "failed") {
|
||||
document.addEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
|
||||
} else if (event.detail.state === "rejected") {
|
||||
location.reload();
|
||||
}
|
||||
}
|
||||
|
||||
async function retry() {
|
||||
document.removeEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
|
||||
|
||||
try {
|
||||
// Reconnect will asynchronously return:
|
||||
// - true to mean success
|
||||
// - false to mean we reached the server, but it rejected the connection (e.g., unknown circuit ID)
|
||||
// - exception to mean we didn't reach the server (this can be sync or async)
|
||||
const successful = await Blazor.reconnect();
|
||||
if (!successful) {
|
||||
// We have been able to reach the server, but the circuit is no longer available.
|
||||
// We'll reload the page so the user can continue using the app as quickly as possible.
|
||||
const resumeSuccessful = await Blazor.resumeCircuit();
|
||||
if (!resumeSuccessful) {
|
||||
location.reload();
|
||||
} else {
|
||||
reconnectModal.close();
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
// We got an exception, server is currently unavailable
|
||||
document.addEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
|
||||
}
|
||||
}
|
||||
|
||||
async function resume() {
|
||||
try {
|
||||
const successful = await Blazor.resumeCircuit();
|
||||
if (!successful) {
|
||||
location.reload();
|
||||
}
|
||||
} catch {
|
||||
reconnectModal.classList.replace("components-reconnect-paused", "components-reconnect-resume-failed");
|
||||
}
|
||||
}
|
||||
|
||||
async function retryWhenDocumentBecomesVisible() {
|
||||
if (document.visibilityState === "visible") {
|
||||
await retry();
|
||||
}
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
@@ -0,0 +1,19 @@
|
||||
@page "/counter"
|
||||
@rendermode InteractiveServer
|
||||
|
||||
<PageTitle>Counter</PageTitle>
|
||||
|
||||
<h1 class="text-3xl font-bold mb-4">Counter</h1>
|
||||
|
||||
<p role="status" class="mb-4">Current count: @currentCount</p>
|
||||
|
||||
<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors" @onclick="IncrementCount">Click me</button>
|
||||
|
||||
@code {
|
||||
private int currentCount = 0;
|
||||
|
||||
private void IncrementCount()
|
||||
{
|
||||
currentCount++;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
@page "/Error"
|
||||
@using System.Diagnostics
|
||||
|
||||
<PageTitle>Error</PageTitle>
|
||||
|
||||
<h1 class="text-red-600 text-3xl font-bold mb-2">Error.</h1>
|
||||
<h2 class="text-red-600 text-xl mb-4">An error occurred while processing your request.</h2>
|
||||
|
||||
@if (ShowRequestId)
|
||||
{
|
||||
<p class="mb-4">
|
||||
<strong>Request ID:</strong> <code class="bg-gray-100 px-1 rounded">@RequestId</code>
|
||||
</p>
|
||||
}
|
||||
|
||||
<h3 class="text-lg font-semibold mt-4 mb-2">Development Mode</h3>
|
||||
<p class="mb-2">
|
||||
Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
|
||||
</p>
|
||||
<p>
|
||||
<strong>The Development environment shouldn't be enabled for deployed applications.</strong>
|
||||
It can result in displaying sensitive information from exceptions to end users.
|
||||
For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
|
||||
and restarting the app.
|
||||
</p>
|
||||
|
||||
@code {
|
||||
[CascadingParameter]
|
||||
private HttpContext? HttpContext { get; set; }
|
||||
|
||||
private string? RequestId { get; set; }
|
||||
private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
|
||||
|
||||
protected override void OnInitialized() =>
|
||||
RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
@page "/"
|
||||
|
||||
<PageTitle>Home</PageTitle>
|
||||
|
||||
<h1 class="text-3xl font-bold mb-4">Hello, world!</h1>
|
||||
|
||||
<p>Welcome to your new app.</p>
|
||||
@@ -0,0 +1,5 @@
|
||||
@page "/not-found"
|
||||
@layout MainLayout
|
||||
|
||||
<h3>Not Found</h3>
|
||||
<p>Sorry, the content you are looking for does not exist.</p>
|
||||
@@ -0,0 +1,66 @@
|
||||
@page "/weather"
|
||||
@attribute [StreamRendering]
|
||||
|
||||
<PageTitle>Weather</PageTitle>
|
||||
|
||||
<h1 class="text-3xl font-bold mb-4">Weather</h1>
|
||||
|
||||
<p class="mb-6 text-gray-700">This component demonstrates showing data.</p>
|
||||
|
||||
@if (forecasts == null)
|
||||
{
|
||||
<p class="italic text-gray-500">Loading...</p>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="overflow-x-auto shadow-sm ring-1 ring-black ring-opacity-5 rounded-lg bg-white">
|
||||
<table class="min-w-full text-left border-collapse">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th scope="col" class="px-6 py-3 border-b border-gray-300 text-sm font-semibold text-gray-900">Date</th>
|
||||
<th scope="col" class="px-6 py-3 border-b border-gray-300 text-sm font-semibold text-gray-900" aria-label="Temperature in Celsius">Temp. (C)</th>
|
||||
<th scope="col" class="px-6 py-3 border-b border-gray-300 text-sm font-semibold text-gray-900" aria-label="Temperature in Fahrenheit">Temp. (F)</th>
|
||||
<th scope="col" class="px-6 py-3 border-b border-gray-300 text-sm font-semibold text-gray-900">Summary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
@foreach (var forecast in forecasts)
|
||||
{
|
||||
<tr class="hover:bg-gray-50 transition-colors">
|
||||
<td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">@forecast.Date.ToShortDateString()</td>
|
||||
<td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">@forecast.TemperatureC</td>
|
||||
<td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">@forecast.TemperatureF</td>
|
||||
<td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">@forecast.Summary</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
|
||||
@code {
|
||||
private WeatherForecast[]? forecasts;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
// Simulate asynchronous loading to demonstrate streaming rendering
|
||||
await Task.Delay(500);
|
||||
|
||||
var startDate = DateOnly.FromDateTime(DateTime.Now);
|
||||
var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
|
||||
forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
|
||||
{
|
||||
Date = startDate.AddDays(index),
|
||||
TemperatureC = Random.Shared.Next(-20, 55),
|
||||
Summary = summaries[Random.Shared.Next(summaries.Length)]
|
||||
}).ToArray();
|
||||
}
|
||||
|
||||
private class WeatherForecast
|
||||
{
|
||||
public DateOnly Date { get; set; }
|
||||
public int TemperatureC { get; set; }
|
||||
public string? Summary { get; set; }
|
||||
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
|
||||
<Found Context="routeData">
|
||||
<RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
|
||||
<FocusOnNavigate RouteData="routeData" Selector="h1" />
|
||||
</Found>
|
||||
</Router>
|
||||
@@ -0,0 +1,11 @@
|
||||
@using System.Net.Http
|
||||
@using System.Net.Http.Json
|
||||
@using Microsoft.AspNetCore.Components.Forms
|
||||
@using Microsoft.AspNetCore.Components.Routing
|
||||
@using Microsoft.AspNetCore.Components.Web
|
||||
@using static Microsoft.AspNetCore.Components.Web.RenderMode
|
||||
@using Microsoft.AspNetCore.Components.Web.Virtualization
|
||||
@using Microsoft.JSInterop
|
||||
@using Tmt.SaqaTravel
|
||||
@using Tmt.SaqaTravel.Components
|
||||
@using Tmt.SaqaTravel.Components.Layout
|
||||
Reference in New Issue
Block a user