KOKINIO - MANAGER

Edit File: ce8b347cc4ba5559ff7317420ef93c00

<?php $__env->startSection('content'); ?>
<script src="<?php echo URL::to('/').'/js/Counters.js'; ?> "></script>

<div id="page-content">
    
    
        <div class="block">
            
            <div class="block-title">
                <h2>Status</h2>
            </div>
            
            <form action="page_forms_general.html"  method="post" enctype="multipart/form-data" class="form-horizontal form-bordered" onsubmit="return false;">
                <div class="row">
                    <div class="col-sm-6 col-lg-3">
                        
                        <a href="page_ready_article.html" class="widget widget-hover-effect1">
                            <div class="widget-simple">
                                <div class="widget-icon pull-left themed-background-autumn animation-fadeIn">
                                    <i class="fa fa-calendar"></i>
                                </div>
                                <h3 class="widget-content text-right animation-pullDown">
                                    <strong><script>document.write(cuentaDiasGobierno)</script></strong> Días de Gobierno<br>
                                    <small><script>document.write(numDiaActual)+document.write("/")+document.write(strMesActual)+document.write("/")+document.write(numAñoActual)</script></small>
                                </h3>
                            </div>
                        </a>
                        
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        
                        <a href="page_comp_charts.html" class="widget widget-hover-effect1">
                            <div class="widget-simple">
                                <div class="widget-icon pull-left themed-background-autumn animation-fadeIn">
                                    <i class="gi gi-stopwatch"></i>
                                </div>
                                <h3 class="widget-content text-right animation-pullDown">
                                    <strong><script>document.write(cuentaInicioProceso)</script></strong> Días para Inicio del Proceso<br>
                                    <small>01/Oct/2017</small>
                                </h3>
                            </div>
                        </a>
                        
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        
                        <a href="page_ready_inbox.html" class="widget widget-hover-effect1">
                            <div class="widget-simple">
                                <div class="widget-icon pull-left themed-background-spring animation-fadeIn">
                                    <i class="fa fa-file-text-o"></i>
                                </div>
                                <h3 class="widget-content text-right animation-pullDown">
                                    <strong><script>document.write(cuentaDiasLicencia)</script></strong> Días para Licencia<br>
                                    <small>13/Nov/2017</small>
                                </h3>
                            </div>
                        </a>
                        
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        
                        <a href="page_comp_gallery.html" class="widget widget-hover-effect1">
                            <div class="widget-simple">
                                <div class="widget-icon pull-left themed-background-spring animation-fadeIn">
                                    <i class="fa fa-bullhorn"></i>
                                </div>
                                <h3 class="widget-content text-right animation-pullDown">
                                    <strong><script>document.write(cuentaInicioCampañas)</script></strong> Días para Inicio de Campañas<br>
                                    <small>02/Mar/2018</small>
                                </h3>
                            </div>
                        </a>
                        
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        
                        <a href="page_ready_article.html" class="widget widget-hover-effect1">
                            <div class="widget-simple">
                                <div class="widget-icon pull-left themed-background-spring animation-fadeIn">
                                    <i class="gi gi-group"></i>
                                </div>
                                <h3 class="widget-content text-right animation-pullDown">
                                    <strong><script>document.write(cuentaDiasTransicion)</script></strong> Días de Transición<br>
                                    <small>06/Dic/2018</small>
                                </h3>
                            </div>
                        </a>
                        
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        
                        <a href="page_comp_charts.html" class="widget widget-hover-effect1">
                            <div class="widget-simple">
                                <div class="widget-icon pull-left themed-background-spring animation-fadeIn">
                                    <i class="gi gi-flag"></i>
                                </div>
                                <h3 class="widget-content text-right animation-pullDown">
                                    <strong><script>document.write(cuentaDiasD)</script> Días para el Día D</strong>
                                    <small>03/Jun/2018</small>
                                </h3>
                            </div>
                        </a>
                        
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        
                        <a href="page_ready_inbox.html" class="widget widget-hover-effect1">
                            <div class="widget-simple">
                                <div class="widget-icon pull-left themed-background-fire animation-fadeIn">
                                    <i class="fa fa-scissors"></i>
                                </div>
                                <h3 class="widget-content text-right animation-pullDown">
                                    <<strong><script>document.write(cuentaDiasRevocacion)</script></strong> Días para Revocación de Mandato<br>
                                    <small>01/Abr/2017</small>
                                </h3>
                            </div>
                        </a>
                        
                    </div>
                </div>
            </form>
            
            
        </div>
     END Dashboard Header -->
            <div class="block">
                
                <div class="block-title">
                    <h2><strong>Redes de</strong> Poder</h2>
                    <form class="form-inline">
                        <div class="form-group">
                            <label class="col-md-2 control-label" for="network-actor-id">Actor</label>
                            <div class="col-md-8">
                                <select id="network-actor-id" name="network-actor-id" class="select-chosen col-md-5 form-control"    data-placeholder="Actor">
                                    <?php if( isset( $actors ) ): ?>
                                        <?php foreach( $actors as $key => $actor ): ?>
                                            <option value="<?php echo e($actor->id); ?>"><?php echo e($actor->name); ?></option>
                                        <?php endforeach; ?>
                                    <?php else: ?>
                                        <option></option>
                                    <?php endif; ?>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="type-relationship-id">Relacion</label>
                            <div class="col-md-8">
                                <select id="type-relationship-id" name="type-relationship-id" class="select-chosen col-md-5 form-control"    data-placeholder="Tipo de Relacion">
                                    <option value="-1">Todos los tipos</option>
                                    <?php if( isset( $types ) ): ?>
                                        <?php foreach( $types as $key => $type ): ?>
                                            <option value="<?php echo e($type->id); ?>"><?php echo e($type->name); ?></option>
                                        <?php endforeach; ?>
                                    <?php endif; ?>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-4 control-label" for="search-depth">Profundidad</label>
                            <div class="col-md-8">
                                <select id="search-depth" name="search-depth" class="select-chosen col-md-5 form-control"    data-placeholder="Profundidad de la busqueda">
                                    <option value="1">Primer nivel</option>
                                    <option value="2">Segundo nivel</option>
                                    <option value="3">Tercer Nivel</option>
                                </select>
                            </div>
                        </div>

