change track color line/wpt/icon/tooltip

2019-04-09 01:19:33 +02:00 · 2019-04-09 01:19:33 +02:00 · b6acba6895
--- a/css/images/marker-icon.svg
+++ b/css/images/marker-icon.svg
@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xml:space="preserve" height="32" width="32" enable-background="new 0 0 100 100" y="0px" x="0px" viewBox="0 0 32 32"><path d="m16.274 1c-5.674 0-10.274 4.6006-10.274 10.274 0 5.674 10.274 19.726 10.274 19.726s10.274-14.052 10.274-19.726c0-5.6734-4.601-10.274-10.274-10.274zm0 16.027c-3.1775 0-5.7529-2.5754-5.7529-5.7537 0-3.1775 2.5754-5.7522 5.7529-5.7522 3.1782 0 5.7529 2.5747 5.7529 5.7522 0.00074 3.1783-2.5747 5.7537-5.7529 5.7537z" fill="#55739a"/></svg>
--- a/css/style.css
+++ b/css/style.css
@ -305,6 +305,14 @@ tr.selected td {
    mask: url('images/star-circle.svg') no-repeat 50% 50%;
    mask-size: 15px;
 }
+.trackWaypoint {
+    height: 25px !important;
+    width: 25px !important;
+    -webkit-mask: url('images/marker-icon.svg') no-repeat 50% 50%;
+    -webkit-mask-size: 25px;
+    mask: url('images/marker-icon.svg') no-repeat 50% 50%;
+    mask-size: 25px;
+}
 .line-enabled {
    background: var(--color-background-dark);
 }
@ -397,3 +405,12 @@ table.editFavorite input[type=text] {
 .app-navigation-entry-menu {
    z-index: 10001;
 }
+#colorinput {
+    opacity: 0;
+    width: 0px;
+    height: 0px;
+    min-height: 0px;
+    padding: 0px;
+    margin: 0px;
+    border: 0px;
+}
--- a/js/tracksController.js
+++ b/js/tracksController.js
@ -8,7 +8,8 @@ function TracksController(optionsController, timeFilterController) {
    this.mapTrackLayers = {};
    // layers which actually contain lines/waypoints, those which get filtered
    this.trackLayers = {};
-    this.track = {};
+    this.trackColors = {};
+    this.trackDivIcon = {};

    this.firstDate = null;
    this.lastDate = null;
@ -109,6 +110,13 @@ TracksController.prototype = {
                that.optionsController.saveOptionValues({trackListShow: $('#navigation-tracks').hasClass('open')});
            }
        });
+        $('body').on('click', '.changeTrackColor', function(e) {
+            var id = $(this).parent().parent().parent().parent().attr('track');
+            that.askChangeTrackColor(id);
+        });
+        $('body').on('change', '#colorinput', function(e) {
+            that.okColor();
+        });
    },

    // expand or fold categories in sidebar
