AddPlug Progress

AddPlug first prototype done + responsive
This commit is contained in:
Friend2868
2023-03-02 16:42:13 +01:00
parent bb2bfe0145
commit 1410fbe5af
4 changed files with 75 additions and 56 deletions
@@ -2,63 +2,82 @@
@using Blazorise.Components; @using Blazorise.Components;
@using Elektrifikatsiya.Models; @using Elektrifikatsiya.Models;
@inject IVersionProvider VersionProvider @inject IVersionProvider VersionProvider
<Div >
<Row Height=Height.Is50 Padding="Padding.Is3.OnDesktop.Is0" 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%"> <Row Style="height:90%; width:100%">
<Column style="align-content:center" ColumnSize="ColumnSize.Is4.Is4.WithOffset"> <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 plug via wifi <BarBrand>
</BarBrand> Add a plug via wifi
</Bar> </BarBrand>
<ListView Class="w-100" </Bar>
TItem="Device" <ListView Class="w-100"
Data="@plugs" TItem="Device"
TextField="@((_)=>(""))" Data="@plugs"
ValueField="@((_)=>(""))" TextField="@((_)=>(""))"
Mode="ListGroupMode.Static" ValueField="@((_)=>(""))"
Style="border-radius: 0px 0px"> Mode="ListGroupMode.Static"
<ItemTemplate> Style="border-radius: 0px 0px">
<ListGroupItem> <ItemTemplate>
<Row> <ListGroupItem>
<Column ColumnSize="ColumnSize.Is7"> <Row>
<Row> <Column ColumnSize="ColumnSize.Is7">
<Column> <Row Width="Width.Is100">
<Heading Size="HeadingSize.Is6" Margin="Margin.Is1.FromBottom">@context.Item.Name</Heading> <Column>
</Column> <Small>IP: @context.Item.Address</Small>
</Row> </Column>
<Row Width="Width.Is100"> </Row>
<Column> </Column>
<Small>IP: @context.Item.Address</Small> <Column ColumnSize="ColumnSize.Is4.Is1.WithOffset">
</Column> <Button Position="Position.Absolute.Top.Is50.Start.Is50.Translate.Middle" Color="Color.Dark" Outline>
</Row> <BarIcon IconName="IconName.Add" />
</Column> </Button>
<Column ColumnSize="ColumnSize.Is4.Is1.WithOffset"> </Column>
<Button Position="Position.Absolute.Top.Is50.Start.Is50.Translate.Middle" Color="Color.Dark" Outline> </Row>
<BarIcon IconName="IconName.Add" /> </ListGroupItem>
</Button> </ItemTemplate>
</Column> </ListView>
</Row> </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> </ListGroupItem>
</ItemTemplate> </ListGroup>
</ListView> </Row>
<Row Style="height:75%; width:100%"></Row>
</Column> </Column>
</Row> </Row>
</Row> </Div>
<Row Height="Height.Is50">
<Form>
<Field Horizontal>
<FieldBody ColumnSize="ColumnSize.Is12">
<TextEdit Placeholder="Enter the Device IP here" />
<Button style="background-color:#1a237e; color:white" Type="ButtonType.Submit" PreventDefaultOnSubmit>Submit</Button>
</FieldBody>
</Field>
</Form>
</Row>
@code { @code {
List<Device> plugs = new List<Device>() { new Device("Placeholder", "Plug", System.Net.IPAddress.Broadcast, 60, "Oldin", "4AHINF"), new Device("Placeholder", "Plug", System.Net.IPAddress.Broadcast, 60, "Oldin", "4AHINF"), new Device("Placeholder", "Plug", System.Net.IPAddress.Broadcast, 60, "Oldin", "4AHINF") }; List<Device> plugs = new List<Device>() { new Device("Placeholder", "Plug", System.Net.IPAddress.Broadcast, 60, "Oldin", "4AHINF"), new Device("Placeholder", "Plug", System.Net.IPAddress.Broadcast, 60, "Oldin", "4AHINF"), new Device("Placeholder", "Plug", System.Net.IPAddress.Broadcast, 60, "Oldin", "4AHINF") };
@@ -12,7 +12,7 @@
ValueField="@((_)=>(""))" ValueField="@((_)=>(""))"
Mode="ListGroupMode.Static"> Mode="ListGroupMode.Static">
<ItemTemplate> <ItemTemplate>
<ListGroupItem> <ListGroupItem Border="Border.OnBottom">
<Row> <Row>
<Column ColumnSize="ColumnSize.Is8"> <Column ColumnSize="ColumnSize.Is8">
<Row> <Row>
@@ -52,7 +52,7 @@
<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 Border="Border.OnBottom" Margin="Margin.Is2.FromBottom">@context.Item.Description</Paragraph>
</ItemTemplate> </ItemTemplate>
</ListView> </ListView>
</Column> </Column>