Merge branch 'Development' into feature-DeviceRegistration

src/Elektrifikatsiya/Elektrifikatsiya/Components/Layout/SideMenu.razor

@@ -23,6 +23,12 @@
                     Admin
                 </BarLink>
             </BarItem>
+            <BarItem>
+                <BarLink To="/settings" TextColor="TextColor.White">
+                    <BarIcon Style="color:white" IconName="IconName.Wrench" />
+                    Settings
+                </BarLink>
+            </BarItem>
             <BarItem>
                 <BarLink To="/addplug" TextColor="TextColor.White">
                     <BarIcon Style="color:white" IconName="IconName.Plug" />
@@ -32,9 +38,9 @@
         </BarStart>
         <BarEnd>
             <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>
             </BarItem>
         </BarEnd>
@@ -42,7 +48,5 @@
 </Bar>
 @code {
     private bool pagesBarVisible = true;
-
-    //TODO: replace logo png with transparent background one
     RenderFragment customIcon =@<img src="/logo.png" style="width:32px; height: 32px" />;
 }

src/Elektrifikatsiya/Elektrifikatsiya/Elektrifikatsiya.csproj

@@ -37,6 +37,7 @@
 		<PackageReference Include="Blazorise" Version="1.2.0" />
 		<PackageReference Include="Blazorise.Charts" 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.Icons.Material" Version="1.2.0" />
 		<PackageReference Include="BCrypt.Net-Next" Version="4.0.3" />

src/Elektrifikatsiya/Elektrifikatsiya/Layouts/LoginLayout.razor

@@ -1,40 +1,17 @@
 @using System.Diagnostics;
-@using FluentResults
-@inject Elektrifikatsiya.Services.IAuthenticationService AuthenticationService
-@inject NavigationManager NavigationManager
 @inherits LayoutComponentBase
 <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">
-    <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>
 @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 -->

src/Elektrifikatsiya/Elektrifikatsiya/Pages/AddPlug.razor

@@ -6,149 +6,152 @@
 @using Elektrifikatsiya.Services.Implementations
 @using Elektrifikatsiya.Utilities
 @using FluentResults;
+@using Blazorise.LoadingIndicator;
 @inject IVersionProvider VersionProvider
 @inject IDeviceManagmentService DeviceManagmentService
 @inject IAuthenticationService AuthenticationService
 @inject IMessageService MessageService
 
