Rework eneiluj

appinfo/routes.php

@@ -22,6 +22,7 @@
         ['name' => 'photos#getPhotosFromDb', 'url' => '/photos', 'verb' => 'GET'],
         ['name' => 'photos#getNonLocalizedPhotosFromDb', 'url' => '/photos/nonlocalized', 'verb' => 'GET'],
         ['name' => 'photos#placePhotos', 'url' => '/photos', 'verb' => 'POST'],
+        ['name' => 'photos#resetPhotosCoords', 'url' => '/photos', 'verb' => 'DELETE'],
 
         // contacts
         ['name' => 'contacts#getContacts', 'url' => '/contacts', 'verb' => 'GET'],

css/style.css

@@ -19,7 +19,7 @@
 }
 #search-term {
     margin-right: 0px !important;
-    width: 200px;
+    width: 294px;
 }
 
 #timeRangeSlider {
@@ -96,8 +96,11 @@
     max-width: 50vw;
 }
 
+#opening-hours-table td {
+    padding: 0 5px 0 5px;
+}
 #opening-hours-table {
-    margin-left: 25px;
+    width: 100%;
     display: none;
 }
 
@@ -234,14 +237,25 @@ tr.selected td {
     border-radius: 50%;
 }
 
+.leaflet-marker-contact.contact-marker:after {
+    bottom: 18px;
+    border-width: 12px 8px 0;
+}
+.leaflet-marker-device.device-marker:after {
+    bottom: 18px;
+    border-width: 12px 7px 0;
+}
 .leaflet-marker-nonLocalizedPhoto.nonLocalizedPhoto-marker:after,
+.leaflet-marker-photo.photo-marker:after {
+    bottom: 17px;
+    border-width: 11px 8px 0;
+}
 .leaflet-marker-contact.contact-marker:after,
 .leaflet-marker-device.device-marker:after,
