Skip to content

Commit 878ca01

Browse files
dimodidimodi
committed
Add dreaft for the new Financial Dashboard sample app
1 parent 8d9bf09 commit 878ca01

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+16772
-0
lines changed

‎sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard.sln

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 17
4+
VisualStudioVersion = 17.13.35913.81 d17.13
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BlazorFinancialDashboard", "BlazorFinancialDashboard\BlazorFinancialDashboard.csproj", "{BC6EA800-1565-4E0C-B3C0-2E053475C831}"
7+
EndProject
8+
Global
9+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
10+
Debug|Any CPU = Debug|Any CPU
11+
Release|Any CPU = Release|Any CPU
12+
EndGlobalSection
13+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
14+
{BC6EA800-1565-4E0C-B3C0-2E053475C831}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{BC6EA800-1565-4E0C-B3C0-2E053475C831}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{BC6EA800-1565-4E0C-B3C0-2E053475C831}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{BC6EA800-1565-4E0C-B3C0-2E053475C831}.Release|Any CPU.Build.0 = Release|Any CPU
18+
EndGlobalSection
19+
GlobalSection(SolutionProperties) = preSolution
20+
HideSolutionNode = FALSE
21+
EndGlobalSection
22+
GlobalSection(ExtensibilityGlobals) = postSolution
23+
SolutionGuid = {35F0ED33-174A-4C0C-A68D-8798485673D7}
24+
EndGlobalSection
25+
EndGlobal

‎sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/BlazorFinancialDashboard.csproj

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<Project Sdk="Microsoft.NET.Sdk.Web">
2+
3+
4+
<PropertyGroup>
5+
<TargetFramework>net9.0</TargetFramework>
6+
<Nullable>enable</Nullable>
7+
<ImplicitUsings>enable</ImplicitUsings>
8+
</PropertyGroup>
9+
<PropertyGroup Condition=" '$(RunConfiguration)' == 'https' " />
10+
<PropertyGroup Condition=" '$(RunConfiguration)' == 'http' " />
11+
<ItemGroup>
12+
<PackageReference Include="Telerik.UI.for.Blazor" Version="8.1.1" />
13+
</ItemGroup>
14+
<ItemGroup>
15+
<Compile Update="Resources\TelerikMessages.Designer.cs">
16+
<DesignTime>True</DesignTime>
17+
<AutoGen>True</AutoGen>
18+
<DependentUpon>TelerikMessages.resx</DependentUpon>
19+
</Compile>
20+
</ItemGroup>
21+
22+
<ItemGroup>
23+
<EmbeddedResource Update="Resources\TelerikMessages.resx">
24+
<Generator>PublicResXFileCodeGenerator</Generator>
25+
<LastGenOutput>TelerikMessages.Designer.cs</LastGenOutput>
26+
</EmbeddedResource>
27+
</ItemGroup>
28+
29+
<ItemGroup>
30+
<None Remove="Data\" />
31+
</ItemGroup>
32+
<ItemGroup>
33+
<Folder Include="Data\" />
34+
</ItemGroup>
35+
</Project>

