Skip to content
This repository was archived by the owner on Sep 23, 2024. It is now read-only.

Commit 96fc023

Browse files
lizlooneylizlooney
authored
Merge pull request #226 from FIRST-Tech-Challenge/pr_issue_225
Show training time remaining on Datasets and Models tabs.
2 parents d75dcf2 + 6efe2a5 commit 96fc023

File tree

5 files changed

+84
-78
lines changed

5 files changed

+84
-78
lines changed

‎server/src/js/listModels.js‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ fmltc.ListModels = function(util) {
3333
/** @type {!fmltc.Util} */
3434
this.util = util;
3535

36+
this.dRemainingTrainingMinutesSpan = document.getElementById('dRemainingTrainingMinutesSpan');
37+
this.mRemainingTrainingMinutesSpan = document.getElementById('mRemainingTrainingMinutesSpan');
3638
this.modelsListDiv = document.getElementById('modelsListDiv');
3739
this.modelsTable = document.getElementById('modelsTable');
3840
this.modelCheckboxAll = document.getElementById('modelCheckboxAll');
@@ -83,7 +85,7 @@ fmltc.ListModels.prototype.xhr_retrieveModelEntities_onreadystatechange = functi
8385

8486
if (xhr.status === 200) {
8587
const response = JSON.parse(xhr.responseText);
86-
this.remainingTrainingMinutes = Math.floor(response.remaining_training_minutes);
88+
this.updateRemainingTrainingMinutes(response.remaining_training_minutes);
8789
const modelEntityArray = response.model_entities;
8890
for (let i = 0; i < modelEntityArray.length; i++) {
8991
this.onModelEntityUpdated(modelEntityArray[i]);
@@ -326,7 +328,7 @@ fmltc.ListModels.prototype.xhr_retrieveModelEntity_onreadystatechange = function
326328

327329
if (xhr.status === 200) {
328330
const response = JSON.parse(xhr.responseText);
329-
this.remainingTrainingMinutes = Math.floor(response.remaining_training_minutes);
331+
this.updateRemainingTrainingMinutes(response.remaining_training_minutes);
330332
const modelEntity = response.model_entity;
331333
this.onModelEntityUpdated(modelEntity);
332334

@@ -344,7 +346,7 @@ fmltc.ListModels.prototype.xhr_retrieveModelEntity_onreadystatechange = function
344346
};
345347

346348
fmltc.ListModels.prototype.addNewModel = function(remainingTrainingMinutes, modelEntity) {
347-
this.remainingTrainingMinutes = remainingTrainingMinutes;
349+
this.updateRemainingTrainingMinutes(remainingTrainingMinutes);
348350
this.onModelEntityUpdated(modelEntity);
349351
}
350352

@@ -675,3 +677,9 @@ fmltc.ListModels.prototype.xhr_downloadTFLite_onreadystatechange = function(xhr,
675677
}
676678
}
677679
};
680+
681+
fmltc.ListModels.prototype.updateRemainingTrainingMinutes = function(remainingTrainingMinutes) {
682+
this.remainingTrainingMinutes = Math.floor(remainingTrainingMinutes);
683+
this.dRemainingTrainingMinutesSpan.textContent = String(this.remainingTrainingMinutes);
684+
this.mRemainingTrainingMinutesSpan.textContent = String(this.remainingTrainingMinutes);
685+
};

‎server/src/js/startTrainingDialog.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,6 @@ fmltc.StartTrainingDialog.prototype.xhr_startTrainingModel_onreadystatechange =
198198
if (xhr.status === 200) {
199199
//console.log('Success! /startTrainingModel');
200200
const response = JSON.parse(xhr.responseText);
201-
const remainingTrainingMinutes = Math.floor(response.remaining_training_minutes);
202201
const modelEntity = response.model_entity;
203202

204203
this.startTrainingInProgress = false;
@@ -207,7 +206,7 @@ fmltc.StartTrainingDialog.prototype.xhr_startTrainingModel_onreadystatechange =
207206
this.successDiv.style.display = 'block';
208207
this.util.clearWaitCursor();
209208

210-
this.onTrainingStarted(remainingTrainingMinutes, modelEntity);
209+
this.onTrainingStarted(response.remaining_training_minutes, modelEntity);
211210
setTimeout(this.closeButton_onclick.bind(this), 1000);
212211

213212
} else {

‎server/src/js/trainMoreDialog.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,6 @@ fmltc.TrainMoreDialog.prototype.xhr_startTrainingModel_onreadystatechange = func
238238
if (xhr.status === 200) {
239239
//console.log('Success! /startTrainingModel');
240240
const response = JSON.parse(xhr.responseText);
241-
const remainingTrainingMinutes = Math.floor(response.remaining_training_minutes);
242241
const modelEntity = response.model_entity;
243242

244243
this.startTrainingInProgress = false;
@@ -247,7 +246,7 @@ fmltc.TrainMoreDialog.prototype.xhr_startTrainingModel_onreadystatechange = func
247246
this.successDiv.style.display = 'block';
248247
this.util.clearWaitCursor();
249248

250-
this.onTrainingStarted(remainingTrainingMinutes, modelEntity);
249+
this.onTrainingStarted(response.remaining_training_minutes, modelEntity);
251250
setTimeout(this.closeButton_onclick.bind(this), 1000);
252251

253252
} else {

‎server/static/css/styles.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -411,3 +411,11 @@ form {
411411
.hasTooltip:hover .isTooltipText {
412412
visibility: visible;
413413
}
414+
415+
.noWrap {
416+
white-space: nowrap;
417+
}
418+
419+
.margin-right-10 {
420+
margin-right: 10px;
421+
}

‎server/templates/root.html‎

Lines changed: 63 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -50,31 +50,28 @@
5050
<br>
5151
<table class="collapsedBorder">
5252
<tr>
53-
<td align="center" valign="top">
53+
<td class="noWrap" align="center" valign="top">
5454
{% if can_upload_video %}
55-
<button id="uploadVideoFileButton" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#uploadVideoFileDialog">
55+
<button id="uploadVideoFileButton" class="btn btn-secondary margin-right-10" data-bs-toggle="modal" data-bs-target="#uploadVideoFileDialog">
5656
{% else %}
57-
<button id="uploadVideoFileButton" disabled class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#uploadVideoFileDialog">
57+
<button id="uploadVideoFileButton" disabled class="btn btn-secondary margin-right-10" data-bs-toggle="modal" data-bs-target="#uploadVideoFileDialog">
5858
{% endif %}
5959
<span class="material-icons iconVerticalAlign">cloud_upload</span>
6060
<span class="iconVerticalAlign">Upload Video</span>
6161
</button>
6262
</td>
63-
<td width="10px"></td>
64-
<td align="center" valign="top">
65-
<button id="produceDatasetButton" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#produceDatasetDialog">
63+
<td class="noWrap" align="center" valign="top">
64+
<button id="produceDatasetButton" class="btn btn-secondary margin-right-10" data-bs-toggle="modal" data-bs-target="#produceDatasetDialog">
6665
<span class="material-icons iconVerticalAlign">construction</span>
6766
<span class="iconVerticalAlign">Produce Dataset</span>
6867
</button>
6968
</td>
70-
<td width="10px"></td>
71-
<td align="center" valign="top">
72-
<button id="deleteVideosButton" class="btn btn-secondary">
69+
<td class="noWrap" align="center" valign="top">
70+
<button id="deleteVideosButton" class="btn btn-secondary margin-right-10">
7371
<span class="material-icons iconVerticalAlign">delete</span>
7472
<span class="iconVerticalAlign">Delete Videos</span>
7573
</button>
7674
</td>
77-
<td width="10px"></td>
7875
</tr>
7976
</table>
8077
<br>
@@ -110,27 +107,27 @@
110107
<br>
111108
<table class="collapsedBorder">
112109
<tr>
113-
<td align="center" valign="top">
114-
<button id="downloadDatasetButton" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#downloadDatasetDialog">
110+
<td class="noWrap" align="center" valign="top">
111+
<button id="downloadDatasetButton" class="btn btn-secondary margin-right-10" data-bs-toggle="modal" data-bs-target="#downloadDatasetDialog">
115112
<span class="material-icons iconVerticalAlign">cloud_download</span>
116113
<span class="iconVerticalAlign">Download Dataset</span>
117114
</button>
118115
</td>
119-
<td width="10px"></td>
120-
<td align="center" valign="top">
121-
<button id="startTrainingButton" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#startTrainingDialog">
116+
<td class="noWrap" align="center" valign="top">
117+
<button id="startTrainingButton" class="btn btn-secondary margin-right-10" data-bs-toggle="modal" data-bs-target="#startTrainingDialog">
122118
<span class="material-icons iconVerticalAlign">model_training</span>
123119
<span class="iconVerticalAlign">Start Training</span>
124120
</button>
125121
</td>
126-
<td width="10px"></td>
127-
<td align="center" valign="top">
128-
<button id="deleteDatasetsButton" class="btn btn-secondary">
122+
<td class="noWrap" align="center" valign="top">
123+
<button id="deleteDatasetsButton" class="btn btn-secondary margin-right-10">
129124
<span class="material-icons iconVerticalAlign">delete</span>
130125
<span class="iconVerticalAlign">Delete Datasets</span>
131126
</button>
132127
</td>
133-
<td width="10px"></td>
128+
<td width="99%" align="right" valign="top">
129+
Remaining training time: <span id="dRemainingTrainingMinutesSpan"></span> minutes
130+
</td>
134131
</tr>
135132
</table>
136133
<br>
@@ -164,58 +161,53 @@
164161
<div class="tab-pane fade" role="tabpanel" aria-labelledby="modelsTab" id="modelsTabContent">
165162
<div>
166163
<br>
167-
<table class="table table-striped">
168-
<thead>
169-
<tr>
170-
<td align="center" valign="top">
171-
<button id="trainMoreButton" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#trainMoreDialog">
172-
<span class="material-icons iconVerticalAlign">model_training</span>
173-
<span class="iconVerticalAlign">More Training</span>
174-
</button>
175-
</td>
176-
<td width="10px"></td>
177-
<td align="center" valign="top">
178-
<button id="downloadTFLiteButton" class="btn btn-secondary">
179-
<span class="material-icons iconVerticalAlign">cloud_download</span>
180-
<span class="iconVerticalAlign">Download Model</span>
181-
</button>
182-
</td>
183-
<td width="10px"></td>
184-
<td align="center" valign="top">
185-
<button id="stopTrainingButton" class="btn btn-secondary">
186-
<span class="material-icons iconVerticalAlign">cancel</span>
187-
<span class="iconVerticalAlign">Stop Training</span>
188-
</button>
189-
</td>
190-
<td width="10px"></td>
191-
<td align="center" valign="top">
192-
<button id="deleteModelsButton" class="btn btn-secondary">
193-
<span class="material-icons iconVerticalAlign">delete</span>
194-
<span class="iconVerticalAlign">Delete Models</span>
195-
</button>
196-
</td>
197-
<td width="10px"></td>
198-
</tr>
199-
</thead>
200-
<tr><tr>
201-
</table>
202-
<br>
203-
<div id="modelsListDiv" style="display: none;" class="pb-3">
204-
<table id="modelsTable" class="table table-striped">
205-
<thead>
206-
<tr>
207-
<th class="cellWithBorder"><input type="checkbox" id="modelCheckboxAll"></th>
208-
<th class="cellWithBorder">Date Created</th>
209-
<th class="cellWithBorder" width="200px">Description</th>
210-
<th class="cellWithBorder">Starting Model</th>
211-
<th class="cellWithBorder">Steps Requested</th>
212-
<th class="cellWithBorder">Job State</th>
213-
<th class="cellWithBorder">Steps Completed</th>
214-
<th class="cellWithBorder">Training Time</th>
215-
</tr>
216-
</thead>
217-
<tr></tr>
218-
</table>
164+
<table class="collapsedBorder">
165+
<tr>
166+
<td class="noWrap" align="center" valign="top">
167+
<button id="trainMoreButton" class="btn btn-secondary margin-right-10" data-bs-toggle="modal" data-bs-target="#trainMoreDialog">
168+
<span class="material-icons iconVerticalAlign">model_training</span>
169+
<span class="iconVerticalAlign">More Training</span>
170+
</button>
171+
</td>
172+
<td class="noWrap" align="center" valign="top">
173+
<button id="downloadTFLiteButton" class="btn btn-secondary margin-right-10">
174+
<span class="material-icons iconVerticalAlign">cloud_download</span>
175+
<span class="iconVerticalAlign">Download Model</span>
176+
</button>
177+
</td>
178+
<td class="noWrap" align="center" valign="top">
179+
<button id="stopTrainingButton" class="btn btn-secondary margin-right-10">
180+
<span class="material-icons iconVerticalAlign">cancel</span>
181+
<span class="iconVerticalAlign">Stop Training</span>
182+
</button>
183+
</td>
184+
<td class="noWrap" align="center" valign="top">
185+
<button id="deleteModelsButton" class="btn btn-secondary margin-right-10">
186+
<span class="material-icons iconVerticalAlign">delete</span>
187+
<span class="iconVerticalAlign">Delete Models</span>
188+
</button>
189+
</td>
190+
<td width="99%" align="right" valign="top">
191+
Remaining training time: <span id="mRemainingTrainingMinutesSpan"></span> minutes
192+
</td>
193+
</tr>
194+
</table>
195+
<br>
196+
<div id="modelsListDiv" style="display: none;" class="pb-3">
197+
<table id="modelsTable" class="table table-striped">
198+
<thead>
199+
<tr>
200+
<th class="cellWithBorder"><input type="checkbox" id="modelCheckboxAll"></th>
201+
<th class="cellWithBorder">Date Created</th>
202+
<th class="cellWithBorder" width="200px">Description</th>
203+
<th class="cellWithBorder">Starting Model</th>
204+
<th class="cellWithBorder">Steps Requested</th>
205+
<th class="cellWithBorder">Job State</th>
206+
<th class="cellWithBorder">Steps Completed</th>
207+
<th class="cellWithBorder">Training Time</th>
208+
</tr>
209+
</thead>
210+
<tr></tr>
219211
</table>
220212
</div>
221213
</div>

0 commit comments

Comments
 (0)