<div class="form-group">
                            <button class="btn btn-sm btn-primary" type="submit" id="network-btn">
                                <i class="fa fa-repeat"></i>
                                Cargar
                            </button>
                        </div>
                    </form>
                    <svg id="my_svg" ></svg>
                </div>
               </div>
                </div>
            </div>
</div>

<?php echo Html::script('js/PowerNetwork.js'); ?>

<?php echo Html::style('css/nodes.css'); ?>

init: function(){

var colors = d3.scale.category10();
                var svg = d3.select('svg')
                        .attr('oncontextmenu', 'return false;')
                        .attr('width', Graph.width)
                        .attr('height', Graph.height);

var distance = Math.sqrt( ( Graph.width * Graph.height ) / Math.pow( Graph.lastNodeId,2 ) );
                console.log( distance );
                // init D3 force layout
                var force = d3.layout.force()
                        .nodes(Graph.nodes)
                        .links(Graph.links)
                        .size([Graph.width, Graph.height])
                        .linkDistance( distance )
                        .charge(-800)
                        .on('tick', tick)

// define arrow markers for graph links
                svg.append('svg:defs').append('svg:marker')
                        .attr('id', 'end-arrow')
                        .attr('viewBox', '0 -5 10 10')
                        .attr('refX', 6)
                        .attr('markerWidth', 3)
                        .attr('markerHeight', 3)
                        .attr('orient', 'auto')
                        .append('svg:path')
                        .attr('d', 'M0,-5L10,0L0,5')
                        .attr('fill', '#000');

svg.append('svg:defs').append('svg:marker')
                        .attr('id', 'start-arrow')
                        .attr('viewBox', '0 -5 10 10')
                        .attr('refX', 4)
                        .attr('markerWidth', 3)
                        .attr('markerHeight', 3)
                        .attr('orient', 'auto')
                        .append('svg:path')
                        .attr('d', 'M10,-5L0,0L10,5')
                        .attr('fill', '#000');

// line displayed when dragging new nodes
                var drag_line = svg.append('svg:path')
                        .attr('class', 'link dragline hidden')
                        .attr('d', 'M0,0L0,0');

// handles to link and node element groups
                var path = svg.append('svg:g').selectAll('path'),
                        circle = svg.append('svg:g').selectAll('g');

// mouse event vars
                var selected_node = null,
                        selected_link = null,
                        mousedown_link = null,
                        mousedown_node = null,
                        mouseup_node = null;

function resetMouseVars() {
                    mousedown_node = null;
                    mouseup_node = null;
                    mousedown_link = null;
                }

// update force layout (called automatically each iteration)
                function tick() {
                    // draw directed edges with proper padding from node centers
                    path.attr('d', function(d) {
                        var deltaX = d.target.x - d.source.x,
                                deltaY = d.target.y - d.source.y,
                                dist = Math.sqrt(deltaX * deltaX + deltaY * deltaY),
                                normX = deltaX / dist,
                                normY = deltaY / dist,
                                sourcePadding = d.left ? 17 : 12,
                                targetPadding = d.right ? 17 : 12,
                                sourceX = d.source.x + (sourcePadding * normX),
                                sourceY = d.source.y + (sourcePadding * normY),
                                targetX = d.target.x - (targetPadding * normX),
                                targetY = d.target.y - (targetPadding * normY);
                        return 'M' + sourceX + ',' + sourceY + 'L' + targetX + ',' + targetY;
                    });

circle.attr('transform', function(d) {
                        return 'translate(' + d.x + ',' + d.y + ')';
                    });
                }

// update graph (called when needed)
                function restart() {
                    // path (link) group
                    path = path.data(Graph.links);

// update existing links
                    path.classed('selected', function(d) { return d === selected_link; })
                            .style('marker-start', function(d) { return d.left ? 'url(#start-arrow)' : ''; })
                            .style('marker-end', function(d) { return d.right ? 'url(#end-arrow)' : ''; });

// add new links
                    path.enter().append('svg:path')
                            .attr('class', 'link')
                            .classed('selected', function(d) { return d === selected_link; })
                            .style('marker-start', function(d) { return d.left ? 'url(#start-arrow)' : ''; })
                            .style('marker-end', function(d) { return d.right ? 'url(#end-arrow)' : ''; })
                            .on('mousedown', function(d) {
                                if(d3.event.ctrlKey) return;

// select link
                                mousedown_link = d;
                                if(mousedown_link === selected_link) selected_link = null;
                                else selected_link = mousedown_link;
                                selected_node = null;
                                restart();
                            });
                    // remove old links
                    path.exit().remove();
                    // circle (node) group
                    // NB: the function arg is crucial here! nodes are known by id, not by index!
                    circle = circle.data( Graph.nodes, function(d) { return d.id; });
                    // update existing nodes (reflexive & selected visual states)
                    circle.selectAll('circle')
                            .style('fill', function(d) { return (d === selected_node) ? d3.rgb(colors(d.id)).brighter().toString() : colors(d.id); })
                            .classed('reflexive', function(d) { return d.reflexive; });
                    // add new nodes
                    var g = circle.enter().append('svg:g');
                    g.append('svg:circle')
                            .attr('class', 'node')
                            .attr('r', 12)
                            .attr('active_', 'false' )
                            .style('fill', function(d) { return (d === selected_node) ? d3.rgb(colors(d.id)).brighter().toString() : colors(d.id); })
                            .style('stroke', function(d) { return d3.rgb(colors(d.id)).darker().toString(); })
                            .classed('reflexive', function(d) { return d.reflexive; })
                            .on('mouseover', function(d) {
                                if(!mousedown_node || d === mousedown_node) return;
                                // enlarge target node
                                d3.select(this).attr('transform', 'scale(1.1)');
                            })
                            .on('mouseout', function(d) {
                                if(!mousedown_node || d === mousedown_node) return;
                                // unenlarge target node
                                d3.select(this).attr('transform', '');
                            })
                            .on('mousedown', function(d) {
                                if(d3.event.ctrlKey) return;

// select node
                                mousedown_node = d;
                                if(mousedown_node === selected_node) selected_node = null;
                                else selected_node = mousedown_node;
                                selected_link = null;

if( d3.select(this).attr('active_') == 'false' ){
                                    d3.select(this).attr('transform', 'scale(3.1)');
                                    d3.select(this).attr('active_', 'true' );
                                    var _name_ = $( 'text', $( this ).parent() ).html();
                                    $.ajax({
                                        url: main_path + '/redespoder/actor/relationships/byname/' + _name_,
                                        data: {},
                                        type: 'POST',
                                        success:  function(response) {

}, fail: function(response){

}
                                    });
                                } else {
                                    d3.select(this).attr('transform', 'scale(1.1)');
                                    d3.select(this).attr('active_', 'false' );
                                    var _name_ = $( 'text', $( this ).parent() ).html();
                                }
                                restart();
                            })
                            .on('mouseup', function(d) {
                                if(!mousedown_node) return;

// needed by FF
                                drag_line
                                        .classed('hidden', true)
                                        .style('marker-end', '');

// check for drag-to-self
                                mouseup_node = d;
                                if(mouseup_node === mousedown_node) { resetMouseVars(); return; }

// unenlarge target node
                                d3.select(this).attr('transform', '');

// add link to graph (update if exists)
                                // NB: links are strictly source < target; arrows separately specified by booleans
                                var source, target, direction;
                                if(mousedown_node.id < mouseup_node.id) {
                                    source = mousedown_node;
                                    target = mouseup_node;
                                    direction = 'right';
                                } else {
                                    source = mouseup_node;
                                    target = mousedown_node;
                                    direction = 'left';
                                }

var link;
                                link = Graph.links.filter(function(l) {
                                    return (l.source === source && l.target === target);
                                })[0];

if(link) {
                                    link[direction] = true;
                                } else {
                                    link = {source: source, target: target, left: false, right: false};
                                    link[direction] = true;
                                    links.push(link);
                                }

// select new link
                                selected_link = link;
                                selected_node = null;
                                restart();
                            });

// show node IDs
                    g.append('svg:text')
                            .attr('x', 0)
                            .attr('y', 2)
                            .attr('class', 'id')
                            .text(function(d) { return d.id; });
                    // Adding data to events
//                    g.attr('backend_id', 'id').text(function(d) { return d.position; });
                    // remove old nodes
                    circle.exit().remove();

// set the graph in motion
                    force.start();
                }

function mousedown() {
                    // prevent I-bar on drag
                    //d3.event.preventDefault();

// because :active only works in WebKit?
                    svg.classed('active', true);

if(d3.event.ctrlKey || mousedown_node || mousedown_link) return;

// insert new node at point
                    var point = d3.mouse(this),
                            node = {id: ++Graph.lastNodeId, reflexive: false};
                    node.x = point[0];
                    node.y = point[1];
//                    Graph.nodes.push(node);
                    restart();
                }

function mousemove() {
                    if(!mousedown_node) return;

// update drag line
                    drag_line.attr('d', 'M' + mousedown_node.x + ',' + mousedown_node.y + 'L' + d3.mouse(this)[0] + ',' + d3.mouse(this)[1]);

restart();
                }

function mouseup() {
                    if(mousedown_node) {
                        // hide drag line
                        drag_line
                                .classed('hidden', true)
                                .style('marker-end', '');
                    }

// because :active only works in WebKit?
                    svg.classed('active', false);

// clear mouse event vars
                    resetMouseVars();
                }

// only respond once per keydown
                var lastKeyDown = -1;

function keydown() {
                    d3.event.preventDefault();

if(lastKeyDown !== -1) return;
                    lastKeyDown = d3.event.keyCode;

// ctrl
                    if(d3.event.keyCode === 17) {
                        circle.call(force.drag);
                        svg.classed('ctrl', true);
                    }

if(!selected_node && !selected_link) return;
                    switch(d3.event.keyCode) {
                        case 8: // backspace
                        case 46: // delete
                            if(selected_node) {
                                Graph.nodes.splice(Graph.nodes.indexOf(selected_node), 1);
                                spliceLinksForNode(selected_node);
                            } else if(selected_link) {
                                Graph.links.splice(Graph.links.indexOf(selected_link), 1);
                            }
                            selected_link = null;
                            selected_node = null;
                            restart();
                            break;
                        case 66: // B
                            if(selected_link) {
                                // set link direction to both left and right
                                selected_link.left = true;
                                selected_link.right = true;
                            }
                            restart();
                            break;
                        case 76: // L
                            if(selected_link) {
                                // set link direction to left only
                                selected_link.left = true;
                                selected_link.right = false;
                            }
                            restart();
                            break;
                        case 82: // R
                            if(selected_node) {
                                // toggle node reflexivity
                                selected_node.reflexive = !selected_node.reflexive;
                            } else if(selected_link) {
                                // set link direction to right only
                                selected_link.left = false;
                                selected_link.right = true;
                            }
                            restart();
                            break;
                    }
                }

function keyup() {
                    lastKeyDown = -1;

// ctrl
                    if(d3.event.keyCode === 17) {
                        circle
                                .on('mousedown.drag', null)
                                .on('touchstart.drag', null);
                        svg.classed('ctrl', false);
                    }
                }

// app starts here
                svg.on('mousedown', mousedown)
                        .on('mousemove', mousemove)
                        .on('mouseup', mouseup);
                d3.select(window)
                        .on('keydown', keydown)
                        .on('keyup', keyup);
                restart();
            }
        }
    }();
    //My settings :)
    PowerNetwork.init();
    //end of setting events
    $.ajax({
        url: main_path + '/mas_test',
        data: {},
        type: 'GET',
        success: function( response ){
            // init D3 force layout
            Graph.nodes         = response.nodes;
            Graph.lastNodeId    = response.lastNodeId;
            Graph.links         = response.links;
            if( Graph.nodes != null && Graph.nodes.length > 0 ){
                Graph.init();
            }

}, fail: function ( response ) {
            PowerNetwork.nodes = [
                        {id: 'Aristoteles Sandoval', reflexive: false},
                        {id: 'Papayon', reflexive: true },
                        {id: 'Coco Velazquez', reflexive: false}
                    ],
                    PowerNetwork.lastNodeId = 2,
                    PowerNetwork.links = [
                        {source: nodes[ 0 ], target: nodes[ 2 ], left: false, right: true },
                        {source: nodes[ 0 ], target: nodes[ 1 ], left: false, right: true },
                        {source: nodes[ 2 ], target: nodes[ 1 ], left: false, right: true }
                    ];
        }
    });
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layout', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>