Admin Page

This commit is contained in:
Aldin296
2023-06-01 15:10:45 +02:00
parent 71732b8f90
commit b467cea37c
2 changed files with 190 additions and 100 deletions
@@ -2,8 +2,12 @@
@using Blazorise.Components; @using Blazorise.Components;
@using Elektrifikatsiya.Models; @using Elektrifikatsiya.Models;
@using System.Net @using System.Net
@using Elektrifikatsiya.Services;
@inject IAuthenticationService AuthenthicationService;
<Div> <Div>
<Row Style="width: 100%; height: 100%" Margin="Margin.Is3.FromTop.OnMobile" Padding="Padding.Is4.FromStart.OnMobile"> <Row Style="width: 100%; height: 100%" Margin="Margin.Is3.FromTop.OnMobile" Padding="Padding.Is4.FromStart.OnMobile">
<Div Display="Display.Flex.Row.OnDesktop" Margin=" Margin.Is3.FromBottom" Width="Width.Is100"> <Div Display="Display.Flex.Row.OnDesktop" Margin=" Margin.Is3.FromBottom" Width="Width.Is100">
<Column ColumnSize="ColumnSize.Is5.OnDesktop.Is12.OnMobile"> <Column ColumnSize="ColumnSize.Is5.OnDesktop.Is12.OnMobile">
<Bar Breakpoint="Breakpoint.Desktop" <Bar Breakpoint="Breakpoint.Desktop"
@@ -12,8 +16,19 @@
Shadow="Shadow.Remove" Shadow="Shadow.Remove"
Border="Border.Is1.RoundedTop"> Border="Border.Is1.RoundedTop">
<BarBrand> <BarBrand>
Users <Column ColumnSize="ColumnSize.Is12">
Users
</Column>
<Column ColumnSize="ColumnSize.Is12.Is11.WithOffset.OnDesktop.IsAuto.OnMobile">
<Button Clicked="@ShowModalAddUser" TextAlignment="TextAlignment.End" Shadow="Shadow.Remove">
<BarIcon IconName="IconName.Add"></BarIcon>
</Button>
</Column>
</BarBrand> </BarBrand>
</Bar> </Bar>
<ListView TItem="User" <ListView TItem="User"
Data="@users" Data="@users"
@@ -42,17 +57,39 @@
</Column> </Column>
<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is7.OnMobile"> <Column ColumnSize="ColumnSize.Is4.OnDesktop.Is7.OnMobile">
<Button Clicked="@ShowModal" class="btn1" Position="Position.Absolute.Top.Is50.Start.Is50.Translate.Middle" Color="Color.Dark" Outline> <Button Clicked="@ShowModalDelete" class="btn1" Position="Position.Absolute.Top.Is50.Start.Is50.Translate.Middle" Color="Color.Dark" Outline>
<BarIcon IconName="IconName.Delete" /> <BarIcon IconName="IconName.Delete" />
</Button> </Button>
<style> <style>
.btn1:hover .btn1:hover {
{
background: #E50000; background: #E50000;
} }
</style> </style>
<Modal @ref="modalRef"> <Modal @ref="modalRefAddUser">
<ModalContent Centered>
<ModalHeader>
<ModalTitle>Add User</ModalTitle>
<CloseButton />
</ModalHeader>
<ModalBody>
<Field>
<FieldLabel>User Name</FieldLabel>
<TextEdit Placeholder="Enter user name..." />
</Field>
<Field>
<FieldLabel>User Password</FieldLabel>
<TextEdit Placeholder="Enter user password..." />
</Field>
</ModalBody>
<ModalFooter>
<Button Color="Color.Secondary" style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px" Clicked="@HideModalAddUser">Close</Button>
<Button Color="Color.Primary" style="border-bottom-left-radius: 0px; border-bottom-right-radius: 0" Clicked="@HideModalAddUser">Add</Button>
</ModalFooter>
</ModalContent>
</Modal>
<Modal @ref="modalRefDelete">
<ModalContent Centered> <ModalContent Centered>
<ModalHeader> <ModalHeader>
<ModalTitle>Delete User</ModalTitle> <ModalTitle>Delete User</ModalTitle>
@@ -65,8 +102,8 @@
</Field> </Field>
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<Button Color="Color.Secondary" Clicked="@HideModal">Close</Button> <Button Color="Color.Secondary" style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px" Clicked="@HideModalDelete">Close</Button>
<Button Color="Color.Primary" Clicked="@HideModal">Delete</Button> <Button Color="Color.Primary" style="border-bottom-left-radius: 0px; border-bottom-right-radius: 0px" Clicked="@HideModalDelete">Delete</Button>
</ModalFooter> </ModalFooter>
</ModalContent> </ModalContent>
</Modal> </Modal>
@@ -129,7 +166,8 @@
Select Role Select Role
</h5> </h5>
<Paragraph> <Paragraph>
Here you select or change the role of to User or Admin </Paragraph> Here you select or change the role of to User or Admin
</Paragraph>
</FieldLabel> </FieldLabel>
<br /> <br />
<Dropdown Display="Display.InlineBlock"> <Dropdown Display="Display.InlineBlock">
@@ -151,19 +189,36 @@
</Div> </Div>
@code { @code {
List<User> users = new List<User>() { new User("Silas", "aldjlfasd",Role.Admin), new User("Joe", "qiowruioewjfopa", Role.Admin), new User("Stefan", "adfadsdf", Role.Admin), new User("Manu", "öhöfldaösldf", Role.User)}; List<User> users = new List<User>() { new User("Silas", "aldjlfasd", Role.Admin), new User("Joe", "qiowruioewjfopa", Role.Admin), new User("Stefan", "adfadsdf", Role.Admin), new User("Manu", "öhöfldaösldf", Role.User) };
private Modal modalRef; private Modal? modalRefDelete;
public Admin() public Admin()
{ {
} }
private Task ShowModalDelete()
{
return modalRefDelete!.Show();
}
private Task HideModalDelete() => modalRefDelete!.Hide();
private Modal? modalRefAddUser;
private Task ShowModalAddUser()
{
return modalRefAddUser!.Show();
}
private Task HideModalAddUser() => modalRefAddUser!.Hide();
private async Task AddModalAddUser(string name, string passwort)
{
await AuthenthicationService.RegisterUserAsync(name, passwort, Role.User);
await HideModalAddUser();
}
private Task ShowModal()
{
return modalRef.Show();
}
private Task HideModal() => modalRef.Hide();
} }
@@ -12,85 +12,120 @@
@inject IDeviceManagmentService DeviceManagmentService; @inject IDeviceManagmentService DeviceManagmentService;
<Div> <Div>
<Row Padding="Padding.Is3"> <Row Padding="Padding.Is3">
<Div Display="Display.Flex.Row.OnDesktop" Margin=" Margin.Is3.FromBottom" Width="Width.Is100"> <Div Display="Display.Flex.Row.OnDesktop" Margin=" Margin.Is3.FromBottom" Width="Width.Is100">
<Column ColumnSize="ColumnSize.Is6.OnDesktop.Is12"> <Column ColumnSize="ColumnSize.Is6.OnDesktop.Is12">
<Bar Breakpoint="Breakpoint.Desktop" <Bar Breakpoint="Breakpoint.Desktop"
Background="Background.White" Background="Background.White"
ThemeContrast="ThemeContrast.None" ThemeContrast="ThemeContrast.None"
Shadow="Shadow.Remove" Shadow="Shadow.Remove"
Border="Border.Is1.RoundedTop"> Border="Border.Is1.RoundedTop">
<BarBrand> <BarBrand>
Plugs Plugs
</BarBrand> </BarBrand>
</Bar> </Bar>
<ListView TItem="Device" <ListView TItem="Device"
Data="@plugs" Data="@plugs"
TextField="@((_)=>(""))" TextField="@((_)=>(""))"
ValueField="@((_)=>(""))" ValueField="@((_)=>(""))"
Mode="ListGroupMode.Static" Mode="ListGroupMode.Static"
Style="border-radius: 0px 0px"> Style="border-radius: 0px 0px">
<ItemTemplate> <ItemTemplate>
<ListGroupItem> <ListGroupItem>
<Row> <Row>
<Column ColumnSize="ColumnSize.Is8"> <Column ColumnSize="ColumnSize.Is8">
<Row> <Row>
<Column ColumnSize="ColumnSize.Is7"> <Column ColumnSize="ColumnSize.Is7">
<Heading Size="HeadingSize.Is6" Margin="Margin.Is1.FromBottom">@context.Item.Name</Heading> <Heading Size="HeadingSize.Is6" Margin="Margin.Is1.FromBottom">@context.Item.Name</Heading>
</Column> </Column>
</Row> </Row>
<Row> <Row>
<Column> <Column>
<Small>User: @context.Item.User.Name</Small> <Small>User: @context.Item.User.Name</Small>
<br /> <br />
<Small>Room: @context.Item.Room</Small> <Small>Room: @context.Item.Room</Small>
</Column> </Column>
<Column ColumnSize="ColumnSize.Is5"> <Column ColumnSize="ColumnSize.Is5">
<Paragraph Margin="Margin.Is1.OnY">@context.Item.PowerUsage W</Paragraph> <Paragraph Margin="Margin.Is1.OnY">@context.Item.PowerUsage W</Paragraph>
</Column> </Column>
</Row> </Row>
</Column> </Column>
<Column ColumnSize="ColumnSize.Is4"> <Column ColumnSize="ColumnSize.Is4">
<Button Clicked="() => Switch(context.Item)" Position="Position.Absolute.Top.Is50.Start.Is50.Translate.Middle" Color="Color.Primary" Primary Outline> <Button Clicked="() => Switch(context.Item)" Position="Position.Absolute.Top.Is50.Start.Is50.Translate.Middle" Color="Color.Primary" Primary Outline>
<BarIcon TextColor="(context.Item.Enabled?TextColor.Success:TextColor.Danger)" IconName="IconName.Bolt" /> <BarIcon TextColor="(context.Item.Enabled?TextColor.Success:TextColor.Danger)" IconName="IconName.Bolt" />
</Button> </Button>
</Column> </Column>
</Row> </Row>
</ListGroupItem> </ListGroupItem>
</ItemTemplate> </ItemTemplate>
</ListView> </ListView>
</Column> </Column>
<Column ColumnSize="ColumnSize.Is6.OnDesktop.Is12"> <Column ColumnSize="ColumnSize.Is6.OnDesktop.Is12">
<Bar Breakpoint="Breakpoint.Desktop" <Bar Breakpoint="Breakpoint.Desktop"
Background="Background.White" Background="Background.White"
ThemeContrast="ThemeContrast.None" ThemeContrast="ThemeContrast.None"
Shadow="Shadow.Remove" Shadow="Shadow.Remove"
Border="Border.Is1.Rounded.RoundedTop"> Border="Border.Is1.Rounded.RoundedTop">
<BarBrand> <BarBrand>
Logs Logs
</BarBrand> </BarBrand>
</Bar> </Bar>
<ListView TItem="Event" <ListView TItem="Event"
Data="@events" Data="@events"
TextField="@((_)=>(""))" TextField="@((_)=>(""))"
ValueField="@((_)=>(""))" ValueField="@((_)=>(""))"
Mode="ListGroupMode.Static" Mode="ListGroupMode.Static"
Style="border-radius: 0px 0px"> Style="border-radius: 0px 0px">
<ItemTemplate> <ItemTemplate>
<Div Flex="Flex.InlineFlex.JustifyContent.Between" Width="Width.Is100"> <Div Flex="Flex.InlineFlex.JustifyContent.Between" Width="Width.Is100">
<Heading Size="HeadingSize.Is6" Margin="Margin.Is2.FromBottom">@context.Item.EventName</Heading> <Heading Size="HeadingSize.Is6" Margin="Margin.Is2.FromBottom">@context.Item.EventName</Heading>
<Small>@context.Item.Date</Small> <Small>@context.Item.Date</Small>
</Div> </Div>
<Paragraph Margin="Margin.Is2.FromBottom">@context.Item.Description</Paragraph> <Paragraph Margin="Margin.Is2.FromBottom">@context.Item.Description</Paragraph>
</ItemTemplate> </ItemTemplate>
</ListView> </ListView>
</Column> </Column>
</Div> </Div>
</Row> </Row>
<Row Padding="Padding.Is3"> <Row>
<Column> <Column ColumnSize="ColumnSize.Is3.OnDesktop.Is11.OnMobile" Margin="Margin.Is1.Is3.OnMobile.FromStart">
<Button Color="Color.Primary" Style="border-radius: 0px" Clicked="@(async () => await HandleRedraw())">Aktualisieren</Button> <Bar Breakpoint="Breakpoint.Desktop"
<LineChart Height="Height.Is100" Width="Width.Is100" @ref="lineChart" TItem="double" /> Background="Background.White"
</Column> ThemeContrast="ThemeContrast.None"
</Row> Shadow="Shadow.Remove"
</Div> Border="Border.Is1.RoundedTop">
<BarBrand>
Electricity Cost
</BarBrand>
</Bar>
<ListGroup Flush Border="Border.Is1.Is1.Is1.Is1">
<ListGroupItem>
<Div Flex="Flex.JustifyContent.Between" Width="Width.Is100">
<Heading Size="HeadingSize.Is6">Daily Cost</Heading>
</Div>
<Paragraph Margin="Margin.Is1.FromBottom">2€</Paragraph>
</ListGroupItem>
<ListGroupItem>
<Div Flex="Flex.JustifyContent.Between" Width="Width.Is100">
<Heading Size="HeadingSize.Is6">Monthly Cost</Heading>
</Div>
<Paragraph Margin="Margin.Is1.FromBottom">60€</Paragraph>
</ListGroupItem>
<ListGroupItem>
<Div Flex="Flex.JustifyContent.Between" Width="Width.Is100">
<Heading Size="HeadingSize.Is6">Yearly Cost</Heading>
</Div>
<Paragraph Margin="Margin.Is1.FromBottom">720€</Paragraph>
</ListGroupItem>
</ListGroup>
</Column>
</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>
</Row>
</Div>