/home/dvjjulio/softtrash/storage/framework/views/ce8b347cc4ba5559ff7317420ef93c00
<?php $__env->startSection('content'); ?>
<script src="<?php echo URL::to('/').'/js/Counters.js'; ?> "></script>
<!-- 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="block">
<!-- Example Title -->
<div class="block-title">
<h2>Status</h2>
</div>
<!-- END Example Title -->
<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">
<!-- Widget -->
<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>
<!-- END Widget -->
</div>
<div class="col-sm-6 col-lg-3">
<!-- Widget -->
<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>
<!-- END Widget -->
</div>
<div class="col-sm-6 col-lg-3">
<!-- Widget -->
<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>
<!-- END Widget -->
</div>
<div class="col-sm-6 col-lg-3">
<!-- Widget -->
<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>
<!-- END Widget -->
</div>
<div class="col-sm-6 col-lg-3">
<!-- Widget -->
<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>
<!-- END Widget -->
</div>
<div class="col-sm-6 col-lg-3">
<!-- Widget -->
<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>
<!-- END Widget -->
</div>
<div class="col-sm-6 col-lg-3">
<!-- Widget -->
<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>
<!-- END Widget -->
</div>
</div>
</form>
<!-- END Basic Form Elements Content -->
<!-- END Example Block-->
</div>
END Dashboard Header -->
<div class="block">
<!-- Basic Form Elements Title -->
<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><!-- 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>
<svg id="my_svg" ></svg>
</div>
</div>
</div>
</div>
</div>
<!-- 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 {
// 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'.
nodes: null,
links: null,
lastNodeId: null,
width: 1560,
height: 800,
colors: d3.scale.category10(),
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();
}
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;
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(); ?>