Search for a command to run...
I am leanring to code as much as possible to aim to move into making a career out of programming/software development.
I am 42 years old so hopefully not to old to move careers but I love to learn so hopefully it will still gain me knowledge and new skills regardless.
Currently I work as engineer designer using SolidWorks to create press tooling and anodising plant drawings. Part of this role it also doing the internal IT support.
No comments yet. Be the first to comment.
Quick down and dirty basic navigation
Today I was working on using Dapper to use a SELECT statement from an Order table but to JOIN to two other tables which were the Suppliers table and the OrderItems table. The reason for this is to produce for a report list of all orders, the supplier...
Using Javascript and ClosedXML
Creating this post so I can remember how to do this. Picked this up from youtube from the blazor power hour: This basically creates a check box which has a nice border and a tick mark in the top left which I have made look like: This is done in a...
For a project I was looking at radio buttons but none seem to suit what I was looking for so I decided to create my own custom component to achieve what I needed.
This may not be the bes to rmost efficent way so please feel free to comment a better method or a way to improve what I have done.
The code is not generic which is what I would like to do at some point if possible but for now it is not required for this project.
The styling is not what I want to to look like but can be worked.
The project has a requirnment for each maintenance request that risk levels can be selected from High "H", medium "M" and low "L". There is a number of risks depending on the type or request either general or plant.
My structure is that there is a maintenance request with a unique ID and a Risk table with the risks for the type of maintenance request. From here there is a table that has two FK which are the risk ID and maintenance request ID with a column string which is set to one of the risk level either "H", "M" or "L".
The reason for also doing it this way is that more risks could be added over time so I wanted to implement a way for more to be added without the need to alter the code etc.
Video of the component in action. The styling is not complete and has work to do but the functionality is there.
Blazor Component - Full
@using SACOMaintenance.Common.ModelDB
@using System.Collections.ObjectModel;
@using System;
<div class="container-full">
<RadzenFieldset Text="Risks">
<div class="inner-radio-container">
@foreach (var item in ItemsChosen)
{
<div class="container-outer">
<div class="row">
@foreach (var riskItem in Risks)
{
if (riskItem.Id == item.RiskId)
{
<label>@riskItem.RiskName</label>
}
}
</div>
<div class="row">
<div class="input-container">
<input name="@item.RiskId" type="radio" id="H" class="radio-button-H"
value="H" checked="@(item.Level.Equals("H"))"
@onchange="_ => HandleChangeHigh(item)" />
<div class="radio-tile-H">
<label>H</label>
</div>
</div>
<div class="input-container">
<input name="@item.RiskId" type="radio" id="M" class="radio-button-M"
value="H" checked="@(item.Level.Equals("M"))"
@onchange="_ => HandleChangeMedium(item)" />
<div class="radio-tile-M">
<label>M</label>
</div>
</div>
<div class="input-container">
<input name="@item.RiskId" type="radio" id="L" class="radio-button-L"
value="H" checked="@(item.Level.Equals("L"))"
@onchange="_ => HandleChangeLow(item)" />
<div class="radio-tile-L">
<label>L</label>
</div>
</div>
</div>
</div>
}
</div>
</RadzenFieldset>
</div>
@code{
[Parameter]
public ObservableCollection<Risk> Risks { get; set; }
[Parameter]
public List<MaintRequestInitiationRisk> ItemsChosen { get; set; } = new();
[Parameter]
public EventCallback<List<MaintRequestInitiationRisk>> ItemsChosenChanged { get; set; }
void HandleChangeHigh(MaintRequestInitiationRisk item)
{
item.Level = "H";
ItemsChosenChanged.InvokeAsync(ItemsChosen);
}
void HandleChangeMedium(MaintRequestInitiationRisk item)
{
item.Level = "M";
ItemsChosenChanged.InvokeAsync(ItemsChosen);
}
void HandleChangeLow(MaintRequestInitiationRisk item)
{
item.Level = "L";
ItemsChosenChanged.InvokeAsync(ItemsChosen);
}
}
Breaking the above code down into sections to explain what each part is doing.
[Parameter]
public ObservableCollection<Risk> Risks { get; set; }
[Parameter]
public List<MaintRequestInitiationRisk> ItemsChosen { get; set; } = new();
[Parameter]
public EventCallback<List<MaintRequestInitiationRisk>> ItemsChosenChanged { get; set; }
The ObservableCollection Risks is getting all off the risks that there are so that the risk name can be gotten.
List ItemsChosen are the risks that are for the type of maintenance request and it has the risk level set to either H, M or L.
public EventCallback> ItemsChosenChanged is a callback to a list of risks and what the risk level is so that any changes to the risk level of any of the risks are passed back in order to update the model and database table.
This code snippet starts to loop through the risks that are associated with the request.
@foreach (var item in ItemsChosen)
{
This code snippet below loops through the risks and then checks to see if the risk Id is the same as the current chosen risk and of so then it outputs the Risk Name
@foreach (var riskItem in Risks)
{
if (riskItem.Id == item.RiskId)
{
<label>@riskItem.RiskName</label>
}
}
This next code snippet sets the RiskId and the imput as a radio button. Then on check it calls a method to change the risk level.
<div class="input-container">
<input name="@item.RiskId" type="radio" id="H" class="radio-button-H"
value="H" checked="@(item.Level.Equals("H"))"
@onchange="_ => HandleChangeHigh(item)" />
<div class="radio-tile-H">
<label>H</label>
</div>
</div>
There is one for each of the risk levels.
The implementation in blazor for the component is where the Risks and Risk Items lists are passed to the component as parameters.
<RequestRiskChoice @bind-ItemsChosen="maintReqInitation.RiskListsChosen" Risks="maintReqInitation.Risks">
</RequestRiskChoice>
CSS Code for styling.
.container-full {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}
.inner-radio-container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap:wrap;
}
.container-outer {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
justify-content: center;
width: 25%;
background-color: lightgray;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
}
.input-container {
display: flex;
position: relative;
height: 4rem;
width: 4rem;
margin: 0.5rem;
}
.radio-button-H, .radio-button-M, .radio-button-L {
opacity: 0;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
cursor: pointer;
}
.radio-tile-H, .radio-tile-M, .radio-tile-L {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border: 2px solid red;
border-radius: 5px;
padding: 1rem;
transition: transform 300ms ease;
}
.radio-tile-M {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border: 2px solid yellow;
border-radius: 5px;
padding: 1rem;
transition: transform 300ms ease;
}
.radio-tile-L {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border: 2px solid green;
border-radius: 5px;
padding: 1rem;
transition: transform 300ms ease;
}
.radio-button-H:checked + .radio-tile-H {
background-color: red;
border: 2px solid red;
color: white;
transform: scale(1.1, 1.1);
}
.radio-tile-label-H {
color: white;
background-color: red;
}
.radio-button-M:checked + .radio-tile-M {
background-color: yellow;
border: 2px solid yellow;
color: white;
transform: scale(1.1, 1.1);
}
.radio-tile-label-M {
color: black;
background-color: yellow;
}
.radio-button-L:checked + .radio-tile-L {
background-color: green;
border: 2px solid green;
color: white;
transform: scale(1.1, 1.1);
}
.radio-tile-label-L {
color: white;
background-color: green;
}