FM / delivery-area

/var/www/vhosts/nabawater/backend/views/delivery-area/

/var/www/vhosts/nabawater/backend/views/delivery-area

Name	Size	Mode	Actions
create.php	401	0644	edit dl rm
index.php	2634	0644	edit dl rm
update.php	382	0644	edit dl rm
_form.php	6728	0644	edit dl rm
_js.php	25479	0644	edit dl rm

Edit: /var/www/vhosts/nabawater/backend/views/delivery-area/_js.php (25479B)

<?php

use yii\helpers\Url;
use common\helpers\Com;

?>
<script type="text/javascript">
    window.SHAPE            = [];
    window.EDIT_DATA        = 'SES_EDIT_DATA';
    window.DEFAULT_POINT    = 'SES_DEFAULT_POINT';

runOnLoad(function () {
        
        Core.setSession(DEFAULT_POINT, JSON.stringify(<?= $loc; ?>));

$('#add_zone').on('show.bs.collapse', function () {
            $(this).find('input[name="zone_name"]').val('Zone ' + (parseInt($('.zone-panel').length) + 1));
            $('#delivery-zone').addClass('is-zone-add');

setDrawingMode($(this).find('[name="DeliveryArea[delivery_area_type]"]:checked').val());
        });

$('#add_zone').on('hide.bs.collapse', function () {
            $('#delivery-zone').removeClass('is-zone-add');

setDrawingMode();
        });

$('#add_zone [name="DeliveryArea[delivery_area_type]"]').on('change', function (e) {
            var index = $(this).parents('.zone_group').attr('data-src'), shape;
            shape = getShape(index);
            if (shape !== false) {
                // TODO : Ask the user to further precedence
                Core.error('You may loss your data');
                shape.shape.setMap(null);
                removeShape(index);
            }
            setDrawingMode($(this).val());
        });
      
        <?php
            if ($id != '') {
                ?>
                getZoneData('update');
                <?php
            }
        ?>
    });

/**
     * This method is used to set the drawing tool on map
     * @param mode
     */
    function setDrawingMode(mode) {
        if ( typeof mode === 'string'){
            mode = mode.toLowerCase();
        }
        var options = {editable: true}, colorScheme = getColorScheme();
        switch ( mode ){           
            case '1' :
                mode = google.maps.drawing.OverlayType.CIRCLE;
                options.circleOptions = {
                    strokeColor: colorScheme[0],
                    fillColor: colorScheme[1]
                };
                break;
            case '2':
                mode = google.maps.drawing.OverlayType.POLYGON;
                options.polygonOptions = {
                    strokeColor: colorScheme[0],
                    fillColor: colorScheme[1]
                };
                break;
            default:
                mode = google.maps.drawing.OverlayType.HAND;
                delete options.editable;
                break;
        }
        options.drawingMode = mode;

DRAWING_MANAGER.setOptions( options );
    }

/**
     * This method pushes the drawn shape's object in to an GLOBAL Array {{SHAPE}} based on the given
     * unique index, index => 'new' form newly drawn shape object
     * @param index
     * @param shapeJson
     */
    function pushShape( index, shapeJson ) {
        SHAPE.push({
            id: index,
            data: shapeJson
        });
    }

/**
     * This method is used to update the index of GLOBAL Array {{SHAPE}} for the given index
     * mainly used to change the 'new' index to id got from server after shape saved to server.
     * @param index
     * @param id
     */
    function updateShapeIndex(index, id) {
        console.log(arguments);
        for (var key in SHAPE){
            if(SHAPE[key].id === index){
                SHAPE[key].id = id;
                break;
            }
        }
    }

/**
     * This method is used to get the shape object from given index
     * @param index
     * @returns {boolean}
     */
    function getShape(index) {
        var data = false, key;
        for (key in SHAPE){
            if(SHAPE[key].id === index){
                data = SHAPE[key].data;
                break;
            }
        }
        return data;

}

