Samuele Locatelli
78 lines
4.2 KiB
Plaintext
78 lines
4.2 KiB
Plaintext
@page "/TestProgress"
|
|
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3>Test Modale Loading</h3>
|
|
</div>
|
|
<div class="card-body py-1">
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<div class="input-group w-100 mb-1">
|
|
<span class="input-group-text">Tempo sim</span>
|
|
<input class="form-control" @bind="@expTime" type="number" />
|
|
</div>
|
|
<div class="input-group w-100 mb-1">
|
|
<span class="input-group-text">Num steps</span>
|
|
<input class="form-control" @bind="@numSteps" type="number" />
|
|
</div>
|
|
<button class="btn btn-success w-100" @onclick="StartLongTimer">Start</button>
|
|
<div>@realTime</div>
|
|
</div>
|
|
<div class="col-8 small">
|
|
<h3>Fake Progressbar</h3>
|
|
<p>Modale che mostra avanzamento (progressbar con %) di un task lungo.</p>
|
|
<p>Devono essere definiti il numero degli step attesi e per ogni step la durata attesa di completamento.</p>
|
|
<p>Viene definito <b>fake</b> poiché l'avanzamento è artificialmente rallentato quando si approssima allo scadere di uno step per dare impressione di un sistema realmente (ri)calcolato di continuo, mentre al superamento di ogni step viene portato avanti il conteggio recuperando eventuali ritardi di stima.</p>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<div class="card my-2">
|
|
<div class="card-header"><h4>Test progBar singola linea</h4></div>
|
|
<div class="card-body">
|
|
<div class="row bg-secondary py-2">
|
|
<div class="col">
|
|
<ProgBar singleLine="true" baseUM="$" currVal="@(rnd.Next(50,250))" maxVal="1000" redLim="200" yelLim="400" />
|
|
</div>
|
|
<div class="col">
|
|
<ProgBar singleLine="true" baseUM="gg" currVal="@(rnd.Next(200,450))" maxVal="1000" redLim="200" yelLim="400" />
|
|
</div>
|
|
<div class="col">
|
|
<ProgBar singleLine="true" baseUM="min" currVal="@(rnd.Next(400,650))" maxVal="1000" redLim="200" yelLim="400" />
|
|
</div>
|
|
<div class="col">
|
|
<ProgBar singleLine="true" baseUM="px" currVal="@(rnd.Next(600,900))" maxVal="1000" redLim="200" yelLim="400" />
|
|
</div>
|
|
<div class="col">
|
|
<ProgBar singleLine="true" baseUM="h" currVal="@(rnd.Next(500,1000))" maxVal="1000" redLim="200" yelLim="400" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr />
|
|
<div class="card my-2">
|
|
<div class="card-header"><h4>Test progBar multi linea</h4></div>
|
|
<div class="card-body">
|
|
<div class="row bg-dark py-2">
|
|
<div class="col">
|
|
<ProgBar singleLine="false" baseUM="$" currVal="@(rnd.Next(50,250))" maxVal="1000" redLim="200" yelLim="400" />
|
|
</div>
|
|
<div class="col">
|
|
<ProgBar singleLine="false" baseUM="gg" currVal="@(rnd.Next(200,450))" maxVal="1000" redLim="200" yelLim="400" />
|
|
</div>
|
|
<div class="col">
|
|
<ProgBar singleLine="false" baseUM="min" currVal="@(rnd.Next(400,650))" maxVal="1000" redLim="200" yelLim="400" />
|
|
</div>
|
|
<div class="col">
|
|
<ProgBar singleLine="false" baseUM="px" currVal="@(rnd.Next(600,900))" maxVal="1000" redLim="200" yelLim="400" />
|
|
</div>
|
|
<div class="col">
|
|
<ProgBar singleLine="false" baseUM="h" currVal="@(rnd.Next(500,1000))" maxVal="1000" redLim="200" yelLim="400" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ProgressDisplay RefreshInterval="100" Title="@titleMsg" MaxVal="@maxVal" CurrVal="@currVal" NextVal="@nextVal" ExpTimeMSec="@expTimeMSec" DisplaySize="ProgressDisplay.ModalSize.Medium" ModalCss="card alert-primary" SlowLimit="0.4"></ProgressDisplay> |