/home/dvjjulio/softtrash/storage/framework/views/35f5be4fe48fe956a236e35831ae8a45
<?php $__env->startSection('content'); ?>
<!-- Page content -->
<div id="page-content">
<!-- Dashboard Header -->
<!-- For an image header add the class 'content-header-media' and an image as in the following example -->
<div class="content-header">
<div class="header-section">
<div class="row">
<!-- Main Title (hidden on small devices for the statistics to fit) -->
<div class="col-md-4 col-lg-6 hidden-xs hidden-sm">
<h1>Redes de<strong> Poder </strong></h1>
</div>
</div>
</div>
</div>
<!-- END Dashboard Header -->
<div class="block">
<!-- Basic Form Elements Title -->
<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>
<!-- END Form Elements Title -->
<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><!-- Required for data-placeholder attribute to work with Chosen plugin -->
<?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><!-- Required for data-placeholder attribute to work with Chosen plugin -->
<?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><!-- Required for data-placeholder attribute to work with Chosen plugin -->
<?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><!-- Required for data-placeholder attribute to work with Chosen plugin -->
<?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><!-- strong id="actor-name">Aristoteles Sandoval</strong -->
</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><!-- Required for data-placeholder attribute to work with Chosen plugin -->
<?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><!-- Required for data-placeholder attribute to work with Chosen plugin -->
<?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><!-- Required for data-placeholder attribute to work with Chosen plugin -->
<option value="2">Segundo nivel</option><!-- Required for data-placeholder attribute to work with Chosen plugin -->
<option value="3">Tercer Nivel</option><!-- Required for data-placeholder attribute to work with Chosen plugin -->
</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>
<!-- User Settings, modal which opens from Settings link (found in top right user menu) and the Cog link (found in sidebar user info) -->
<div id="modal-delete-relationship" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header text-center">
<h2 class="modal-title"><i class="fa fa-pencil"></i>Relaciones</h2>
</div>
<!-- END Modal Header -->
<!-- Modal Body -->
<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>
<!-- END Modal Body -->
</div>
</div>
</div>
<!-- END User Settings -->
<!-- END Page Content -->
<?php echo Html::script('js/PowerNetwork.js'); ?>
<?php echo Html::style('css/nodes.css'); ?>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
// set up SVG for D3
var Graph = function(){
return {
nodes: null,
links: null,
lastNodeId: null,
width: 960,
height: 500,
colors: d3.scale.category10(),
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();
}
function spliceLinksForNode(node) {
var toSplice = Graph.links.filter(function(l) {
return (l.source === node || l.target === node);
});
toSplice.map(function(l) {
Graph.links.splice(Graph.links.indexOf(l), 1);
});
}
// 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(); ?>