‎sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Components/App.razor

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
@using System.Globalization
2+
@using Microsoft.AspNetCore.Localization
3+
4+
<!DOCTYPE html>
5+
<html lang="en">
6+
7+
<head>
8+
<meta charset="utf-8" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<base href="/" />
11+
<link rel="stylesheet" href="https://blazor.cdn.telerik.com/blazor/8.1.1/kendo-theme-material/swatches/material-main-dark.css" />
12+
<link rel="stylesheet" href="https://unpkg.com/@@progress/kendo-theme-utils/dist/all.css" />
13+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" />
14+
<script src="https://blazor.cdn.telerik.com/blazor/8.1.1/telerik-blazor.min.js" defer></script>
15+
<link rel="stylesheet" href="@Assets["app.css"]" />
16+
<link rel="stylesheet" href="@Assets["BlazorFinancialDashboard.styles.css"]" />
17+
<link rel="icon" type="image/png" sizes="48x48" href="favicon-48x48.png" />
18+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
19+
<link rel="shortcut icon" href="/favicon.ico" />
20+
<link rel="apple-touch-icon" type="image/png" href="/apple-touch-icon.png" />
21+
<HeadOutlet @rendermode="@InteractiveServer" />
22+
</head>
23+
24+
<body class="k-body">
25+
<Routes @rendermode="@InteractiveServer" />
26+
<script src="_framework/blazor.web.js" autostart="false"></script>
27+
<script>
28+
document.addEventListener("DOMContentLoaded", function() {
29+
Blazor.start();
30+
});
31+
</script>
32+
</body>
33+
34+
</html>
35+
36+
@code {
37+
[CascadingParameter]
38+
public HttpContext? HttpContext { get; set; }
39+
40+
protected override void OnInitialized()
41+
{
42+
HttpContext?.Response.Cookies.Append(
43+
CookieRequestCultureProvider.DefaultCookieName,
44+
CookieRequestCultureProvider.MakeCookieValue(
45+
new RequestCulture(
46+
CultureInfo.CurrentCulture,
47+
CultureInfo.CurrentUICulture)));
48+
}
49+
}

‎sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Components/Layout/CultureChooser.razor

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
@using System.Globalization
2+
@inject IJSRuntime JS
3+
@inject NavigationManager Navigation
4+
5+
<TelerikDropDownButton Rounded="@ThemeConstants.DropDownButton.Rounded.Large"
6+
ShowArrowButton="true"
7+
Size="@ThemeConstants.DropDownButton.Size.Small"
8+
ThemeColor="@ThemeConstants.DropDownButton.ThemeColor.Light">
9+
<DropDownButtonContent>Currency</DropDownButtonContent>
10+
<DropDownButtonItems>
11+
<DropDownButtonItem OnClick="@( () => ApplySelectedCulture("en-US") )">US Dollar</DropDownButtonItem>
12+
<DropDownButtonItem OnClick="@( () => ApplySelectedCulture("de-DE") )">Euro</DropDownButtonItem>
13+
</DropDownButtonItems>
14+
</TelerikDropDownButton>
15+
16+
@code {
17+
private void ApplySelectedCulture(string cultureName)
18+
{
19+
if (CultureInfo.CurrentCulture.Name != cultureName)
20+
{
21+
var uri = new Uri(Navigation.Uri)
22+
.GetComponents(UriComponents.PathAndQuery, UriFormat.Unescaped);
23+
var cultureEscaped = Uri.EscapeDataString(cultureName);
24+
var uriEscaped = Uri.EscapeDataString(uri);
25+
26+
var culture = CultureInfo.GetCultureInfo(cultureName);
27+
CultureInfo.CurrentCulture = CultureInfo.CurrentUICulture = culture;
28+
29+
Navigation.NavigateTo(
30+
$"Culture/Set?culture={cultureEscaped}&redirectUri={uriEscaped}",
31+
forceLoad: true);
32+
}
33+
}
34+
}

