Change look of the model table in the web interface

This commit is contained in:
0xb00bface 2020-08-08 20:11:48 +02:00
parent e55daa0772
commit caf329eb23
7 changed files with 21 additions and 11 deletions

View File

@ -679,7 +679,7 @@ public class RecordedModelsTab extends Tab implements TabSelectionListener {
HBox.setMargin(pauseButton, new Insets(5));
HBox.setMargin(removeButton, new Insets(5));
grid.add(row, 1, 1);
if (model.getRecordUntil().toEpochMilli() != Long.MAX_VALUE) {
if (model.getRecordUntil().toEpochMilli() != Model.RECORD_INDEFINITELY) {
LocalDate localDate = LocalDate.ofInstant(model.getRecordUntil(), ZoneId.systemDefault());
datePicker.setValue(localDate);
}

View File

@ -235,7 +235,7 @@ public abstract class AbstractModel implements Model {
@Override
public Instant getRecordUntil() {
return Optional.ofNullable(recordUntil).orElse(Instant.ofEpochMilli(Long.MAX_VALUE));
return Optional.ofNullable(recordUntil).orElse(Instant.ofEpochMilli(RECORD_INDEFINITELY));
}
@Override

View File

@ -20,6 +20,8 @@ import ctbrec.sites.Site;
public interface Model extends Comparable<Model>, Serializable {
public static final long RECORD_INDEFINITELY = 9000000000000000000l;
public enum State {
ONLINE("online"),
OFFLINE("offline"),

View File

@ -58,6 +58,10 @@ th a:hover {
text-decoration: none;
}
.checkmark-green {
color: #28a745;
}
.red {
color: #dc4444;
}

View File

@ -96,19 +96,22 @@
<thead>
<tr>
<th><a href="#" data-bind="orderable: {collection: 'models', field: 'ko_name'}">Model</a></th>
<th><a href="#" data-bind="orderable: {collection: 'models', field: 'ko_suspended'}">Paused</a></th>
<th><a href="#" data-bind="orderable: {collection: 'models', field: 'ko_online'}">Online</a></th>
<th><a href="#" data-bind="orderable: {collection: 'models', field: 'ko_recording'}">Recording</a></th>
<th>Actions</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: models">
<tr>
<td><a data-bind="attr: { href: ko_url, title: ko_name }, text: ko_name"></a></td>
<td><input type="checkbox" data-bind="checked: ko_suspended" /></td>
<td><input type="checkbox" disabled data-bind="checked: ko_online" /></td>
<td><input type="checkbox" disabled data-bind="checked: ko_recording" /></td>
<td><button class="btn btn-secondary fa fa-minus-circle" title="Stop recording" data-bind="click: ctbrec.stop"></button></td>
<td><span data-bind="checked: ko_online, class: ko_online() ? `fa fa-check-square checkmark-green` : ``" style="font-size: 2em"></span></td>
<td><span data-bind="checked: ko_recording, class: ko_recording() ? `fa fa-circle red` : ``" style="font-size: 2em"></span></td>
<td>
<button class="btn btn-secondary fa fa-play" title="Resume recording" data-bind="click: ctbrec.resume, visible: ko_suspended"></button>
<button class="btn btn-secondary fa fa-pause" title="Pause recording" data-bind="click: ctbrec.suspend, hidden: ko_suspended"></button>
</td>
<td><button class="btn btn-secondary fa fa-trash" title="Remove model" data-bind="click: ctbrec.stop"></button></td>
</tr>
</tbody>
</table>

View File

@ -69,6 +69,7 @@ function syncModels(models) {
}
}
model.ko_recording = ko.observable(model.online && !model.suspended);
//model.ko_recording_class = ko.observable( (model.online && !model.suspended) ? 'fa fa-circle red' : '' );
model.ko_suspended = ko.observable(model.suspended);
model.swallowEvents = false;
model.ko_suspended.subscribe(function(checked) {
@ -102,6 +103,7 @@ function syncModels(models) {
}
}
m.ko_online(onlineState);
//m.ko_recording_class( (model.online && !model.suspended) ? 'fa fa-circle red' : '');
m.swallowEvents = true;
m.ko_suspended(model.suspended);
m.swallowEvents = false;

View File

@ -195,7 +195,6 @@ function updateDiskSpace() {
throughput.bytes(data.throughput);
throughput.timeframe(data.throughputTimeframe);
let bytesPerSecond = data.throughput / data.throughputTimeframe;
console.log(data.throughput, data.throughputTimeframe, bytesPerSecond, calculateSize(bytesPerSecond) + '/s');
throughput.text(calculateSize(bytesPerSecond) + '/s');
} else {
if (console)