-<Div>
+
-    <Row Style="height:50%; width:100%" Padding="Padding.Is3.OnDesktop.Is0">
+<Row Style="height:50%; width:100%" Padding="Padding.Is3.OnDesktop.Is5.FromStart.OnMobile">
-        <Row Style="height:90%; width:100%">
+	<Row Style="height:90%; width:100%">
-            <Column ColumnSize="ColumnSize.Is4.OnDesktop.Is1"></Column>
+		<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is1"></Column>
-            <Column ColumnSize="ColumnSize.Is4.OnDesktop.Is12">
+		<Column ColumnSize="ColumnSize.Is4.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>
-                        Add a plug via wifi
+					<Column ColumnSize="ColumnSize.Is9">
-                    </BarBrand>
+						Add a plug via wifi
-                </Bar>
+					</Column>
-                <ListView Class="w-100"
+					<Column ColumnSize="ColumnSize.Is3.Is6.WithOffset">
-                          TItem="IPAddress"
+						<LoadingIndicator @bind-Visible="@visible"/>
-                          Data="@ipAddresses"
+						
-                          TextField="@((_)=>(""))"
+					</Column>
-                          ValueField="@((_)=>(""))"
+				</BarBrand>
-                          Mode="ListGroupMode.Static">
+			</Bar>
-                    <ItemTemplate>
+				<ListView Class="w-100"
-                        <ListGroupItem>
+						  TItem="IPAddress"
-                            <Row>
+						  Data="@ipAddresses"
-                                <Column ColumnSize="ColumnSize.Is6">
+						  TextField="@((_)=>(""))"
-                                    <Row>
+						  ValueField="@((_)=>(""))"
-                                    </Row>
+						  Mode="ListGroupMode.Static"
-                                    <Row Width="Width.Is100">
+						  Style="border-radius: 0px 0px">
-                                        <Column>
+					<ItemTemplate>
-                                            <Small>IP: @context.Item</Small>
+						<ListGroupItem>
-                                        </Column>
+								<Row>
-                                    </Row>
+									<Column ColumnSize="ColumnSize.Is8">
-                                </Column>
+										<Row>
-                                <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 Width="Width.Is100">
-                                        <BarIcon IconName="IconName.Add" />
+											<Column>
-                                    </Button>
+												<Small>IP: @context.Item</Small>
-                                </Column>
+											</Column>
-                            </Row>
+										</Row>
-                        </ListGroupItem>
+									</Column>
-                    </ItemTemplate>
+									<Column ColumnSize="ColumnSize.Is4">
-                </ListView>
+										<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>
-            </Column>
+											<BarIcon IconName="IconName.Add" />
-        </Row>
+										</Button>
-    </Row>
+									</Column>
-    <Row Style="height:50%; width:100%; border-top-style:solid; border-top-color:#1a237e">
+								</Row>
-        <Column ColumnSize="ColumnSize.Is4.OnDesktop.Is1"></Column>
+						</ListGroupItem>
-        <Column ColumnSize="ColumnSize.Is4.OnDesktop.Is12">
+					</ItemTemplate>
-            <Row Style="height:15%; width:100%"></Row>
+				</ListView>
-            <Row Style="height:10%; width:100%">
+		</Column>
-                <Bar Breakpoint="Breakpoint.Desktop"
+	</Row>
-                     Background="Background.White"
+</Row>
-                     ThemeContrast="ThemeContrast.None"
+<Row Style="height:50%; width:100%; border-top-style:solid; border-top-color:#1a237e" Padding="Padding.Is3.OnDesktop.Is5.FromStart.OnMobile">
-                     Shadow="Shadow.Remove"
+	<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is1"></Column>
-                     Border="Border.Is1.RoundedTop"
+	<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is12">
-                     Style="width:100%">
+		<Row Style="height:15%; width:100%"></Row>
-                    <BarBrand>
+		<Row Style="height:10%; width:100%">
-                        Add a plug via IP
+			<Bar Breakpoint="Breakpoint.Desktop"
-                    </BarBrand>
+				 Background="Background.White"
-                </Bar>
+				 ThemeContrast="ThemeContrast.None"
-                <ListGroup Style="width:100%; border-radius: 0px 0px">
+				 Shadow="Shadow.Remove"
-                    <ListGroupItem Color="Color.Default">
+				 Border="Border.Is1.RoundedTop"
-                        <Form>
+				 Style="width:100%">
-                            <Validation @ref="ipValidation" Validator="ValidateIPv4">
+				<BarBrand>
-                                <Field Horizontal>
+					Add a plug via IP
-                                    <FieldBody ColumnSize="ColumnSize.Is12">
+				</BarBrand>
-                                        <TextEdit @bind-Text="ipText" Placeholder="Enter the Device IP here">
+			</Bar>
-                                            <Feedback>
+			<ListGroup Style="width:100%; border-radius: 0px 0px">
-                                                <ValidationNone>Please enter a ip address.</ValidationNone>
+				<ListGroupItem Color="Color.Default">
-                                                <ValidationSuccess>Ip address is valid.</ValidationSuccess>
+					<Form>
-                                                <ValidationError>Ip address is not valid!</ValidationError>
+						<Field Horizontal>
-                                            </Feedback>
+							<FieldBody ColumnSize="ColumnSize.Is12">
-                                        </TextEdit>
+								<TextEdit Placeholder="Enter the Device IP here" />
-                                        <br>
+								<br>
-                                        <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>
+								<Button style="background-color:#1a237e; color:white" Type="ButtonType.Submit" PreventDefaultOnSubmit>CONNECT</Button>
-                                    </FieldBody>
+							</FieldBody>
-                                </Field>
+						</Field>
-                            </Validation>
+					</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 {
-    List<IPAddress> ipAddresses = new List<IPAddress>();
+	List<IPAddress> ipAddresses = new List<IPAddress>();
 
-    Validation? ipValidation;
+	Validation? ipValidation;
 
-    string ipText = null!;
+	bool visible = true;
 
-    protected override void OnInitialized()
+	string ipText = null!;
-    {
-        MdnsDiscovery.OnDeviceFound += async ipAddress =>
-        {
-            if (!ipAddresses.Contains(ipAddress))
-            {
-                ipAddresses.Add(ipAddress);
-                await InvokeAsync(StateHasChanged);
-            }
-        };
 
-        MdnsDiscovery.FetchChachedDevices();
+	protected override void OnInitialized()
-    }
+	{
+		MdnsDiscovery.OnDeviceFound += async ipAddress =>
+		{
+			visible = false;
+			if (!ipAddresses.Contains(ipAddress))
+			{
+				ipAddresses.Add(ipAddress);
+				await InvokeAsync(StateHasChanged);
+			}
+		};
 
-    private async Task RegisterDevice(IPAddress ipAddress)
+		MdnsDiscovery.FetchChachedDevices();
-    {
+	}
-        Result<Device> result = await DeviceManagmentService.RegisterDevice(ipAddress, (await AuthenticationService.GetUserAsync()).ValueOrDefault);
 
-        if (result.IsSuccess)
+	private async Task RegisterDevice(IPAddress ipAddress)
-        {
+	{
-            await MessageService.Success("Device added!");
+		Result<Device> result = await DeviceManagmentService.RegisterDevice(ipAddress, (await AuthenticationService.GetUserAsync()).ValueOrDefault);
-        }
-        else
-        {
-            await MessageService.Error(string.Join(',', result.Errors.Select(e => e.Message)), "Adding device failed!");
-        }
-    }
 
-    public void ValidateIPv4(ValidatorEventArgs e)
+		if (result.IsSuccess)
-    {
+		{
-        string? input = Convert.ToString(e.Value);
+			await MessageService.Success("Device added!");
+		}
+		else
+		{
+			await MessageService.Error(string.Join(',', result.Errors.Select(e => e.Message)), "Adding device failed!");
+		}
+	}
 
-        if (string.IsNullOrWhiteSpace(input))
+	public void ValidateIPv4(ValidatorEventArgs e)
-        {
+	{
-            e.Status = ValidationStatus.None;
+		string? input = Convert.ToString(e.Value);
-            return;
-        }
 
-        string[] splitValues = input.Split('.');
+		if (string.IsNullOrWhiteSpace(input))
-        if (splitValues.Length != 4)
+		{
-        {
+			e.Status = ValidationStatus.None;
-            e.Status = ValidationStatus.Error;
+			return;
-            return;
+		}
-        }
 
-        e.Status = splitValues.All(r => byte.TryParse(r, out _)) ? ValidationStatus.Success : ValidationStatus.Error;
+		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;
+	}
+
+}

src/Elektrifikatsiya/Elektrifikatsiya/Pages/Admin.razor

@@ -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 {
+}

src/Elektrifikatsiya/Elektrifikatsiya/Pages/Dashboard.razor

@@ -1,4 +1,4 @@
-@page "/"
+@page "/"
 @using Blazorise.Components;
 @using Elektrifikatsiya.Models;
 @using System.Net
@@ -6,89 +6,94 @@
 @using Elektrifikatsiya.Utilities
 @using System.Diagnostics
 @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>
+@inject IDeviceStatusService DeviceStatusService;
-					<Div Flex="Flex.InlineFlex.JustifyContent.Between" Width="Width.Is100">
+
-						<Heading Size="HeadingSize.Is6" Margin="Margin.Is2.FromBottom">@context.Item.EventName</Heading>
+<Div>
-						<Small>@context.Item.Date</Small>
+	<Row Padding="Padding.Is3">
-					</Div>
+		<Div Display="Display.Flex.Row.OnDesktop" Margin=" Margin.Is3.FromBottom" Width="Width.Is100">
-					<Paragraph Border="Border.OnBottom" Margin="Margin.Is2.FromBottom">@context.Item.Description</Paragraph>
+			<Column ColumnSize="ColumnSize.Is6.OnDesktop.Is12">
-				</ItemTemplate>
+				<Bar Breakpoint="Breakpoint.Desktop"
-			</ListView>
+					 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>
+							<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.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>
-	</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 {
 	//TODO: insert new event here if plug produces one

src/Elektrifikatsiya/Elektrifikatsiya/Pages/Dashboard.razor.cs

@@ -18,11 +18,6 @@ namespace Elektrifikatsiya.Pages
 {
     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
-        }
     }
 }

