KOKINIO - MANAGER

Edit File: 35f5be4fe48fe956a236e35831ae8a45

<?php $__env->startSection('content'); ?>
    
    <div id="page-content">
        
        
        <div class="content-header">
            <div class="header-section">
                <div class="row">
                    
                    <div class="col-md-4 col-lg-6 hidden-xs hidden-sm">
                        <h1>Redes de<strong> Poder </strong></h1>
                    </div>
                </div>
            </div>
        </div>

<div class="block">
            
            <div class="block-title">
                <div class="block-options pull-right">
                    <a href="javascript:void(0)" class="btn btn-alt btn-sm btn-default toggle-bordered enable-tooltip" data-toggle="button" title="Toggles .form-bordered class">No Borders</a>
                </div>
                <h2><strong>Redes de</strong> Poder</h2>
            </div>
            
            <div class="row">
                <div class="col-sm-5">
                    <div class="block">
                        <div class="block-title">
                            <h3>Crear Nueva relacion</h3>
                        </div>
                        <form class="form-horizontal" onclick="false;">
                            <input type="hidden" name="csrf-token" id="csrf-token" value="<?php echo e(Session::token()); ?>">
                            <div class="form-group">
                                <label class="col-md-5 control-label" for="actor_id">Actor Principal</label>
                                <div class="col-md-5">
                                    <select id="actor_id" name="actor_id" class="select-chosen form-control"    data-placeholder="Actor principal">
                                        <?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-5 control-label" for="related_actor_id">Actor Relacionado</label>
                                <div class="col-md-5">
                                    <select id="related_actor_id" name="related_actor_id" class="select-chosen form-control"    data-placeholder="Actor Relacionado">
                                        <?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-5 control-label" for="typerelationship_id">Tipo de Relacion</label>
                                <div class="col-md-5">
                                    <select id="typerelationship_id" name="typerelationship_id" class="select-chosen form-control"    data-placeholder="Tipo de Relacion">
                                        <?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 else: ?>
                                            <option></option>
                                        <?php endif; ?>
                                    </select>
                                </div>
                                <button class="btn btn-sm btn-primary" type="submit" id="send-btn">
                                    <i class="fa fa-lock"></i>
                                    Guardar
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-sm-5">
                    <div class="block">
                        <div class="block-title">
                            <h3>Elimina Relacion</h3>
                        </div>
                        <form class="form-horizontal form-bordered" onclick="false;">
                            <input type="hidden" name="csrf-token" id="csrf-token" value="<?php echo e(Session::token()); ?>">
                            <div class="form-group">
                                <label class="col-md-5 control-label" for="actor_id">Actor Principal</label>
                                <div class="col-md-5">
                                    <select id="del-rel-actor-id" name="actor_id" class="select-chosen form-control"    data-placeholder="Actor principal">
                                        <?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 form-actions">
                                <div class ="col-md-9 col-md-offset-5">
                                <button class="btn btn-sm btn-primary" type="submit" id="btn-modal-delete">
                                    <i class="fa fa-lock"></i>
                                    Listar Relaciones
                                </button></div>
                            </div>
                        </form>
                    </div>
                </div>
            <div class="row">
                <div class="col-sm-11">
                    <div class="block">
                        <div class="block-title">
                            <h2><strong>Red de personajes</strong></h2>
                        </div>
                        <div>
                            <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>
                        </div>
                    </div>
                    <svg id="my_svg" ></svg>
                    </div>
                </div>
            </div>
        </div>
    </div>
        
        <div id="modal-delete-relationship" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    
                    <div class="modal-header text-center">
                        <h2 class="modal-title"><i class="fa fa-pencil"></i>Relaciones</h2>
                    </div>

<div class="modal-body">
                        <form method="post" enctype="multipart/form-data" class="form-horizontal form-bordered" onsubmit="return false;">
                            <input type="hidden" id="_token" name="_token" value="<?php echo e(csrf_token()); ?>">
                            <fieldset>
                                <div class="form-group">
                                    <label id="lbl-actor-name"class="col-md-4 control-label"></label>
                                </div>
                                <div class="block">
                                    <table id="table-relationships">
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                    
                </div>
            </div>
        </div>

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

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

init: function(){
                    var width  = 960,
                            height = 500,
                            colors = d3.scale.category10();

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

// set up initial nodes and links
                    //  - nodes are known by 'id', not by index in array.
                    //  - reflexive edges are indicated on the node (as a bold black circle).
                    //  - links are always source < target; edge directions are set by 'left' and 'right'.

// init D3 force layout
                    var force = d3.layout.force()
                            .nodes(Graph.nodes)
                            .links(Graph.links)
                            .size([Graph.width, Graph.height])
                            .linkDistance(200)
                            .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)
                                .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;

// reposition drag line
                                    drag_line
                                            .style('marker-end', 'url(#end-arrow)')
                                            .classed('hidden', false)
                                            .attr('d', 'M' + mousedown_node.x + ',' + mousedown_node.y + 'L' + mousedown_node.x + ',' + mousedown_node.y);

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; });

// 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;
                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(); ?>