Revert "Revert "AD-336 Update Globe UI icons and add replay functiona…

…lity (wiedehopf#13)"" This reverts commit 76d048a.
eastham · Jun 16, 2024 · b51a0d6 · b51a0d6
1 parent 76d048a
commit b51a0d6
Show file tree

Hide file tree

Showing 6 changed files with 188 additions and 8 deletions.
diff --git a/html/images/cog-black.svg b/html/images/cog-black.svg
diff --git a/html/images/replay-black.svg b/html/images/replay-black.svg
diff --git a/html/images/replay-white.svg b/html/images/replay-white.svg
diff --git a/html/index.html b/html/index.html
@@ -790,8 +790,11 @@
  <div id="expand_sidebar_control">
  <button id="expand_sidebar_button" class="sidebar_button" title="Expand Sidebar" style="display: none;"></button>
  </div>
- <div id="fullscreenButton" class="svgButton fullscreenButton"></div>
- <div id="settingsCog" class="svgButton settingsCog"></div>
+ <div class="buttonSpacer">
+ </div>
+ <div id="settingsCog" class="settingsCog" title="Settings"></div>
+ <div class="buttonSpacer">
+ </div>
  <div id="L" title="Toggle (L)abels" class="button inActiveButton" onclick="toggleLabels();"><span class="buttonText">L</span></div>
  <div id="O" title="Toggle Label Extensi(O)ns" class="button inActiveButton" onclick="toggleExtendedLabels();"><span class="buttonText">O</span></div>
  <div id="K" title="Toggle Trac(K) Labels" class="button inActiveButton" onclick="toggleTrackLabels();"><span class="buttonText">K</span></div>
@@ -809,8 +812,8 @@
  <p id="replayDateHint" >Date:</p>
  <input type="text" class="datepicker" id="replayDatepicker" >
  <p id="replayTimeHint" >Time:</p>
- <p id="hourSelect"></p>
- <p id="minuteSelect"></p>
+ <div id="hourSelect"><div id="replayDatepickerHourHandle" class="ui-slider-handle"></div></div>
+ <div id="minuteSelect"><div id="replayDatepickerMinuteHandle" class="ui-slider-handle"></div></div>
  <p id="replayTimeZone">UTC</p>
  <p id="replaySpeedHint">Speed:</p>
  <p id="replaySpeedSelect"></p>

diff --git a/html/script.js b/html/script.js
@@ -186,6 +186,7 @@ let badDot;
 let badDotMlat;
 
 let showingReplayBar = false;
+let replayShouldPlayOnFirstLoad = true;
 
 function processAircraft(ac, init, uat) {
  const isArray = Array.isArray(ac);
@@ -1015,6 +1016,7 @@ function initPage() {
  }
  console.log(ts);
  replay = replayDefaults(ts);
+ replayShouldPlayOnFirstLoad = false;
  }
 
  //Pulling filters from params
@@ -1174,6 +1176,7 @@ function initPage() {
 
  jQuery('#settingsCog').on('click', function() {
  jQuery('#settings_infoblock').toggle();
+ $(this).toggleClass('settingsCog-active');
  });
 
  if (onMobile) {
@@ -1190,6 +1193,7 @@ function initPage() {
 
  jQuery('#settings_close').on('click', function() {
  jQuery('#settings_infoblock').hide();
+ jQuery('#settingsCog').removeClass('settingsCog-active');
  });
 
  jQuery('#groundvehicle_filter').on('click', function() {
@@ -7398,7 +7402,7 @@ function replayDefaults(ts) {
  playing: true,
  ts: ts,
  ival: 60 * 1000,
- speed: 30,
+ speed: 10,
  dateText: zDateString(ts),
  hours: ts.getUTCHours(),
  minutes: ts.getUTCMinutes(),
@@ -7624,6 +7628,7 @@ function replaySetTimeHint(arg) {
 
  let minutes = replay.ts.getUTCMinutes();
  jQuery('#minuteSelect').slider("option", "value", minutes);
+
  replayJumpEnabled = true;
 }
 
@@ -7944,13 +7949,32 @@ function playReplay(state){
 function showReplayBar(){
  console.log('showReplayBar()');
  showingReplayBar = !showingReplayBar;
+ // Function that will remove 'replay' token from address bar and reload window
+ const forceReloadWindow = function() {
+ let currentUrl = window.location.href;
+ let url = currentUrl.replace(/replay=[^&]+&?/, '');
+ // Update the URL without reloading the page
+ window.history.pushState({}, '', url);
+ // Reload the page
+ window.location.reload();
+ };
+
  if (!showingReplayBar){
+ // Hide bar
+ jQuery("#RP").removeClass('settingsReplay-active');
  jQuery("#replayBar").hide();
+ // Force-stop playing
+ playReplay(false);
+ // Clear timers
+ replayClear();
  replay = null;
  jQuery('#map_canvas').height('100%');
  jQuery('#sidebar_canvas').height('100%');
  jQuery("#selected_showTrace_hide").show();
+ // Reset everything, as closing things is a bit of a mess
+ forceReloadWindow();
  } else {
+ jQuery("#RP").addClass('settingsReplay-active');
  jQuery("#replayBar").show();
  jQuery("#replayBar").css('display', 'grid');
  jQuery('#replayBar').height('100px');
@@ -7982,28 +8006,39 @@ function showReplayBar(){
  }
 
  jQuery("#replayDatepicker").datepicker(datepickerOptions);
-
+ let replaySliderHourHandle = jQuery("#replayDatepickerHourHandle");
  jQuery('#hourSelect').slider({
  step: 1,
  min: 0,
  max: 23,
+ create: function() {
+ replaySliderHourHandle.text(replay.hours + " hrs");
+ },
  slide: function(event, ui) {
  replay.hours = ui.value;
+ replaySliderHourHandle.text(ui.value + " hrs");
  replayOnSliderMove();
  },
- change: function() {
+ change: function(event, ui) {
+ replaySliderHourHandle.text(ui.value + " hrs");
  replayJump();
  }
  });
+ let replaySliderMinuteHandle = jQuery("#replayDatepickerMinuteHandle");
  jQuery('#minuteSelect').slider({
  step: 1,
  min: 0,
  max: 59,
+ create: function() {
+ replaySliderMinuteHandle.text(replay.minutes + " min");
+ },
  slide: function(event, ui) {
  replay.minutes = ui.value;
+ replaySliderMinuteHandle.text(ui.value + " min");
  replayOnSliderMove();
  },
- change: function() {
+ change: function(event, ui) {
+ replaySliderMinuteHandle.text(ui.value + " min");
  replayJump();
  }
  });
@@ -8024,7 +8059,31 @@ function showReplayBar(){
  jQuery('#replaySpeedHint').text('Speed: ' + replay.speed + 'x');
 
  jQuery("#selected_showTrace_hide").hide();
+
+ // Re-adjust sliders to reflect accurate time
+ replayJump();
  }
+ // Function that will wait for replay to start playing
+ const waitForReplay = function(c, max) {
+ if(!replay || replay.playing) {
+ return;
+ }
+ playReplay(true);
+ if(!replay.playing && c < max) {
+ console.log(`[${c}] Wainting for replay to start playing...`);
+ setTimeout(waitForReplay, 500, c+1, max);
+ }
+ };
+ // On very first click, simulate automatic start
+ if(replayShouldPlayOnFirstLoad) {
+ // This starts loading data required to play replay
+ loadReplay(replay.ts);
+ // This will start playing the replay once the data is loaded
+ waitForReplay(0, 20);
+ }
+
+ // Indicate that we've already played once
+ replayShouldPlayOnFirstLoad = false;
 };
 
 function timeoutFetch() {

diff --git a/html/style.css b/html/style.css
@@ -513,6 +513,61 @@ select.error, textarea.error, input.error {
  color:#fff
 }
 
+.settingsCog {
+ background-color: var(--ACCENT);
+ width: calc( 27px * var(--SCALE));
+ height: calc( 27px * var(--SCALE));
+ cursor: pointer;
+ background-image: url('images/cog-white.svg');
+ background-size: cover;
+ background-repeat: no-repeat;
+ margin: calc(5px * var(--SCALE));
+ border-radius: calc( 2px * var(--SCALE));
+ display: inline-block;
+}
+
+.settingsReplay {
+ background-color: var(--ACCENT);
+ width: calc( 27px * var(--SCALE));
+ height: calc( 27px * var(--SCALE));
+ cursor: pointer;
+ background-image: url('images/replay-white.svg');
+ background-size: cover;
+ background-repeat: no-repeat;
+ margin: calc( 5px * var(--SCALE));
+ border-radius: calc( 2px * var(--SCALE));
+ display: inline-block;
+}
+#replayDatepickerHourHandle, #replayDatepickerMinuteHandle {
+ width: 4em;
+ height: 1.6em;
+ top: 50%;
+ margin-left: -2em;
+ margin-top: -.8em;
+ text-align: center;
+ line-height: 1.6em;
+}
+
+.settingsCog-active {
+ background-image: url('images/cog-black.svg');
+}
+
+.settingsReplay-active {
+ background-image: url('images/replay-black.svg');
+}
+
+/* .settingsCog {
+ width: calc( 48px * var(--SCALE));
+ height: calc( 48px * var(--SCALE));
+ cursor: pointer;
+ background-image: url('images/cog-white.svg');
+ background-size: cover;
+ background-repeat: no-repeat;
+ margin-top: calc( 6px * var(--SCALE));
+ margin-bottom: calc( 6px * var(--SCALE));
+ margin-left: calc( -12px * var(--SCALE));
+} */
+
 #highlighted_infoblock {
  background-color: var(--BGCOLOR1);
  position: absolute;