‎sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Components/Layout/MainLayout.razor

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
@inherits LayoutComponentBase
2+
@layout TelerikLayout
3+
4+
@inject NavigationManager NavManager
5+
@inject UserService UserService
6+
7+
<TelerikMediaQuery Media="(min-width: 1201px)" OnChange="@( (bool matches) => IsOverMaxWidth = matches )" />
8+
<TelerikMediaQuery Media="(min-width: 992px)" OnChange="@( (bool matches) => IsLargeScreen = matches )" />
9+
<TelerikMediaQuery Media="(min-width: 768px)" OnChange="@( (bool matches) => IsMediumOrLargeScreen = matches )" />
10+
11+
<TelerikDrawer Data="@DrawerData"
12+
TItem="@NavItem"
13+
@bind-Expanded="@DrawerExpanded"
14+
SelectedItem="@DrawerSelectedItem"
15+
SelectedItemChanged="@DrawerSelectedItemChanged"
16+
Mode="@DrawerMode.Overlay"
17+
MiniMode="true"
18+
Class="mainlayout-drawer">
19+
<DrawerContent>
20+
<div id="drawer-content-wrapper" class="k-ml-auto k-mr-auto">
21+
22+
<TelerikAppBar ThemeColor="@ThemeConstants.AppBar.ThemeColor.Base"
23+
Class="appbar-top">
24+
<AppBarSection>
25+
<div class="greeting">
26+
<TelerikAvatar Width="42px" Height="42px">
27+
<img src="images/maria-avatar.jpeg" alt="Maria profile photo" />
28+
</TelerikAvatar>
29+
<span>
30+
<strong>Hi, @AppUser.FirstName!</strong>
31+
<span>Welcome back!</span>
32+
</span>
33+
</div>
34+
</AppBarSection>
35+
<AppBarSpacer />
36+
<AppBarSection>
37+
<TelerikTextBox Placeholder="Search"
38+
Rounded="@ThemeConstants.TextBox.Rounded.Large"
39+
Class="search-textbox">
40+
<TextBoxPrefixTemplate>
41+
<TelerikSvgIcon Icon="@SvgIconsNS.SvgIcon.Search" />
42+
</TextBoxPrefixTemplate>
43+
</TelerikTextBox>
44+
</AppBarSection>
45+
<AppBarSpacer />
46+
<AppBarSection>
47+
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
48+
Size="@ThemeConstants.Button.Size.Small"
49+
Rounded="@ThemeConstants.Button.Rounded.Large"
50+
OnClick="@GoToAIAssistantPage">AI Assistant</TelerikButton>
51+
</AppBarSection>
52+
<AppBarSection>
53+
<CultureChooser />
54+
</AppBarSection>
55+
</TelerikAppBar>
56+
57+
<main class="k-d-grid k-grid-cols-12 k-gap-4 k-pb-4">
58+
<CascadingValue Value="@IsLargeScreen" Name="IsLargeScreen">
59+
<CascadingValue Value="@IsMediumOrLargeScreen" Name="IsMediumOrLargeScreen">
60+
<CascadingValue Value="@this" IsFixed="true">
61+
@Body
62+
</CascadingValue>
63+
</CascadingValue>
64+
</CascadingValue>
65+
</main>
66+
67+
<TelerikAppBar ThemeColor="@ThemeConstants.AppBar.ThemeColor.Base"
68+
Class="@( $"appbar-bottom {( IsOverMaxWidth ? "narrow" : string.Empty )}" )">
69+
<AppBarSection>
70+
<div class="@( IsOverMaxWidth ? string.Empty : "k-pl-15" )">
71+
<div class="k-d-flex k-align-items-center k-gap-2 k-p-2"><img src="images/github-icon.svg" alt="GitHub logo" /> Get the Source Code</div>
72+
73+
<div class="k-p-2">Copyright &copy; @DateTime.Today.Year Progress Software. All rights reserved.</div>
74+
</div>
75+
</AppBarSection>
76+
<AppBarSpacer />
77+
</TelerikAppBar>
78+
79+
</div>
80+
</DrawerContent>
81+
</TelerikDrawer>
82+
83+
<div id="blazor-error-ui">
84+
An unhandled error has occurred.
85+
<a href="" class="reload">Reload</a>
86+
<a class="dismiss">🗙</a>
87+
</div>
88+
89+
@code {
90+
private IEnumerable<NavItem> DrawerData { get; set; } = new List<NavItem>() {
91+
new NavItem("Menu", SvgIconsNS.SvgIcon.Menu, string.Empty),
92+
new NavItem(),
93+
new NavItem("Overview", SvgIconsNS.SvgIcon.Grid, "/"),
94+
new NavItem("Transactions", SvgIconsNS.SvgIcon.ArrowsSwap, "/transactions"),
95+
new NavItem("Investments", SvgIconsNS.SvgIcon.Dollar, "/investments"),
96+
new NavItem("Analytics", SvgIconsNS.SvgIcon.ChartColumnStacked, "/analytics"),
97+
new NavItem("AI Assistant", SvgIconsNS.SvgIcon.Sparkles, "/ai-assistant"),
98+
new NavItem(),
99+
new NavItem("Settings", SvgIconsNS.SvgIcon.Gear, "/settings")
100+
};
101+
102+
private bool DrawerExpanded { get; set; }
103+
104+
private NavItem? DrawerSelectedItem { get; set; }
105+
106+
private bool IsOverMaxWidth { get; set; }
107+
private bool IsLargeScreen { get; set; }
108+
private bool IsMediumOrLargeScreen { get; set; }
109+
110+
private User AppUser { get; set; } = null!;
111+
112+
private void DrawerSelectedItemChanged(NavItem newSelectedItem)
113+
{
114+
if (newSelectedItem?.Icon is SvgIconsNS.Menu)
115+
{
116+
DrawerExpanded = !DrawerExpanded;
117+
}
118+
else
119+
{
120+
DrawerSelectedItem = newSelectedItem;
121+
}
122+
}
123+
private void GoToAIAssistantPage()
124+
{
125+
NavItem aiAssistantItem = DrawerData.First(i => i.Url == "/ai-assistant");
126+
DrawerSelectedItem = aiAssistantItem;
127+
NavManager.NavigateTo(aiAssistantItem.Url);
128+
}
129+
130+
private void SelectDrawerItem()
131+
{
132+
var url = NavManager.Uri.Replace(NavManager.BaseUri, "/").ToLowerInvariant();
133+
134+
DrawerSelectedItem = DrawerData.FirstOrDefault(x => x.Url.ToLowerInvariant() == url);
135+
}
136+
137+
internal async Task GetAppUser(bool forceRefresh = false)
138+
{
139+
AppUser = await UserService.Read(1);
140+
141+
if (forceRefresh)
142+
{
143+
StateHasChanged();
144+
}
145+
}
146+
147+
protected override async Task OnInitializedAsync()
148+
{
149+
await GetAppUser();
150+
151+
SelectDrawerItem();
152+
153+
await base.OnInitializedAsync();
154+
}
155+
}