+.leaflet-marker-nonLocalizedPhoto.nonLocalizedPhoto-marker:after,
 .leaflet-marker-photo.photo-marker:after {
     content:"";
     position: relative;
-    bottom: 16px;
-    border-width: 10px 10px 0;
     border-style: solid;
     border-color: var(--color-main-background) transparent;
     display: block;
@@ -304,9 +318,14 @@ tr.selected td {
     padding: 3px;
 }
 
+.leaflet-marker-favorite-tooltip,
+.leaflet-marker-device-tooltip,
+.leaflet-marker-track-tooltip,
 .leaflet-marker-contact-tooltip,
 .leaflet-marker-photo-tooltip {
     opacity: 1 !important;
+    background-color: var(--color-main-background);
+    color: var(--color-main-text);
 }
 .leaflet-marker-photo-tooltip {
     padding: 1px;
@@ -356,10 +375,6 @@ tr.selected td {
     line-height: 1.7;
     font-size: 20px;
 }
-#dummylogo {
-    display: none;
-    content: url("images/.png");
-}
 .easy-button-button img {
     width: 100%;
     height: 100%;
@@ -494,6 +509,9 @@ tr.selected td {
     text-align: center;
 }
 /* Overriden routing/geocoder style */
+.leaflet-routing-geocoder-result tr {
+    line-height: 35px;
+}
 /* hide button if placeholder is shown i.e. if field is empty */
 .leaflet-routing-geocoder > input:placeholder-shown + span {
     display: none;
@@ -520,14 +538,15 @@ tr.selected td {
 .leaflet-routing-remove-waypoint::after {
     right: 6px !important;
     width: 18px !important;
-    height: 10px !important;
+    height: 5px !important;
     background-color: var(--color-main-background) !important;
 }
 .leaflet-routing-remove-waypoint:hover:after {
     color: var(--color-main-text) !important;
 }
 .leaflet-routing-alt table {
     white-space: normal;
+    width: 100%;
 }
 .leaflet-routing-alt td:nth-child(2),
 .leaflet-routing-alt td:nth-child(3) {
@@ -584,3 +603,26 @@ tr.selected td {
     word-wrap: break-word;
     white-space: normal;
 }
+.searchCompleteIcon {
+    background-color: inherit;
+    border: 0px;
+    height: 35px;
+    padding-top: 15px;
+}
+.searchCompleteLink {
+    line-height: 35px;
+}
+.search-add-favorite {
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+}
+.search-result-popup {
+    width: 250px;
+}
+.search-result-popup .leaflet-popup-content {
+    line-height: 25px !important;
+}
+.ui-autocomplete {
+    z-index: 9999;
+}

js/contactsController.js

@@ -1,5 +1,6 @@
 function ContactsController (optionsController, timeFilterController) {
     this.contact_MARKER_VIEW_SIZE = 40;
+    this.contactLayer = null;
     this.contactsDataLoaded = false;
     this.contactsRequestInProgress = false;
     this.optionsController = optionsController;
@@ -217,7 +218,7 @@ ContactsController.prototype = {
             var avatar = this.generateAvatar(marker.data.photo) || this.getUserImageIconUrl();
             var img = '<img class="tooltip-contact-avatar" src="' + avatar + '"/>' +
                 '<p class="tooltip-contact-name">' + escapeHTML(basename(markerData.name)) + '</p>';
-            marker.bindTooltip(img, {permanent: false, className: "leaflet-marker-contact-tooltip"});
+            marker.bindTooltip(img, {permanent: false, className: 'leaflet-marker-contact-tooltip', direction: 'top', offset: L.point(0, -25)});
             markers.push(marker);
         }
         return markers;
@@ -488,5 +489,25 @@ ContactsController.prototype = {
 
         this.showLayer();
     },
+
+    getAutocompData: function() {
+        var that = this;
+        var mData;
+        var data = [];
+        if (this.map.hasLayer(this.contactLayer)) {
+            this.contactLayer.eachLayer(function (l) {
+                mData = l.data;
+                data.push({
+                    type: 'contact',
+                    label: mData.name,
+                    value: mData.name,
+                    lat: mData.lat,
+                    lng: mData.lng
+                });
+            });
+        }
+        return data;
+    },
+
 };
 

js/devicesController.js

@@ -56,6 +56,11 @@ DevicesController.prototype = {
             var id = $(this).parent().parent().parent().parent().attr('device');
             that.toggleDeviceLine(id, true);
         });
+        $('body').on('click', '.contextToggleLine', function(e) {
+            var id = $(this).parent().parent().attr('devid');
+            that.toggleDeviceLine(id, true);
+            that.map.closePopup();
+        });
         // toggle devices
         $('body').on('click', '#navigation-devices > a', function(e) {
             that.toggleDevices();
@@ -78,6 +83,11 @@ DevicesController.prototype = {
             var id = $(this).parent().parent().parent().parent().attr('device');
             that.askChangeDeviceColor(id);
         });
+        $('body').on('click', '.contextChangeDeviceColor', function(e) {
+            var id = $(this).parent().parent().attr('devid');
+            that.askChangeDeviceColor(id);
+            that.map.closePopup();
+        });
         $('body').on('change', '#devicecolorinput', function(e) {
             that.okColor();
         });
@@ -334,15 +344,9 @@ DevicesController.prototype = {
         else {
             imgurl = OC.generateUrl('/svg/core/clients/phone?color='+color.replace('#', ''));
         }
-        var rgbc = hexToRgb(color);
-        var textcolor = 'black';
-        if (rgbc.r + rgbc.g + rgbc.b < 3 * 80) {
-            textcolor = 'white';
-        }
         $('<style device="' + id + '">' +
             '.tooltip-dev-' + id + ' { ' +
-            'background: rgba(' + rgbc.r + ', ' + rgbc.g + ', ' + rgbc.b + ', 0.5);' +
-            'color: '+textcolor+'; font-weight: bold;' +
+            'border: 2px solid ' + color + ';' +
             ' }' +
             '.devline' + id + ' {' +
             'stroke: ' + color + ';' +
@@ -533,8 +537,10 @@ DevicesController.prototype = {
                 icon: this.devices[id].icon
         });
         this.devices[id].marker.devid = id;
+        this.devices[id].marker.lastPosMarker = true;
         this.devices[id].marker.on('mouseover', this.deviceMarkerMouseover);
         this.devices[id].marker.on('mouseout', this.deviceMarkerMouseout);
+        this.devices[id].marker.on('contextmenu', this.deviceMarkerMouseRightClick);
         //this.devices[id].marker.on('click', this.favoriteMouseClick);
         // points data indexed by point id
         this.devices[id].points = {};
@@ -552,6 +558,7 @@ DevicesController.prototype = {
         this.devices[id].line.devid = id;
         this.devices[id].line.on('mouseover', this.deviceLineMouseover);
         this.devices[id].line.on('mouseout', this.deviceLineMouseout);
+        this.devices[id].line.on('contextmenu', this.deviceMarkerMouseRightClick);
         this.deviceMarkerLayers[id].addLayer(this.devices[id].marker);
         if (this.optionsController.enabledDeviceLines.indexOf(id) !== -1) {
             this.deviceLineLayers[id].addLayer(this.devices[id].line);
@@ -782,7 +789,14 @@ DevicesController.prototype = {
             data: req,
             async: true
         }).done(function (response) {
-            var imgurl = OC.generateUrl('/svg/core/clients/phone?color='+color.replace('#', ''));
+            var imgurl;
+            var device = that.devices[id];
+            if (['Windows', 'GNU/Linux', 'MacOS'].indexOf(device.info.os) !== -1) {
+                imgurl = OC.generateUrl('/svg/core/clients/desktop?color='+color.replace('#', ''));
+            }
+            else {
+                imgurl = OC.generateUrl('/svg/core/clients/phone?color='+color.replace('#', ''));
+            }
             $('#device-list > li[device='+id+'] .device-name').attr('style', 'background-image: url('+imgurl+')');
 
             that.setDeviceCss(id, color);
@@ -798,9 +812,17 @@ DevicesController.prototype = {
         var id = e.target.devid;
         var pointId = e.target.getLatLng().alt;
         var device = that.devices[id];
+        var yOffset = 0;
+        if (e.target.lastPosMarker) {
+            yOffset = -20;
+        }
         // tooltip
         var markerTooltip = that.getDeviceMarkerTooltipContent(device, pointId);
-        e.target.bindTooltip(markerTooltip, {className: 'tooltip-dev-' + id});
+        e.target.bindTooltip(markerTooltip, {
+            className: 'leaflet-marker-device-tooltip tooltip-dev-' + id,
+            direction: 'top',
+            offset: L.point(0, yOffset)
+        });
         e.target.openTooltip();
         // accuracy circle
         var latlng = e.target.getLatLng();
@@ -869,11 +891,72 @@ DevicesController.prototype = {
         that.lineMarker.devid = id;
         that.lineMarker.on('mouseover', that.deviceMarkerMouseover);
         that.lineMarker.on('mouseout', that.deviceMarkerMouseout);
+        that.lineMarker.on('contextmenu', that.deviceMarkerMouseRightClick);
         that.map.addLayer(that.lineMarker);
     },
 
     deviceLineMouseout: function(e) {
     },
 
+    deviceMarkerMouseRightClick: function(e) {
+        var id = e.target.devid;
+
+        e.target.unbindPopup();
+        var popupContent = this._map.devicesController.getDeviceContextPopupContent(id);
+        e.target.bindPopup(popupContent, {
+            closeOnClick: true,
+            className: 'popovermenu open popupMarker',
+            offset: L.point(-4, 5)
+        });
+        e.target.openPopup(e.latlng);
+        e.preventDefault();
+    },
+
+    getDeviceContextPopupContent: function(id) {
+        var colorText = t('maps', 'Change device color');
+        var lineText = t('maps', 'Toggle device history');
+        var res =
+            '<ul devid="' + id + '">' +
+            '   <li>' +
+            '       <button class="icon-category-monitoring contextToggleLine">' +
+            '           <span>' + lineText + '</span>' +
+            '       </button>' +
+            '   </li>' +
+            '   <li>' +
+            '       <button class="icon-rename contextChangeDeviceColor">' +
+            '           <span>' + colorText + '</span>' +
+            '       </button>' +
+            '   </li>' +
+            '</ul>';
+        return res;
+    },
+
+    getAutocompData: function() {
+        var that = this;
+        var marker, devid;
+        var data = [];
+        if (this.map.hasLayer(this.mainLayer)) {
+            for (devid in this.devices) {
+                // is activated
+                if (this.mainLayer.hasLayer(this.mapDeviceLayers[devid])) {
+                    // is not filtered
+                    if (this.mapDeviceLayers[devid].hasLayer(this.deviceMarkerLayers[devid])) {
+                        marker = this.devices[devid].marker;
+                        data.push({
+                            type: 'device',
+                            id: devid,
+                            subtype: (['Windows', 'GNU/Linux', 'MacOS'].indexOf(this.devices[devid].info.os) !== -1) ? 'computer' : 'mobile',
+                            label: this.devices[devid].name,
+                            value: this.devices[devid].name,
+                            lat: marker.getLatLng().lat,
+                            lng: marker.getLatLng().lng
+                        });
+                    }
+                }
+            }
+        }
+        return data;
+    },
+
 }