Prima configurazione e struttura
This commit is contained in:
@@ -1,16 +1,170 @@
|
||||
@inherits LayoutComponentBase
|
||||
@using System.Globalization
|
||||
@using SteUp.Shared.Core.Interface.IntegryApi
|
||||
@using SteUp.Shared.Core.Interface.System.Network
|
||||
@inherits LayoutComponentBase
|
||||
@inject INetworkService NetworkService
|
||||
@inject IIntegryApiService IntegryApiService
|
||||
|
||||
<MudThemeProvider Theme="_currentTheme" @ref="@_mudThemeProvider" @bind-IsDarkMode="@IsDarkMode" />
|
||||
<MudPopoverProvider/>
|
||||
<MudDialogProvider/>
|
||||
<MudSnackbarProvider/>
|
||||
|
||||
<div class="page">
|
||||
@*<div class="sidebar">
|
||||
<NavMenu />
|
||||
</div>*@
|
||||
|
||||
<NavMenu/>
|
||||
|
||||
<main>
|
||||
<article class="content px-4">
|
||||
<article>
|
||||
@Body
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@code {
|
||||
private MudThemeProvider _mudThemeProvider = null!;
|
||||
private bool IsDarkMode { get; set; }
|
||||
private string _mainContentClass = "";
|
||||
|
||||
//Connection state
|
||||
private bool _isNetworkAvailable;
|
||||
private bool _servicesIsDown;
|
||||
private bool _showWarning;
|
||||
|
||||
private DateTime _lastApiCheck = DateTime.MinValue;
|
||||
private const int DelaySeconds = 90;
|
||||
|
||||
private CancellationTokenSource? _cts;
|
||||
|
||||
private bool ServicesIsDown
|
||||
{
|
||||
get => _servicesIsDown;
|
||||
set
|
||||
{
|
||||
if (_servicesIsDown == value) return;
|
||||
_servicesIsDown = value;
|
||||
StateHasChanged();
|
||||
}
|
||||
}
|
||||
|
||||
private bool IsNetworkAvailable
|
||||
{
|
||||
get => _isNetworkAvailable;
|
||||
set
|
||||
{
|
||||
if (_isNetworkAvailable == value) return;
|
||||
_isNetworkAvailable = value;
|
||||
StateHasChanged();
|
||||
}
|
||||
}
|
||||
|
||||
private bool ShowWarning
|
||||
{
|
||||
get => _showWarning;
|
||||
set
|
||||
{
|
||||
if (_showWarning == value) return;
|
||||
_showWarning = value;
|
||||
StateHasChanged();
|
||||
}
|
||||
}
|
||||
|
||||
private readonly MudTheme _currentTheme = new()
|
||||
{
|
||||
PaletteLight = new PaletteLight()
|
||||
{
|
||||
Primary = "#ec4c41",
|
||||
Secondary = "#002339",
|
||||
Tertiary = "#dff2ff",
|
||||
TextPrimary = "#000"
|
||||
},
|
||||
PaletteDark = new PaletteDark
|
||||
{
|
||||
Primary = "#ec4c41",
|
||||
Secondary = "#002339",
|
||||
Tertiary = "#dff2ff",
|
||||
Surface = "#000406",
|
||||
Background = "#000406",
|
||||
TextPrimary = "#fff",
|
||||
GrayDark = "#E0E0E0"
|
||||
}
|
||||
};
|
||||
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
// if (firstRender)
|
||||
// {
|
||||
// var isDarkMode = LocalStorage.GetString("isDarkMode");
|
||||
|
||||
// if (isDarkMode == null && _mudThemeProvider != null)
|
||||
// {
|
||||
// IsDarkMode = await _mudThemeProvider.GetSystemPreference();
|
||||
// await _mudThemeProvider.WatchSystemPreference(OnSystemPreferenceChanged);
|
||||
// LocalStorage.SetString("isDarkMode", IsDarkMode.ToString());
|
||||
// StateHasChanged();
|
||||
// }
|
||||
// else
|
||||
// {
|
||||
// IsDarkMode = bool.Parse(isDarkMode!);
|
||||
// }
|
||||
|
||||
// if (IsDarkMode)
|
||||
// {
|
||||
// _mainContentClass += "is-dark";
|
||||
// StateHasChanged();
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
private async Task OnSystemPreferenceChanged(bool newValue)
|
||||
{
|
||||
IsDarkMode = newValue;
|
||||
}
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
_cts = new CancellationTokenSource();
|
||||
_ = CheckConnectionState(_cts.Token);
|
||||
|
||||
var culture = new CultureInfo("it-IT", false);
|
||||
|
||||
CultureInfo.CurrentCulture = culture;
|
||||
CultureInfo.CurrentUICulture = culture;
|
||||
}
|
||||
|
||||
private Task CheckConnectionState(CancellationToken token)
|
||||
{
|
||||
return Task.Run(async () =>
|
||||
{
|
||||
while (!token.IsCancellationRequested)
|
||||
{
|
||||
var isNetworkAvailable = NetworkService.IsNetworkAvailable();
|
||||
var servicesDown = ServicesIsDown;
|
||||
|
||||
if (isNetworkAvailable && (DateTime.UtcNow - _lastApiCheck).TotalSeconds >= DelaySeconds)
|
||||
{
|
||||
servicesDown = !await IntegryApiService.SystemOk();
|
||||
_lastApiCheck = DateTime.UtcNow;
|
||||
}
|
||||
|
||||
await InvokeAsync(async () =>
|
||||
{
|
||||
IsNetworkAvailable = isNetworkAvailable;
|
||||
ServicesIsDown = servicesDown;
|
||||
|
||||
await Task.Delay(1500, token);
|
||||
ShowWarning = !(IsNetworkAvailable && !ServicesIsDown);
|
||||
NetworkService.ConnectionAvailable = !ShowWarning;
|
||||
});
|
||||
|
||||
await Task.Delay(500, token);
|
||||
}
|
||||
}, token);
|
||||
}
|
||||
|
||||
public void Dispose()
|
||||
{
|
||||
_cts?.Cancel();
|
||||
_cts?.Dispose();
|
||||
}
|
||||
|
||||
}
|
||||
@@ -21,29 +21,29 @@ main {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.top-row ::deep a, .top-row ::deep .btn-link {
|
||||
white-space: nowrap;
|
||||
margin-left: 1.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
.top-row ::deep a, .top-row ::deep .btn-link {
|
||||
white-space: nowrap;
|
||||
margin-left: 1.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.top-row ::deep a:first-child {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.top-row ::deep a:first-child {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@media (max-width: 640.98px) {
|
||||
.top-row {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.top-row ::deep a, .top-row ::deep .btn-link {
|
||||
margin-left: 0;
|
||||
}
|
||||
.top-row ::deep a, .top-row ::deep .btn-link {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
@@ -64,14 +64,14 @@ main {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.top-row.auth ::deep a:first-child {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
width: 0;
|
||||
}
|
||||
.top-row.auth ::deep a:first-child {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.top-row, article {
|
||||
padding-left: 2rem !important;
|
||||
padding-right: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
<div class="container">
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
|
||||
<span>Home</span>
|
||||
<i class="ri-home-5-line"/>
|
||||
</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" id="workout">
|
||||
<span>Workout</span>
|
||||
<i class="ri-empathize-line"/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" id="logbook">
|
||||
<span>Logbook</span>
|
||||
<i class="ri-health-book-line"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" id="settings">
|
||||
<span>Impostazioni</span>
|
||||
<i class="ri-settings-5-line"/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
|
||||
}
|
||||
@@ -1,81 +0,0 @@
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: var(--ligther-color);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
border-radius: 40px 40px 0px 0px;
|
||||
box-shadow: rgb(50 50 93 / 25%) 0 50px 100px 10px,
|
||||
rgb(0 0 0 / 30%) 0 30px 60px -30px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
flex: 0 0 25%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
nav :where(li a) {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column-reverse;
|
||||
padding: 1em;
|
||||
line-height: 1.4;
|
||||
-webkit-transition: all .3s ease-out;
|
||||
transition: all .3s ease-out;
|
||||
}
|
||||
|
||||
nav ul li a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
nav ul li a i {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
nav ul li a span {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* animations */
|
||||
|
||||
nav li.active a::before, nav li.active a::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background-color: var(--primary-color);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
nav li.active a::before {
|
||||
top: 5%;
|
||||
width: calc(100% - 0px);
|
||||
height: 100%;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
nav li.active a {
|
||||
color: var(--ligther-color);
|
||||
}
|
||||
@@ -1,38 +1,72 @@
|
||||
<nav class="navbar navbar-expand justify-content-center">
|
||||
<div class="container-fluid">
|
||||
<ul class="navbar-nav nav-justified w-100 text-center">
|
||||
<div class="container animated-navbar @(IsVisible ? "show-nav" : "hide-nav") @(IsVisible ? PlusVisible ? "with-plus" : "without-plus" : "with-plus")">
|
||||
<nav class="navbar @(IsVisible ? PlusVisible ? "with-plus" : "without-plus" : "with-plus")">
|
||||
<div class="container-navbar">
|
||||
<ul class="navbar-nav flex-row nav-justified align-items-center w-100 text-center">
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link" href="Users" Match="NavLinkMatch.All">
|
||||
<div class="d-flex flex-column">
|
||||
<i class="ri-group-line"></i>
|
||||
<span>Test</span>
|
||||
</div>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link" href="Calendar" Match="NavLinkMatch.All">
|
||||
<div class="d-flex flex-column">
|
||||
<i class="ri-calendar-todo-line"></i>
|
||||
<span>Home</span>
|
||||
</div>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link" href="Calendar" Match="NavLinkMatch.All">
|
||||
<div class="d-flex flex-column">
|
||||
<i class="ri-calendar-todo-line"></i>
|
||||
<span>Altro</span>
|
||||
</div>
|
||||
</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link " href="workout" Match="NavLinkMatch.All">
|
||||
<div class="d-flex flex-column">
|
||||
<i class="ri-empathize-line"/>
|
||||
@* <span>Workout</span> *@
|
||||
</div>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
|
||||
<div class="d-flex flex-column">
|
||||
<i class="ri-home-5-line"/>
|
||||
@* <span>Home</span> *@
|
||||
</div>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<NavLink class="nav-link" href="logbook" Match="NavLinkMatch.All">
|
||||
<div class="d-flex flex-column">
|
||||
<i class="ri-health-book-line"></i>
|
||||
@* <span>Log Book</span> *@
|
||||
</div>
|
||||
</NavLink>
|
||||
</li>
|
||||
@* <li class="nav-item"> *@
|
||||
@* <NavLink class="nav-link d-flex flex-column" href="settings" Match="NavLinkMatch.All"> *@
|
||||
@* <i class="ri-settings-5-line"/> *@
|
||||
@* <span>Impostazioni</span> *@
|
||||
@* </NavLink> *@
|
||||
@* </li> *@
|
||||
</ul>
|
||||
</div>
|
||||
@if (PlusVisible)
|
||||
{
|
||||
@* <MudMenu PopoverClass="custom_popover" AnchorOrigin="Origin.TopLeft" TransformOrigin="Origin.BottomRight"> *@
|
||||
@* <ActivatorContent> *@
|
||||
@* <MudFab Class="custom-plus-button" Color="Color.Surface" Size="Size.Medium" IconSize="Size.Medium" IconColor="Color.Primary" StartIcon="@Icons.Material.Filled.Add"/> *@
|
||||
@* </ActivatorContent> *@
|
||||
@* <ChildContent> *@
|
||||
@* <MudMenuItem Disabled="!NetworkService.IsNetworkAvailable()" OnClick="() => CreateUser()">Nuovo contatto</MudMenuItem> *@
|
||||
@* <MudMenuItem Disabled="!NetworkService.IsNetworkAvailable()" OnClick="() => CreateActivity()">Nuova attivit<69></MudMenuItem> *@
|
||||
@* </ChildContent> *@
|
||||
@* </MudMenu> *@
|
||||
}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
@code
|
||||
{
|
||||
private bool IsVisible { get; set; } = true;
|
||||
private bool PlusVisible { get; set; } = true;
|
||||
|
||||
protected override Task OnInitializedAsync()
|
||||
{
|
||||
NavigationManager.LocationChanged += (_, args) =>
|
||||
{
|
||||
var location = args.Location.Remove(0, NavigationManager.BaseUri.Length);
|
||||
|
||||
var newIsVisible = new List<string> { "Home" }
|
||||
.Contains(location);
|
||||
|
||||
var newPlusVisible = new List<string> { "Home" }
|
||||
.Contains(location);
|
||||
|
||||
if (IsVisible == newIsVisible && PlusVisible == newPlusVisible) return;
|
||||
|
||||
IsVisible = newIsVisible;
|
||||
PlusVisible = newPlusVisible;
|
||||
StateHasChanged();
|
||||
};
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
<div class="spinner-container @(FullScreen ? "" : "not-fullScreen")">
|
||||
<span class="loader"></span>
|
||||
</div>
|
||||
|
||||
@code
|
||||
{
|
||||
[Parameter] public bool FullScreen { get; set; } = true;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
.spinner-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: calc(100vh - 10.1rem);
|
||||
align-items: center;
|
||||
color: var(--mud-palette-primary);
|
||||
}
|
||||
|
||||
.not-fullScreen {
|
||||
height: auto !important;
|
||||
padding: 2rem 0 !important;
|
||||
}
|
||||
|
||||
.loader {
|
||||
width: 50px;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
border: 8px solid #0000;
|
||||
border-right-color: var(--mud-palette-secondary);
|
||||
position: relative;
|
||||
animation: l24 1s infinite linear;
|
||||
}
|
||||
|
||||
.loader:before,
|
||||
.loader:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -8px;
|
||||
border-radius: 50%;
|
||||
border: inherit;
|
||||
animation: inherit;
|
||||
animation-duration: 2s;
|
||||
}
|
||||
|
||||
.loader:after {
|
||||
animation-duration: 4s;
|
||||
}
|
||||
|
||||
@keyframes l24 {
|
||||
100% {
|
||||
transform: rotate(1turn)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user