/**
     * This method is used to remove the shape from the GLOBAL Array {{SHAPE}} and
     * reindex the array
     * @param index
     */
    function removeShape(index) {
        for (var key in SHAPE){
            if(SHAPE[key].id === index){
                delete SHAPE[key];
                reindex();
                break;
            }
        }
        // Private function to reindex the GLOBAL Array {{SHAPE}}
        function reindex() {
            var temp = [], key;
            for (key in SHAPE){
                if( key === undefined ){
                    continue;
                }
                temp.push(SHAPE[key]);
            }
            window.SHAPE = temp;
        }
    }

/**
     * This method used to get the color pair to draw the shape
     * with given fill and stroke color.
     * @returns {*}
     */
    function getColorScheme() {
        return Core.colors[ SHAPE.length ];
    }

/**
     * This method is used to idealize the MAP in drawing mode
     */
    function initMap() {
        var location = <?= $loc; ?>;

if( location.lat === undefined ){
            // TODO : Redirect to location page
            location = Core.DEFAULT_MAP_LOCATION;
        }

window.MAP = new google.maps.Map(
            document.getElementById('map'),
            Core.mapConfig({center: location, disableDefaultUI: false})
        );
        // Create a marker and set its position.
        /*new google.maps.Marker({
            map: MAP,
            position: location,
            animation: google.maps.Animation.DROP,
            icon: '<?php echo com::res('img/map_pin.png');?>',
        });*/

var defaultDrawingOption = {
            drawingControl: false,
            circleOptions: {
                strokeOpacity: 0.8,
                strokeWeight: 3,

fillOpacity: 0.35
            },
            polygonOptions: {
                strokeOpacity: 0.8,
                strokeWeight: 3,

fillOpacity: 0.35
            }
        };
        window.DRAWING_MANAGER = new google.maps.drawing.DrawingManager( defaultDrawingOption );
        DRAWING_MANAGER.setMap(MAP);
        setDrawingMode();

google.maps.event.addListener(DRAWING_MANAGER, 'overlaycomplete', function(event) {
            pushShape('new', {
                'type'  : event.type,
                'shape' : event.overlay
            });
            event.overlay.setEditable(true);
            setDrawingMode();
        });

var input = document.getElementById('searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);
        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();
            var PLplaceName = place.name;
            var PLlatitude = place.geometry.location.lat();
            var PLlongitude = place.geometry.location.lng();
            
            MAP.setCenter(new google.maps.LatLng(PLlatitude, PLlongitude));
            
        });

//getZoneData();
    }

/**
     * This method used to fetch the delivery zone from server
     */
    function getZoneData(value = '') {
        if (value == '') {
            initMap();
        }
        
        addShapePanel(null, 'new');
        var zone, shapeInput, colorScheme, shape;
        var id = '<?= $id ?>';
        Core.ajax({
            url  : '<?= Url::to(['get']) ?>',
            type : 'post',
            data : { id : id},
            done : function (json) {
                json = JSON.parse(json);
                json = json.zone;
                if( Core.getObjectLength(json) === 0 ){
                    console.log('No Delivery zone found or saved !');
                    return;
                }
                                    
                colorScheme = getColorScheme();
                for(zone in json) {
                    shape = {};
                    zone = json[zone];
                    delivery_area_name = (id != '') ? zone['delivery_area_name'] : '';

addShapePanel({
                        id: zone['id'],
                        data: zone,
                        color: colorScheme[0],
                        name: zone['delivery_area_name']
                    });
                   
                    shape = {
                        id: zone.id,
                        type: zone.type,
                    };

switch (zone.type) {
                        case google.maps.drawing.OverlayType.CIRCLE:
                            zone = zone.shapeJson;

shapeInput = {
                                radius: parseFloat(zone.radius),
                                data: {
                                    lat: parseFloat(zone.data.lat),
                                    lng: parseFloat(zone.data.lng)
                                }
                            };
                            
                            shapeCenter = shapeInput.data;
                            MAP.panTo( shapeCenter );
                            
                            shape.shape = new google.maps.Circle({
                                strokeColor: colorScheme[0],
                                strokeOpacity: 0.8,
                                strokeWeight: 3,
                                fillColor: colorScheme[1],
                                fillOpacity: 0.35,
                                map: MAP,
                                center: shapeInput.data,
                                radius: shapeInput.radius
                            });
                            break;
                            
                        case google.maps.drawing.OverlayType.POLYGON:
                            zone = zone.shapeJson.data;
                            shapeInput = [];
                            var bounds = new google.maps.LatLngBounds();
                            for (var index in zone) {
                                index = zone[index];
                                shapeInput.push({
                                    lat: parseFloat(index['lat']),
                                    lng: parseFloat(index['lng'])
                                });
                                
                                bounds.extend(index);
                            }
                                                        
                            shapeCenter = bounds.getCenter().toJSON();

MAP.panTo(shapeCenter);
       
                            shape.shape = (new google.maps.Polygon({
                                paths: shapeInput,
                                strokeColor: colorScheme[0],
                                strokeOpacity: 0.8,
                                strokeWeight: 3,

fillColor: colorScheme[1],
                                fillOpacity: 0.35,

map: MAP
                            }));
                            break;
                    }
                    pushShape(shape.id, shape);
                    $('#delivery_area_name').val(delivery_area_name);
                }
                
                $('.ahref_edit').click();
//                $('.ahref_edit').parent('span').parent('h3').css('display', 'none');
            }
        });
    }