‎sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Components/Layout/MainLayout.razor.css

Whitespace-only changes.

‎sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Components/Layout/TelerikLayout.razor

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@inherits LayoutComponentBase
2+
3+
<TelerikRootComponent>
4+
@Body
5+
</TelerikRootComponent>

‎sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Components/Pages/AIAssistant.razor

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@page "/ai-assistant"
2+
3+
<PageTitle>AI Assistant</PageTitle>
4+
5+
<h1>AI Assistant</h1>
6+
7+
<UICard Title="Related Topics"
8+
ColSpanOnLargeScreen="8"
9+
ColSpanOnMediumScreen="6">
10+
</UICard>
11+
12+
<UICard Title="Chat with Roby"
13+
ColSpanOnLargeScreen="4"
14+
ColSpanOnMediumScreen="6">
15+
<TelerikAIPrompt Class="ai-prompt"
16+
Height="100%"
17+
OnPromptRequest="@OnAIPromptRequest"
18+
PromptSuggestions="@AIPromptSuggestions" />
19+
</UICard>
20+
21+
@code {
22+
private readonly List<string> AIPromptSuggestions = new()
23+
{
24+
$"How to start investing with just {100.ToString("c0")}?",
25+
"How to create a financial plan that works?",
26+
"Can you give me budgeting tips for better finances?"
27+
};
28+
29+
private void OnAIPromptRequest(AIPromptPromptRequestEventArgs args)
30+
{
31+
args.Output = "AI response ...";
32+
}
33+
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy