From 9360a03f9459644e9de832af878cec9f66ff6bc4 Mon Sep 17 00:00:00 2001 From: Milad Raeisi <6504337+miladsoft@users.noreply.github.com> Date: Wed, 3 Apr 2024 22:51:46 +0400 Subject: [PATCH] Fixed wallet UI (#63) * Remove extra js codes * Fix wallet UI except modals * Fixed create and recover modal UI * Fixed wallet words modad UI * Fixed tables UI * Fixed checkbox UI --- src/Angor/Client/Pages/Founder.razor | 20 +- src/Angor/Client/Pages/Investor.razor | 137 +-- src/Angor/Client/Pages/Penalties.razor | 99 ++- src/Angor/Client/Pages/Settings.razor | 192 ++-- src/Angor/Client/Pages/Signatures.razor | 103 ++- src/Angor/Client/Pages/View.razor | 123 +-- src/Angor/Client/Pages/Wallet.razor | 595 ++++++++----- src/Angor/Client/Shared/MainLayout.razor | 2 +- src/Angor/Client/wwwroot/assets/css/app.css | 26 +- .../Client/wwwroot/assets/css/dashboard.css | 128 +-- src/Angor/Client/wwwroot/assets/js/app.js | 62 +- .../Client/wwwroot/assets/js/dashboard.js | 830 ------------------ src/Angor/Client/wwwroot/index.html | 3 +- 13 files changed, 913 insertions(+), 1407 deletions(-) delete mode 100644 src/Angor/Client/wwwroot/assets/js/dashboard.js diff --git a/src/Angor/Client/Pages/Founder.razor b/src/Angor/Client/Pages/Founder.razor index cc72edb0..da4986f7 100644 --- a/src/Angor/Client/Pages/Founder.razor +++ b/src/Angor/Client/Pages/Founder.razor @@ -11,7 +11,7 @@ @inject NavigationManager NavigationManager @inject IWalletStorage _walletStorage; @inject IClientStorage storage; -@inject IRelayService RelayService; +@inject IRelayService RelayService; @inject IIndexerService _IndexerService @if (!hasWallet) @@ -22,8 +22,8 @@

Founder Page

- - + +
@@ -48,7 +48,7 @@ else { -
+
}
@@ -74,7 +74,7 @@
- @code { +@code { private string founderKey; private string projectId; private List founderProjects = new(); @@ -84,7 +84,7 @@ private NotificationComponent notificationComponent; - + protected override async Task OnInitializedAsync() { @@ -99,7 +99,7 @@ private async Task LookupProjectKeysOnIndexerAsync() { scanningForProjects = true; - + var keys = _walletStorage.GetFounderKeys(); var founderProjectsToLookup = new List(); @@ -128,11 +128,11 @@ if (founderProject != null && founderProject.Metadata is null) founderProject.Metadata = nostrMetadata; // else - // notificationComponent.ShowNotificationMessage($"Couldn't find the project details for the project {nostrMetadata.Name} try adding the missing relay."); //TODO + // notificationComponent.ShowNotificationMessage($"Couldn't find the project details for the project {nostrMetadata.Name} try adding the missing relay."); //TODO break; case { Kind: NostrKind.ApplicationSpecificData }: var projectInfo = JsonSerializer.Deserialize(e.Content, Angor.Shared.Services.RelayService.settings); - if(founderProjects.All(_ => _.ProjectInfo.NostrPubKey != e.Pubkey)) //Getting events from multiple relays + if (founderProjects.All(_ => _.ProjectInfo.NostrPubKey != e.Pubkey)) //Getting events from multiple relays founderProjects.Add(new FounderProject { ProjectInfo = projectInfo }); break; } @@ -147,7 +147,7 @@ else scanningForProjects = false; } - + private void NavigateToCreateProject() { NavigationManager.NavigateTo("/create"); diff --git a/src/Angor/Client/Pages/Investor.razor b/src/Angor/Client/Pages/Investor.razor index 5fc8b3a9..9ae2ed2a 100644 --- a/src/Angor/Client/Pages/Investor.razor +++ b/src/Angor/Client/Pages/Investor.razor @@ -23,9 +23,9 @@

Invested Portfolio

-
- - + + +
@@ -63,65 +63,78 @@
-

Your Projects

-
- - - - - - - - - - - - - - - - - @foreach(var project in projects) - { - Stats.TryGetValue(project.ProjectInfo.ProjectIdentifier, out var stats); - - - - - - - - - - - - - - } - -
Funding Target (@network.CoinTicker)Raised (@network.CoinTicker)Raised (% Target)Project StatusMy Investment (@network.CoinTicker)Spent by FounderAvailable to FounderIn Recovery
- @TrimString(@project.ProjectInfo.ProjectIdentifier) - @project.Metadata?.Name@project.ProjectInfo.TargetAmount @network.CoinTicker@Money.Satoshis(stats?.AmountInvested ?? 0).ToUnit(MoneyUnit.BTC) @network.CoinTicker @((stats?.AmountInvested ?? 0) * 100 / Money.Coins(project.ProjectInfo.TargetAmount).Satoshi) % - @if (project.ProjectInfo.StartDate < DateTime.UtcNow) - { -

Funding

- } - else - { -

Live

- } - 		@Money.Satoshis(project.AmountInvested ?? 0).ToUnit(MoneyUnit.BTC) @network.CoinTicker - @if (!project.SignaturesInfo?.Signatures.Any() ?? false) - { - - } - --@Money.Satoshis(project.AmountInRecovery ?? 0).ToUnit(MoneyUnit.BTC) @network.CoinTicker
+
+
+
+
+
+
Your Projects
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + @foreach (var project in projects) + { + Stats.TryGetValue(project.ProjectInfo.ProjectIdentifier, out var stats); + + + + + + + + + + + + + } + +
NameFunding Target (@network.CoinTicker)Raised (@network.CoinTicker)Raised (% Target)Project StatusMy Investment (@network.CoinTicker)Spent by FounderAvailable to FounderIn Recovery
+ @project.Metadata?.Name + @project.ProjectInfo.TargetAmount @network.CoinTicker@Money.Satoshis(stats?.AmountInvested ?? 0).ToUnit(MoneyUnit.BTC) @network.CoinTicker @((stats?.AmountInvested ?? 0) * 100 / Money.Coins(project.ProjectInfo.TargetAmount).Satoshi) % + @if (project.ProjectInfo.StartDate < DateTime.UtcNow) + { +

Funding

+ } + else + { +

Live

+ } + 		+ @Money.Satoshis(project.AmountInvested ?? 0).ToUnit(MoneyUnit.BTC) @network.CoinTicker + @if (!project.SignaturesInfo?.Signatures.Any() ?? false) + { + + } + --@Money.Satoshis(project.AmountInRecovery ?? 0).ToUnit(MoneyUnit.BTC) @network.CoinTicker
+
+
+
+
- @code { private List projects = new(); @@ -131,8 +144,8 @@ int TotalFundedProjects = 0; long TotalInRecovery = 0; - public Dictionary Stats = new(); - + public Dictionary Stats = new(); + protected override async Task OnInitializedAsync() { hasWallet = _walletStorage.HasWallet(); @@ -148,7 +161,7 @@ abi.UpdateAccountBalanceInfo(accountInfo, unconfirmedInfo); TotalFundedProjects = projects.Count; - TotalInvested = projects.Sum(s => s.AmountInvested ?? 0); + TotalInvested = projects.Sum(s => s.AmountInvested ?? 0); TotalWallet = abi.TotalBalance; TotalInRecovery = projects.Sum(s => s.AmountInRecovery ?? 0); @@ -161,7 +174,7 @@ try { Stats.Clear(); - + foreach (var project in projects) { var projectStats = await _IndexerService.GetProjectStatsAsync(project.ProjectInfo.ProjectIdentifier); @@ -188,4 +201,4 @@ { NavigationManager.NavigateTo("/penalties"); } -} \ No newline at end of file +} diff --git a/src/Angor/Client/Pages/Penalties.razor b/src/Angor/Client/Pages/Penalties.razor index 96dd572e..eef3e928 100644 --- a/src/Angor/Client/Pages/Penalties.razor +++ b/src/Angor/Client/Pages/Penalties.razor @@ -30,44 +30,59 @@ {
-
-

Penalties Details

- - - - - - - - - - @foreach (var penalty in penaltyProjects) - { - - - - +
Project IDAmount in PenaltyDays Left
@penalty.ProjectIdentifier@penalty.Amount @network.CoinTicker - @if (penalty.IsExpired) - { - if (penalty.IsReleased) - { - - } - else - { - - } - } - else + +
+
+
+
+
+
Penalties Details
+
+
+
+
+
+ + + + + + + + + + @foreach (var penalty in penaltyProjects) { - + + + + + } - - - } - -
Project IDAmount in PenaltyDays Left
@penalty.ProjectIdentifier@penalty.Amount @network.CoinTicker + @if (penalty.IsExpired) + { + if (penalty.IsReleased) + { + + } + else + { + + } + } + else + { + + } +
+
+
+
+
+ + } @@ -86,7 +101,7 @@ public int DaysLeftForPenalty; } - + protected override async Task OnInitializedAsync() { if (hasWallet) @@ -98,11 +113,11 @@ if (!string.IsNullOrEmpty(project.RecoveryTransactionId)) { penaltyProjects.Add(new PenaltiesData - { - ProjectIdentifier = project.ProjectInfo.ProjectIdentifier, - RecoveryTransactionId = project.RecoveryTransactionId, - IsReleased = !string.IsNullOrEmpty(project.RecoveryReleaseTransactionId), - }); + { + ProjectIdentifier = project.ProjectInfo.ProjectIdentifier, + RecoveryTransactionId = project.RecoveryTransactionId, + IsReleased = !string.IsNullOrEmpty(project.RecoveryReleaseTransactionId), + }); } } } @@ -121,7 +136,7 @@ foreach (var penaltyProject in penaltyProjects) { var recoveryTansaction = await _IndexerService.GetTransactionInfoByIdAsync(penaltyProject.RecoveryTransactionId); - + var totalsats = recoveryTansaction.Outputs.Where(s => Script.FromHex(s.ScriptPubKey).IsScriptType(ScriptType.P2WSH)).Sum(s => s.Balance); penaltyProject.Amount = Money.Satoshis(totalsats).ToUnit(MoneyUnit.BTC); diff --git a/src/Angor/Client/Pages/Settings.razor b/src/Angor/Client/Pages/Settings.razor index 58b705de..769fcd65 100644 --- a/src/Angor/Client/Pages/Settings.razor +++ b/src/Angor/Client/Pages/Settings.razor @@ -17,7 +17,7 @@ @inherits BaseComponent
-

Settings


+

Settings


@@ -26,7 +26,7 @@

Network Type: @networkType

Explorer url: @_networkConfiguration.GetDefaultExplorerUrl().First().Url

- +
@@ -43,8 +43,8 @@
- +
+

This will wipe your wallet as well!

@@ -54,12 +54,12 @@ I confirm I have a backup of my wallet words, yes wipe all data from this device.
-
+
@if (showConfirmWipeMessage) {

Please tick the box to wipe all storage!

} - +
@@ -82,9 +82,9 @@ } -
-
- +
+
+
-
+

Indexers

@@ -108,40 +108,54 @@ - - - - - - - - - - - @foreach (var indexer in settingsInfo.Indexers) - { - - - - - - - } - -
LinkStatusDefault
@indexer.Url@indexer.Status.ToString() - @if (indexer.IsPrimary) - { - - } - else - { - - } - - -
- -
+
+
+
+
+
+
Indexers
+
+
+
+
+
+ + + + + + + + + + + @foreach (var indexer in settingsInfo.Indexers) + { + + + + + + + } + +
LinkStatusDefault
@indexer.Url@indexer.Status.ToString() + @if (indexer.IsPrimary) + { + + } + else + { + + } + + +
+
+
+
+
+
@*
*@ @@ -153,41 +167,55 @@ - - - - - - - - - - - - @foreach (var relay in settingsInfo.Relays) - { - - - - - - - - } - -
LinkNameStatusDefault
@relay.Url@relay.Name@relay.Status.ToString() - @if (relay.IsPrimary) - { - - } - else - { - - } - - -
- +
+
+
+
+
+
Nostr Relays
+
+
+
+
+
+ + + + + + + + + + + + @foreach (var relay in settingsInfo.Relays) + { + + + + + + + + } + +
LinkNameStatusDefault
@relay.Url@relay.Name@relay.Status.ToString() + @if (relay.IsPrimary) + { + + } + else + { + + } + + +
+
+
+
+
@@ -298,13 +326,13 @@ if (res != null) { settingsInfo.Indexers.Remove(res); - + if (res.IsPrimary && settingsInfo.Indexers.Any()) { var next = settingsInfo.Indexers.OrderBy(a => a.Status).First(); next.IsPrimary = true; } - + _clientStorage.SetSettingsInfo(settingsInfo); } @@ -316,7 +344,7 @@ if (res != null) { settingsInfo.Relays.Remove(res); - + if (res.IsPrimary && settingsInfo.Relays.Any()) { var next = settingsInfo.Relays.OrderBy(a => a.Status).First(); diff --git a/src/Angor/Client/Pages/Signatures.razor b/src/Angor/Client/Pages/Signatures.razor index d786b6f8..fd407c77 100644 --- a/src/Angor/Client/Pages/Signatures.razor +++ b/src/Angor/Client/Pages/Signatures.razor @@ -49,35 +49,52 @@ } else { - - - - - - - - - - @foreach (var signature in signaturesRequests.Where(_ => _ is { TransactionHex: not null, AmountToInvest: not null })) - { - - - - @if (signature.TimeApproved is null) - { - - } - else - { - - } - - } - -
Investment amountReceived atStatus
@Money.Coins(signature.AmountToInvest ?? 0).ToUnit(MoneyUnit.BTC) @network.CoinTicker@signature.TimeArrived.ToString("g")Approved on - @signature.TimeApproved.ToString()
+
+
+
+
+
+
Signatures
+
+
+
+
+
+ + + + + + + + + + @foreach (var signature in signaturesRequests.Where(_ => _ is { TransactionHex: not null, AmountToInvest: not null })) + { + + + + @if (signature.TimeApproved is null) + { + + } + else + { + + } + + } + +
Investment amountReceived atStatus
@Money.Coins(signature.AmountToInvest ?? 0).ToUnit(MoneyUnit.BTC) @network.CoinTicker@signature.TimeArrived.ToString("g")Approved on - @signature.TimeApproved.ToString()
+
+
+
+
+ } + } @@ -199,7 +216,7 @@ private async Task FetchPendingSignatures(FounderProject project) { - await SignService.LookupInvestmentRequestsAsync(project.ProjectInfo.NostrPubKey, null,// project.LastRequestForSignaturesTime , async + await SignService.LookupInvestmentRequestsAsync(project.ProjectInfo.NostrPubKey, null,// project.LastRequestForSignaturesTime , async (eventId, investorPubKey, encryptedMessage, timeArrived) => { Logger.LogDebug($"Sig request event received investorPubKey: {investorPubKey} - timeArrived: {timeArrived}"); @@ -226,21 +243,21 @@ messagesReceived = true; var signatureRequest = new SignatureRequest - { - investorPubKey = investorPubKey, - TimeArrived = timeArrived, - TransactionHex = encryptedMessage, //To be encrypted after js interop is loaded - EventId = eventId - }; + { + investorPubKey = investorPubKey, + TimeArrived = timeArrived, + TransactionHex = encryptedMessage, //To be encrypted after js interop is loaded + EventId = eventId + }; signaturesRequests.Add(signatureRequest); Logger.LogDebug($"Added to pendingSignatures"); - }, + }, () => { Logger.LogDebug($"End of messages"); - if (!messagesReceived) + if (!messagesReceived) return; Logger.LogDebug($"Calling StateHasChanged in EOSE"); @@ -250,7 +267,7 @@ private void FetchFounderApprovalsSignatures(FounderProject project) { - SignService.LookupInvestmentRequestApprovals(project.ProjectInfo.NostrPubKey, + SignService.LookupInvestmentRequestApprovals(project.ProjectInfo.NostrPubKey, (investorPubKey, timeApproved, reqEventId) => { Logger.LogDebug($"Sig response event received investorPubKey: {investorPubKey} - timeApproved: {timeApproved} - reqEventId: {reqEventId}"); @@ -259,11 +276,11 @@ if (signatureRequest is null || signatureRequest.TimeApproved != null) return; //multiple relays could mean the same massage multiple times - + if (signatureRequest.TimeArrived > timeApproved) { Logger.LogDebug($"The event received is replaced by time"); - return; // sig of an old request + return; // sig of an old request } if (reqEventId != null && signatureRequest.EventId != reqEventId) @@ -277,7 +294,7 @@ signatureRequest.TimeApproved = timeApproved; Logger.LogDebug($"Added to pendingSignatures"); - }, + }, () => { scanedForApprovals = true; @@ -291,7 +308,7 @@ if (FounderProject.LastRequestForSignaturesTime is null || FounderProject.LastRequestForSignaturesTime < latestApprovedTime) { FounderProject.LastRequestForSignaturesTime = latestApprovedTime; - Storage.UpdateFounderProject(FounderProject); + Storage.UpdateFounderProject(FounderProject); } } @@ -309,7 +326,7 @@ } else { - passwordComponent.ShowPassword( async () => + passwordComponent.ShowPassword(async () => { await ApproveSignature(signature); ; }); @@ -358,8 +375,8 @@ notificationComponent.ShowErrorMessage(operationResult.Message); } } - - private SignatureInfo signProject(string transactionHex,ProjectInfo info, string founderSigningPrivateKey) + + private SignatureInfo signProject(string transactionHex, ProjectInfo info, string founderSigningPrivateKey) { var investorTrx = _networkConfiguration.GetNetwork().CreateTransaction(transactionHex); diff --git a/src/Angor/Client/Pages/View.razor b/src/Angor/Client/Pages/View.razor index be4f61f8..a66b6a6c 100644 --- a/src/Angor/Client/Pages/View.razor +++ b/src/Angor/Client/Pages/View.razor @@ -36,7 +36,7 @@ } else { -

project not found...

+

project not found...

} } else @@ -55,11 +55,11 @@ if (metadata?.Banner != null) {
- +
} -
+

@metadata?.Name

@metadata?.About

@@ -99,7 +99,7 @@ } - } + } @@ -117,7 +117,7 @@
- + @if (projectStats.Loading) {
@@ -126,10 +126,10 @@ {

Total Raised: @Money.Satoshis(projectStats.TotalRaised).ToUnit(MoneyUnit.BTC) @network.CoinTicker

Total Investors: @projectStats.TotalInvestors

- @*

Total Seeders: @projectStats.TotalSeeders

*@ -

Time Left for Investing: @projectStats.TimeLeft days

+ @*

Total Seeders: @projectStats.TotalSeeders

*@ +

Time Left for Investing: @projectStats.TimeLeft days

} - +
@@ -141,46 +141,48 @@

Stages

- - - - - - - - - - - @for (int index = 0; index < project.ProjectInfo.Stages.Count; index++) - { +
+
Stage Stage %Release Date
+ - - - - + + + + - } - -
@(index + 1)@project.ProjectInfo.Stages[index].AmountToRelease %@project.ProjectInfo.Stages[index].ReleaseDate.ToString("dd/MM/yyyy")Stage Stage %Release Date
+ + + @for (int index = 0; index < project.ProjectInfo.Stages.Count; index++) + { + + @(index + 1) + @project.ProjectInfo.Stages[index].AmountToRelease % + @project.ProjectInfo.Stages[index].ReleaseDate.ToString("dd/MM/yyyy") + + + } + + +
-@*
-
-

Selected Seeders

-
-
- @if (SelectedSeeders.Any()) - { - - } - else - { -

No seeders yet.

- } -
-
*@ + @*
+
+

Selected Seeders

+
+
+ @if (SelectedSeeders.Any()) + { + + } + else + { +

No seeders yet.

+ } +
+
*@
@@ -203,7 +205,7 @@
- +
@@ -212,7 +214,8 @@ } else if (invested) { -

You have already invested in this project. +

+ You have already invested in this project. View the transaction on the explorer.

@@ -225,7 +228,7 @@ }
- +
@@ -273,25 +276,25 @@ }; ProjectStats projectStats = new ProjectStats - { - Loading = true, - TimeLeft = 0, - TotalInvestors = 0, - TotalRaised = 0, - TotalSeeders = 0, - FundingProgressPercent = 0, - }; + { + Loading = true, + TimeLeft = 0, + TotalInvestors = 0, + TotalRaised = 0, + TotalSeeders = 0, + FundingProgressPercent = 0, + }; bool founder = false; bool invested = false; bool findInProgress = false; - private List NostrClients = new (); + private List NostrClients = new(); protected override async Task OnInitializedAsync() { NostrClients = _NetworkConfiguration.GetDefaultRelayUrls().Select(_ => _.Url.ToString()).ToList(); - + project = storage.GetInvestmentProjects().FirstOrDefault(p => p.ProjectInfo.ProjectIdentifier == ProjectId); if (project is InvestorProject findProject) @@ -352,7 +355,7 @@ if (project?.CreationTransactionId != null) { projectExplorerLink = _NetworkConfiguration.GetExplorerUrl().Url + $"/transaction/{project.CreationTransactionId}"; - + await RefreshBalance(); } } @@ -373,7 +376,7 @@ projectStats.TotalRaised = data.AmountInvested; projectStats.TimeLeft = (project.ProjectInfo.StartDate - DateTime.UtcNow).Days; - if (projectStats.TimeLeft < 0) + if (projectStats.TimeLeft < 0) projectStats.TimeLeft = 0; var targetSat = Money.Coins(project.ProjectInfo.TargetAmount).Satoshi; @@ -389,7 +392,7 @@ { projectStats.Loading = false; } - + } private async Task RecoverFunds() @@ -404,7 +407,7 @@ else notificationComponent.ShowNotificationMessage("You must create a wallet if you want to invest"); } - + private async Task CopyNsecToClipboardAsyncCheckPassword() { if (!passwordComponent.HasPassword()) @@ -425,7 +428,7 @@ var nostrKey = _derivationOperations.DeriveProjectNostrPrivateKey(words, founderProject.ProjectIndex); var nsec = NBitcoin.DataEncoders.Encoders.Hex.EncodeData(nostrKey.ToBytes()); await _clipboardService.WriteTextAsync(nsec); - StateHasChanged(); + StateHasChanged(); } } } \ No newline at end of file diff --git a/src/Angor/Client/Pages/Wallet.razor b/src/Angor/Client/Pages/Wallet.razor index 0f0d487c..3ed1f395 100644 --- a/src/Angor/Client/Pages/Wallet.razor +++ b/src/Angor/Client/Pages/Wallet.razor @@ -24,167 +24,268 @@ Wallet and balances -
-

