Merge pull request #34 from Stefan-5422/feature-frontend

Feature frontend

src/Elektrifikatsiya/Elektrifikatsiya/Layouts/LoginLayout.razor

@@ -0,0 +1,18 @@
+@using System.Diagnostics;
+@inherits LayoutComponentBase
+<Image Source="/Pictures/logo.png"> </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">
+        <TextEdit Placeholder="Username" />
+    </Field>
+    <Field  Width="Width.Is25" Position="Position.Relative.Top.Is50.Start.Is50.Translate.Middle">
+        <TextEdit Role="TextRole.Password" Placeholder="Password" />
+    </Field>
+    <Button Width="Width.Is25"  Color="Color.Primary" Clicked="Clicked" Position="Position.Relative.Bottom.Is50.Start.Is50.Translate.MiddleX" >Login</Button>
+</Card>
+@code {
+    private void Clicked()
+    {
+        Debug.WriteLine("Button was clicked!");
+    }
+}

src/Elektrifikatsiya/Elektrifikatsiya/Layouts/MainLayout.razor

@@ -1,8 +1,6 @@
 @using Elektrifikatsiya.Components.Layout
 @inherits LayoutComponentBase
 
-
-
 <Layout Sider>
 	<LayoutSider>
 		<LayoutSiderContent>

src/Elektrifikatsiya/Elektrifikatsiya/Pages/AddPlug.razor

@@ -3,30 +3,37 @@
 @using Elektrifikatsiya.Models;
 @inject IVersionProvider VersionProvider
 
-<Row Height=Height.Is50 Padding="Padding.Is3.OnDesktop.Is0">
-	<Column ColumnSize="ColumnSize.Is12" style="border-bottom-style:solid; border-bottom-color:#1a237e">
+<Row Style="height:50%; width:100%" Padding="Padding.Is3.OnDesktop.Is0">
+	<Row Style="height:90%; width:100%">
+		<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is1"></Column>
+		<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is12">
+			<Bar Breakpoint="Breakpoint.Desktop"
+				 Background="Background.White"
+				 ThemeContrast="ThemeContrast.None"
+				 Shadow="Shadow.Remove"
+				 Border="Border.Is1.RoundedTop">
+				<BarBrand>
+					Add a plug via wifi
+				</BarBrand>
+			</Bar>
 			<ListView Class="w-100"
 					  TItem="Device"
 					  Data="@plugs"
 					  TextField="@((_)=>(""))"
 					  ValueField="@((_)=>(""))"
-				  Mode="ListGroupMode.Static">
+					  Mode="ListGroupMode.Static"
+					  Style="border-radius: 0px 0px">
 				<ItemTemplate>
 					<ListGroupItem>
 						<Row>
-						<Column ColumnSize="ColumnSize.Is6">
-							<Row>
-								<Column >
-									<Heading Size="HeadingSize.Is6" Margin="Margin.Is1.FromBottom">@context.Item.Name</Heading>
-								</Column>
-							</Row>
+							<Column ColumnSize="ColumnSize.Is7">
 								<Row Width="Width.Is100">
 									<Column>
 										<Small>IP: @context.Item.Address</Small>
 									</Column>
 								</Row>
 							</Column>
-						<Column ColumnSize="ColumnSize.Is4.Is2.WithOffset">
+							<Column ColumnSize="ColumnSize.Is4.Is1.WithOffset">
 								<Button Position="Position.Absolute.Top.Is50.Start.Is50.Translate.Middle" Color="Color.Dark" Outline>
 									<BarIcon IconName="IconName.Add" />
 								</Button>
@@ -36,6 +43,39 @@
 				</ItemTemplate>
 			</ListView>
 		</Column>
+	</Row>
+</Row>
+<Row Style="height:50%; width:100%; border-top-style:solid; border-top-color:#1a237e; ">
+	<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is1"></Column>
+	<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is12">
+		<Row Style="height:15%; width:100%"></Row>
+		<Row Style="height:10%; width:100%">
+			<Bar Breakpoint="Breakpoint.Desktop"
+				 Background="Background.White"
+				 ThemeContrast="ThemeContrast.None"
+				 Shadow="Shadow.Remove"
+				 Border="Border.Is1.RoundedTop"
+				 Style="width:100%">
+				<BarBrand>
+					Add a plug via IP
+				</BarBrand>
+			</Bar>
+			<ListGroup Style="width:100%; border-radius: 0px 0px">
+				<ListGroupItem Color="Color.Default">
+					<Form>
+						<Field Horizontal>
+							<FieldBody ColumnSize="ColumnSize.Is12">
+								<TextEdit Placeholder="Enter the Device IP here" />
+								<br>
+								<Button style="background-color:#1a237e; color:white" Type="ButtonType.Submit" PreventDefaultOnSubmit>CONNECT</Button>
+							</FieldBody>
+						</Field>
+					</Form>
+				</ListGroupItem>
+			</ListGroup>
+		</Row>
+		<Row Style="height:75%; width:100%"></Row>
+	</Column>
 </Row>
 
 @code {

src/Elektrifikatsiya/Elektrifikatsiya/Pages/Login.razor

@@ -0,0 +1,4 @@
+@using System.Diagnostics;
+@using Elektrifikatsiya.Layouts;
+@page "/login"
+@layout LoginLayout;