src/Elektrifikatsiya/Elektrifikatsiya/Pages/Settings.razor

@@ -2,61 +2,157 @@
 @using Blazorise.Components;
 @using Elektrifikatsiya.Models;
 @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="@((_)=>(""))"
-				  Style="border-radius: 0px 0px"
+						  ValueField="@((_)=>(""))"
-				  Height="100%" 
+						  Style="border-radius: 0px 0px"
-				  MaxHeight="90%">
+						  Height="100%"
-			<ItemTemplate>
+						  MaxHeight="90%">
-				<ListGroupItem Border="Border.OnBottom">
+					<ItemTemplate>
-					<Row>
+						<ListGroupItem Border="Border.OnBottom">
-						<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 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>
 
+								<Column ColumnSize="ColumnSize.Is6">
+									<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>
+									</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>
+									<br />
+									<br />
+								<Row>
+									<Column ColumnSize="ColumnSize.Is1.OnDesktop">
+									<Button @onclick="Toggle" Position="Position.Absolute.Top.Is50.Start.Is100.Translate.Middle" Color="Color.Dark" Outline>
+											<BarIcon IconName="IconName.Pen" />
+										</Button>
+									</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 {
+    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;
+	}
+}

src/Elektrifikatsiya/Elektrifikatsiya/Pages/_Host.cshtml

@@ -6,3 +6,4 @@
 }
 
 <component type="typeof(App)" render-mode="Server" />
+<link href="_content/Blazorise.LoadingIndicator/blazorise.loadingindicator.css" rel="stylesheet" />

src/Elektrifikatsiya/Elektrifikatsiya/_Imports.razor

@@ -10,3 +10,4 @@
 @using Elektrifikatsiya
 @using Blazorise
 @using Blazorise.Charts
+@using Blazorise.LoadingIndicator