Add dates to sensor page call (#1094)

* Add dates to sensor page call Signed-off-by: Nikolai <nrozanov@iponweb.net> * add changelog entry Signed-off-by: Nicolas Höning <nicolas@seita.nl> * improve changelog entry Signed-off-by: Nicolas Höning <nicolas@seita.nl> --------- Signed-off-by: Nikolai <nrozanov@iponweb.net> Signed-off-by: Nicolas Höning <nicolas@seita.nl> Co-authored-by: Nikolai <nrozanov@iponweb.net> Co-authored-by: Nicolas Höning <nicolas@seita.nl>
FlexMeasures · Jun 17, 2024 · aeafc9e · aeafc9e
1 parent eeeb616
commit aeafc9e
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 3 deletions.
diff --git a/documentation/changelog.rst b/documentation/changelog.rst
@@ -9,6 +9,7 @@ v0.22.0 | June XX, 2024
 New features
 -------------
 * Add `asset/<id>/auditlog` to view asset related actions [see `PR #1067 <https://github.com/FlexMeasures/flexmeasures/pull/1067>`_]
+* On the `/sensor/id` page, allowto link to it with a date range and to copy current view as URL [see `PR #1094 <https://github.com/FlexMeasures/flexmeasures/pull/1094>`_]
 * On the asset page, facilitate comparison by showing the two default sensors together if they record the same unit [see `PR #1066 <https://github.com/FlexMeasures/flexmeasures/pull/1066>`_]
 * Flex-context (price sensors and inflexible device sensors) can now be set on the asset page (and are part of GenericAsset model) [see `PR #1059 <https://github.com/FlexMeasures/flexmeasures/pull/1059/>`_]
 * On the asset page's default view, facilitate comparison by showing the two default sensors together if they record the same unit [see `PR #1066 <https://github.com/FlexMeasures/flexmeasures/pull/1066>`_]

diff --git a/flexmeasures/ui/templates/views/sensors.html b/flexmeasures/ui/templates/views/sensors.html
@@ -66,6 +66,80 @@
                   </div>
               </div>
           </div>
+          <div class="row justify-content-center">
+            <div class="col-md-8 offset-md-1">
+                <div class="copy-url" title="Click to copy the URL to the current time range to clipboard.">
+                    <script>
+                        function toIsoString(date) {
+                            var tzo = -date.getTimezoneOffset(),
+                                dif = tzo >= 0 ? '+' : '-',
+                                pad = function(num) {
+                                    return (num < 10 ? '0' : '') + num;
+                                };
+
+                            return date.getFullYear() +
+                                '-' + pad(date.getMonth() + 1) +
+                                '-' + pad(date.getDate()) +
+                                'T' + pad(date.getHours()) +
+                                ':' + pad(date.getMinutes()) +
+                                ':' + pad(date.getSeconds()) +
+                                dif + pad(Math.floor(Math.abs(tzo) / 60)) +
+                                ':' + pad(Math.abs(tzo) % 60);
+                        }
+
+                        $(window).ready(() => {
+                            picker.on('selected', (startDate, endDate) => {
+                                startDate = encodeURIComponent(toIsoString(startDate.toJSDate()));
+                                endDate = encodeURIComponent(toIsoString(endDate.toJSDate()));
+                                var base_url = window.location.href.split("?")[0];
+                                var new_url = `${base_url}?start_time=${startDate}&end_time=${endDate}`;
+
+                                // change current url without reloading the page
+                                window.history.pushState({}, null, new_url);
+                            });
+
+                        });
+
+                        function copyUrl(event) {
+                            event.preventDefault();
+
+                            if (!window.getSelection) {
+                                alert('Please copy the URL from the location bar.');
+                                return;
+                            }
+                            const dummy = document.createElement('p');
+
+                            var startDate = encodeURIComponent(toIsoString(picker.getStartDate().toJSDate()));
+                            // add 1 day to end date as datepicker does not include the end date day
+                            var endDate = picker.getEndDate();
+                            endDate.setDate(endDate.getDate() + 1);
+                            endDate = encodeURIComponent(toIsoString(endDate.toJSDate()));
+                            var base_url = window.location.href.split("?")[0];
+                            dummy.textContent = `${base_url}?start_time=${startDate}&end_time=${endDate}`
+                            document.body.appendChild(dummy);
+
+                            const range = document.createRange();
+                            range.setStartBefore(dummy);
+                            range.setEndAfter(dummy);
+
+                            const selection = window.getSelection();
+                            // First clear, in case the user already selected some other text
+                            selection.removeAllRanges();
+                            selection.addRange(range);
+
+                            document.execCommand('copy');
+                            document.body.removeChild(dummy);
+
+                            $("#message").show().delay(1000).fadeOut();
+                        }
+                    </script>
+                    <a href="#" onclick="copyUrl(event)" style="display: block; text-align: center;">
+                        <i class="fa fa-link"></i>
+                    </a>
+                    <div id="message" style="display: none; text-align: center;">The URL to the time range currently shown has been copied to your clipboard.</div>
+                </div>
+            </div>
+          </div>
           <hr>
       </div>
 

diff --git a/flexmeasures/ui/views/sensors.py b/flexmeasures/ui/views/sensors.py
@@ -1,13 +1,14 @@
 import json
 
 from altair.utils.html import spec_to_html
-from flask import current_app
+from flask import current_app, request
 from flask_classful import FlaskView, route
 from flask_security import auth_required, login_required
 from marshmallow import fields
 from webargs.flaskparser import use_kwargs
 
 from flexmeasures.data import db
+from flexmeasures.data.schemas import StartEndTimeSchema
 from flexmeasures.data.schemas.times import AwareDateTimeField
 from flexmeasures.api.dev.sensors import SensorAPI
 from flexmeasures import Sensor
@@ -67,12 +68,19 @@ def get_chart(self, id, **kwargs):
             embed_options=embed_options,
         ).replace('<div id="vis"></div>', '<div id="vis" style="width: 100%;"></div>')
 
+    @use_kwargs(StartEndTimeSchema, location="query")
     @login_required
-    def get(self, id: int):
-        """GET from /sensors/<id>"""
+    def get(self, id: int, **kwargs):
+        """GET from /sensors/<id>
+        The following query parameters are supported (should be used only together):
+         - start_time: minimum time of the events to be shown
+         - end_time: maximum time of the events to be shown
+        """
         return render_flexmeasures_template(
             "views/sensors.html",
             sensor_id=id,
             msg="",
             breadcrumb_info=get_breadcrumb_info(db.session.get(Sensor, id)),
+            event_starts_after=request.args.get("start_time"),
+            event_ends_before=request.args.get("end_time"),
         )