/**
     * This method is used to save the drawn shape on map
     * @param obj
     * @param editMode
     * @returns {boolean}
     */
    function zoneSave(obj, editMode) {
        $('.ahref_edit').parent('span').parent('h3').css('display', 'block');
        var cls = '.zone_group';
        editMode = editMode !== undefined;

if ( editMode ){
            cls = '.zone-panel';
            $(obj).parents('.zone_form').css('display', 'none');
        }
        obj = $(obj).parents(cls);

if($('#delivery_area_name').val() == ''){
            Core.error('Please enter area name');
            return false;
        }

var index = obj.attr('data-src'), shape, deliveryZone;
        shape = getShape(index);

if(shape === false){
            Core.error('Please draw the circle / shape');
            return false;
        }

if( validate(obj) ){
            return false;
        }

deliveryZone = {
            id: index === 'new' ? 0 : index,
            type: shape.type,
            delivery_area_name: $('#delivery_area_name').val(),
            shapeJson: {}
        };

switch (shape.type){
            case google.maps.drawing.OverlayType.CIRCLE:
                deliveryZone.shapeJson = {
                    radius: shape.shape.getRadius(),
                    data: shape.shape.getCenter().toJSON()
                };
                break;
            case google.maps.drawing.OverlayType.POLYGON:
                deliveryZone.shapeJson.data = polygonPath(shape.shape.getPath().getArray());
                break;
        }

Core.ajax({
            url  : '<?= Url::to(['create']) ?>',
            data : { deliveryZone : deliveryZone },
            done : function (json) {
                json = JSON.parse(json);
                if( json.status === 1 ){
                   // shape.shape.setEditable( false );
                   // shape.shape.setDraggable(false);

if( editMode ){
                        // updateShapePanel(json.data);

// obj.slideUp('slow', function () {
                        //     $(this).removeClass('edit-mode');
                        //     $(this).slideDown('slow');
                        //     $('#delivery-zone').removeClass('is-zone-edit');
                        // });
                        // $('.ahref_edit').click();
                        // $('.ahref_edit').parent('span').parent('h3').css('display', 'none');
                        //Core.success('Updated !');
                        window.location.href = '<?= Url::to(['index']) ?>';
                    }else{

// updateShapeIndex('new', json.data.id);
                        // addShapePanel({
                        //     id: json.data.id,
                        //     data: json.data,
                        //     color: getShape(json.data.id).shape.strokeColor
                        // });
                      //  Core.success('Delivery Area Added successfully !');
                        //$('#add_zone').collapse('toggle');
                        window.location.href = '<?= Url::to(['index']) ?>';
                    }
                    return;
                }
                if ( json.msg === undefined || json.msg.length === 0 ){
                    json.msg = 'Unable to process your request ';
                }
                Core.error(json.msg);
                if( json.error !== undefined && Core.getObjectLength(json.error) !== 0 ){
                    console.log(json.error);
                    for ( var error in json.error) {
                        Core.error(json.error[error][0]);
                    }
                }
            }
        });

function validate(obj) {
            var hasError = false, inputEle = $(obj).find('input.form_control'), hasFocus = false;

inputEle.parents('li').removeClass('has-error');
            $(obj).find(".form_control")
                .attr('data-placement', 'left')
                .removeAttr('data-toggle')
                .tooltip('destroy');

$(inputEle).each(function () {
                if($(this).val() === '') {
                    $(this).attr('title', 'Required field').attr('data-toggle', 'tooltip');
                    $(this).parents('li').addClass('has-error');
                    hasError = true;
                    if( !hasFocus ){
                        $(this).focus();
                        hasFocus = true;
                    }

if( $(this).attr('type') === 'number' && isNaN($(this).val()) ) {
                        $(this).attr('title', 'Invalid input').attr('data-toggle', 'tooltip');

$(this).parents('li').addClass('has-error');
                        hasError = true;
                        if( !hasFocus ){
                            $(this).focus();
                            hasFocus = true;
                        }
                    }
                }
            });

setTimeout(function () {
                $(obj).find(".form_control[data-toggle='tooltip']").tooltip({'trigger':'manual'}).tooltip('show');
            }, 400);

return hasError;
        }
    }