Wallet and balances

- +
+
+
+
+
+ wallet +
+
+ Wallet +
+

+ Wallet and balances +

+
+
+ @if (hasWallet) + { +
+ +
+ } + +
+
+
@if (!hasWallet) { - +
- +
+
+ + info + + No Wallet Found +
+
-
- -
+
+
-
+
-
-@*
+
-
- -
Recover Wallet
-
+
+ +
Recover Wallet
+
-
*@ +
+
+ @if (walletWordsCreateModal) + { + +
+
+
+
+
@createWalletTitle
+ +
+
- @if (walletWordsCreateModal) - { - -
-
-
-
-
Create Wallet
- -
-
+ @if (createWalletSpinner) + { +
+
+
+ } + else + { +
+ +
- @if (createWalletSpinner) + @if (isNewWallet) { -
-
-
- } - else - { -
- - -
- - +
-
- + } + +
+ +
+ +
+ + +
+ +
+ +
+ +
-

Please enter a password for your new wallet:

-
- - -
-
- - -
- +
- } -
-
- -
+ + +
+ + } +
+
+ @if (!createWalletSpinner) + { + + + } +
- } -
+
+ } } else {
-
-
- Confirmed balance: - @Money.Satoshis(accountBalanceInfo.TotalBalance).ToUnit(MoneyUnit.BTC) @network.CoinTicker -
+
- @if (accountBalanceInfo.TotalUnconfirmedBalance > 0) - { -
- Unconfirmed balance: - @Money.Satoshis(accountBalanceInfo.TotalUnconfirmedBalance).ToUnit(MoneyUnit.BTC) @network.CoinTicker -
- } - @if (accountBalanceInfo.TotalBalanceReserved > 0) - { -
- Reserved balance: - @Money.Satoshis(accountBalanceInfo.TotalBalanceReserved).ToUnit(MoneyUnit.BTC) @network.CoinTicker -
- } +
+
+
+ Balance: + @Money.Satoshis(accountBalanceInfo.TotalBalance).ToUnit(MoneyUnit.BTC) @network.CoinTicker +
+ @if (accountBalanceInfo.TotalUnconfirmedBalance <= 0 & accountBalanceInfo.TotalBalance <= 0) + { +
+ +
+ } - - +
- - @if (network.NetworkType == NetworkType.Testnet && accountBalanceInfo.TotalBalance < Money.Coins(10).Satoshi) - { - - } + + +
+ + + + +
+ @if (accountBalanceInfo.TotalUnconfirmedBalance > 0) + { +
+

Confirmed balance

+
@Money.Satoshis(accountBalanceInfo.TotalUnconfirmedBalance).ToUnit(MoneyUnit.BTC) @network.CoinTicker
+
+ } + @if (accountBalanceInfo.TotalBalanceReserved > 0) + { +
+

Reserved balance

+
@Money.Satoshis(accountBalanceInfo.TotalBalanceReserved).ToUnit(MoneyUnit.BTC) @network.CoinTicker
+
+ } + +
+ +
+ + + @if (walletWordsModal) { @@ -199,22 +300,42 @@
- @if (string.IsNullOrEmpty(showWalletWords)) { + + -
-

Please enter your wallet password

- +
+ +
+ + +
+ + @if (!string.IsNullOrEmpty(showWalletPasswordError)) { -
@showWalletPasswordError
+
@showWalletPasswordError
}
@@ -224,27 +345,32 @@ else { -

@showWalletWords

+ if (!string.IsNullOrEmpty(showWalletWordsPassphrase)) { -

This wallet has a pass phrase!

+

This wallet has a passphrase!

} -
- -
}
-
- -
+
+ + @* *@ +
@@ -256,19 +382,39 @@
-
    -
  • - -
    • -
  • - -
    • -
+ + +
+
+
+
+ +
Send
+
+
+
+
+
+
+ +
Receive
+
+
+
+
+ + + + + + + +
@if (activeTab == 1) { @@ -350,7 +496,7 @@
-
@@ -460,63 +606,77 @@
-

Addresses and Amounts

- - - - - - - - - - - - - @foreach (var addressInfo in accountBalanceInfo.AccountInfo.AllAddresses()) - { - var total = addressInfo.Balance; - var count = addressInfo.UtxoData.Count(); +
+
+
+
+
Addresses and Amounts
+
+
+
+
+
+
AddressAmountPathUTXO count
+ + + + + + + + + + @foreach (var addressInfo in accountBalanceInfo.AccountInfo.AllAddresses()) + { + var total = addressInfo.Balance; + var count = addressInfo.UtxoData.Count(); - if (total > 0) - { - - - - - - - - - - } - } - - -
AddressAmountPathUTXO count
-
-
- - - - - - - - - - @foreach (var addressUtxoItem in addressInfo.UtxoData) - { - - - - - } - -
CoinAmount
@($"{addressUtxoItem.outpoint}")@Money.Satoshis(addressUtxoItem.value).ToUnit(MoneyUnit.BTC) @network.CoinTicker
-
-
-
+ if (total > 0) + { + + @addressInfo.Address + @Money.Satoshis(total).ToUnit(MoneyUnit.BTC) @network.CoinTicker + @addressInfo.HdPath + @count + + @if (IsExpanded(addressInfo.Address)) + { + + +
+
+ +
+ + + + + + + + + @foreach (var addressUtxoItem in addressInfo.UtxoData) + { + + + + + } + +
CoinAmount
@($"{addressUtxoItem.outpoint}")@Money.Satoshis(addressUtxoItem.value).ToUnit(MoneyUnit.BTC) @network.CoinTicker
+
+
+
+ + + } + } + } + + +
+
+
} @@ -526,6 +686,7 @@ @code { + private bool balanceSpinner = false; private bool createWalletSpinner = false; private bool testCoinsSpinner = false; @@ -543,6 +704,10 @@ private string passwordInputType = "password"; private string passwordToggleText = "Show"; + private bool isNewWallet = false; + private string createWalletTitle = "Create Wallet"; + private string createWalletDescription = "Generate a new wallet"; + private bool sendConfirmModal; private bool coinControlModal; private bool walletWordsModal; @@ -570,6 +735,9 @@ ShowQrCode showQrCode; + Dictionary collapseStates = new Dictionary(); + + protected override Task OnInitializedAsync() { if (hasWallet) @@ -622,8 +790,12 @@ } } - private async Task ShowCreateWalletModal() + private async Task ShowCreateWalletModal(string type) { + isNewWallet = type == "new" ? true : false; + createWalletTitle = type == "new" ? "Create Wallet" : "Recover Wallet"; + createWalletDescription = type == "new" ? "Generate a new wallet" : "Paste your wallet words"; + walletWordsCreateModal = true; StateHasChanged(); await Task.Delay(10); @@ -645,8 +817,18 @@ private async Task CreateWalletAsync() { - if (string.IsNullOrEmpty(newWalletWords)) throw new ArgumentNullException(); - if (string.IsNullOrEmpty(newWalletPassword)) throw new ArgumentNullException(); + if (string.IsNullOrEmpty(newWalletWords)) + { + await notificationComponent.ShowSnackbar("New wallet words are null or empty"); + //throw new ArgumentNullException(nameof(newWalletWords)); + return; + } + if (string.IsNullOrEmpty(newWalletPassword)) + { + notificationComponent.ShowSnackbar("New wallet password is null or empty"); + //throw new ArgumentNullException(nameof(newWalletPassword)); + return; + } if (!backupConfirmation) { @@ -695,7 +877,13 @@ private async Task ShowWords() { - if (string.IsNullOrEmpty(showWalletPassword)) throw new ArgumentNullException(); + if (string.IsNullOrEmpty(showWalletPassword)) + { + notificationComponent.ShowSnackbar("Wallet password is null or empty"); + //throw new ArgumentNullException(nameof(showWalletPassword)); + return; + } + var wallet = _walletStorage.GetWallet(); var walletData = await _encryptionService.DecryptData(wallet.EncryptedData, showWalletPassword); @@ -1019,11 +1207,22 @@ testCoinsSpinner = false; } } + void SetActiveTab(int tab) + { + activeTab = tab; + } + - private string GetActiveClass(int tabNumber) + bool IsExpanded(string address) { - showQrCode?.SetQRCode(accountBalanceInfo.AccountInfo.GetNextReceiveAddress()); + return collapseStates.ContainsKey(address) ? collapseStates[address] : false; + } - return activeTab == tabNumber ? "active" : ""; + void ToggleCollapse(string address) + { + if (collapseStates.ContainsKey(address)) + collapseStates[address] = !collapseStates[address]; + else + collapseStates[address] = true; } } \ No newline at end of file diff --git a/src/Angor/Client/Shared/MainLayout.razor b/src/Angor/Client/Shared/MainLayout.razor index 9aa70438..57228e22 100644 --- a/src/Angor/Client/Shared/MainLayout.razor +++ b/src/Angor/Client/Shared/MainLayout.razor @@ -61,7 +61,7 @@
-
+
Version: @_softwareVersion
diff --git a/src/Angor/Client/wwwroot/assets/css/app.css b/src/Angor/Client/wwwroot/assets/css/app.css index cb6dfcb6..58c54408 100644 --- a/src/Angor/Client/wwwroot/assets/css/app.css +++ b/src/Angor/Client/wwwroot/assets/css/app.css @@ -45,11 +45,11 @@ } .form-check-input:checked[type="checkbox"] { - background-image: linear-gradient(195deg, #1f5d6a 0%, #1f5d6a 100%); + background-image: linear-gradient(195deg, #4caf50 0%, #4caf50 100%); } .form-check-input:checked[type="radio"] { - background-image: linear-gradient(195deg, #1f5d6a 0%, #1f5d6a 100%); + background-image: linear-gradient(195deg, #4caf50 0%, #4caf50 100%); } .form-check-input[type="checkbox"]:indeterminate { @@ -459,9 +459,6 @@ tr[style*="cursor: pointer;"] { cursor: pointer; } - .clickable-row:hover { - background-color: #f5f5f5; - } .inner-table-inner-div p { margin-bottom: 5px; @@ -680,7 +677,7 @@ tr[style*="cursor: pointer;"] { border-radius: 10px; padding: 16px; position: fixed; - z-index: 1; + z-index: 100000; left: 50%; bottom: 30px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.16); @@ -896,4 +893,19 @@ tr[style*="cursor: pointer;"] { fill: #fff !important; /* Fill color for SVG elements */ } - \ No newline at end of file + +.btn-content { + font-size: 16px !important; +} + +.dark-version .activeTB { + background-color: #1f5d6a !important; +} + +.activeTB { + background-color: #1f5d6a25 !important; +} + +.dark-version .card-body { + color: #e3f8fc !important +} diff --git a/src/Angor/Client/wwwroot/assets/css/dashboard.css b/src/Angor/Client/wwwroot/assets/css/dashboard.css index fe041b79..130236a9 100644 --- a/src/Angor/Client/wwwroot/assets/css/dashboard.css +++ b/src/Angor/Client/wwwroot/assets/css/dashboard.css @@ -2936,10 +2936,10 @@ textarea.form-control-lg { } .form-check { - display: block; + display: inline-flex; min-height: auto; - padding-left: 1.73em; margin-bottom: 0.125rem; + align-items: center; } .form-check .form-check-input { @@ -4621,7 +4621,6 @@ fieldset:disabled .btn { --bs-nav-tabs-link-active-color: #495057; --bs-nav-tabs-link-active-bg: #fff; --bs-nav-tabs-link-active-border-color: #dee2e6 #dee2e6 #fff; - border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color); } .nav-tabs .nav-link { @@ -5200,8 +5199,8 @@ fieldset:disabled .btn { } .card { - --bs-card-spacer-y: 1rem; - --bs-card-spacer-x: 1rem; + --bs-card-spacer-y: 1.5rem; + --bs-card-spacer-x: 1.5rem; --bs-card-title-spacer-y: 0.5rem; --bs-card-border-width: 0; --bs-card-border-color: rgba(0, 0, 0, 0.125); @@ -5213,7 +5212,7 @@ fieldset:disabled .btn { --bs-card-cap-bg: #fff; --bs-card-cap-color:; --bs-card-height:; - --bs-card-color:; + --bs-card-color: #1f5d6a; --bs-card-bg: rgb(255 255 255 / 90%); --bs-card-img-overlay-padding: 1rem; --bs-card-group-margin: 0.75rem; @@ -6492,12 +6491,13 @@ fieldset:disabled .btn { --bs-modal-header-padding-y: 1rem; --bs-modal-header-padding: 1rem 1rem; --bs-modal-header-border-color: #dee2e6; - --bs-modal-header-border-color-dark: #344767; + --bs-modal-header-border-color-dark: #046479; --bs-modal-header-border-width: 1px; --bs-modal-title-line-height: 1.5; --bs-modal-footer-gap: 0.5rem; --bs-modal-footer-bg:; --bs-modal-footer-border-color: #dee2e6; + --bs-modal-footer-border-color-dark: #046479; --bs-modal-footer-border-width: 1px; position: fixed; top: 0; @@ -6630,10 +6630,15 @@ fieldset:disabled .btn { border-bottom-right-radius: var(--bs-modal-inner-border-radius); border-bottom-left-radius: var(--bs-modal-inner-border-radius); } +.dark-version .modal-footer { - .modal-footer > * { - margin: calc(var(--bs-modal-footer-gap) * .5); - } + border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color-dark); + +} + +.modal-footer > * { + margin: calc(var(--bs-modal-footer-gap) * .5); +} @media (min-width: 576px) { .modal { @@ -8753,7 +8758,7 @@ fieldset:disabled .btn { } .border { - border: 1px solid #dee2e6 !important; + border: 1px solid #1f5d6a !important } .border-0 { @@ -21619,7 +21624,7 @@ fieldset:disabled .btn { .dark-version a:not(.dropdown-item):not(.choices__item):not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out):not(.btn):not(.nav-link):not(.fixed-plugin-button), .dark-version .table thead tr th, .dark-version .kanban-title-board { - color: #fff !important; + color: #e7fbff !important; } .dark-version .input-group.input-group-dynamic .form-control, @@ -21649,7 +21654,7 @@ fieldset:disabled .btn { } .dark-version .table > :not(caption) > * > * { - border-color: rgba(255, 255, 255, 0.4) !important; + border-color: #046479 !important; color: rgba(255, 255, 255, 0.6) !important; } @@ -22475,8 +22480,8 @@ body.dark-version { .form-check:not(.form-switch) .form-check-input[type="checkbox"]:after { transition: opacity 0.25s ease-in-out; - font-family: "FontAwesome"; - content: "\f00c"; + font-family: "Material Icons Round"; + content: "check"; width: 100%; height: 100%; color: #fff; @@ -22484,7 +22489,7 @@ body.dark-version { display: flex; justify-content: center; align-items: center; - font-size: 0.67rem; + font-size: 1rem; opacity: 0; } @@ -22595,7 +22600,6 @@ label, .form-label { font-size: 0.875rem; font-weight: 400; - margin-bottom: 0.5rem; color: #7b809a; margin-left: 0.25rem; } @@ -23325,7 +23329,7 @@ hr { } @media (min-width: 1200px) { - .g-sidenav-hidden.rtl .main-content { + .sidenav-hidden.rtl .main-content { margin-right: 7rem !important; } } @@ -23440,8 +23444,8 @@ hr { margin-bottom: 3px; } -.g-sidenav-show.g-sidenav-pinned .navbar .sidenav-toggler-inner .sidenav-toggler-line:first-child, -.g-sidenav-show.g-sidenav-pinned .navbar .sidenav-toggler-inner .sidenav-toggler-line:last-child { +.sidenav-show.sidenav-pinned .navbar .sidenav-toggler-inner .sidenav-toggler-line:first-child, +.sidenav-show.sidenav-pinned .navbar .sidenav-toggler-inner .sidenav-toggler-line:last-child { width: 13px; transform: translateX(5px); } @@ -23514,12 +23518,12 @@ hr { color: #344767; } - .g-sidenav-show .navbar:not(.sidenav).navbar-main .navbar-collapse { + .sidenav-show .navbar:not(.sidenav).navbar-main .navbar-collapse { display: flex !important; flex-basis: auto; } - .g-sidenav-show .navbar:not(.sidenav).navbar-main .navbar-nav { + .sidenav-show .navbar:not(.sidenav).navbar-main .navbar-nav { flex-direction: row; } @@ -24408,40 +24412,40 @@ body:not(.dark-version) .sidenav.bg-transparent .collapse .nav-item .nav-link.ac opacity: 0.65; } -.g-sidenav-show .sidenav .nav-item .collapse { +.sidenav-show .sidenav .nav-item .collapse { height: auto; transition: all 0.2s ease-in-out; } @media (prefers-reduced-motion: reduce) { - .g-sidenav-show .sidenav .nav-item .collapse { + .sidenav-show .sidenav .nav-item .collapse { transition: none; } } -.g-sidenav-show .sidenav .nav-link-text { +.sidenav-show .sidenav .nav-link-text { transition: 0.3s ease; opacity: 1; } -.g-sidenav-show.rtl .navbar-vertical .navbar-nav .nav-link[data-bs-toggle="collapse"]:after { +.sidenav-show.rtl .navbar-vertical .navbar-nav .nav-link[data-bs-toggle="collapse"]:after { margin-left: 0; } @media (max-width: 1199.98px) { - .g-sidenav-show.rtl .sidenav { + .sidenav-show.rtl .sidenav { transform: translateX(17.125rem); } - .g-sidenav-show:not(.rtl) .sidenav { + .sidenav-show:not(.rtl) .sidenav { transform: translateX(-17.125rem); } - .g-sidenav-show .sidenav.fixed-start + .main-content { + .sidenav-show .sidenav.fixed-start + .main-content { margin-left: 0 !important; } - .g-sidenav-show.g-sidenav-pinned .sidenav { + .sidenav-show.sidenav-pinned .sidenav { transform: translateX(0); } } @@ -24495,7 +24499,6 @@ body:not(.dark-version) .sidenav.bg-transparent .collapse .nav-item .nav-link.ac } .navbar-main { - transition: box-shadow 0.25s ease-in, background-color 0.25s ease-in; background-color: rgb(255 255 255 / 90%); } @@ -24645,119 +24648,119 @@ body:not(.dark-version) .sidenav.bg-transparent .collapse .nav-item .nav-link.ac } @media (min-width: 1200px) { - .g-sidenav-hidden.rtl .main-content { + .sidenav-hidden.rtl .main-content { margin-right: 6rem !important; } - .g-sidenav-hidden.rtl .navbar-vertical:hover { + .sidenav-hidden.rtl .navbar-vertical:hover { max-width: 15.625rem !important; } - .g-sidenav-hidden.rtl .navbar-vertical .nav-item .nav-link .material-icons-round { + .sidenav-hidden.rtl .navbar-vertical .nav-item .nav-link .material-icons-round { margin-right: 2px; } - .g-sidenav-hidden.rtl .sidenav:hover + .main-content { + .sidenav-hidden.rtl .sidenav:hover + .main-content { margin-right: 17.125rem !important; } - .g-sidenav-hidden .navbar-vertical { + .sidenav-hidden .navbar-vertical { max-width: 6rem !important; } - .g-sidenav-hidden .navbar-vertical.fixed-start + .main-content { + .sidenav-hidden .navbar-vertical.fixed-start + .main-content { margin-left: 7.5rem; } - .g-sidenav-hidden .navbar-vertical .navbar-brand img { + .sidenav-hidden .navbar-vertical .navbar-brand img { width: auto !important; } - .g-sidenav-hidden .navbar-vertical .navbar-brand span { + .sidenav-hidden .navbar-vertical .navbar-brand span { opacity: 0; } - .g-sidenav-hidden .navbar-vertical .nav-item .nav-link .icon { + .sidenav-hidden .navbar-vertical .nav-item .nav-link .icon { padding: 10px; } - .g-sidenav-hidden .navbar-vertical .nav-item .nav-link .material-icons-round { + .sidenav-hidden .navbar-vertical .nav-item .nav-link .material-icons-round { margin-left: 2px; } - .g-sidenav-hidden .navbar-vertical .nav-item .nav-link .nav-link-text, - .g-sidenav-hidden .navbar-vertical .nav-item .nav-link .sidenav-normal { + .sidenav-hidden .navbar-vertical .nav-item .nav-link .nav-link-text, + .sidenav-hidden .navbar-vertical .nav-item .nav-link .sidenav-normal { opacity: 0; width: 0; } - .g-sidenav-hidden .navbar-vertical .nav-item .nav-link .sidenav-mini-icon { + .sidenav-hidden .navbar-vertical .nav-item .nav-link .sidenav-mini-icon { min-width: 1.8rem; margin-left: 0.15rem !important; } - .g-sidenav-hidden .navbar-vertical .nav-item .nav-link[data-bs-toggle="collapse"]:after { + .sidenav-hidden .navbar-vertical .nav-item .nav-link[data-bs-toggle="collapse"]:after { content: ""; opacity: 0; } - .g-sidenav-hidden .navbar-vertical .nav-item .collapse .nav { + .sidenav-hidden .navbar-vertical .nav-item .collapse .nav { margin-left: 0 !important; padding-left: 0 !important; } - .g-sidenav-hidden .navbar-vertical .nav-item .collapse .nav .nav-item .nav-link { + .sidenav-hidden .navbar-vertical .nav-item .collapse .nav .nav-item .nav-link { margin-left: 1rem; } - .g-sidenav-hidden .navbar-vertical .nav-item .collapse .nav .nav-item .nav-link[data-bs-toggle="collapse"]:after { + .sidenav-hidden .navbar-vertical .nav-item .collapse .nav .nav-item .nav-link[data-bs-toggle="collapse"]:after { content: "\f107"; } - .g-sidenav-hidden .navbar-vertical .card.card-background .icon-shape { + .sidenav-hidden .navbar-vertical .card.card-background .icon-shape { margin-bottom: 0 !important; } - .g-sidenav-hidden .navbar-vertical .card.card-background .docs-info { + .sidenav-hidden .navbar-vertical .card.card-background .docs-info { opacity: 0; width: 0; height: 0; } - .g-sidenav-hidden .navbar-vertical:hover { + .sidenav-hidden .navbar-vertical:hover { max-width: 15.625rem !important; } - .g-sidenav-hidden .navbar-vertical:hover.fixed-start + .main-content { + .sidenav-hidden .navbar-vertical:hover.fixed-start + .main-content { margin-left: 17.125rem; } - .g-sidenav-hidden .navbar-vertical:hover .navbar-brand span { + .sidenav-hidden .navbar-vertical:hover .navbar-brand span { opacity: 1; } - .g-sidenav-hidden .navbar-vertical:hover .nav-item .nav-link .nav-link-text, - .g-sidenav-hidden .navbar-vertical:hover .nav-item .nav-link .sidenav-normal { + .sidenav-hidden .navbar-vertical:hover .nav-item .nav-link .nav-link-text, + .sidenav-hidden .navbar-vertical:hover .nav-item .nav-link .sidenav-normal { opacity: 1; width: auto; } - .g-sidenav-hidden .navbar-vertical:hover .nav-item .nav-link[data-bs-toggle="collapse"]:after { + .sidenav-hidden .navbar-vertical:hover .nav-item .nav-link[data-bs-toggle="collapse"]:after { content: "\f107"; opacity: 1; } - .g-sidenav-hidden .navbar-vertical:hover .nav-item .collapse .nav .nav-item .collapse .nav, - .g-sidenav-hidden .navbar-vertical:hover .nav-item .collapse .nav .nav-item .collapsing .nav { + .sidenav-hidden .navbar-vertical:hover .nav-item .collapse .nav .nav-item .collapse .nav, + .sidenav-hidden .navbar-vertical:hover .nav-item .collapse .nav .nav-item .collapsing .nav { margin-left: 0 !important; padding-left: 0 !important; } - .g-sidenav-hidden .navbar-vertical:hover .card.card-background .icon-shape { + .sidenav-hidden .navbar-vertical:hover .card.card-background .icon-shape { margin-bottom: 1rem !important; } - .g-sidenav-hidden .navbar-vertical:hover .card.card-background .docs-info { + .sidenav-hidden .navbar-vertical:hover .card.card-background .docs-info { opacity: 1; width: auto; height: auto; @@ -25711,7 +25714,7 @@ body:not(.dark-version) .sidenav.bg-transparent .collapse .nav-item .nav-link.ac } .table thead th { - padding: 0.75rem 1.5rem; + padding: 0.75rem 0.5rem; text-transform: capitalize; letter-spacing: 0px; border-bottom: 1px solid #f0f2f5; @@ -27757,3 +27760,6 @@ pre[class*="language-"] { overflow: auto !important; } } +.fs-lable-s { + font-size: 0.6rem; +} \ No newline at end of file diff --git a/src/Angor/Client/wwwroot/assets/js/app.js b/src/Angor/Client/wwwroot/assets/js/app.js index 9694622f..466674ce 100644 --- a/src/Angor/Client/wwwroot/assets/js/app.js +++ b/src/Angor/Client/wwwroot/assets/js/app.js @@ -1,4 +1,4 @@ -"use strict"; +'use strict'; window.angor = { installApp: function () { @@ -6,21 +6,65 @@ window.angor = { }, setTheme: function () { - const body = document.getElementsByTagName('body')[0]; + const body = document.body; const themeIcon = document.getElementById('theme-icon'); const theme = localStorage.getItem('theme'); if (theme === 'dark') { body.classList.add('dark-version'); - themeIcon.textContent = 'light_mode'; - localStorage.setItem('theme', 'dark'); - } + themeIcon.textContent = 'light_mode'; + } else { + body.classList.remove('dark-version'); + themeIcon.textContent = 'dark_mode'; + } }, showSnackbar: function (message, delaySeconds) { - var x = document.getElementById("snackbar"); - x.innerHTML = message; - x.className = "show"; - setTimeout(function () { x.className = x.className.replace("show", ""); }, (delaySeconds * 1000)); + const snackbar = document.getElementById('snackbar'); + snackbar.innerHTML = message; + snackbar.classList.add('show'); + setTimeout(function () { snackbar.classList.remove('show'); }, (delaySeconds * 1000)); } }; + + + + + +document.addEventListener('DOMContentLoaded', function () { + window.addEventListener('resize', handleSidenavTypeOnResize); + window.addEventListener('load', handleSidenavTypeOnResize); +}); + +function handleSidenavTypeOnResize() { + const elements = document.querySelectorAll('[onclick="handleSidebarType(this)"]'); + elements.forEach(element => { + const isDisabled = window.innerWidth < 1200; + element.classList.toggle('disabled', isDisabled); + }); +} + + + + + +function toggleSidenav() { + document.body.classList.toggle('sidenav-pinned'); +} + +function toggleDarkMode() { + const body = document.body; + const themeIcon = document.getElementById('theme-icon'); + const currentTheme = body.classList.contains('dark-version') ? 'light' : 'dark'; + + if (currentTheme === 'light') { + body.classList.remove('dark-version'); + themeIcon.textContent = 'dark_mode'; + } else { + body.classList.add('dark-version'); + themeIcon.textContent = 'light_mode'; + } + + localStorage.setItem('theme', currentTheme); +} + diff --git a/src/Angor/Client/wwwroot/assets/js/dashboard.js b/src/Angor/Client/wwwroot/assets/js/dashboard.js deleted file mode 100644 index 50c0cec5..00000000 --- a/src/Angor/Client/wwwroot/assets/js/dashboard.js +++ /dev/null @@ -1,830 +0,0 @@ -"use strict"; -(function() { - var isWindows = navigator.platform.indexOf('Win') > -1 ? true : false; - - if (isWindows) { - if (document.getElementsByClassName('main-content')[0]) { - var mainpanel = document.querySelector('.main-content'); - var ps = new PerfectScrollbar(mainpanel); - }; - - if (document.getElementsByClassName('sidenav')[0]) { - var sidebar = document.querySelector('.sidenav'); - var ps1 = new PerfectScrollbar(sidebar); - }; - - if (document.getElementsByClassName('navbar-collapse')[0]) { - var fixedplugin = document.querySelector('.navbar:not(.navbar-expand-lg) .navbar-collapse'); - var ps2 = new PerfectScrollbar(fixedplugin); - }; - - if (document.getElementsByClassName('fixed-plugin')[0]) { - var fixedplugin = document.querySelector('.fixed-plugin'); - var ps3 = new PerfectScrollbar(fixedplugin); - }; - }; -})(); - -if (document.getElementById('navbarBlur')) { - navbarBlurOnScroll('navbarBlur'); -} - -var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) -var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) { - return new bootstrap.Tooltip(tooltipTriggerEl) -}) - -function focused(el) { - if (el.parentElement.classList.contains('input-group')) { - el.parentElement.classList.add('focused'); - } -} - -function defocused(el) { - if (el.parentElement.classList.contains('input-group')) { - el.parentElement.classList.remove('focused'); - } -} - -function setAttributes(el, options) { - Object.keys(options).forEach(function(attr) { - el.setAttribute(attr, options[attr]); - }) -} - -if (document.querySelectorAll('.input-group').length != 0) { - var allInputs = document.querySelectorAll('input.form-control'); - allInputs.forEach(el => setAttributes(el, { - "onfocus": "focused(this)", - "onfocusout": "defocused(this)" - })); -} - - -if (document.querySelector('.fixed-plugin')) { - var fixedPlugin = document.querySelector('.fixed-plugin'); - var fixedPlugin = document.querySelector('.fixed-plugin'); - var fixedPluginButton = document.querySelector('.fixed-plugin-button'); - var fixedPluginButtonNav = document.querySelector('.fixed-plugin-button-nav'); - var fixedPluginCard = document.querySelector('.fixed-plugin .card'); - var fixedPluginCloseButton = document.querySelectorAll('.fixed-plugin-close-button'); - var navbar = document.getElementById('navbarBlur'); - var buttonNavbarFixed = document.getElementById('navbarFixed'); - - if (fixedPluginButton) { - fixedPluginButton.onclick = function() { - if (!fixedPlugin.classList.contains('show')) { - fixedPlugin.classList.add('show'); - } else { - fixedPlugin.classList.remove('show'); - } - } - } - - if (fixedPluginButtonNav) { - fixedPluginButtonNav.onclick = function() { - if (!fixedPlugin.classList.contains('show')) { - fixedPlugin.classList.add('show'); - } else { - fixedPlugin.classList.remove('show'); - } - } - } - - fixedPluginCloseButton.forEach(function(el) { - el.onclick = function() { - fixedPlugin.classList.remove('show'); - } - }) - - document.querySelector('body').onclick = function(e) { - if (e.target != fixedPluginButton && e.target != fixedPluginButtonNav && e.target.closest('.fixed-plugin .card') != fixedPluginCard) { - fixedPlugin.classList.remove('show'); - } - } - - if (navbar) { - if (navbar.getAttribute('data-scroll') == 'true' && buttonNavbarFixed) { - buttonNavbarFixed.setAttribute("checked", "true"); - } - } - -} - -function sidebarColor(a) { - var parent = document.querySelector(".nav-link.active"); - var color = a.getAttribute("data-color"); - - if (parent.classList.contains('bg-gradient-primary')) { - parent.classList.remove('bg-gradient-primary'); - } - if (parent.classList.contains('bg-gradient-dark')) { - parent.classList.remove('bg-gradient-dark'); - } - if (parent.classList.contains('bg-gradient-info')) { - parent.classList.remove('bg-gradient-info'); - } - if (parent.classList.contains('bg-gradient-success')) { - parent.classList.remove('bg-gradient-success'); - } - if (parent.classList.contains('bg-gradient-warning')) { - parent.classList.remove('bg-gradient-warning'); - } - if (parent.classList.contains('bg-gradient-danger')) { - parent.classList.remove('bg-gradient-danger'); - } - parent.classList.add('bg-gradient-' + color); -} - -function sidebarType(a) { - var parent = a.parentElement.children; - var color = a.getAttribute("data-class"); - var body = document.querySelector("body"); - var bodyWhite = document.querySelector("body:not(.dark-version)"); - var bodyDark = body.classList.contains('dark-version'); - - var colors = []; - - for (var i = 0; i < parent.length; i++) { - parent[i].classList.remove('active'); - colors.push(parent[i].getAttribute('data-class')); - } - - if (!a.classList.contains('active')) { - a.classList.add('active'); - } else { - a.classList.remove('active'); - } - - var sidebar = document.querySelector('.sidenav'); - - for (var i = 0; i < colors.length; i++) { - sidebar.classList.remove(colors[i]); - } - - sidebar.classList.add(color); - - - if (color == 'bg-transparent' || color == 'bg-white') { - var textWhites = document.querySelectorAll('.sidenav .text-white'); - for (let i = 0; i < textWhites.length; i++) { - textWhites[i].classList.remove('text-white'); - textWhites[i].classList.add('text-dark'); - } - } else { - var textDarks = document.querySelectorAll('.sidenav .text-dark'); - for (let i = 0; i < textDarks.length; i++) { - textDarks[i].classList.add('text-white'); - textDarks[i].classList.remove('text-dark'); - } - } - - if (color == 'bg-transparent' && bodyDark) { - var textDarks = document.querySelectorAll('.navbar-brand .text-dark'); - for (let i = 0; i < textDarks.length; i++) { - textDarks[i].classList.add('text-white'); - textDarks[i].classList.remove('text-dark'); - } - } - - if ((color == 'bg-transparent' || color == 'bg-white') && bodyWhite) { - var navbarBrand = document.querySelector('.navbar-brand-img'); - var navbarBrandImg = navbarBrand.src; - - if (navbarBrandImg.includes('logo-ct.png')) { - var navbarBrandImgNew = navbarBrandImg.replace("logo-ct", "logo-ct-dark"); - navbarBrand.src = navbarBrandImgNew; - } - } else { - var navbarBrand = document.querySelector('.navbar-brand-img'); - var navbarBrandImg = navbarBrand.src; - if (navbarBrandImg.includes('logo-ct-dark.png')) { - var navbarBrandImgNew = navbarBrandImg.replace("logo-ct-dark", "logo-ct"); - navbarBrand.src = navbarBrandImgNew; - } - } - - if (color == 'bg-white' && bodyDark) { - var navbarBrand = document.querySelector('.navbar-brand-img'); - var navbarBrandImg = navbarBrand.src; - - if (navbarBrandImg.includes('logo-ct.png')) { - var navbarBrandImgNew = navbarBrandImg.replace("logo-ct", "logo-ct-dark"); - navbarBrand.src = navbarBrandImgNew; - } - } -} - -function navbarFixed(el) { - let classes = ['position-sticky', 'blur', 'shadow-blur', 'mt-4', 'left-auto', 'top-1', 'z-index-sticky']; - const navbar = document.getElementById('navbarBlur'); - - if (!el.getAttribute("checked")) { - navbar.classList.add(...classes); - navbar.setAttribute('navbar-scroll', 'true'); - navbarBlurOnScroll('navbarBlur'); - el.setAttribute("checked", "true"); - } else { - navbar.classList.remove(...classes); - navbar.setAttribute('navbar-scroll', 'false'); - navbarBlurOnScroll('navbarBlur'); - el.removeAttribute("checked"); - } -}; - - -function navbarMinimize(el) { - var sidenavShow = document.getElementsByClassName('g-sidenav-show')[0]; - - if (!el.getAttribute("checked")) { - sidenavShow.classList.remove('g-sidenav-pinned'); - sidenavShow.classList.add('g-sidenav-hidden'); - el.setAttribute("checked", "true"); - } else { - sidenavShow.classList.remove('g-sidenav-hidden'); - sidenavShow.classList.add('g-sidenav-pinned'); - el.removeAttribute("checked"); - } -} - -function navbarBlurOnScroll(id) { - const navbar = document.getElementById(id); - let navbarScrollActive = navbar ? navbar.getAttribute("data-scroll") : false; - let scrollDistance = 5; - let classes = ['blur', 'shadow-blur', 'left-auto']; - let toggleClasses = ['shadow-none']; - - if (navbarScrollActive == 'true') { - window.onscroll = debounce(function() { - if (window.scrollY > scrollDistance) { - blurNavbar(); - } else { - transparentNavbar(); - } - }, 10); - } else { - window.onscroll = debounce(function() { - transparentNavbar(); - }, 10); - } - - var isWindows = navigator.platform.indexOf('Win') > -1 ? true : false; - - if (isWindows) { - var content = document.querySelector('.main-content'); - if (navbarScrollActive == 'true') { - content.addEventListener('ps-scroll-y', debounce(function() { - if (content.scrollTop > scrollDistance) { - blurNavbar(); - } else { - transparentNavbar(); - } - }, 10)); - } else { - content.addEventListener('ps-scroll-y', debounce(function() { - transparentNavbar(); - }, 10)); - } - } - - function blurNavbar() { - navbar.classList.add(...classes) - navbar.classList.remove(...toggleClasses) - - toggleNavLinksColor('blur'); - } - - function transparentNavbar() { - navbar.classList.remove(...classes) - navbar.classList.add(...toggleClasses) - - toggleNavLinksColor('transparent'); - } - - function toggleNavLinksColor(type) { - let navLinks = document.querySelectorAll('.navbar-main .nav-link') - let navLinksToggler = document.querySelectorAll('.navbar-main .sidenav-toggler-line') - - if (type === "blur") { - navLinks.forEach(element => { - element.classList.remove('text-body') - }); - - navLinksToggler.forEach(element => { - element.classList.add('bg-dark') - }); - } else if (type === "transparent") { - navLinks.forEach(element => { - element.classList.add('text-body') - }); - - navLinksToggler.forEach(element => { - element.classList.remove('bg-dark') - }); - } - } -} - -function debounce(func, wait, immediate) { - var timeout; - return function() { - var context = this, - args = arguments; - var later = function() { - timeout = null; - if (!immediate) func.apply(context, args); - }; - var callNow = immediate && !timeout; - clearTimeout(timeout); - timeout = setTimeout(later, wait); - if (callNow) func.apply(context, args); - }; -}; - -document.addEventListener("DOMContentLoaded", function() { - var toastElList = [].slice.call(document.querySelectorAll(".toast")); - - var toastList = toastElList.map(function(toastEl) { - return new bootstrap.Toast(toastEl); - }); - - var toastButtonList = [].slice.call(document.querySelectorAll(".toast-btn")); - - toastButtonList.map(function(toastButtonEl) { - toastButtonEl.addEventListener("click", function() { - var toastToTrigger = document.getElementById(toastButtonEl.dataset.target); - - if (toastToTrigger) { - var toast = bootstrap.Toast.getInstance(toastToTrigger); - toast.show(); - } - }); - }); -}); - -var total = document.querySelectorAll('.nav-pills'); - -function initNavs() { - total.forEach(function(item, i) { - var moving_div = document.createElement('div'); - var first_li = item.querySelector('li:first-child .nav-link'); - var tab = first_li.cloneNode(); - tab.innerHTML = "-"; - - moving_div.classList.add('moving-tab', 'position-absolute', 'nav-link'); - moving_div.appendChild(tab); - item.appendChild(moving_div); - - var list_length = item.getElementsByTagName("li").length; - - moving_div.style.padding = '0px'; - moving_div.style.width = item.querySelector('li:nth-child(1)').offsetWidth + 'px'; - moving_div.style.transform = 'translate3d(0px, 0px, 0px)'; - moving_div.style.transition = '.5s ease'; - - item.onmouseover = function(event) { - let target = getEventTarget(event); - let li = target.closest('li'); - if (li) { - let nodes = Array.from(li.closest('ul').children); - let index = nodes.indexOf(li) + 1; - item.querySelector('li:nth-child(' + index + ') .nav-link').onclick = function() { - moving_div = item.querySelector('.moving-tab'); - let sum = 0; - if (item.classList.contains('flex-column')) { - for (var j = 1; j <= nodes.indexOf(li); j++) { - sum += item.querySelector('li:nth-child(' + j + ')').offsetHeight; - } - moving_div.style.transform = 'translate3d(0px,' + sum + 'px, 0px)'; - moving_div.style.height = item.querySelector('li:nth-child(' + j + ')').offsetHeight; - } else { - for (var j = 1; j <= nodes.indexOf(li); j++) { - sum += item.querySelector('li:nth-child(' + j + ')').offsetWidth; - } - moving_div.style.transform = 'translate3d(' + sum + 'px, 0px, 0px)'; - moving_div.style.width = item.querySelector('li:nth-child(' + index + ')').offsetWidth + 'px'; - } - } - } - } - }); -} - -setTimeout(function() { - initNavs(); -}, 100); - -window.addEventListener('resize', function(event) { - total.forEach(function(item, i) { - item.querySelector('.moving-tab').remove(); - var moving_div = document.createElement('div'); - var tab = item.querySelector(".nav-link.active").cloneNode(); - tab.innerHTML = "-"; - - moving_div.classList.add('moving-tab', 'position-absolute', 'nav-link'); - moving_div.appendChild(tab); - - item.appendChild(moving_div); - - moving_div.style.padding = '0px'; - moving_div.style.transition = '.5s ease'; - - let li = item.querySelector(".nav-link.active").parentElement; - - if (li) { - let nodes = Array.from(li.closest('ul').children); - let index = nodes.indexOf(li) + 1; - - let sum = 0; - if (item.classList.contains('flex-column')) { - for (var j = 1; j <= nodes.indexOf(li); j++) { - sum += item.querySelector('li:nth-child(' + j + ')').offsetHeight; - } - moving_div.style.transform = 'translate3d(0px,' + sum + 'px, 0px)'; - moving_div.style.width = item.querySelector('li:nth-child(' + index + ')').offsetWidth + 'px'; - moving_div.style.height = item.querySelector('li:nth-child(' + j + ')').offsetHeight; - } else { - for (var j = 1; j <= nodes.indexOf(li); j++) { - sum += item.querySelector('li:nth-child(' + j + ')').offsetWidth; - } - moving_div.style.transform = 'translate3d(' + sum + 'px, 0px, 0px)'; - moving_div.style.width = item.querySelector('li:nth-child(' + index + ')').offsetWidth + 'px'; - - } - } - }); - - if (window.innerWidth < 991) { - total.forEach(function(item, i) { - if (!item.classList.contains('flex-column')) { - item.classList.remove('flex-row'); - item.classList.add('flex-column', 'on-resize'); - let li = item.querySelector(".nav-link.active").parentElement; - let nodes = Array.from(li.closest('ul').children); - let index = nodes.indexOf(li) + 1; - let sum = 0; - for (var j = 1; j <= nodes.indexOf(li); j++) { - sum += item.querySelector('li:nth-child(' + j + ')').offsetHeight; - } - var moving_div = document.querySelector('.moving-tab'); - moving_div.style.width = item.querySelector('li:nth-child(1)').offsetWidth + 'px'; - moving_div.style.transform = 'translate3d(0px,' + sum + 'px, 0px)'; - - } - }); - } else { - total.forEach(function(item, i) { - if (item.classList.contains('on-resize')) { - item.classList.remove('flex-column', 'on-resize'); - item.classList.add('flex-row'); - let li = item.querySelector(".nav-link.active").parentElement; - let nodes = Array.from(li.closest('ul').children); - let index = nodes.indexOf(li) + 1; - let sum = 0; - for (var j = 1; j <= nodes.indexOf(li); j++) { - sum += item.querySelector('li:nth-child(' + j + ')').offsetWidth; - } - var moving_div = document.querySelector('.moving-tab'); - moving_div.style.transform = 'translate3d(' + sum + 'px, 0px, 0px)'; - moving_div.style.width = item.querySelector('li:nth-child(' + index + ')').offsetWidth + 'px'; - } - }) - } -}); - -if (window.innerWidth < 991) { - total.forEach(function(item, i) { - if (item.classList.contains('flex-row')) { - item.classList.remove('flex-row'); - item.classList.add('flex-column', 'on-resize'); - } - }); -} - -function getEventTarget(e) { - e = e || window.event; - return e.target || e.srcElement; -} - -window.onload = function() { - var inputs = document.querySelectorAll('input'); - - for (var i = 0; i < inputs.length; i++) { - inputs[i].addEventListener('focus', function(e) { - this.parentElement.classList.add('is-focused'); - }, false); - - inputs[i].onkeyup = function(e) { - if (this.value != "") { - this.parentElement.classList.add('is-filled'); - } else { - this.parentElement.classList.remove('is-filled'); - } - }; - - inputs[i].addEventListener('focusout', function(e) { - if (this.value != "") { - this.parentElement.classList.add('is-filled'); - } - this.parentElement.classList.remove('is-focused'); - }, false); - } - - var ripples = document.querySelectorAll('.btn'); - - for (var i = 0; i < ripples.length; i++) { - ripples[i].addEventListener('click', function(e) { - var targetEl = e.target; - var rippleDiv = targetEl.querySelector('.ripple'); - - rippleDiv = document.createElement('span'); - rippleDiv.classList.add('ripple'); - rippleDiv.style.width = rippleDiv.style.height = Math.max(targetEl.offsetWidth, targetEl.offsetHeight) + 'px'; - targetEl.appendChild(rippleDiv); - - rippleDiv.style.left = (e.offsetX - rippleDiv.offsetWidth / 2) + 'px'; - rippleDiv.style.top = (e.offsetY - rippleDiv.offsetHeight / 2) + 'px'; - rippleDiv.classList.add('ripple'); - setTimeout(function() { - rippleDiv.parentElement.removeChild(rippleDiv); - }, 600); - }, false); - } -}; - -const iconNavbarSidenav = document.getElementById('iconNavbarSidenav'); -const iconSidenav = document.getElementById('iconSidenav'); -const sidenav = document.getElementById('sidenav-main'); -let body = document.getElementsByTagName('body')[0]; -let className = 'g-sidenav-pinned'; - -if (iconNavbarSidenav) { - iconNavbarSidenav.addEventListener("click", toggleSidenav); -} - -if (iconSidenav) { - iconSidenav.addEventListener("click", toggleSidenav); -} - -function toggleSidenav() { - if (body.classList.contains(className)) { - body.classList.remove(className); - setTimeout(function() { - sidenav.classList.remove('bg-white'); - }, 100); - sidenav.classList.remove('bg-transparent'); - - } else { - body.classList.add(className); - sidenav.classList.add('bg-white'); - sidenav.classList.remove('bg-transparent'); - iconSidenav.classList.remove('d-none'); - } -} - -let referenceButtons = document.querySelector('[data-class]'); - -if (sidenav) { - window.addEventListener("resize", navbarColorOnResize); - - function navbarColorOnResize() { - if (window.innerWidth > 1200) { - if (referenceButtons?.classList.contains('active') && referenceButtons?.getAttribute('data-class') === 'bg-transparent') { - sidenav.classList.remove('bg-white'); - } else { - sidenav.classList.add('bg-white'); - } - } else { - sidenav.classList.add('bg-white'); - sidenav.classList.remove('bg-transparent'); - } - } -} - -window.addEventListener("resize", sidenavTypeOnResize); -window.addEventListener("load", sidenavTypeOnResize); - -function sidenavTypeOnResize() { - let elements = document.querySelectorAll('[onclick="sidebarType(this)"]'); - if (window.innerWidth < 1200) { - elements.forEach(function(el) { - el.classList.add('disabled'); - }); - } else { - elements.forEach(function(el) { - el.classList.remove('disabled'); - }); - } -} - - -// Light Mode / Dark Mode -function toggleDarkMode() { - const body = document.getElementsByTagName('body')[0]; - const hr = document.querySelectorAll('div:not(.sidenav) > hr'); - const hr_card = document.querySelectorAll('div:not(.bg-gradient-dark) hr'); - const text_btn = document.querySelectorAll('button:not(.btn) > .text-dark'); - const text_span = document.querySelectorAll('span.text-dark, .breadcrumb .text-dark'); - const text_span_white = document.querySelectorAll('span.text-white, .breadcrumb .text-white'); - const text_strong = document.querySelectorAll('strong.text-dark'); - const text_strong_white = document.querySelectorAll('strong.text-white'); - const text_nav_link = document.querySelectorAll('a.nav-link.text-dark'); - const text_nav_link_white = document.querySelectorAll('a.nav-link.text-white'); - const secondary = document.querySelectorAll('.text-secondary'); - const bg_gray_100 = document.querySelectorAll('.bg-gray-100'); - const bg_gray_600 = document.querySelectorAll('.bg-gray-600'); - const btn_text_dark = document.querySelectorAll('.btn.btn-link.text-dark, .material-icons.text-dark'); - const btn_text_white = document.querySelectorAll('.btn.btn-link.text-white, .material-icons.text-white'); - const card_border = document.querySelectorAll('.card.border'); - const card_border_dark = document.querySelectorAll('.card.border.border-dark'); - - const svg = document.querySelectorAll('g'); - const themeIcon = document.getElementById('theme-icon'); - - if (!body.classList.contains('dark-version')) { - body.classList.add('dark-version'); - themeIcon.textContent = 'light_mode'; // Change icon to light mode - localStorage.setItem('theme', 'dark'); - - for (var i = 0; i < hr.length; i++) { - if (hr[i].classList.contains('dark')) { - hr[i].classList.remove('dark'); - hr[i].classList.add('light'); - } - } - - for (var i = 0; i < hr_card.length; i++) { - if (hr_card[i].classList.contains('dark')) { - hr_card[i].classList.remove('dark'); - hr_card[i].classList.add('light'); - } - } - for (var i = 0; i < text_btn.length; i++) { - if (text_btn[i].classList.contains('text-dark')) { - text_btn[i].classList.remove('text-dark'); - text_btn[i].classList.add('text-white'); - } - } - for (var i = 0; i < text_span.length; i++) { - if (text_span[i].classList.contains('text-dark')) { - text_span[i].classList.remove('text-dark'); - text_span[i].classList.add('text-white'); - } - } - for (var i = 0; i < text_strong.length; i++) { - if (text_strong[i].classList.contains('text-dark')) { - text_strong[i].classList.remove('text-dark'); - text_strong[i].classList.add('text-white'); - } - } - for (var i = 0; i < text_nav_link.length; i++) { - if (text_nav_link[i].classList.contains('text-dark')) { - text_nav_link[i].classList.remove('text-dark'); - text_nav_link[i].classList.add('text-white'); - } - } - for (var i = 0; i < secondary.length; i++) { - if (secondary[i].classList.contains('text-secondary')) { - secondary[i].classList.remove('text-secondary'); - secondary[i].classList.add('text-white'); - secondary[i].classList.add('opacity-8'); - } - } - for (var i = 0; i < bg_gray_100.length; i++) { - if (bg_gray_100[i].classList.contains('bg-gray-100')) { - bg_gray_100[i].classList.remove('bg-gray-100'); - bg_gray_100[i].classList.add('bg-gray-600'); - } - } - for (var i = 0; i < btn_text_dark.length; i++) { - btn_text_dark[i].classList.remove('text-dark'); - btn_text_dark[i].classList.add('text-white'); - } - for (var i = 0; i < svg.length; i++) { - if (svg[i].hasAttribute('fill')) { - svg[i].setAttribute('fill', '#fff'); - } - } - for (var i = 0; i < card_border.length; i++) { - card_border[i].classList.add('border-dark'); - } - - } else { - body.classList.remove('dark-version'); - for (var i = 0; i < hr.length; i++) { - if (hr[i].classList.contains('light')) { - hr[i].classList.add('dark'); - hr[i].classList.remove('light'); - } - } - for (var i = 0; i < hr_card.length; i++) { - if (hr_card[i].classList.contains('light')) { - hr_card[i].classList.add('dark'); - hr_card[i].classList.remove('light'); - } - } - for (var i = 0; i < text_btn.length; i++) { - if (text_btn[i].classList.contains('text-white')) { - text_btn[i].classList.remove('text-white'); - text_btn[i].classList.add('text-dark'); - } - } - for (var i = 0; i < text_span_white.length; i++) { - if (text_span_white[i].classList.contains('text-white') && !text_span_white[i].closest('.sidenav') && !text_span_white[i].closest('.card.bg-gradient-dark')) { - text_span_white[i].classList.remove('text-white'); - text_span_white[i].classList.add('text-dark'); - } - } - for (var i = 0; i < text_strong_white.length; i++) { - if (text_strong_white[i].classList.contains('text-white')) { - text_strong_white[i].classList.remove('text-white'); - text_strong_white[i].classList.add('text-dark'); - } - } - for (var i = 0; i < text_nav_link_white.length; i++) { - if (text_nav_link_white[i].classList.contains('text-white') && !text_nav_link_white[i].closest('.sidenav')) { - text_nav_link_white[i].classList.remove('text-white'); - text_nav_link_white[i].classList.add('text-dark'); - } - } - for (var i = 0; i < secondary.length; i++) { - if (secondary[i].classList.contains('text-white')) { - secondary[i].classList.remove('text-white'); - secondary[i].classList.remove('opacity-8'); - secondary[i].classList.add('text-dark'); - } - } - for (var i = 0; i < bg_gray_600.length; i++) { - if (bg_gray_600[i].classList.contains('bg-gray-600')) { - bg_gray_600[i].classList.remove('bg-gray-600'); - bg_gray_600[i].classList.add('bg-gray-100'); - } - } - for (var i = 0; i < svg.length; i++) { - if (svg[i].hasAttribute('fill')) { - svg[i].setAttribute('fill', '#252f40'); - } - } - for (var i = 0; i < btn_text_white.length; i++) { - if (!btn_text_white[i].closest('.card.bg-gradient-dark')) { - btn_text_white[i].classList.remove('text-white'); - btn_text_white[i].classList.add('text-dark'); - } - } - for (var i = 0; i < card_border_dark.length; i++) { - card_border_dark[i].classList.remove('border-dark'); - } - - themeIcon.textContent = 'dark_mode'; // Change icon to dark mode - localStorage.setItem('theme', 'light'); - } -} - - -const indicators = document.querySelectorAll(".indicator"); -const sections = document.querySelectorAll("section"); - -if (indicators) { - const resetCurrentActiveIndicator = () => { - const activeIndicator = document.querySelector(".indicator.active"); - if (activeIndicator) { - activeIndicator.classList.remove("active"); - } - }; - - const onSectionLeavesViewport = (section) => { - const observer = new IntersectionObserver( - (entries) => { - entries.forEach((entry) => { - if (entry.isIntersecting) { - resetCurrentActiveIndicator(); - const element = entry.target; - const indicator = document.querySelector(`a[href='#${element.id}']`); - indicator.classList.add("active"); - return; - } - }); - }, { - root: null, - rootMargin: "0px", - threshold: 0.75 - } - ); - observer.observe(section); - }; - - indicators.forEach((indicator) => { - indicator.addEventListener("click", function(event) { - event.preventDefault(); - document - .querySelector(this.getAttribute("href")) - .scrollIntoView({ - behavior: "smooth" - }); - resetCurrentActiveIndicator(); - this.classList.add("active"); - }); - }); - - sections.forEach(onSectionLeavesViewport); -} \ No newline at end of file diff --git a/src/Angor/Client/wwwroot/index.html b/src/Angor/Client/wwwroot/index.html index 54a60db7..37d5e611 100644 --- a/src/Angor/Client/wwwroot/index.html +++ b/src/Angor/Client/wwwroot/index.html @@ -18,7 +18,7 @@ - +
@@ -34,7 +34,6 @@ -