mirror of
https://github.com/Stefan-5422/-T5-Elektrifikatsiya.git
synced 2026-09-04 08:55:59 +02:00
Merge remote-tracking branch 'origin/feature-Dashboard' into Development
# Conflicts: # src/Elektrifikatsiya/Elektrifikatsiya/Layouts/LoginLayout.razor # src/Elektrifikatsiya/Elektrifikatsiya/Pages/AddPlug.razor # src/Elektrifikatsiya/Elektrifikatsiya/Pages/Dashboard.razor # src/Elektrifikatsiya/Elektrifikatsiya/Pages/Settings.razor # src/Elektrifikatsiya/Elektrifikatsiya/Properties/launchSettings.json
This commit is contained in:
Stefan
@@ -23,6 +23,12 @@
|
|||||||
Admin
|
Admin
|
||||||
</BarLink>
|
</BarLink>
|
||||||
</BarItem>
|
</BarItem>
|
||||||
|
<BarItem>
|
||||||
|
<BarLink To="/settings" TextColor="TextColor.White">
|
||||||
|
<BarIcon Style="color:white" IconName="IconName.Wrench" />
|
||||||
|
Settings
|
||||||
|
</BarLink>
|
||||||
|
</BarItem>
|
||||||
<BarItem>
|
<BarItem>
|
||||||
<BarLink To="/addplug" TextColor="TextColor.White">
|
<BarLink To="/addplug" TextColor="TextColor.White">
|
||||||
<BarIcon Style="color:white" IconName="IconName.Plug" />
|
<BarIcon Style="color:white" IconName="IconName.Plug" />
|
||||||
@@ -32,9 +38,9 @@
|
|||||||
</BarStart>
|
</BarStart>
|
||||||
<BarEnd>
|
<BarEnd>
|
||||||
<BarItem>
|
<BarItem>
|
||||||
<BarLink To="/settings" TextColor="TextColor.White">
|
<BarLink To="/login" TextColor="TextColor.White">
|
||||||
<BarIcon Style="color:white" IconName="IconName.Wrench" />
|
<BarIcon Style="color:white" IconName="IconName.Running" />
|
||||||
Settings
|
Logout
|
||||||
</BarLink>
|
</BarLink>
|
||||||
</BarItem>
|
</BarItem>
|
||||||
</BarEnd>
|
</BarEnd>
|
||||||
@@ -42,7 +48,5 @@
|
|||||||
</Bar>
|
</Bar>
|
||||||
@code {
|
@code {
|
||||||
private bool pagesBarVisible = true;
|
private bool pagesBarVisible = true;
|
||||||
|
|
||||||
//TODO: replace logo png with transparent background one
|
|
||||||
RenderFragment customIcon =@<img src="/logo.png" style="width:32px; height: 32px" />;
|
RenderFragment customIcon =@<img src="/logo.png" style="width:32px; height: 32px" />;
|
||||||
}
|
}
|
||||||
Binary file not shown.
Binary file not shown.
@@ -37,6 +37,7 @@
|
|||||||
<PackageReference Include="Blazorise" Version="1.2.0" />
|
<PackageReference Include="Blazorise" Version="1.2.0" />
|
||||||
<PackageReference Include="Blazorise.Charts" Version="1.2.0" />
|
<PackageReference Include="Blazorise.Charts" Version="1.2.0" />
|
||||||
<PackageReference Include="Blazorise.Components" Version="1.2.0" />
|
<PackageReference Include="Blazorise.Components" Version="1.2.0" />
|
||||||
|
<PackageReference Include="Blazorise.LoadingIndicator" Version="1.2.0" />
|
||||||
<PackageReference Include="Blazorise.Material" Version="1.2.0" />
|
<PackageReference Include="Blazorise.Material" Version="1.2.0" />
|
||||||
<PackageReference Include="Blazorise.Icons.Material" Version="1.2.0" />
|
<PackageReference Include="Blazorise.Icons.Material" Version="1.2.0" />
|
||||||
<PackageReference Include="BCrypt.Net-Next" Version="4.0.3" />
|
<PackageReference Include="BCrypt.Net-Next" Version="4.0.3" />
|
||||||
|
|||||||
@@ -1,40 +1,17 @@
|
|||||||
@using System.Diagnostics;
|
@using System.Diagnostics;
|
||||||
@using FluentResults
|
|
||||||
@inject Elektrifikatsiya.Services.IAuthenticationService AuthenticationService
|
|
||||||
@inject NavigationManager NavigationManager
|
|
||||||
@inherits LayoutComponentBase
|
@inherits LayoutComponentBase
|
||||||
<Image Source="logo.png" Width="Width.Is50" Height="Height.Is50"> </Image>
|
<Image Source="logo.png" Width="Width.Is50" Height="Height.Is50"> </Image>
|
||||||
<Card Width="Width.Is50" Position="Position.Absolute.Top.Is50.Start.Is50.Translate.Middle" Padding="Padding.Is5">
|
<Card Width="Width.Is50" Position="Position.Absolute.Top.Is50.Start.Is50.Translate.Middle" Padding="Padding.Is5">
|
||||||
<Field Width="Width.Is25" Position="Position.Relative.Top.Is50.Start.Is50.Translate.Middle">
|
<Column ColumnSize="ColumnSize.Is6.OnDesktop.Is12.Is3.WithOffset">
|
||||||
<TextEdit @bind-Text="username" Placeholder="Username" />
|
<Field Position="Position.Relative.Top.Is50.Start.Is50.Translate.Middle">
|
||||||
</Field>
|
<TextEdit Placeholder="Username" />
|
||||||
<Field Width="Width.Is25" Position="Position.Relative.Top.Is50.Start.Is50.Translate.Middle">
|
</Field>
|
||||||
<TextEdit @bind-Text="password" Role="TextRole.Password" Placeholder="Password" />
|
<Field Position="Position.Relative.Top.Is50.Start.Is50.Translate.Middle">
|
||||||
</Field>
|
<TextEdit Role="TextRole.Password" Placeholder="Password" />
|
||||||
<Button Width="Width.Is25" Disabled="disabled" Color="color" Clicked="Clicked" Position="Position.Relative.Bottom.Is50.Start.Is50.Translate.MiddleX" >Login</Button>
|
</Field>
|
||||||
|
<Button Color="Color.Primary" Position="Position.Relative.Bottom.Is50.Start.Is50.Translate.MiddleX">Login</Button>
|
||||||
|
</Column>
|
||||||
</Card>
|
</Card>
|
||||||
@code {
|
@code {
|
||||||
private string username = string.Empty;
|
|
||||||
private string password = string.Empty;
|
|
||||||
private Color color = Color.Primary;
|
|
||||||
private bool disabled;
|
|
||||||
private async Task Clicked()
|
|
||||||
{
|
|
||||||
color = Color.Primary;
|
|
||||||
disabled = true;
|
|
||||||
|
|
||||||
Result loginResult = await AuthenticationService.LoginUserAsync(username, password);
|
|
||||||
|
|
||||||
if (loginResult.IsSuccess)
|
|
||||||
{
|
|
||||||
NavigationManager.NavigateTo("/", true);
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
color = Color.Danger;
|
|
||||||
disabled = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
<!-- TODO: Put this into the Component once we are merging and refactoring -->
|
|
||||||
@@ -11,144 +11,122 @@
|
|||||||
@inject IAuthenticationService AuthenticationService
|
@inject IAuthenticationService AuthenticationService
|
||||||
@inject IMessageService MessageService
|
@inject IMessageService MessageService
|
||||||
|
|
||||||
<Div>
|
@inject IAuthenticationService AuthenticationService
|
||||||
<Row Style="height:50%; width:100%" Padding="Padding.Is3.OnDesktop.Is0">
|
|
||||||
<Row Style="height:90%; width:100%">
|
<Row Style="height:50%; width:100%" Padding="Padding.Is3.OnDesktop.Is5.FromStart.OnMobile">
|
||||||
<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is1"></Column>
|
<Row Style="height:90%; width:100%">
|
||||||
<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is12">
|
<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is1"></Column>
|
||||||
<Bar Breakpoint="Breakpoint.Desktop"
|
<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is12">
|
||||||
Background="Background.White"
|
<Bar Breakpoint="Breakpoint.Desktop"
|
||||||
ThemeContrast="ThemeContrast.None"
|
Background="Background.White"
|
||||||
Shadow="Shadow.Remove"
|
ThemeContrast="ThemeContrast.None"
|
||||||
Border="Border.Is1.RoundedTop">
|
Shadow="Shadow.Remove"
|
||||||
<BarBrand>
|
Border="Border.Is1.RoundedTop">
|
||||||
Add a plug via wifi
|
<BarBrand>
|
||||||
</BarBrand>
|
<Column ColumnSize="ColumnSize.Is9">
|
||||||
</Bar>
|
Add a plug via wifi
|
||||||
<ListView Class="w-100"
|
</Column>
|
||||||
TItem="IPAddress"
|
<Column ColumnSize="ColumnSize.Is3.Is6.WithOffset">
|
||||||
Data="@ipAddresses"
|
<LoadingIndicator @bind-Visible="@visible">
|
||||||
TextField="@((_)=>(""))"
|
</LoadingIndicator>
|
||||||
ValueField="@((_)=>(""))"
|
</Column>
|
||||||
Mode="ListGroupMode.Static">
|
</BarBrand>
|
||||||
<ItemTemplate>
|
</Bar>
|
||||||
<ListGroupItem>
|
<ListView Class="w-100"
|
||||||
<Row>
|
TItem="IPAddress"
|
||||||
<Column ColumnSize="ColumnSize.Is6">
|
Data="@ipAddresses"
|
||||||
<Row>
|
TextField="@((_)=>(""))"
|
||||||
</Row>
|
ValueField="@((_)=>(""))"
|
||||||
<Row Width="Width.Is100">
|
Mode="ListGroupMode.Static"
|
||||||
<Column>
|
Style="border-radius: 0px 0px">
|
||||||
<Small>IP: @context.Item</Small>
|
<ItemTemplate>
|
||||||
</Column>
|
<ListGroupItem>
|
||||||
</Row>
|
<Row>
|
||||||
</Column>
|
<Column ColumnSize="ColumnSize.Is8">
|
||||||
<Column ColumnSize="ColumnSize.Is4.Is2.WithOffset">
|
<Row>
|
||||||
<Button Position="Position.Absolute.Top.Is50.Start.Is50.Translate.Middle" Color="Color.Dark" Clicked="@(()=>RegisterDevice(context.Item))" Outline>
|
</Row>
|
||||||
<BarIcon IconName="IconName.Add" />
|
<Row Width="Width.Is100">
|
||||||
</Button>
|
<Column>
|
||||||
</Column>
|
<Small>IP: @context.Item</Small>
|
||||||
</Row>
|
</Column>
|
||||||
</ListGroupItem>
|
</Row>
|
||||||
</ItemTemplate>
|
</Column>
|
||||||
</ListView>
|
<Column ColumnSize="ColumnSize.Is4">
|
||||||
</Column>
|
<Button Position="Position.Absolute.Top.Is50.Start.Is50.Translate.Middle" Color="Color.Dark" Clicked="@(async () => await DeviceManagmentService.RegisterDevice(context.Item,(await AuthenticationService.GetUserAsync()).ValueOrDefault))" Outline>
|
||||||
</Row>
|
<BarIcon IconName="IconName.Add" />
|
||||||
</Row>
|
</Button>
|
||||||
<Row Style="height:50%; width:100%; border-top-style:solid; border-top-color:#1a237e">
|
</Column>
|
||||||
<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is1"></Column>
|
</Row>
|
||||||
<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is12">
|
</ListGroupItem>
|
||||||
<Row Style="height:15%; width:100%"></Row>
|
</ItemTemplate>
|
||||||
<Row Style="height:10%; width:100%">
|
</ListView>
|
||||||
<Bar Breakpoint="Breakpoint.Desktop"
|
</Column>
|
||||||
Background="Background.White"
|
</Row>
|
||||||
ThemeContrast="ThemeContrast.None"
|
</Row>
|
||||||
Shadow="Shadow.Remove"
|
<Row Style="height:50%; width:100%; border-top-style:solid; border-top-color:#1a237e" Padding="Padding.Is3.OnDesktop.Is5.FromStart.OnMobile">
|
||||||
Border="Border.Is1.RoundedTop"
|
<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is1"></Column>
|
||||||
Style="width:100%">
|
<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is12">
|
||||||
<BarBrand>
|
<Row Style="height:15%; width:100%"></Row>
|
||||||
Add a plug via IP
|
<Row Style="height:10%; width:100%">
|
||||||
</BarBrand>
|
<Bar Breakpoint="Breakpoint.Desktop"
|
||||||
</Bar>
|
Background="Background.White"
|
||||||
<ListGroup Style="width:100%; border-radius: 0px 0px">
|
ThemeContrast="ThemeContrast.None"
|
||||||
<ListGroupItem Color="Color.Default">
|
Shadow="Shadow.Remove"
|
||||||
<Form>
|
Border="Border.Is1.RoundedTop"
|
||||||
<Validation @ref="ipValidation" Validator="ValidateIPv4">
|
Style="width:100%">
|
||||||
<Field Horizontal>
|
<BarBrand>
|
||||||
<FieldBody ColumnSize="ColumnSize.Is12">
|
Add a plug via IP
|
||||||
<TextEdit @bind-Text="ipText" Placeholder="Enter the Device IP here">
|
</BarBrand>
|
||||||
<Feedback>
|
</Bar>
|
||||||
<ValidationNone>Please enter a ip address.</ValidationNone>
|
<ListGroup Style="width:100%; border-radius: 0px 0px">
|
||||||
<ValidationSuccess>Ip address is valid.</ValidationSuccess>
|
<ListGroupItem Color="Color.Default">
|
||||||
<ValidationError>Ip address is not valid!</ValidationError>
|
<Form>
|
||||||
</Feedback>
|
<Field Horizontal>
|
||||||
</TextEdit>
|
<FieldBody ColumnSize="ColumnSize.Is12">
|
||||||
<br>
|
<TextEdit Placeholder="Enter the Device IP here" />
|
||||||
<Button style="background-color:#1a237e; color:white" Type="ButtonType.Submit" Disabled="ipValidation?.Status != ValidationStatus.Success" Clicked="@(async (_)=> await RegisterDevice(IPAddress.Parse(ipText!)))" PreventDefaultOnSubmit>CONNECT</Button>
|
<br>
|
||||||
</FieldBody>
|
<Button style="background-color:#1a237e; color:white" Type="ButtonType.Submit" PreventDefaultOnSubmit>CONNECT</Button>
|
||||||
</Field>
|
</FieldBody>
|
||||||
</Validation>
|
</Field>
|
||||||
</Form>
|
</Form>
|
||||||
</ListGroupItem>
|
</ListGroupItem>
|
||||||
</ListGroup>
|
</ListGroup>
|
||||||
</Row>
|
</Row>
|
||||||
<Row Style="height:75%; width:100%"></Row>
|
<Row Style="height:75%; width:100%"></Row>
|
||||||
</Column>
|
</Column>
|
||||||
</Row>
|
</Row>
|
||||||
</Div>
|
|
||||||
|
|
||||||
@code {
|
@code {
|
||||||
List<IPAddress> ipAddresses = new List<IPAddress>();
|
List<IPAddress> ipAddresses = new List<IPAddress>();
|
||||||
|
|
||||||
Validation? ipValidation;
|
List<IPAddress> ipAddresses = new List<IPAddress>();
|
||||||
|
|
||||||
string ipText = null!;
|
bool visible = false;
|
||||||
|
|
||||||
protected override void OnInitialized()
|
DateTime time = DateTime.UtcNow;
|
||||||
{
|
|
||||||
MdnsDiscovery.OnDeviceFound += async ipAddress =>
|
|
||||||
{
|
|
||||||
if (!ipAddresses.Contains(ipAddress))
|
|
||||||
{
|
|
||||||
ipAddresses.Add(ipAddress);
|
|
||||||
await InvokeAsync(StateHasChanged);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
MdnsDiscovery.FetchChachedDevices();
|
protected override void OnInitialized()
|
||||||
}
|
{
|
||||||
|
ipAddresses.AddRange(MdnsDiscovery.GetChachedDevices());
|
||||||
|
|
||||||
private async Task RegisterDevice(IPAddress ipAddress)
|
System.Timers.Timer aTimer = new System.Timers.Timer(1000);
|
||||||
{
|
aTimer.Elapsed += (_, _) => {
|
||||||
Result<Device> result = await DeviceManagmentService.RegisterDevice(ipAddress, (await AuthenticationService.GetUserAsync()).ValueOrDefault);
|
DateTime dateTime = DateTime.UtcNow;
|
||||||
|
if(dateTime >= time.AddSeconds(3))
|
||||||
|
{
|
||||||
|
visible = false;
|
||||||
|
InvokeAsync(StateHasChanged);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
aTimer.Start();
|
||||||
|
|
||||||
if (result.IsSuccess)
|
MdnsDiscovery.OnDeviceFound += address =>
|
||||||
{
|
{
|
||||||
await MessageService.Success("Device added!");
|
visible = true;
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
await MessageService.Error(string.Join(',', result.Errors.Select(e => e.Message)), "Adding device failed!");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
public void ValidateIPv4(ValidatorEventArgs e)
|
ipAddresses.Add(address);
|
||||||
{
|
InvokeAsync(StateHasChanged);
|
||||||
string? input = Convert.ToString(e.Value);
|
|
||||||
|
|
||||||
if (string.IsNullOrWhiteSpace(input))
|
time = DateTime.UtcNow;
|
||||||
{
|
};
|
||||||
e.Status = ValidationStatus.None;
|
}
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
string[] splitValues = input.Split('.');
|
|
||||||
if (splitValues.Length != 4)
|
|
||||||
{
|
|
||||||
e.Status = ValidationStatus.Error;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
e.Status = splitValues.All(r => byte.TryParse(r, out _)) ? ValidationStatus.Success : ValidationStatus.Error;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -0,0 +1,28 @@
|
|||||||
|
@page "/admin"
|
||||||
|
@using Blazorise.Components
|
||||||
|
@using Elektrifikatsiya.Models;
|
||||||
|
@using System.Net
|
||||||
|
<Div>
|
||||||
|
<Row Padding="Padding.Is3">
|
||||||
|
<Div Display="Display.Flex.Row.OnDesktop" Margin=" Margin.Is3.FromBottom" Width="Width.Is100">
|
||||||
|
<Column ColumnSize="ColumnSize.Is6.OnDesktop.Is12">
|
||||||
|
<Bar Breakpoint="Breakpoint.Desktop"
|
||||||
|
Background="Background.White"
|
||||||
|
ThemeContrast="ThemeContrast.None"
|
||||||
|
Shadow="Shadow.Remove"
|
||||||
|
Border="Border.Is1.RoundedTop">
|
||||||
|
<BarBrand>
|
||||||
|
Users
|
||||||
|
</BarBrand>
|
||||||
|
<Button Position="Position.Absolute.End" Padding="Padding.Is3" Outline>
|
||||||
|
<BarIcon IconName="IconName.Add" ></BarIcon>
|
||||||
|
</Button>
|
||||||
|
</Bar>
|
||||||
|
|
||||||
|
|
||||||
|
</Column>
|
||||||
|
</Div>
|
||||||
|
</Row>
|
||||||
|
</Div>
|
||||||
|
@code {
|
||||||
|
}
|
||||||
@@ -1,113 +1,103 @@
|
|||||||
@page "/"
|
@page "/"
|
||||||
@using Blazorise.Components;
|
@using Blazorise.Components;
|
||||||
@using Elektrifikatsiya.Models;
|
@using Elektrifikatsiya.Models;
|
||||||
@using System.Net
|
@using System.Net
|
||||||
@using Elektrifikatsiya.Services
|
|
||||||
@using Elektrifikatsiya.Utilities
|
|
||||||
@using System.Diagnostics
|
|
||||||
@inject IVersionProvider VersionProvider
|
@inject IVersionProvider VersionProvider
|
||||||
@inject IDeviceStatusService DeviceStatusService
|
|
||||||
<Row Padding="Padding.Is3">
|
|
||||||
<Div Display="Display.Flex.Row.OnDesktop" Margin="Margin.Is3.FromBottom" Width="Width.Is100">
|
|
||||||
<Column ColumnSize="ColumnSize.Is6.OnDesktop.Is12">
|
|
||||||
<Bar Breakpoint="Breakpoint.Desktop"
|
|
||||||
Background="Background.White"
|
|
||||||
ThemeContrast="ThemeContrast.None"
|
|
||||||
Shadow="Shadow.Remove"
|
|
||||||
Border="Border.Is1.RoundedTop">
|
|
||||||
<BarBrand>
|
|
||||||
Plugs
|
|
||||||
</BarBrand>
|
|
||||||
</Bar>
|
|
||||||
<ListView TItem="Device"
|
|
||||||
Data="@plugs"
|
|
||||||
TextField="@((_)=>(""))"
|
|
||||||
ValueField="@((_)=>(""))"
|
|
||||||
Mode="ListGroupMode.Static"
|
|
||||||
Style="border-radius: 0px 0px">
|
|
||||||
<ItemTemplate>
|
|
||||||
<ListGroupItem Border="Border.OnBottom">
|
|
||||||
<Row>
|
|
||||||
<Column ColumnSize="ColumnSize.Is8">
|
|
||||||
<Row>
|
|
||||||
<Column ColumnSize="ColumnSize.Is7">
|
|
||||||
<Heading Size="HeadingSize.Is6" Margin="Margin.Is1.FromBottom">@context.Item.Name</Heading>
|
|
||||||
</Column>
|
|
||||||
</Row>
|
|
||||||
<Row>
|
|
||||||
<Column>
|
|
||||||
<Small>User: @context.Item.User.Name</Small>
|
|
||||||
<br />
|
|
||||||
<Small>Room: @context.Item.Room</Small>
|
|
||||||
</Column>
|
|
||||||
<Column ColumnSize="ColumnSize.Is5">
|
|
||||||
<Paragraph Margin="Margin.Is1.OnY">@context.Item.PowerUsage W</Paragraph>
|
|
||||||
</Column>
|
|
||||||
</Row>
|
|
||||||
</Column>
|
|
||||||
<Column ColumnSize="ColumnSize.Is4">
|
|
||||||
<Button Position="Position.Absolute.Top.Is50.Start.Is50.Translate.Middle" Color="Color.Dark" Outline>
|
|
||||||
<BarIcon IconName="IconName.Bolt" />
|
|
||||||
</Button>
|
|
||||||
</Column>
|
|
||||||
</Row>
|
|
||||||
</ListGroupItem>
|
|
||||||
</ItemTemplate>
|
|
||||||
</ListView>
|
|
||||||
</Column>
|
|
||||||
<Column ColumnSize="ColumnSize.Is6.OnDesktop.Is12">
|
|
||||||
<Bar Breakpoint="Breakpoint.Desktop"
|
|
||||||
Background="Background.White"
|
|
||||||
ThemeContrast="ThemeContrast.None"
|
|
||||||
Shadow="Shadow.Remove"
|
|
||||||
Border="Border.Is1.Rounded.RoundedTop">
|
|
||||||
<BarBrand>
|
|
||||||
Logs
|
|
||||||
</BarBrand>
|
|
||||||
</Bar>
|
|
||||||
<ListView TItem="Event"
|
|
||||||
Data="@events"
|
|
||||||
TextField="@((_)=>(""))"
|
|
||||||
ValueField="@((_)=>(""))"
|
|
||||||
Mode="ListGroupMode.Static"
|
|
||||||
Style="border-radius: 0px 0px">
|
|
||||||
|
|
||||||
<ItemTemplate>
|
<Div>
|
||||||
<Div Flex="Flex.InlineFlex.JustifyContent.Between" Width="Width.Is100">
|
<Row Padding="Padding.Is3">
|
||||||
<Heading Size="HeadingSize.Is6" Margin="Margin.Is2.FromBottom">@context.Item.EventName</Heading>
|
<Div Display="Display.Flex.Row.OnDesktop" Margin=" Margin.Is3.FromBottom" Width="Width.Is100">
|
||||||
<Small>@context.Item.Date</Small>
|
<Column ColumnSize="ColumnSize.Is6.OnDesktop.Is12">
|
||||||
</Div>
|
<Bar Breakpoint="Breakpoint.Desktop"
|
||||||
<Paragraph Border="Border.OnBottom" Margin="Margin.Is2.FromBottom">@context.Item.Description</Paragraph>
|
Background="Background.White"
|
||||||
</ItemTemplate>
|
ThemeContrast="ThemeContrast.None"
|
||||||
</ListView>
|
Shadow="Shadow.Remove"
|
||||||
|
Border="Border.Is1.RoundedTop">
|
||||||
|
<BarBrand>
|
||||||
|
Plugs
|
||||||
|
</BarBrand>
|
||||||
|
</Bar>
|
||||||
|
<ListView TItem="Device"
|
||||||
|
Data="@plugs"
|
||||||
|
TextField="@((_)=>(""))"
|
||||||
|
ValueField="@((_)=>(""))"
|
||||||
|
Mode="ListGroupMode.Static"
|
||||||
|
Style="border-radius: 0px 0px">
|
||||||
|
<ItemTemplate >
|
||||||
|
<ListGroupItem>
|
||||||
|
<Row>
|
||||||
|
<Column ColumnSize="ColumnSize.Is8">
|
||||||
|
<Row>
|
||||||
|
<Column ColumnSize="ColumnSize.Is7">
|
||||||
|
<Heading Size="HeadingSize.Is6" Margin="Margin.Is1.FromBottom">@context.Item.Name</Heading>
|
||||||
|
</Column>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Column>
|
||||||
|
<Small>User: @context.Item.User</Small>
|
||||||
|
<br />
|
||||||
|
<Small>Room: @context.Item.Room</Small>
|
||||||
|
</Column>
|
||||||
|
<Column ColumnSize="ColumnSize.Is5">
|
||||||
|
<Paragraph Margin="Margin.Is1.OnY">@context.Item.PowerUsage W</Paragraph>
|
||||||
|
</Column>
|
||||||
|
</Row>
|
||||||
|
</Column>
|
||||||
|
<Column ColumnSize="ColumnSize.Is4">
|
||||||
|
<Button Clicked="@ChangeButtonColor" Position="Position.Absolute.Top.Is50.Start.Is50.Translate.Middle" Color="Color.Primary"Primary Outline>
|
||||||
|
<!--TODO: This button should change color-->
|
||||||
|
<BarIcon IconName="IconName.Bolt" />
|
||||||
|
</Button>
|
||||||
|
</Column>
|
||||||
|
</Row>
|
||||||
|
</ListGroupItem>
|
||||||
|
</ItemTemplate>
|
||||||
|
</ListView>
|
||||||
|
</Column>
|
||||||
|
<Column ColumnSize="ColumnSize.Is6.OnDesktop.Is12">
|
||||||
|
<Bar Breakpoint="Breakpoint.Desktop"
|
||||||
|
Background="Background.White"
|
||||||
|
ThemeContrast="ThemeContrast.None"
|
||||||
|
Shadow="Shadow.Remove"
|
||||||
|
Border="Border.Is1.Rounded.RoundedTop">
|
||||||
|
<BarBrand>
|
||||||
|
Logs
|
||||||
|
</BarBrand>
|
||||||
|
</Bar>
|
||||||
|
<ListView TItem="Event"
|
||||||
|
Data="@events"
|
||||||
|
TextField="@((_)=>(""))"
|
||||||
|
ValueField="@((_)=>(""))"
|
||||||
|
Mode="ListGroupMode.Static"
|
||||||
|
Style="border-radius: 0px 0px">
|
||||||
|
<ItemTemplate>
|
||||||
|
<Div Flex="Flex.InlineFlex.JustifyContent.Between" Width="Width.Is100">
|
||||||
|
<Heading Size="HeadingSize.Is6" Margin="Margin.Is2.FromBottom">@context.Item.EventName</Heading>
|
||||||
|
<Small>@context.Item.Date</Small>
|
||||||
|
</Div>
|
||||||
|
<Paragraph Margin="Margin.Is2.FromBottom">@context.Item.Description</Paragraph>
|
||||||
|
</ItemTemplate>
|
||||||
|
</ListView>
|
||||||
|
</Column>
|
||||||
|
</Div>
|
||||||
|
</Row>
|
||||||
|
<Row Padding="Padding.Is3">
|
||||||
|
<Column>
|
||||||
|
<Button Color="Color.Primary" Style="border-radius: 0px" Clicked="@(async () => await HandleRedraw())">Aktualisieren</Button>
|
||||||
|
<LineChart Height="Height.Is100" Width="Width.Is100" @ref="lineChart" TItem="double" />
|
||||||
</Column>
|
</Column>
|
||||||
</Div>
|
</Row>
|
||||||
</Row>
|
</Div>
|
||||||
<Row Padding="Padding.Is3">
|
|
||||||
<Column>
|
|
||||||
<Button Color="Color.Primary" Style="border-radius: 0px" Clicked="@(async () => await HandleRedraw())">Aktualisieren</Button>
|
|
||||||
<LineChart @ref="lineChart" TItem="double" />
|
|
||||||
</Column>
|
|
||||||
</Row>
|
|
||||||
|
|
||||||
@code {
|
@code {
|
||||||
//TODO: insert new event here if plug produces one
|
//TODO: insert new event here if plug produces one
|
||||||
List<Event> events = new List<Event>() { new Event("Placeholder", "Placeholder", DateTime.Now), new Event("Placeholder", "Placeholder", DateTime.Now), new Event("Placeholder", "Placeholder", DateTime.Now) };
|
List<Event> events = new List<Event>() { new Event("Placeholder", "Event", DateTime.Now), new Event("Placeholder", "Event", DateTime.Now), new Event("Placeholder", "Event", DateTime.Now) };
|
||||||
//TODO: insert new Device here if user adds one
|
//TODO: insert new Device here if user adds one
|
||||||
List<Device> plugs = new List<Device>();
|
List<Device> plugs = new List<Device>() { new Device("ffff:ffff:ffff:ffff", "Josne", IPAddress.Broadcast, new User("Joe", "qiowruioewjfopa", Role.Admin), "Raum"), new Device("ffff:ffff:ffff:ffff", "Josne", IPAddress.Broadcast, new User("Joe", "Josne", Role.Admin), "Raum"), new Device("ffff:ffff:ffff:ffff", "Josne", IPAddress.Broadcast, new User("Joe", "qiowruioewjfopa", Role.Admin), "Raum"), };
|
||||||
//code for graph
|
//code for graph
|
||||||
LineChart<double> lineChart;
|
LineChart<double> lineChart;
|
||||||
|
|
||||||
protected override void OnInitialized()
|
|
||||||
{
|
|
||||||
plugs = DeviceStatusService.GetDevices().ValueOrDefault ?? new List<Device>();
|
|
||||||
|
|
||||||
DeviceStatusService.OnDeviceStatusChanged += (_, e) =>
|
|
||||||
{
|
|
||||||
InvokeAsync(StateHasChanged);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||||
{
|
{
|
||||||
if (firstRender)
|
if (firstRender)
|
||||||
@@ -118,47 +108,50 @@
|
|||||||
|
|
||||||
async Task HandleRedraw()
|
async Task HandleRedraw()
|
||||||
{
|
{
|
||||||
labels.Clear();
|
|
||||||
await lineChart.Clear();
|
await lineChart.Clear();
|
||||||
await lineChart.AddLabelsDatasetsAndUpdate(labels, await GetLineChartDataset());
|
|
||||||
|
await lineChart.AddLabelsDatasetsAndUpdate(Labels, GetLineChartDataset());
|
||||||
}
|
}
|
||||||
|
|
||||||
//TODO: insert dataset of current and last voltage usages
|
//TODO: insert dataset of current and last voltage usages
|
||||||
async Task<LineChartDataset<double>> GetLineChartDataset()
|
LineChartDataset<double> GetLineChartDataset()
|
||||||
{
|
{
|
||||||
return new LineChartDataset<double>
|
return new LineChartDataset<double>
|
||||||
{
|
{
|
||||||
Label = "Wattage",
|
Label = "# of random number in thousands",
|
||||||
Data = await RandomizeData(),
|
Data = RandomizeData(),
|
||||||
|
BackgroundColor = backgroundColors,
|
||||||
|
BorderColor = borderColors,
|
||||||
Fill = true,
|
Fill = true,
|
||||||
PointRadius = 3,
|
PointRadius = 3,
|
||||||
CubicInterpolationMode = "monotone",
|
CubicInterpolationMode = "monotone",
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
List<string> labels = new List<string>();
|
string[] Labels = { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" };
|
||||||
|
List<string> backgroundColors = new List<string> { ChartColor.FromRgba(255, 99, 132, 0.2f), ChartColor.FromRgba(54, 162, 235, 0.2f), ChartColor.FromRgba(255, 206, 86, 0.2f), ChartColor.FromRgba(75, 192, 192, 0.2f), ChartColor.FromRgba(153, 102, 255, 0.2f), ChartColor.FromRgba(255, 159, 64, 0.2f) };
|
||||||
|
List<string> borderColors = new List<string> { ChartColor.FromRgba(255, 99, 132, 1f), ChartColor.FromRgba(54, 162, 235, 1f), ChartColor.FromRgba(255, 206, 86, 1f), ChartColor.FromRgba(75, 192, 192, 1f), ChartColor.FromRgba(153, 102, 255, 1f), ChartColor.FromRgba(255, 159, 64, 1f) };
|
||||||
|
|
||||||
async Task<List<double>> RandomizeData()
|
List<double> RandomizeData()
|
||||||
{
|
{
|
||||||
PrometheusQuery promQueryer = new PrometheusQuery("http://localhost:9090");
|
|
||||||
|
|
||||||
string plugnames = "";
|
|
||||||
foreach (Device device in plugs)
|
|
||||||
{
|
|
||||||
plugnames += $"shellyplug-s-{device.MacAddress}/relay/0|";
|
|
||||||
}
|
|
||||||
plugnames = plugnames[0..^1];
|
|
||||||
|
|
||||||
Debug.WriteLine($$"""sum(power{sensor=~"{{plugnames}}"})[1h:1m]""");
|
|
||||||
|
|
||||||
PrometheusDataWrapper? deviceData = (await promQueryer.Query($$"""sum(power{sensor=~"{{plugnames}}"})[1h:1m]"""))?.Data;
|
|
||||||
|
|
||||||
var r = new Random(DateTime.Now.Millisecond);
|
var r = new Random(DateTime.Now.Millisecond);
|
||||||
|
|
||||||
return deviceData?.MatrixTypeToTimestampFloatTuple().ValueOrDefault?.Select(x =>
|
return new List<double> {
|
||||||
{
|
r.Next( 3, 50 ) * r.NextDouble(),
|
||||||
labels.Add(DateTimeOffset.FromUnixTimeSeconds(long.Parse($"1{x.Item1}0")).UtcDateTime.ToLocalTime().ToShortTimeString());
|
r.Next( 3, 50 ) * r.NextDouble(),
|
||||||
return x.Item2;
|
r.Next( 3, 50 ) * r.NextDouble(),
|
||||||
}).ToList() ?? new List<double>();
|
r.Next( 3, 50 ) * r.NextDouble(),
|
||||||
|
r.Next( 3, 50 ) * r.NextDouble(),
|
||||||
|
r.Next( 3, 50 ) * r.NextDouble() };
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//private Background buttonColor = Background.Primary;
|
||||||
|
|
||||||
|
private void ChangeButtonColor()
|
||||||
|
{
|
||||||
|
//device.on = !device.on;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -18,11 +18,6 @@ namespace Elektrifikatsiya.Pages
|
|||||||
{
|
{
|
||||||
public partial class Dashboard
|
public partial class Dashboard
|
||||||
{
|
{
|
||||||
string bgcolor { get; set; } = "00f"; // (starting value)
|
|
||||||
void SetColor()
|
|
||||||
{
|
|
||||||
bgcolor = "#fd7";
|
|
||||||
StateHasChanged(); // may not be required, but I'm at work right now, so can't check
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -2,61 +2,157 @@
|
|||||||
@using Blazorise.Components;
|
@using Blazorise.Components;
|
||||||
@using Elektrifikatsiya.Models;
|
@using Elektrifikatsiya.Models;
|
||||||
@using System.Net
|
@using System.Net
|
||||||
<Row Style="width: 100%; height: 100%">
|
<Div>
|
||||||
<Column ColumnSize="ColumnSize.Is4">
|
<Row Style="width: 100%; height: 100%" Margin="Margin.Is3.FromTop.OnMobile" Padding="Padding.Is4.FromStart.OnMobile">
|
||||||
<Bar Breakpoint="Breakpoint.Desktop"
|
<Div Display="Display.Flex.Row.OnDesktop" Margin=" Margin.Is3.FromBottom" Width="Width.Is100">
|
||||||
Background="Background.White"
|
<Column ColumnSize="ColumnSize.Is5.OnDesktop.Is12.OnMobile">
|
||||||
ThemeContrast="ThemeContrast.None"
|
<Bar Breakpoint="Breakpoint.Desktop"
|
||||||
Shadow="Shadow.Remove"
|
Background="Background.White"
|
||||||
Border="Border.Is1.RoundedTop">
|
ThemeContrast="ThemeContrast.None"
|
||||||
<BarBrand>
|
Shadow="Shadow.Remove"
|
||||||
Plugs
|
Border="Border.Is1.RoundedTop">
|
||||||
</BarBrand>
|
<BarBrand>
|
||||||
</Bar>
|
Plugs
|
||||||
<ListView TItem="Device"
|
</BarBrand>
|
||||||
Data="@plugs"
|
</Bar>
|
||||||
TextField="@((_)=>(""))"
|
<ListView TItem="Device"
|
||||||
ValueField="@((_)=>(""))"
|
Data="@plugs"
|
||||||
|
TextField="@((_)=>(""))"
|
||||||
|
ValueField="@((_)=>(""))"
|
||||||
|
Style="border-radius: 0px 0px"
|
||||||
|
Height="100%"
|
||||||
|
MaxHeight="90%">
|
||||||
|
<ItemTemplate>
|
||||||
|
<ListGroupItem Border="Border.OnBottom">
|
||||||
|
<Row>
|
||||||
|
|
||||||
Style="border-radius: 0px 0px"
|
<Column ColumnSize="ColumnSize.Is6">
|
||||||
Height="100%"
|
<Row>
|
||||||
MaxHeight="90%">
|
<Column ColumnSize="ColumnSize.Is7">
|
||||||
<ItemTemplate>
|
<Heading Size="HeadingSize.Is6" Margin="Margin.Is1.FromBottom">@context.Item.Name</Heading>
|
||||||
<ListGroupItem Border="Border.OnBottom">
|
</Column>
|
||||||
<Row>
|
</Row>
|
||||||
<Column ColumnSize="ColumnSize.Is8">
|
<Row>
|
||||||
<Row>
|
<Column>
|
||||||
<Column ColumnSize="ColumnSize.Is7">
|
<Small>User: @context.Item.User</Small>
|
||||||
<Heading Size="HeadingSize.Is6" Margin="Margin.Is1.FromBottom">@context.Item.Name</Heading>
|
<br />
|
||||||
|
<Small>Room: @context.Item.Room</Small>
|
||||||
|
</Column>
|
||||||
|
</Row>
|
||||||
|
</Column>
|
||||||
|
|
||||||
|
<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is7.OnMobile">
|
||||||
|
<Button Position="Position.Absolute.Top.Is50.Start.Is50.Translate.Middle" Color="Color.Dark" Outline>
|
||||||
|
<BarIcon IconName="IconName.Delete" />
|
||||||
|
</Button>
|
||||||
</Column>
|
</Column>
|
||||||
</Row>
|
|
||||||
<Row>
|
|
||||||
<Column>
|
|
||||||
<Small>User: @context.Item.User</Small>
|
|
||||||
<br />
|
<br />
|
||||||
<Small>Room: @context.Item.Room</Small>
|
<br />
|
||||||
</Column>
|
<Row>
|
||||||
<Column ColumnSize="ColumnSize.Is5">
|
<Column ColumnSize="ColumnSize.Is1.OnDesktop">
|
||||||
<Paragraph Margin="Margin.Is1.OnY">@context.Item.PowerUsage W</Paragraph>
|
<Button @onclick="Toggle" Position="Position.Absolute.Top.Is50.Start.Is100.Translate.Middle" Color="Color.Dark" Outline>
|
||||||
</Column>
|
<BarIcon IconName="IconName.Pen" />
|
||||||
</Row>
|
</Button>
|
||||||
</Column>
|
</Column>
|
||||||
<Column ColumnSize="ColumnSize.Is4">
|
</Row>
|
||||||
<Button Position="Position.Absolute.Top.Is50.Start.Is50.Translate.Middle" Color="Color.Dark" Outline>
|
|
||||||
<BarIcon IconName="IconName.Bolt" />
|
|
||||||
</Button>
|
|
||||||
</Column>
|
|
||||||
</Row>
|
|
||||||
</ListGroupItem>
|
|
||||||
</ItemTemplate>
|
|
||||||
</ListView>
|
|
||||||
</Column>
|
|
||||||
</Row>
|
|
||||||
|
|
||||||
|
</Row>
|
||||||
|
</ListGroupItem>
|
||||||
|
</ItemTemplate>
|
||||||
|
</ListView>
|
||||||
|
</Column>
|
||||||
|
<Column ColumnSize="ColumnSize.Is6.OnDesktop.Is12.OnMobile" Margin="Margin.Is3.FromTop.OnMobile" Padding="Padding.Is4.FromStart.OnMobile">
|
||||||
|
<Div hidden="@hideButtonSettings">
|
||||||
|
<Field>
|
||||||
|
<FieldLabel>
|
||||||
|
<h2>
|
||||||
|
Plug Settings
|
||||||
|
</h2>
|
||||||
|
</FieldLabel>
|
||||||
|
</Field>
|
||||||
|
<Field>
|
||||||
|
<FieldLabel>
|
||||||
|
<h5>
|
||||||
|
Plug Name
|
||||||
|
</h5>
|
||||||
|
<Paragraph>
|
||||||
|
Here you can change the name of your plug
|
||||||
|
</Paragraph>
|
||||||
|
</FieldLabel>
|
||||||
|
<TextEdit Placeholder="Enter Name" />
|
||||||
|
</Field>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<Field>
|
||||||
|
<FieldLabel>
|
||||||
|
<h5>
|
||||||
|
Change Max Output
|
||||||
|
</h5>
|
||||||
|
<Paragraph>
|
||||||
|
Here you can limit how much power your plug uses
|
||||||
|
</Paragraph>
|
||||||
|
</FieldLabel>
|
||||||
|
<TextEdit Placeholder="Enter Max Output" />
|
||||||
|
</Field>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<Field>
|
||||||
|
<FieldLabel>
|
||||||
|
<h5>
|
||||||
|
Select Room
|
||||||
|
</h5>
|
||||||
|
<Paragraph>
|
||||||
|
Here you select or change the room the plug belongs to.
|
||||||
|
</Paragraph>
|
||||||
|
</FieldLabel>
|
||||||
|
<br />
|
||||||
|
<Dropdown Display="Display.InlineBlock">
|
||||||
|
<DropdownToggle Color="Color.Primary" Width="Width.Is100">Rooms</DropdownToggle>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownItem>Room 1</DropdownItem>
|
||||||
|
<DropdownDivider />
|
||||||
|
<DropdownItem>Room 2</DropdownItem>
|
||||||
|
<DropdownDivider />
|
||||||
|
<DropdownItem>Room 3</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
|
</Field>
|
||||||
|
</Div>
|
||||||
|
<Div hidden="@(!hideButtonSettings)">
|
||||||
|
<Field>
|
||||||
|
<FieldLabel>
|
||||||
|
<h2>
|
||||||
|
General Settings
|
||||||
|
</h2>
|
||||||
|
</FieldLabel>
|
||||||
|
</Field>
|
||||||
|
<Field>
|
||||||
|
<FieldLabel>
|
||||||
|
<h5>
|
||||||
|
Electricity Price
|
||||||
|
</h5>
|
||||||
|
<Paragraph>
|
||||||
|
Here you enter your electricity price. This is gonna calculate the overall Price of your System
|
||||||
|
</Paragraph>
|
||||||
|
</FieldLabel>
|
||||||
|
<TextEdit Placeholder="Enter Electricity Price" />
|
||||||
|
</Field>
|
||||||
|
</Div>
|
||||||
|
<Column ColumnSize="ColumnSize.IsFull" TextAlignment="TextAlignment.End">
|
||||||
|
<Button Color="Color.Primary">Save</Button>
|
||||||
|
</Column>
|
||||||
|
</Column>
|
||||||
|
</Div>
|
||||||
|
</Row>
|
||||||
|
</Div>
|
||||||
|
|
||||||
@code {
|
@code {
|
||||||
|
List<Device> plugs = new List<Device>() { new Device("ffff:ffff:ffff:ffff", "Josne", IPAddress.Broadcast, new User("Joe", "qiowruioewjfopa", Role.Admin), "Raum"), new Device("ffff:ffff:ffff:ffff", "Josne", IPAddress.Broadcast, new User("Joe", "Josne", Role.Admin), "Raum"), new Device("ffff:ffff:ffff:ffff", "Josne", IPAddress.Broadcast, new User("Joe", "qiowruioewjfopa", Role.Admin), "Raum"), };
|
||||||
|
|
||||||
|
private bool hideButtonSettings = true;
|
||||||
|
|
||||||
List<Device> plugs = new List<Device>() { new Device("ffff:ffff:ffff:ffff", "Josne", IPAddress.Broadcast, new User("Joe", "qiowruioewjfopa", Role.Admin), "Raum"), new Device("ffff:ffff:ffff:ffff", "Josne", IPAddress.Broadcast, new User("Joe", "Josne", Role.Admin), "Raum"), new Device("ffff:ffff:ffff:ffff", "Josne", IPAddress.Broadcast, new User("Joe", "qiowruioewjfopa", Role.Admin), "Raum"), };
|
private void Toggle()
|
||||||
|
{
|
||||||
|
hideButtonSettings = !hideButtonSettings;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -6,3 +6,4 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
<component type="typeof(App)" render-mode="Server" />
|
<component type="typeof(App)" render-mode="Server" />
|
||||||
|
<link href="_content/Blazorise.LoadingIndicator/blazorise.loadingindicator.css" rel="stylesheet" />
|
||||||
@@ -10,3 +10,4 @@
|
|||||||
@using Elektrifikatsiya
|
@using Elektrifikatsiya
|
||||||
@using Blazorise
|
@using Blazorise
|
||||||
@using Blazorise.Charts
|
@using Blazorise.Charts
|
||||||
|
@using Blazorise.LoadingIndicator
|
||||||
|
|||||||
Reference in New Issue
Block a user