Added DataTypes to Device details sidebar. Made dashboard widgets per…

…sistant in position and size #30
alexstocker · Dec 30, 2020 · e00d7dc · e00d7dc
1 parent f31294e
commit e00d7dc
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 2 deletions.
diff --git a/controller/sensorloggercontroller.php b/controller/sensorloggercontroller.php
@@ -636,14 +636,22 @@ public function showDeviceDetails($id)
         $groups = DeviceGroups::getDeviceGroups($this->userSession->getUser()->getUID(), $this->connection);
         $types = DeviceTypes::getDeviceTypes($this->userSession->getUser()->getUID(), $this->connection);
 
+        $dataTypes = DataTypes::getDeviceDataTypesByDeviceId(
+            $this->userSession->getUser()->getUID(),
+            $id,
+            $this->connection
+        );
+
+
         $policy = new ContentSecurityPolicy();
         $policy->addAllowedFrameDomain("'self'");
 
         $deviceDetails->setId($id);
         $response = $this->returnJSON([
             'deviceDetails' => $deviceDetails,
             'groups' => $groups,
-            'types' => $types
+            'types' => $types,
+            'dataTypes' => $dataTypes
         ]);
 
         $response->setContentSecurityPolicy($policy);

diff --git a/css/style.css b/css/style.css
@@ -313,4 +313,13 @@ h2.widget-header a span.icon {
 	cursor: pointer;
 	/* box-shadow: 0 0 0 rgba(204,169,44, 0.4); */
 	animation: pulse 2s infinite;
-}
+}
+
+.device-data-type-tag {
+    background-color: rgba(240, 240, 240, .9);
+    border-radius: 3px;
+	margin-bottom: 3px;
+    padding-left: 3px;
+    padding-right: 3px;
+	display: table;
+}
diff --git a/js/app.js b/js/app.js
@@ -287,6 +287,12 @@
             var deviceChartUrl = OC.generateUrl('/apps/sensorlogger/deviceChart/'+deviceId);
             var deviceDataUrl = OC.generateUrl('/apps/sensorlogger/showDeviceData/'+deviceId);
             var deviceDetailsUrl = OC.generateUrl('/apps/sensorlogger/showDeviceDetails/'+deviceId);
+
+            $(element).find('.deviceChart > span, ' +
+                '.deviceListData > span, ' +
+            	'.deviceactions > a.action-share, ' +
+            	'.deviceactions > a.action-menu').tooltip({placement:'right'});
+
             $(element).on('click','a', function(e) {
                 var action = $(e.target).closest('a').data('action');
                 if(action === 'Menu') {
@@ -317,6 +323,7 @@
                         OCA.SensorLogger.Content.empty().append($response);
                     });
                 }
+                $(this).tooltip('hide');
             });
         },
 		Widgets: function(container) {
@@ -993,6 +1000,44 @@
                 .append(uuidContentSpan);
             return uuid;
         },
+        DeviceDataTypes: function (response) {
+            var bodyDetailsContainer = OCA.SensorLogger.Sidebar.find('.tpl_bodyDetails').clone();
+            bodyDetailsContainer.removeClass('tpl_bodyDetails').addClass('bodyDetails');
+            //console.log(response.dataTypes);
+
+            var dataTypesLabel = $('<label/>', {
+                'class':'device-data-types'
+            }).text('Device data types');
+
+            var dataTypesContentDiv = $('<div/>', {
+                'class':'device-data-types-content'
+            });
+
+console.log(response.dataTypes);
+            if(response.dataTypes.length > 0) {
+                $.each(response.dataTypes, function (index, dataType) {
+                    var dataTypesContentSpan = $('<span/>', {
+                        'class':'device-data-type-tag has-tooltip'
+                    })
+                    .text(dataType.type + ' ['+ dataType.short +']')
+                    .attr('data-original-title',dataType.description).tooltip({placement:'right'});
+                    dataTypesContentDiv.append(dataTypesContentSpan);
+                });
+            } else {
+                var dataTypesContentSpan = $('<span/>', {
+                    'class':'device-data-type-tag has-tooltip'
+                })
+                .text('°C, % rel. Humidity')
+                .attr('data-original-title','Default: Temperature and relative humidity').tooltip({placement:'right'});
+                dataTypesContentDiv.append(dataTypesContentSpan);
+            }
+
+            var dataTypes = bodyDetailsContainer
+                .clone()
+                .append(dataTypesLabel)
+                .append(dataTypesContentDiv);
+            return dataTypes;
+        },
         deviceGroupSource: function(response) {
             let groupSource = [];
             for (group in response.groups) {
@@ -1228,6 +1273,7 @@
             sidebarBody.append(this.DeviceGroupSelect(response));
             sidebarBody.append(this.DeviceParentGroupSelect(response));
             sidebarBody.append(this.DeviceTypeSelect(response));
+            sidebarBody.append(this.DeviceDataTypes(response));
         },
         DeviceShare: function () {
 		    /** TODO: Feature to share device needs to be implemented **/