From caf329eb2370fab7411fa206c7feeefe3000b82a Mon Sep 17 00:00:00 2001
From: 0xb00bface <0xboobface@gmail.com>
Date: Sat, 8 Aug 2020 20:11:48 +0200
Subject: [PATCH] Change look of the model table in the web interface

---
 .../java/ctbrec/ui/tabs/RecordedModelsTab.java    |  2 +-
 common/src/main/java/ctbrec/AbstractModel.java    |  2 +-
 common/src/main/java/ctbrec/Model.java            |  2 ++
 server/src/main/resources/html/static/custom.css  |  8 ++++++--
 server/src/main/resources/html/static/index.html  | 15 +++++++++------
 server/src/main/resources/html/static/models.js   |  2 ++
 .../src/main/resources/html/static/recordings.js  |  1 -
 7 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/client/src/main/java/ctbrec/ui/tabs/RecordedModelsTab.java b/client/src/main/java/ctbrec/ui/tabs/RecordedModelsTab.java
index 9922ca5a..96721f8c 100644
--- a/client/src/main/java/ctbrec/ui/tabs/RecordedModelsTab.java
+++ b/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);
         }
diff --git a/common/src/main/java/ctbrec/AbstractModel.java b/common/src/main/java/ctbrec/AbstractModel.java
index 22dc81cc..f87bb843 100644
--- a/common/src/main/java/ctbrec/AbstractModel.java
+++ b/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
diff --git a/common/src/main/java/ctbrec/Model.java b/common/src/main/java/ctbrec/Model.java
index fec54ca7..42ccd10e 100644
--- a/common/src/main/java/ctbrec/Model.java
+++ b/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"),
diff --git a/server/src/main/resources/html/static/custom.css b/server/src/main/resources/html/static/custom.css
index 820f8651..a1df2311 100644
--- a/server/src/main/resources/html/static/custom.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/server/src/main/resources/html/static/index.html b/server/src/main/resources/html/static/index.html
index dd0d9aeb..e9cc978b 100644
--- a/server/src/main/resources/html/static/index.html
+++ b/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><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>
diff --git a/server/src/main/resources/html/static/models.js b/server/src/main/resources/html/static/models.js
index 55ac777a..4534b531 100644
--- a/server/src/main/resources/html/static/models.js
+++ b/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;
diff --git a/server/src/main/resources/html/static/recordings.js b/server/src/main/resources/html/static/recordings.js
index 9380eb82..6c446355 100644
--- a/server/src/main/resources/html/static/recordings.js
+++ b/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)