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>
@@ -14,4 +12,4 @@
 			@Body
 		</LayoutContent>
 	</Layout>
-</Layout>
+</Layout>

src/Elektrifikatsiya/Elektrifikatsiya/Pages/AddPlug.razor

@@ -3,38 +3,78 @@
 @using Elektrifikatsiya.Models;
 @inject IVersionProvider VersionProvider
 
-<Row Height=Height.Is50 Padding="Padding.Is3.OnDesktop.Is0">
+<Row Style="height:50%; width:100%" Padding="Padding.Is3.OnDesktop.Is0">
-	<Column ColumnSize="ColumnSize.Is12" style="border-bottom-style:solid; border-bottom-color:#1a237e">
+	<Row Style="height:90%; width:100%">
-		<ListView  Class="w-100"
+		<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is1"></Column>
-				  TItem="Device"
+		<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is12">
-				  Data="@plugs"
+			<Bar Breakpoint="Breakpoint.Desktop"
-				  TextField="@((_)=>(""))"
+				 Background="Background.White"
-				  ValueField="@((_)=>(""))"
+				 ThemeContrast="ThemeContrast.None"
-				  Mode="ListGroupMode.Static">
+				 Shadow="Shadow.Remove"
-			<ItemTemplate>
+				 Border="Border.Is1.RoundedTop">
-				<ListGroupItem>
+				<BarBrand>
-					<Row>
+					Add a plug via wifi
-						<Column ColumnSize="ColumnSize.Is6">
+				</BarBrand>
-							<Row>
+			</Bar>
-								<Column >
+			<ListView Class="w-100"
-									<Heading Size="HeadingSize.Is6" Margin="Margin.Is1.FromBottom">@context.Item.Name</Heading>
+					  TItem="Device"
-								</Column>
+					  Data="@plugs"
-							</Row>
+					  TextField="@((_)=>(""))"
-							<Row Width="Width.Is100">
+					  ValueField="@((_)=>(""))"
-								<Column>
+					  Mode="ListGroupMode.Static"
-									<Small>IP: @context.Item.Address</Small>
+					  Style="border-radius: 0px 0px">
-								</Column>
+				<ItemTemplate>
-							</Row>
+					<ListGroupItem>
-						</Column>
+						<Row>
-						<Column ColumnSize="ColumnSize.Is4.Is2.WithOffset">
+							<Column ColumnSize="ColumnSize.Is7">
-							<Button Position="Position.Absolute.Top.Is50.Start.Is50.Translate.Middle" Color="Color.Dark" Outline>
+								<Row Width="Width.Is100">
-								<BarIcon IconName="IconName.Add" />
+									<Column>
-							</Button>
+										<Small>IP: @context.Item.Address</Small>
-						</Column>
+									</Column>
-					</Row>
+								</Row>
+							</Column>
+							<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>
+							</Column>
+						</Row>
+					</ListGroupItem>
+				</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>
-			</ItemTemplate>
+			</ListGroup>
-		</ListView>
+		</Row>
+		<Row Style="height:75%; width:100%"></Row>
 	</Column>
 </Row>
 

src/Elektrifikatsiya/Elektrifikatsiya/Pages/Login.razor

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