/**
     * This method is used listen the edit panel cancel event.
     * @param obj
     * @param editMode
     */
    function onZoneCancel(obj, editMode) {
        var cls = '.zone_group';
        editMode = editMode !== undefined;

if ( editMode ){
            cls = '.zone-panel';
        }
        obj = $(obj).parents(cls);

var index = obj.attr('data-src'), shape;

shape = getShape(index);
        if( shape === false ){
            return;
        }
        if( editMode === false ){
            // TODO: Warn the user that they may loss the data that they have drawn
            shape.shape.setMap(null);
            removeShape(index);
        }else{
            //TODO : Check whether edit made to shape and alert the user for same
            var editData;
            if( Core.isSession(EDIT_DATA) ){
                editData = JSON.parse(Core.session(EDIT_DATA));

if( shape.type === google.maps.drawing.OverlayType.CIRCLE ){
                    shape.shape.setCenter(editData.data);
                    shape.shape.setRadius(editData.radius);
                }else{
                    shape.shape.setPath(editData.data);

}
                Core.removeSession(EDIT_DATA);
            }
            shape.shape.setEditable( false );
            shape.shape.setDraggable(false);

obj.slideUp('slow', function () {
                $(this).find('.zone-edit').slideUp('slow');
                $(this).removeClass('edit-mode');
                $(this).slideDown('slow');
                $('#delivery-zone').removeClass('is-zone-edit');
            });
        }

}

/**
     * This method is used to add the panel for drawn shape
     * @param json
     */
    function addShapePanel(json, type = '') {
        if (type == 'new') {
            $('#delivery-zone-container').html('');
            return false;
        }
        var html = $($('#hidden-zone-template').html()), shapeType;

html.find('.zone_color').css({background: json.color});
        html.attr('data-src', json.id);

// Setting collapse
        var id = 'zone-' + json.id;
        html.find('[data-toggle="collapse"]').attr('data-target', '#' + id);
        html.find('ul').attr('id', id);
        html.find('.zone_name').text('Area '+ ($('.zone-panel').length + 1));

json = json.data;

shapeType = json.type;

if( shapeType === google.maps.drawing.OverlayType.POLYGON ){
            shapeType = 'shape';
        }

$('#delivery-zone-container').append(html[0]);
        $('[data-toggle="tooltip"]').tooltip();

}

/**
     * This method is used to update the panel data based on zone edit data
     * @param json
     */
    function updateShapePanel(json) {
        var html = $('[data-src=' + json.id + ']'), shapeType = json.type;

if( shapeType === google.maps.drawing.OverlayType.POLYGON ){
            shapeType= 'shape';
        }       
    }

/**
     * This method is used to listen the mouseenter event on zone panel,
     * which center's the map and highlights the shpae
     * @param obj
     */
    function onZonePanelMouseEnter(obj) {
        obj = $(obj).parents('.zone-panel').attr('data-src');
        obj = getShape(obj);
        if( obj === false || $('#delivery-zone').hasClass('is-zone-add') ){
            return;
        }

var shapeCenter;
        if( obj.type === google.maps.drawing.OverlayType.POLYGON ){
            var points  = polygonPath(obj.shape.getPath().getArray());
            
            /**
             * @link http://stackoverflow.com/a/3082334/5798881
             */
            var bounds = new google.maps.LatLngBounds();
            for (var x in points){
                bounds.extend(points[x]);
            }
            shapeCenter = bounds.getCenter().toJSON();
        }else{
            shapeCenter = obj.shape.getCenter().toJSON();
        }
        MAP.panTo( shapeCenter );

obj = obj.shape;
        obj.set('custom-fillColor', obj.fillColor);

obj.setOptions({strokeWeight: 5, fillColor: obj.strokeColor});
    }

