@page "/"
<h1>Flash Animation</h1>
<table class="table table-striped">
<thead><tr><th>Name</th><th>Value</th></tr></thead>
<tbody>
@foreach(var s in sensors)
{
<tr class="@s.Css">
<td>@s.Name</td><td>@s.Value</td>
</tr>
}
</tbody>
</table>
<hr/>
@* fake an event updating a sensor *@
<button @onclick="FakeEvent">Fake Event</button>
<p>@message</p>
@code
{
const int count = 5;
Random rand = new Random();
string message;
List<Sensor> sensors = new List<Sensor>();
// create a list of sensors at start
protected override void OnInitialized()
{
for(var i=0; i<count;i++)
{
sensors.Add(new Sensor(i));
}
message = $"Created {count} sensors";
}
void FakeEvent()
{
// pick a random sensor
int index = rand.Next(0, count);
// update this sensor
sensors[index].Update();
message = $"Sensor {index} updated";
}
public class Sensor
{
public Sensor(int number){
Name = $"Sensor {number}";
Value =1;
}
public string Name { get;set;}
public int Value {get;set;}
public string Css { get;set; }
public void Update()
{
Value +=1; // sensor value changes
// swap the CSS round, this triggers the animation
// the two classes could be the same colour but I used a different
// colour to make it clearer
Css = Css == "new-item1" ? "new-item2" : "new-item1";
}
}
}