1 files changed, 397 insertions, 0 deletions
diff --git a/main/survey/js/Maps/ShapeDrawing.js b/main/survey/js/Maps/ShapeDrawing.js
new file mode 100644
index 0000000..8495671
--- /dev/null
+++ b/main/survey/js/Maps/ShapeDrawing.js
@@ -0,0 +1,397 @@
+// Author: Uroš Podkrižnik (24.1.2017)
+// Tip vprasanja = 26
+
+//DRAWING POLYLINE
+
+/**
+ * Function to set parameters for drawing a shape on map
+ * 
+ * @param {type} spremenljivka - id spremenljivke
+ * @param {google's shape} shape - polyline or polygon if already exists
+ * @param shape_type - string - type of shape 'polyline' or 'polygon'
+ * @returns {undefined}
+ */
+function drawShape(spremenljivka, shape, shape_type) {
+    var map = document.getElementById("map_"+spremenljivka).gMap;
+    
+    var drawingMode = (shape_type === 'polyline') ? 
+        google.maps.drawing.OverlayType.POLYLINE : google.maps.drawing.OverlayType.POLYGON;
+    var startDrawingMode = shape!==null ? null : drawingMode;
+    var shapeOptions = (shape_type === 'polyline') ? polylineOptions() : polygonOptions();
+
+    var drawingManager = new google.maps.drawing.DrawingManager({
+        drawingMode: startDrawingMode,
+        drawingControl: shape===null,
+        drawingControlOptions: {
+            position: google.maps.ControlPosition.TOP_RIGHT,
+            drawingModes: [shape_type]
+        },
+        polylineOptions: shapeOptions,
+        polygonOptions: shapeOptions
+    });
+  
+    //settings for custom drawing controls
+    var drawingControlDiv = document.createElement('div');
+    var DrawingControl = new drawingControl(drawingControlDiv, map, spremenljivka);
+    drawingControlDiv.index = 1;
+    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(drawingControlDiv);
+    //at start, there is no shape, so no need to show delete button
+    DrawingControl.style.display = (shape!==null && !viewMode) ? 'inline-block' : 'none';
+      
+    if(shape!==null){
+        shape.type = shape_type;
+        createBoundsFromPath( shape.getPath() , spremenljivka );
+        map.fitBounds(bounds[spremenljivka]);
+        afterShapeCompleteSettings(drawingManager, DrawingControl, shape, spremenljivka, map);
+    }
+    
+    //listener when user colpetes shape
+    google.maps.event.addListener(drawingManager, shape_type+'complete', function(shape) {
+        shape.type = shape_type;
+        afterShapeCompleteSettings(drawingManager, DrawingControl, shape, spremenljivka, map);
+    });
+
+    drawingManager.setMap(map);
+}
+
+/**
+ * Sets all kind of settings after shape is complete
+ * 
+ * @param {type} drawingManager - google's drawingManager
+ * @param {type} DrawingControl - button for removing a shape
+ * @param {google's shape} shape - polyline or polygon if already exists
+ * @param {type} spremenljivka - id spremenljivke
+ * @param {type} map - google map on which we are drawing shape
+ * @returns {undefined}
+ */
+function afterShapeCompleteSettings(drawingManager, DrawingControl, shape, spremenljivka, map){
+    //hide controls
+        drawingManager.setOptions({
+            drawingControl: false
+        });
+        //stop drawing
+        drawingManager.setDrawingMode(null);
+        //show delete button
+        DrawingControl.style.display = 'inline-block';
+
+        // Setup the click event listener for delete button
+        DrawingControl.addEventListener('click', function() {
+            clearAndMakeDrawableAgain(spremenljivka, shape, DrawingControl, drawingManager);
+        });
+        
+        shapeInputHandler(shape, spremenljivka);
+        
+        //hide warning info for ending a shape
+        var end_info_warning = document.getElementById("end_shape_info_"+spremenljivka);
+        end_info_warning.style.display  = "none";
+
+        /**
+         * Liteners when editing a shape
+         */
+        //when editing end or start point
+        google.maps.event.addListener(shape.getPath(), 'set_at', function(index, obj) {
+            shapeInputHandler(shape, spremenljivka);
+        });
+        //when inserting new point (break old one)
+        google.maps.event.addListener(shape.getPath(), 'insert_at', function(index, obj) {
+            shapeInputHandler(shape, spremenljivka);
+        });
+        //when deleting a point -> undo 
+        google.maps.event.addListener(shape.getPath(), 'remove_at', function(index, obj) {
+            shapeInputHandler(shape, spremenljivka);
+        });
+        
+        setDeleteMenu(shape, map, spremenljivka, DrawingControl, drawingManager)
+}
+
+/**
+ * Sets rightclick and dblclick listeners to open delete menu
+ * @param {type} shape - shape to set listeners on
+ * @param {type} map  - map on which to hover menu (shape's map)
+ * @param {type} spremenljivka - id of variable
+ * @param {type} drawingManager - google's drawingManager
+ * @param {type} DrawingControl - button for removing a shape
+ * @returns {undefined}
+ */
+function setDeleteMenu(shape, map, spremenljivka, DrawingControl, drawingManager) {
+    google.maps.event.addListener(shape, 'rightclick', function (e) {
+        // Check if click was on a vertex control point
+        if (e.vertex == undefined) {
+            return;
+        }
+        //removeVertexVM(spremenljivka, shape, e.vertex);
+        deleteMenu.open(map, shape, e.vertex, spremenljivka, DrawingControl, drawingManager);
+    });
+    google.maps.event.addListener(shape, 'dblclick', function (e) {
+        // Check if click was on a vertex control point
+        if (e.vertex == undefined) {
+            return;
+        }
+        //removeVertexVM(spremenljivka, shape, e.vertex);
+        deleteMenu.open(map, shape, e.vertex, spremenljivka, DrawingControl, drawingManager);
+    });
+}
+
+/**
+ * Ce obstajajo podatki v bazi izrisi info shapes
+ * Kreirajo se markerji, shranjeni v bazi.
+ * @param spremenljivka int id spremenljivke
+ * @param map_data JSON Object
+ */
+function map_data_fill_info_shapes(spremenljivka, map_data) {
+    //because of viewing a filled survey at data section
+    var fillMode = (document.getElementById("map_"+spremenljivka) !== null);
+
+    //pridobi mapo spremenljivke
+    var map;
+    if(fillMode)
+        map = document.getElementById("map_"+spremenljivka).gMap;
+    else
+        map = document.getElementById("map_canvas_all").gMap;
+    
+    
+    var shapeOption = polylineOptions(map);
+    
+    for (var i=0; i<map_data.length; i++)
+    {             
+        var color = mapShapeColors[i % mapShapeColors.length];
+
+        //set and show the shape
+        shapeOption.path = map_data[i].path;
+        shapeOption.strokeColor = '#'+color;
+        shapeOption.strokeColorOrg = '#'+color;
+        shapeOption.editable = false;
+        var shape = new google.maps.Polyline(shapeOption);
+      
+        //Create a div element for container.
+        var container = document.createElement("div");
+        //margin, da se pri italic ne odreze zadja crka
+        container.style.cssText = 'margin-right:1px';
+
+        //Create a label for title
+        var Title = document.createElement("label");
+        Title.style.cssText = "font-size:1em;";
+        Title.innerHTML = '<b>' + map_data[i].address + '</b>';
+        container.appendChild(Title);
+        
+        shape.ifnowin = container;
+        shape.address = map_data[i].address;
+        var infow = new google.maps.InfoWindow();
+
+        google.maps.event.addListener(shape, 'mouseover', function(ev) { 
+            this.setOptions({strokeWeight: 6, zIndex: 2}); 
+            //open infowindow if title exists
+            if(this.address){
+                infow.setContent(this.ifnowin);
+                infow.setPosition(ev.latLng);
+                infow.open(map);
+            }
+        });
+        google.maps.event.addListener(shape, 'mouseout', function() { 
+            this.setOptions({strokeWeight: 4, zIndex: 1}); 
+            infow.close();
+        });
+    }
+}
+
+/**
+ * Clears the map, deletes all inputs, hides "Clear" button and sets drawing mode on
+ * @param {type} spremenljivka - id spremenljivke
+ * @param {google's shape} shape - polyline or polygon
+ * @param {type} drawingManager - google's drawingManager
+ * @param {type} DrawingControl - button for removing a shape
+ * @returns {undefined}
+ */
+function clearAndMakeDrawableAgain(spremenljivka, shape, DrawingControl, drawingManager){
+    //remove shape
+    shape.setMap(null);  
+    //remove all hidden inputs of a shape
+    deleteAllShapeInputs(spremenljivka);
+    //hide delete button
+    DrawingControl.style.display = 'none';
+    //show drawing controls
+    drawingManager.setOptions({
+        drawingControl: true
+    });
+
+    //start drawing
+    drawingManager.setDrawingMode(shape.type);
+    
+    //show warning info for ending a shape
+    var end_info_warning = document.getElementById("end_shape_info_"+spremenljivka);
+    end_info_warning.style.display  = "inline-block";
+}
+
+/**
+ * Removes a vertex/point of shape and if it after last it clears the map
+ * and sets drawing mode on again
+ * @param {type} spremenljivka - id spremenljivke
+ * @param {google's shape} shape - polyline or polygon if already exists
+ * @param {type} vertex - vertex or point which was selected
+ * @param {type} drawingManager - google's drawingManager
+ * @param {type} DrawingControl - button for removing a shape
+ * @returns {undefined}
+ */
+/*function removeVertex(spremenljivka, shape, vertex, DrawingControl, drawingManager) {
+    if (!shape || vertex == undefined)
+        return;
+
+    shape.getPath().removeAt(vertex);
+
+    if(shape.getPath().length < 2){
+        clearAndMakeDrawableAgain(spremenljivka, shape, DrawingControl, drawingManager);
+    }
+}*/
+
+/**
+ * Handle hidden input - remove old, create new
+ * @param {google's shape} shape - polyline or polygon
+ * @param {int} spremenljivka - id spremenljivke
+ * @returns {undefined}
+ */
+function shapeInputHandler(shape, spremenljivka){
+    deleteAllShapeInputs(spremenljivka);
+    createAllShapeInputs( shape.getPath(), spremenljivka );
+}
+
+/**
+ * create hidden inputs of all points of shape
+ * @param {type} path shape.getPath()
+ * @param {int} spremenljivka - id spremenljivke
+ */
+function createAllShapeInputs( path , spremenljivka ) {
+    var pathArray = path.getArray();
+    for( var i = 0, n = pathArray.length;  i < n;  i++ ) {
+        var latLng = pathArray[i];
+        createShapeInput(spremenljivka, { lat: latLng.lat(), lng: latLng.lng() }, i+1);
+    }
+}
+
+/**
+ * create hidden input of shape data
+ * @param {type} spremenljivka - int - id spremenljivke
+ * @param {type} vertices - array of lat and lng
+ * @param {type} index - order of point
+ * @returns {undefined}
+ */
+function createShapeInput(spremenljivka, vertices, index) {
+    //najdi element za drzanje variabel
+    var $variable_holder = $("#spremenljivka_" + spremenljivka + "_variabla");
+    
+    //kreiraj input s statičnimi podatki markerja
+    var $shapeInput = $("<input>", {name: "vrednost_" + spremenljivka + "[]",
+        type: "hidden", class: "shape_input",
+        value: index + "|" + vertices.lat + "|" + vertices.lng});
+    $variable_holder.append($shapeInput);
+}
+
+/**
+ * delete all hidden inputs of shape
+ * @param {type} spremenljivka - id spremenljivke
+ */
+function deleteAllShapeInputs(spremenljivka) {
+    //brisi vse inpute s staticnimi podatki shape
+    $('#spremenljivka_' + spremenljivka + '_variabla').find('input.shape_input').remove();
+}
+
+/**
+ * Ce obstajajo podatki v bazi (rec. uporabnik klikne 'Prejsnja stran'). 
+ * Kreira se shape, shranjena v bazi.
+ * @param spremenljivka int id spremenljivke
+ * @param map_data JSON Object
+ * @param shape_type - string - type of shape 'polyline' or 'polygon'
+ */
+function map_data_fill_shape(spremenljivka, map_data, shape_type){
+    //because of viewing a filled survey at data section
+    var fillMode = (document.getElementById("map_"+spremenljivka) !== null);
+
+    //pridobi mapo spremenljivke
+    var map;
+    if(fillMode)
+        map = document.getElementById("map_"+spremenljivka).gMap;
+    else
+        map = document.getElementById("map_canvas_all").gMap;
+    
+    var shapeOption = shape_type === 'polyline' ? polylineOptions(map) : polygonOptions(map);
+    
+    //for respondents, fill a map
+    if(fillMode){
+        //set and show the shape
+        shapeOption.path = map_data;
+        var shape = shape_type === 'polyline' ? 
+            new google.maps.Polyline(shapeOption) : new google.maps.Polygon(shapeOption);
+    
+        //alsways viewMode = false, except at insight into survey at data
+        //if not viewMode, create shape inputs and start drawing
+        if(!viewMode){
+            //create hidden inputs of shape
+            createAllShapeInputs( shape.getPath() , spremenljivka );
+
+            //set all data for shape drawing
+            drawShape(spremenljivka, shape, shape_type);
+        }
+        //if viewMode, just create and fit bounds
+        else{
+            //set bounds
+            createBoundsFromPath( shape.getPath() , spremenljivka );
+            map.fitBounds(bounds[spremenljivka]);
+        }
+    }
+    //for admins, show shapes
+    else{
+        var keys = Object.keys(map_data);  
+
+        for (var i=0; i<keys.length; i++)
+        {
+            var color = mapShapeColors[i % mapShapeColors.length];
+
+            //set and show the shape
+            shapeOption.path = map_data[keys[i]];
+            shapeOption.strokeColor = '#'+color;
+            shapeOption.strokeColorOrg = '#'+color;
+            var shape = shape_type === 'polyline' ? 
+                new google.maps.Polyline(shapeOption) : new google.maps.Polygon(shapeOption);
+
+            google.maps.event.addListener(shape, 'mouseover', function() { this.setOptions({strokeWeight: 6, strokeColor: 'black', zIndex: 2}); });
+            google.maps.event.addListener(shape, 'mouseout', function() { this.setOptions({strokeWeight: 4, strokeColor: this.strokeColorOrg , zIndex: 1}); });
+    
+            //set bounds
+            createBoundsFromPath( shape.getPath() , 'all' );
+            map.fitBounds(bounds['all']);
+        }
+    }
+}
+
+/**
+ * Polyline options holder
+ * @param map google map, to put polyline in it
+ * @returns {polylineOptions.PolylineAnonym$6}
+ */
+function polylineOptions(map){
+    return {
+        strokeColor: 'black',
+        strokeColorOrg: 'black',
+        strokeWeight: 4,
+        clickable: true,
+        editable: !viewMode,
+        zIndex: 1,
+        map: map
+    };
+}
+
+/**
+ * Polygon options holder
+ * @param map google map, to put polygon in it
+ * @returns {polygonOptions.PolygonAnonym$6}
+ */
+function polygonOptions(map){
+    return {
+        strokeColor: 'black',
+        strokeColorOrg: 'black',
+        strokeWeight: 4,
+        clickable: true,
+        editable: !viewMode,
+        zIndex: 1,
+        map: map
+    };
+}
+\ No newline at end of file