/**
     * This method is used to listen the mouseleave event on zone panel,
     * which removes the highlights on shape and resets the map center to default
     * @param obj
     */
    function onZonePanelMouseLeave(obj) {
        obj = $(obj).parents('.zone-panel').attr('data-src');
        obj = getShape(obj);
        if( obj === false ){
            return;
        }
        if(Core.isSession(DEFAULT_POINT)){
//            MAP.setCenter(JSON.parse(Core.session(DEFAULT_POINT)));
        }
        obj = obj.shape;
        obj.setOptions({strokeWeight: 3, fillColor : obj.get('custom-fillColor')});
    }

/**
     * This method is used to display the zone edit panel and makes zone shape editable
     * @param obj
     */
    function zoneEdit(obj) {
        // To prevent collapse to toggle
        event.stopPropagation();

var shape;
        obj = $(obj).parents('.zone-panel');

obj.find('.zone-type span:nth-child(2)').text( obj.find('.zone-type span.value').text() );
        
        $('#delivery-zone').addClass('is-zone-edit');

obj.slideDown('slow', function () {
            
            obj.addClass('edit-mode');
//            $(this).slideDown('slow');
//            $(this).find('.zone-edit').slideDown('slow');

shape = getShape($(this).attr('data-src'));
            if( shape === false ){
                // TODO : handle the this situation shape is not present in map for edit mode
                return;
            }
            shape.shape.setEditable( true );
            shape.shape.setDraggable(true);

/**
     * This method is used to delete the zone and removes its sunsequent data that are
     * stored
     * @param obj
     * @returns {boolean}
     */
    function zoneDelete(obj) {
        // To prevent collapse to toggle
        event.stopPropagation();

if( !confirm('Are you sure want to delete ?')) {
            return false;
        }

obj = $(obj).parents('.zone-panel');
        var shape, id = $(obj).attr('data-src');

shape = getShape(id);

if (shape === false) {
            Core.error('Unabel to find the request shape');
            return false;
        }

//console.log(id);return false;
        Core.ajax({
            url  : '<?= Url::to(['delete']) ?>',
            data : { id : id },
            type : 'POST',
            done : function (json) {
                json = JSON.parse(json);
                if( json.status === 1 ){
                    obj.slideUp('slow', function () {
                        $(this).remove();
                        shape.shape.setMap(null);
                        removeShape(id);
                    });
                    Core.success('Deleted successfully !');
                    return;
                }
                if ( json.msg === undefined ){
                    json.msg = 'Unable to process your request ';
                }
                Core.error(json.msg);
            }
        });
    }

/**
     * This method is used to get JSONArray of polygon points
     * @param arr
     * @returns {*}
     */
    function polygonPath(arr) {
        if( !Array.isArray(arr) ){
            console.warn('Given value is not an array');
            arr = [];
        }
        return arr.reduce(function (stack, point) {
            stack.push(point.toJSON());
            return stack;
        }, []);
    }

/**
     * Move's the map view to outlet location
     */
    function centerMap() {
        if(Core.isSession(DEFAULT_POINT) && Core.getObjectLength(JSON.parse(Core.session(DEFAULT_POINT))) > 0){
            MAP.panTo(JSON.parse(Core.session(DEFAULT_POINT)));
        }else{
            Core.error('Set an outlet address & location');
        }
    }

/**
     *
     */
    function refreshDZOperationCtrl() {
        var status = $('input[type="radio"][name="VendorOutlet[has_delivery]"]:checked').val(),
            ele = $('.admin_content');

ele.removeClass('disable-zone-operation');

if( parseInt(status) === 0 ){
            ele.addClass('disable-zone-operation');
        }
    }
</script>

cmd: