Change look of the model table in the web interface

client/src/main/java/ctbrec/ui/tabs/RecordedModelsTab.java

@@ -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);
         }

common/src/main/java/ctbrec/AbstractModel.java

@@ -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

common/src/main/java/ctbrec/Model.java

@@ -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"),

server/src/main/resources/html/static/custom.css

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

server/src/main/resources/html/static/index.html

@@ -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><span data-bind="checked: ko_online, class: ko_online() ? `fa fa-check-square checkmark-green` : ``" style="font-size: 2em"></span></td>
-										<td><input type="checkbox" disabled data-bind="checked: ko_online" /></td>
+										<td><span data-bind="checked: ko_recording, class: ko_recording() ? `fa fa-circle red` : ``" style="font-size: 2em"></span></td>
-										<td><input type="checkbox" disabled data-bind="checked: ko_recording" /></td>
+										<td>
-										<td><button class="btn btn-secondary fa fa-minus-circle" title="Stop recording" data-bind="click: ctbrec.stop"></button></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>

server/src/main/resources/html/static/models.js

@@ -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;

server/src/main/resources/html/static/recordings.js

@@ -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)