@ -301,6 +309,8 @@ TracksController.prototype = {
        delete this.trackLayers[id];
        delete this.track[id];

+        $('style[track='+id+']').remove();
+
        $('#track-list > li[track="'+id+'"]').fadeOut('slow', function() {
            $(this).remove();
        });
@ -371,6 +381,12 @@ TracksController.prototype = {
    addTrackMap: function(track, show=false, pageLoad=false) {
        // color
        var color = track.color || OCA.Theming.color;
+        this.trackColors[track.id] = color;
+        this.trackDivIcon[track.id] = L.divIcon({
+            iconAnchor: [12, 25],
+            className: 'trackWaypoint trackWaypoint-'+track.id,
+            html: ''
+        });

        this.mapTrackLayers[track.id] = L.featureGroup();
        this.trackLayers[track.id] = L.featureGroup();
@ -396,6 +412,12 @@ TracksController.prototype = {
        '    <div class="app-navigation-entry-menu">' +
        '        <ul>' +
        '            <li>' +
+        '                <a href="#" class="changeTrackColor">' +
+        '                    <span class="icon-rename"></span>' +
+        '                    <span>'+t('maps', 'Change track color')+'</span>' +
+        '                </a>' +
+        '            </li>' +
+        '            <li>' +
        '                <a href="#" class="removeTrack">' +
        '                    <span class="icon-close"></span>' +
        '                    <span>'+t('maps', 'Remove')+'</span>' +
@ -516,13 +538,9 @@ TracksController.prototype = {
        var nbPoints = gpxx.find('>wpt').length;
        var nbLines = gpxx.find('>trk').length + gpxx.find('>rte').length;

-        color = '#0000EE';
-        rgbc = hexToRgb(color);
-        $('<style track="' + id + '">.tooltip' + color.replace('#','') + ' { ' +
-            'background: rgba(' + rgbc.r + ', ' + rgbc.g + ', ' + rgbc.b + ', 0.5);' +
-            'color: black; font-weight: bold;' +
-            ' }</style>').appendTo('body');
-        coloredTooltipClass = 'tooltip' + color.replace('#','');
+        color = this.trackColors[id];
+        this.setTrackCss(id, color);
+        coloredTooltipClass = 'tooltip' + id;

        var weight = 4;

@ -580,10 +598,10 @@ TracksController.prototype = {
        }

        var mm = L.marker(
-            [lat, lon]
-            //{
-            //    icon: symbolIcons[waypointStyle]
-            //}
+            [lat, lon],
+            {
+                icon: this.trackDivIcon[id]
+            }
        );
        mm.bindTooltip(brify(name, 20), {className: coloredTooltipClass});

@ -647,7 +665,7 @@ TracksController.prototype = {
        var l = L.polyline(latlngs, {
            weight: weight,
            opacity : 1,
-            color: color,
+            className: 'poly'+id,
        });
        var popupText = 'Track '+id+'<br/>';
        if (cmt !== '') {
@ -720,6 +738,61 @@ TracksController.prototype = {
        if (this.mainLayer.hasLayer(this.mapTrackLayers[id])) {
            this.map.fitBounds(this.mapTrackLayers[id].getBounds(), {padding: [30, 30]});
        }
-    }
+    },
+
+    askChangeTrackColor: function(id) {
+        $('#trackcolor').attr('track', id);
+        var currentColor = this.trackColors[id];
+        $('#colorinput').val(currentColor);
+        $('#colorinput').click();
+    },
+
+    okColor: function() {
+        var color = $('#colorinput').val();
+        var id = $('#trackcolor').attr('track');
+        this.trackColors[id] = color;
+        this.changeTrackColor(id, color);
+    },
+
+    changeTrackColor: function(id, color) {
+        var that = this;
+        $('#track-list > li[track="'+id+'"]').addClass('icon-loading-small');
+        var req = {
+            color: color
+        };
+        var url = OC.generateUrl('/apps/maps/tracks/'+id);
+        $.ajax({
+            type: 'PUT',
+            url: url,
+            data: req,
+            async: true
+        }).done(function (response) {
+            var imgurl = OC.generateUrl('/svg/core/actions/address?color='+color.replace('#', ''));
+            $('#track-list > li[track='+id+'] .track-name').attr('style', 'background-image: url('+imgurl+')');
+
+            that.setTrackCss(id, color);
+        }).always(function (response) {
+            $('#track-list > li[track="'+id+'"]').removeClass('icon-loading-small');
+        }).fail(function() {
+            OC.Notification.showTemporary(t('maps', 'Failed to change track color'));
+        });
+    },
+
+    setTrackCss: function(id, color) {
+        $('style[track='+id+']').remove();
+
+        var rgbc = hexToRgb(color);
+        $('<style track="' + id + '">' +
+            '.tooltip' + id + ' { ' +
+            'background: rgba(' + rgbc.r + ', ' + rgbc.g + ', ' + rgbc.b + ', 0.5);' +
+            'color: black; font-weight: bold;' +
+            ' }' +
+            '.poly' + id + ' {' +
+            'stroke: ' + color + ';' +
+            '}' +
+            '.trackWaypoint-'+id+' { ' +
+            'background-color: '+color+';}' +
+            '</style>').appendTo('body');
+    },

 }
--- a/lib/Controller/TracksController.php
+++ b/lib/Controller/TracksController.php
@ -175,6 +175,20 @@ class TracksController extends Controller {
        return new DataResponse($tracks);
    }

+    /**
+     * @NoAdminRequired
+     */
+    public function editTrack($id, $color) {
+        $track = $this->tracksService->getTrackFromDB($id, $this->userId);
+        if ($track !== null) {
+            $this->tracksService->editTrackInDB($id, $color);
+            return new DataResponse('EDITED');
+        }
+        else {
+            return new DataResponse('no such track', 400);
+        }
+    }
+
    /**
     * @NoAdminRequired
     */
--- a/lib/Service/TracksService.php
+++ b/lib/Service/TracksService.php
@ -94,6 +94,17 @@ class TracksService {
        return $trackId;
    }

+    public function editTrackInDB($id, $color) {
+        $qb = $this->qb;
+        $qb->update('maps_tracks')
+            ->set('color', $qb->createNamedParameter($color, IQueryBuilder::PARAM_STR))
+            ->where(
+                $qb->expr()->eq('id', $qb->createNamedParameter($id, IQueryBuilder::PARAM_INT))
+            );
+        $req = $qb->execute();
+        $qb = $qb->resetQueryParts();
+    }
+
    public function deleteTrackFromDB($id) {
        $qb = $this->qb;
        $qb->delete('maps_tracks')
--- a/templates/navigation/index.php
+++ b/templates/navigation/index.php
@ -74,7 +74,6 @@
            </ul>
        </div>
    </li>
-    <img id="dummylogo"/>
    <li id="navigation-photos">
        <a class="icon-picture" href="#"><?php p($l->t('Photos')); ?></a>
        <div class="app-navigation-entry-utils">
@ -174,3 +173,6 @@
        </ul>
    </li>
 </ul>
+<img id="dummylogo"/>
+<input id="trackcolor" type="text" style="display:none;"></input>
+<input id="colorinput" type="color"></input>