#410 Draw Tool - Time Integration (#411)

* ts-410 DrawTool - Temporal part 1 * #410 DrawlTool - Temporal Integration * #410 Clearer DrawTool Template Date Start/End Icons
NASA-AMMOS · Aug 14, 2023 · 526c454 · 526c454
1 parent 6b881cb
commit 526c454
Show file tree

Hide file tree

Showing 11 changed files with 470 additions and 7 deletions.
diff --git a/src/css/mmgisUI.css b/src/css/mmgisUI.css
@@ -800,6 +800,54 @@
     color: var(--color-c2);
 }
 
+/*vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv toggle switch vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv*/
+/* Use as: <div class="mmgisToggleSwitch" ><input type="checkbox" id="switch" /><label for="switch">Toggle</label></div> */
+.mmgisToggleSwitch {
+    position: relative;
+}
+.mmgisToggleSwitch input[type='checkbox'] {
+    height: 0;
+    width: 0;
+    visibility: hidden;
+}
+
+.mmgisToggleSwitch label {
+    cursor: pointer;
+    text-indent: -9999px;
+    width: 36px;
+    height: 18px;
+    background: grey;
+    display: block;
+    border-radius: 2px;
+    position: relative;
+    top: -18px;
+}
+
+.mmgisToggleSwitch label:after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 14px;
+    height: 14px;
+    background: #fff;
+    border-radius: 2px;
+    transition: 0.3s;
+}
+
+.mmgisToggleSwitch input:checked + label {
+    background: var(--color-c);
+}
+
+.mmgisToggleSwitch input:checked + label:after {
+    left: calc(100% - 2px);
+    transform: translateX(-100%);
+}
+
+.mmgisToggleSwitch label:active:after {
+    width: 20px;
+}
+
 /*vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv switch slider vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv*/
 
 .mmgisMultirange {

diff --git a/src/essence/Ancillary/Coordinates.js b/src/essence/Ancillary/Coordinates.js
@@ -811,6 +811,10 @@ function toggleTimeUI() {
     $('#timeUI').css({
         bottom: timeBottom + (UserInterface.pxIsTools || 0) + 'px',
     })
+
+    Object.keys(L_._onTimeUIToggleSubscriptions).forEach((k) => {
+        L_._onTimeUIToggleSubscriptions[k](!active)
+    })
 }
 
 export default Coordinates
diff --git a/src/essence/Ancillary/TimeControl.js b/src/essence/Ancillary/TimeControl.js
@@ -332,6 +332,11 @@ function timeInputChange(startTime, endTime, currentTime, skipUpdate) {
     TimeControl.currentTime = currentTime == null ? endTime : currentTime
     TimeControl.endTime = endTime
 
+    if (L_?._timeChangeSubscriptions)
+        Object.keys(L_._timeChangeSubscriptions).forEach((k) => {
+            L_._timeChangeSubscriptions[k]({ startTime, currentTime, endTime })
+        })
+
     if (skipUpdate !== true) {
         // Update layer times and reload
         TimeControl.updateLayersTime()

diff --git a/src/essence/Basics/Formulae_/Formulae_.js b/src/essence/Basics/Formulae_/Formulae_.js
@@ -98,6 +98,20 @@ var Formulae_ = {
                 return ''
         }
     },
+    addTimeZoneOffset(timestamp) {
+        const date = new Date(timestamp)
+        const addedOffset = new Date(
+            date.getTime() + date.getTimezoneOffset() * 60000
+        )
+        return addedOffset
+    },
+    removeTimeZoneOffset(timestamp) {
+        const date = new Date(timestamp)
+        const removedOffset = new Date(
+            date.getTime() - date.getTimezoneOffset() * 60000
+        )
+        return removedOffset
+    },
     // Returns an array of timestamps between startTime and endTime timestamps that fall along the unit
     getTimeStartsBetweenTimestamps: function (startTime, endTime, unit) {
         const timeStarts = []

diff --git a/src/essence/Basics/Layers_/Layers_.js b/src/essence/Basics/Layers_/Layers_.js
@@ -188,6 +188,23 @@ const L_ = {
             }
         } else console.log('Failure updating to new site')
     },
+    _timeChangeSubscriptions: {},
+    subscribeTimeChange: function (fid, func) {
+        if (typeof func === 'function') L_._timeChangeSubscriptions[fid] = func
+    },
+    unsubscribeTimeChange: function (fid) {
+        if (L_._timeChangeSubscriptions[fid] != null)
+            delete L_._timeChangeSubscriptions[fid]
+    },
+    _onTimeUIToggleSubscriptions: {},
+    subscribeOnTimeUIToggle: function (fid, func) {
+        if (typeof func === 'function')
+            L_._onTimeUIToggleSubscriptions[fid] = func
+    },
+    unsubscribeOnTimeUIToggle: function (fid) {
+        if (L_._onTimeUIToggleSubscriptions[fid] != null)
+            delete L_._onTimeUIToggleSubscriptions[fid]
+    },
     _onLayerToggleSubscriptions: {},
     subscribeOnLayerToggle: function (fid, func) {
         if (typeof func === 'function')

diff --git a/src/essence/Tools/Draw/DrawTool.css b/src/essence/Tools/Draw/DrawTool.css
@@ -985,6 +985,9 @@
     color: black;
     font-weight: bold;
 }
+.drawToolShapeLi.temporallyHidden {
+    display: none !important;
+}
 
 .drawToolShapeLiItem {
     cursor: pointer;
@@ -2602,11 +2605,11 @@
     background: var(--color-c);
 }
 
-#cmExportGeoJSON, 
+#cmExportGeoJSON,
 #cmExportSourceGeoJSON {
     display: block;
 }
-#cmExportGeoJSON > div:last-child, 
+#cmExportGeoJSON > div:last-child,
 #cmExportSourceGeoJSON > div:last-child {
     font-size: 12px;
     text-align: right;
@@ -2694,3 +2697,25 @@
 #drawToolFilesLoadingSpinner.on {
     opacity: 1;
 }
+
+#DrawTool_TimeToggle {
+    position: absolute;
+    bottom: 45px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    background: var(--color-a);
+    border-radius: 2px;
+    height: 24px;
+    line-height: 18px;
+    padding: 3px 3px;
+    font-size: 13px;
+    box-shadow: 0px 4px 3px 0px rgba(0,0,0,0.2);
+}
+#DrawTool_TimeToggle > div:first-child {
+    padding: 0px 6px 0px 5px;
+    letter-spacing: 1px;
+}
+#DrawTool_TimeToggle_switch {
+    top: -14px;
+}