locationSharing: add label next to positions

Change-Id: I5da15da915153b7309b5a1741dbdf9c3172d50ce
GitLab: #909

src/app/positionmanager.cpp

@@ -389,7 +389,13 @@ PositionManager::showNotification(const QString& accountId,
                                   const QString& convId,
                                   const QString& from)
 {
-    auto bestName = lrcInstance_->getAccountInfo(accountId).contactModel->bestNameForContact(from);
+    QString bestName;
+    if (from == lrcInstance_->getAccountInfo(accountId).profileInfo.uri)
+        bestName = lrcInstance_->getAccountInfo(accountId).accountModel->bestNameForAccount(
+            accountId);
+    else
+        bestName = lrcInstance_->getAccountInfo(accountId).contactModel->bestNameForContact(from);
+
     auto body = tr("%1 is sharing it's location").arg(bestName);
 #ifdef Q_OS_LINUX
     auto contactPhoto = Utils::contactPhoto(lrcInstance_, from, QSize(50, 50), accountId);
@@ -469,6 +475,22 @@ PositionManager::addPositionToMap(PositionKey key, QVariantMap position)
 {
     // avatar only sent one time to qml, when a new position is added
     position["avatar"] = getAvatar(key.first, key.second);
+    auto accountId = key.first;
+    auto uri = key.second;
+    auto& accountInfo = lrcInstance_->getAccountInfo(accountId);
+    QString bestName;
+
+    if (uri == accountInfo.profileInfo.uri) {
+        bestName = accountInfo.accountModel->bestNameForAccount(accountId);
+    } else
+        bestName = accountInfo.contactModel->bestNameForContact(uri);
+
+    QString shorterAuthorName = bestName;
+    shorterAuthorName.truncate(10);
+    if (bestName != shorterAuthorName) {
+        shorterAuthorName = shorterAuthorName + "…";
+    }
+    position["authorName"] = shorterAuthorName;
     Q_EMIT positionShareAdded(position);
 }
 

src/app/webengine/map/MapPosition.qml

@@ -178,7 +178,8 @@ Item {
                             if (shareInfo.account === attachedAccountId) {
                                 var curLong = shareInfo.long
                                 var curLat = shareInfo.lat
-                                webView.runJavaScript("newPosition([" + curLong + "," + curLat  + "], '" + shareInfo.author + "', '" + shareInfo.avatar + "' )" );
+                                webView.runJavaScript("newPosition([" + curLong + "," + curLat  + "], '" +
+                                                      shareInfo.author + "', '" + shareInfo.avatar + "', '" + shareInfo.authorName + "' )" );
                                 webView.runJavaScript("zoomTolayersExtent()" );
                             }
                         }
@@ -214,7 +215,7 @@ Item {
                         attachedAccountId = CurrentAccount.id
                         runJavaScript(UtilsAdapter.getStyleSheet("olcss",UtilsAdapter.qStringFromFile(olCss)))
                         webView.isLoaded = true
-                        runJavaScript("setMapView([" + 0 + ","+ 0  + "], " + 1 + " );" );
+                        webView.runJavaScript("setMapView([" + 0 + ","+ 0  + "], " + 1 + " );" );
                         PositionManager.startPositioning()
                         //load locations that were received before this conversation was opened
                         PositionManager.loadPreviousLocations(attachedAccountId);

src/app/webengine/map/map.js

@@ -61,7 +61,7 @@ var proj = new ol.proj.Projection({
     extent: extent
 })
 
-function setSource (coordos, avatar) {
+function setSource (coordos, avatar, authorName) {
     var coord = ol.proj.fromLonLat(coordos)
     var pointFeature = new ol.Feature({
        geometry: new ol.geom.Point(coord),
@@ -71,14 +71,14 @@ function setSource (coordos, avatar) {
     var preStyle = new ol.style.Icon({
                 src: "data:image/png;base64," +  avatar})
 
-    //resize the image to 35 px
+    //resize the image to 40 px
     var image = preStyle.getImage()
     if (!image.width) {
       image.addEventListener('load', function () {
-        preStyle.setScale([35 / image.width, 35 / image.height])
+        preStyle.setScale([40 / image.width, 40 / image.height])
       })
     } else {
-      preStyle.setScale([35 / image.width, 35 / image.height])
+      preStyle.setScale([40 / image.width, 40 / image.height])
     }
 
     var  iconStyle = new ol.style.Style({
@@ -86,21 +86,45 @@ function setSource (coordos, avatar) {
     })
 
     pointFeature.setStyle(iconStyle)
+
+    // create a text label
+    var textLabel = new ol.Feature({
+      geometry: new ol.geom.Point(coord),
+      text: authorName
+    });
+
+    // set the style for the text label
+    textLabel.setStyle(new ol.style.Style({
+      text: new ol.style.Text({
+        text: textLabel.get('text'),
+        font: '20px Arial',
+        fill: new ol.style.Fill({
+          color: 'black'
+        }),
+        stroke: new ol.style.Stroke({
+          color: 'white',
+          width: 3
+        }),
+        offsetY: 30
+      })
+    }));
+
     var vectorSource = new ol.source.Vector({
-      features: [pointFeature],
+      features: [pointFeature,textLabel],
     })
 
     return vectorSource
 }
 
-function newPosition (coordos, authorUri, avatar) {
+
+function newPosition (coordos, authorUri, avatar, authorName) {
     var layerArray = map.getLayers().getArray();
     for (var i = 0; i < layerArray.length; i++ ){
         if(layerArray[i].layer_type === authorUri) {
             return
         }
     }
-    vectorSource = setSource(coordos, avatar)
+    vectorSource = setSource(coordos, avatar, authorName)
     var iconLayer = new ol.layer.Vector({source: vectorSource})
     iconLayer.layer_type = authorUri
     map.addLayer(iconLayer)
@@ -112,6 +136,7 @@ function updatePosition (coordos, authorUri) {
     for (var i = 0; i < layerArray.length; i++ ){
         if(layerArray[i].layer_type === authorUri) {
             layerArray[i].getSource().getFeatures()[0].getGeometry().setCoordinates(coord)
+            layerArray[i].getSource().getFeatures()[1].getGeometry().setCoordinates(coord)
             return
         }
     }