refactored javascript codes in project_map.php
This commit is contained in:
parent
35d92f2950
commit
615925180d
@ -198,7 +198,7 @@ class Graph extends Controller
|
||||
print codepot_json_encode ($rg);
|
||||
}
|
||||
|
||||
function enjson_project_user_relation_graph ($filter = '')
|
||||
function enjson_project_members ($filter = '')
|
||||
{
|
||||
$this->load->model ('ProjectModel', 'projects');
|
||||
|
||||
@ -210,7 +210,7 @@ class Graph extends Controller
|
||||
}
|
||||
|
||||
$filter = $this->converter->HexToAscii ($filter);
|
||||
$rel = $this->projects->getProjectUserRelationGraph($filter);
|
||||
$rel = $this->projects->getProjectMembers($filter);
|
||||
print codepot_json_encode($rel);
|
||||
}
|
||||
}
|
||||
|
||||
@ -592,26 +592,15 @@ class ProjectModel extends Model
|
||||
return TRUE;
|
||||
}
|
||||
|
||||
private function _add_rg_node (&$nodeids, &$nodes, $name, $type)
|
||||
{
|
||||
if (array_key_exists($name, $nodeids)) return $nodeids[$name];
|
||||
$nid = count($nodeids);
|
||||
array_push ($nodes, array ('id' => $nid, 'label' => $name, '_type' => $type));
|
||||
$nodeids[$name] = $nid;
|
||||
return $nid;
|
||||
}
|
||||
|
||||
private function _add_rg_edge (&$edges, $from, $to, $label)
|
||||
{
|
||||
array_push ($edges, array ('from' => $from, 'to' => $to, 'label' => $label));
|
||||
}
|
||||
|
||||
function getProjectUserRelationGraph ($filter)
|
||||
function getProjectMembers ($userid_filter)
|
||||
{
|
||||
$this->db->trans_begin ();
|
||||
|
||||
$this->db->select ('project.id,project_membership.userid');
|
||||
if ($filter != '') $this->db->where ('userid', $filter);
|
||||
if (is_array($userid_filter) && count($userid_filter) > 0)
|
||||
$this->db->where_in ('userid', $userid_filter);
|
||||
else if ($userid_filter != '')
|
||||
$this->db->where ('userid', $userid_filter);
|
||||
$this->db->join ('project_membership', 'project_membership.projectid = project.id');
|
||||
$query = $this->db->get ('project');
|
||||
|
||||
@ -622,25 +611,26 @@ class ProjectModel extends Model
|
||||
}
|
||||
|
||||
$result = $query->result ();
|
||||
|
||||
$nodes = array();
|
||||
$nodeids = array();
|
||||
$edges = array();
|
||||
$data = array();
|
||||
|
||||
if (count($result) > 0)
|
||||
{
|
||||
foreach ($result as $r)
|
||||
{
|
||||
$id1 = $this->_add_rg_node ($nodeids, $nodes, $r->id, 'project');
|
||||
$id2 = $this->_add_rg_node ($nodeids, $nodes, $r->userid, 'user');
|
||||
$this->_add_rg_edge ($edges, $id1, $id2, "");
|
||||
if (array_key_exists ($r->id, $data))
|
||||
array_push ($data[$r->id], $r->userid);
|
||||
else
|
||||
$data[$r->id] = array ($r->userid);
|
||||
}
|
||||
|
||||
if ($filter != '')
|
||||
if ((is_array($userid_filter) && count($userid_filter) > 0) || $userid_filter != '')
|
||||
{
|
||||
$this->db->select ('project.id,project_membership.userid');
|
||||
$this->db->where_in ('id', array_keys($nodeids));
|
||||
$this->db->where ('userid <>', $filter);
|
||||
$this->db->where_in ('id', array_keys($data));
|
||||
if (is_array($userid_filter) && count($userid_filter) > 0)
|
||||
$this->db->where_not_in ('userid <>', $userid_filter);
|
||||
else
|
||||
$this->db->where ('userid <>', $userid_filter);
|
||||
$this->db->join ('project_membership', 'project_membership.projectid = project.id');
|
||||
$query = $this->db->get ('project');
|
||||
if ($this->db->trans_status() === FALSE)
|
||||
@ -652,15 +642,16 @@ class ProjectModel extends Model
|
||||
$result = $query->result ();
|
||||
foreach ($result as $r)
|
||||
{
|
||||
$id1 = $this->_add_rg_node ($nodeids, $nodes, $r->id, 'project');
|
||||
$id2 = $this->_add_rg_node ($nodeids, $nodes, $r->userid, 'user');
|
||||
$this->_add_rg_edge ($edges, $id1, $id2, "");
|
||||
if (array_key_exists ($r->id, $data))
|
||||
array_push ($data[$r->id], $r->userid);
|
||||
else
|
||||
$data[$r->id] = array ($r->userid);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$this->db->trans_commit ();
|
||||
return array ('nodes' => $nodes, 'edges' => $edges);
|
||||
return $data;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -244,7 +244,7 @@ function show_revision_graph (response)
|
||||
}
|
||||
else if (data.nodes.length <= 0)
|
||||
{
|
||||
show_alert ('No data to show', "<?php print $this->lang->line('Info')?>");
|
||||
show_alert ('No data to show', "<?php print $this->lang->line('Error')?>");
|
||||
}
|
||||
else
|
||||
{
|
||||
|
||||
@ -212,7 +212,7 @@ function show_revision_graph (response)
|
||||
}
|
||||
else if (data.nodes.length <= 0)
|
||||
{
|
||||
show_alert ('No data to show', "<?php print $this->lang->line('Info')?>");
|
||||
show_alert ('No data to show', "<?php print $this->lang->line('Error')?>");
|
||||
}
|
||||
else
|
||||
{
|
||||
|
||||
@ -17,192 +17,266 @@
|
||||
<link type="text/css" rel="stylesheet" href="<?php print base_url_make('/css/vis.min.css')?>" />
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function show_alert (outputMsg, titleMsg)
|
||||
var GraphApp = (function()
|
||||
{
|
||||
$('#project_map_alert').html(outputMsg).dialog({
|
||||
// -------------------------------------------------------------------
|
||||
// PRIVATE DATA
|
||||
// -------------------------------------------------------------------
|
||||
var graph_options =
|
||||
{
|
||||
autoResize: false,
|
||||
height: '300px',
|
||||
width: '300px',
|
||||
clickToUse: false,
|
||||
layout:
|
||||
{
|
||||
hierarchical:
|
||||
{
|
||||
enabled: false,
|
||||
}
|
||||
},
|
||||
physics:
|
||||
{
|
||||
enabled: true
|
||||
}
|
||||
};
|
||||
var edge_font = { color: 'red' };
|
||||
var edge_color = { color:'#5577CC', highlight:'pink', hover: '#5577CC', opacity:1.0 };
|
||||
|
||||
// -------------------------------------------------------------------
|
||||
// CONSTRUCTOR
|
||||
// -------------------------------------------------------------------
|
||||
function App (graph_container_id, refresh_button_id, refresh_spin_id, refresh_progress_id, filter_id, header_id, footer_id, alert_container_id)
|
||||
{
|
||||
if (this.constructor != App)
|
||||
{
|
||||
return new App(refresh_button_id, refresh_spin_id);
|
||||
}
|
||||
|
||||
this.graph_container = $('#' + graph_container_id);
|
||||
this.refresh_button_inited = false;
|
||||
this.refresh_button = $('#' + refresh_button_id);
|
||||
this.refresh_spin = $('#' + refresh_spin_id);
|
||||
this.refresh_progress = $('#' + refresh_progress_id);
|
||||
this.filter = $('#' + filter_id);
|
||||
this.header = $('#' + header_id);
|
||||
this.footer = $('#' + footer_id);
|
||||
this.alert_container = $('#' + alert_container_id);
|
||||
this.url_base = codepot_merge_path ("<?php print site_url(); ?>", "/graph/enjson_project_members");
|
||||
this.ajax_req = null;
|
||||
|
||||
this.graph = null;
|
||||
this.data = null;
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------------
|
||||
// PRIVATE FUNCTIONS
|
||||
// -------------------------------------------------------------------
|
||||
function show_alert (outputMsg, titleMsg)
|
||||
{
|
||||
this.alert_container.html(outputMsg).dialog({
|
||||
title: titleMsg,
|
||||
resizable: true,
|
||||
modal: true,
|
||||
width: 'auto',
|
||||
height: 'auto',
|
||||
buttons: {
|
||||
"<?php print $this->lang->line('OK')?>": function () {
|
||||
"<?php print $this->lang->line('OK')?>": function ()
|
||||
{
|
||||
$(this).dialog("close");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
var revision_network = null;
|
||||
var revision_network_data = null;
|
||||
var revision_rendering_progress = null;
|
||||
|
||||
function resize_window()
|
||||
{
|
||||
var footer = $("#codepot_footer");
|
||||
var titleband = $("#project_map_title_band");
|
||||
var code = $("#project_user_relation_graph");
|
||||
|
||||
if (revision_network !== null)
|
||||
{
|
||||
// make it low so that the footer gets places at the right place.
|
||||
revision_network.setSize (300, 300);
|
||||
//revision_network.redraw();
|
||||
}
|
||||
|
||||
var ioff = titleband.offset();
|
||||
var foff = footer.offset();
|
||||
|
||||
ioff.top += titleband.outerHeight() + 5;
|
||||
|
||||
if (revision_network !== null)
|
||||
function convert_data (data)
|
||||
{
|
||||
revision_network.setSize (footer.innerWidth() - 10, foff.top - ioff.top- 10);
|
||||
revision_network.redraw();
|
||||
revision_network.fit();
|
||||
}
|
||||
}
|
||||
var ids = {};
|
||||
var gd = { nodes: [], edges: [] };
|
||||
var seq = 0;
|
||||
|
||||
function show_project_user_relation_graph (response)
|
||||
{
|
||||
for (var prid in data)
|
||||
{
|
||||
gd.nodes.push ({ __type: "p", id: seq, label: prid, shape: "box" });
|
||||
ids[prid] = seq;
|
||||
seq++;
|
||||
|
||||
for (var i = 0; i < data[prid].length; i++)
|
||||
{
|
||||
var uid = data[prid][i];
|
||||
|
||||
if (!(uid in ids))
|
||||
{
|
||||
var image_url = codepot_merge_path('<?php print site_url(); ?>', "/user/icon/" + codepot_string_to_hex(uid));
|
||||
gd.nodes.push ({ __type: "u", id: seq, label: uid, shape: "image", image: image_url });
|
||||
ids[uid] = seq;
|
||||
seq++;
|
||||
}
|
||||
|
||||
gd.edges.push ({ from: ids[prid], to: ids[uid], width: 1, font: edge_font, color: edge_color });
|
||||
}
|
||||
}
|
||||
|
||||
return gd;
|
||||
}
|
||||
|
||||
function handle_double_click (nodeid)
|
||||
{
|
||||
for (var i = 0, j = this.data.nodes.length; i < j; i++)
|
||||
{
|
||||
if (this.data.nodes[i].id == nodeid)
|
||||
{
|
||||
if (this.data.nodes[i].__type == "p")
|
||||
{
|
||||
$(location).attr ("href", codepot_merge_path('<?php print site_url(); ?>', "/project/home/" + this.data.nodes[i].label));
|
||||
}
|
||||
else
|
||||
{
|
||||
$(location).attr ("href", codepot_merge_path('<?php print site_url(); ?>', "/user/home/" + codepot_string_to_hex(this.data.nodes[i].label)));
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function show_graph (response)
|
||||
{
|
||||
var data = $.parseJSON(response);
|
||||
|
||||
if (data == null)
|
||||
{
|
||||
show_alert ('Invalid data received', "<?php print $this->lang->line('Error')?>");
|
||||
show_alert.call (this, 'Invalid data received', "<?php print $this->lang->line('Error')?>");
|
||||
}
|
||||
else if (data.nodes.length <= 0)
|
||||
else if (data.length <= 0)
|
||||
{
|
||||
show_alert ('No data to show', "<?php print $this->lang->line('Info')?>");
|
||||
show_alert.call (this, 'No data to show', "<?php print $this->lang->line('Error')?>");
|
||||
}
|
||||
else
|
||||
{
|
||||
var options = {
|
||||
autoResize: false,
|
||||
height: '300px',
|
||||
width: '300px',
|
||||
clickToUse: false,
|
||||
layout: {
|
||||
hierarchical: {
|
||||
enabled: false,
|
||||
this.data = convert_data.call (this, data);
|
||||
if (this.graph === null)
|
||||
{
|
||||
var self = this;
|
||||
|
||||
this.graph = new vis.Network(this.graph_container[0], this.data, graph_options);
|
||||
this.graph.on ('doubleClick', function (props)
|
||||
{
|
||||
if (props.nodes.length > 0) handle_double_click.call (self, props.nodes[0]);
|
||||
});
|
||||
|
||||
this.graph.on ('startStabilizing', function ()
|
||||
{
|
||||
self.refresh_button.button ("enable");
|
||||
});
|
||||
this.graph.on ('stabilizationProgress', function (params)
|
||||
{
|
||||
var prog = params.iterations / params.total;
|
||||
self.refresh_progress.text (Math.round(prog*100)+'%');
|
||||
});
|
||||
this.graph.on ('stabilizationIterationsDone', function ()
|
||||
{
|
||||
self.refresh_progress.text ("");
|
||||
self.refresh_button.button ("enable");
|
||||
});
|
||||
this.graph.on ('stabilized', function (params)
|
||||
{
|
||||
self.refresh_progress.text ("");
|
||||
self.refresh_button.button ("enable");
|
||||
});
|
||||
}
|
||||
},
|
||||
physics: {
|
||||
enabled: true
|
||||
else
|
||||
{
|
||||
this.graph.setData (this.data);
|
||||
}
|
||||
|
||||
this.resize ();
|
||||
}
|
||||
|
||||
|
||||
this.refresh_button.button("enable");
|
||||
this.refresh_spin.removeClass ("fa-cog fa-spin");
|
||||
this.ajax_req = null;
|
||||
}
|
||||
|
||||
function handle_error (xhr, textStatus, thrownError)
|
||||
{
|
||||
show_alert.call (this, xhr.status + ' ' + thrownError, "<?php print $this->lang->line('Error')?>");
|
||||
this.refresh_button.button("enable");
|
||||
this.refresh_spin.removeClass ("fa-cog fa-spin");
|
||||
this.ajax_req = null;
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------------
|
||||
// PUBLIC FUNCTIONS
|
||||
// -------------------------------------------------------------------
|
||||
App.prototype.refresh = function (filter)
|
||||
{
|
||||
var url = this.url_base;
|
||||
if(filter.length > 0) url += "/" + codepot_string_to_hex(filter);
|
||||
|
||||
this.refresh_button.button("disable");
|
||||
this.refresh_spin.addClass ("fa-cog fa-spin");
|
||||
|
||||
if (this.ajax_req !== null) this.ajax_req.abort();
|
||||
this.ajax_req = $.ajax ({url: url, context: this, success: show_graph, error: handle_error });
|
||||
};
|
||||
|
||||
for (var i = 0, j = data.nodes.length; i < j; i++)
|
||||
App.prototype.initRefresh = function ()
|
||||
{
|
||||
if (data.nodes[i]._type == 'project')
|
||||
if (!this.refresh_button_inited)
|
||||
{
|
||||
data.nodes[i].shape = 'box';
|
||||
}
|
||||
else
|
||||
this.refresh_button_inited = true;
|
||||
|
||||
var self = this;
|
||||
this.refresh_button.button().click (function ()
|
||||
{
|
||||
//data.nodes[i].shape = 'ellipse';
|
||||
//data.nodes[i].color = { border: '#777799', background: '#DACACA' };
|
||||
data.nodes[i].shape = 'image';
|
||||
data.nodes[i].image = codepot_merge_path('<?php print site_url(); ?>', '/user/icon/' + codepot_string_to_hex(data.nodes[i].label));
|
||||
}
|
||||
}
|
||||
|
||||
for (var i = 0, j = data.edges.length; i < j; i++)
|
||||
{
|
||||
//data.edges[i].length = 500;
|
||||
data.edges[i].width = 1;
|
||||
data.edges[i].font = { color: 'red' };
|
||||
data.edges[i].color = {
|
||||
color:'#5577CC',
|
||||
highlight:'pink',
|
||||
hover: '#5577CC',
|
||||
opacity:1.0
|
||||
};
|
||||
}
|
||||
|
||||
if (revision_network === null)
|
||||
{
|
||||
revision_network_progress = $('#project_map_progress');
|
||||
revision_network_data = data;
|
||||
revision_network = new vis.Network(document.getElementById('project_user_relation_graph'), data, options);
|
||||
|
||||
revision_network.on ('doubleClick', function (props) {
|
||||
if (props.nodes.length > 0)
|
||||
{
|
||||
for (var i = 0, j = revision_network_data.nodes.length; i < j; i++)
|
||||
{
|
||||
if (revision_network_data.nodes[i].id == props.nodes[0])
|
||||
{
|
||||
if (revision_network_data.nodes[i]._type == 'project')
|
||||
{
|
||||
$(location).attr ('href', codepot_merge_path('<?php print site_url(); ?>', '/project/home/' + revision_network_data.nodes[i].label));
|
||||
}
|
||||
else
|
||||
{
|
||||
$(location).attr ('href', codepot_merge_path('<?php print site_url(); ?>', '/user/home/' + codepot_string_to_hex(revision_network_data.nodes[i].label)));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
revision_network.on ('startStabilizing', function (params) {
|
||||
$("#project_map_refresh_button").button("disable");
|
||||
});
|
||||
revision_network.on ('stabilizationProgress', function (params) {
|
||||
var prog = params.iterations/params.total;
|
||||
revision_network_progress.text (Math.round(prog*100)+'%');
|
||||
});
|
||||
revision_network.on ('stabilizationIterationsDone', function (params) {
|
||||
revision_network_progress.text ('');
|
||||
$("#project_map_refresh_button").button("enable");
|
||||
});
|
||||
revision_network.on ('stabilized', function (params) {
|
||||
revision_network_progress.text ('');
|
||||
$("#project_map_refresh_button").button("enable");
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
revision_network.setData (data);
|
||||
}
|
||||
}
|
||||
|
||||
$(window).resize(resize_window);
|
||||
resize_window ();
|
||||
|
||||
$("#project_map_refresh_button").button("enable");
|
||||
$("#project_map_refresh_spin").removeClass ("fa-cog fa-spin");
|
||||
}
|
||||
|
||||
$(function () {
|
||||
$("#project_map_refresh_button").button().click (function () {
|
||||
$("#project_map_refresh_button").button("disable");
|
||||
$("#project_map_refresh_spin").addClass ("fa-cog fa-spin");
|
||||
|
||||
var filter = $("#project_map_filter").val();
|
||||
filter = filter.trim();
|
||||
|
||||
var graph_url = graph_url = codepot_merge_path ("<?php print site_url(); ?>", "/graph/enjson_project_user_relation_graph");
|
||||
if(filter.length > 0) graph_url += "/" + codepot_string_to_hex(filter);
|
||||
|
||||
var ajax_req = $.ajax ({
|
||||
url: graph_url,
|
||||
context: document.body,
|
||||
success: show_project_user_relation_graph,
|
||||
error: function (xhr, ajaxOptions, thrownError) {
|
||||
show_alert (xhr.status + ' ' + thrownError, "<?php print $this->lang->line('Error')?>");
|
||||
$("#project_map_refresh_button").button("enable");
|
||||
$("#project_map_refresh_spin").removeClass ("fa-cog fa-spin");
|
||||
}
|
||||
});
|
||||
|
||||
self.refresh (self.filter.val().trim());
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
$("#project_map_refresh_button").trigger ('click');
|
||||
};
|
||||
|
||||
App.prototype.triggerRefresh = function ()
|
||||
{
|
||||
this.refresh_button.trigger ('click');
|
||||
};
|
||||
|
||||
App.prototype.resize = function ()
|
||||
{
|
||||
if (this.graph !== null)
|
||||
{
|
||||
// make it low so that the footer gets places at the right place.
|
||||
this.graph.setSize (300, 300);
|
||||
|
||||
var hoff = this.header.offset();
|
||||
var foff = this.footer.offset();
|
||||
|
||||
hoff.top += this.header.outerHeight() + 5;
|
||||
|
||||
this.graph.setSize (this.footer.innerWidth() - 10, foff.top - hoff.top - 10);
|
||||
this.graph.redraw();
|
||||
this.graph.fit();
|
||||
}
|
||||
};
|
||||
|
||||
return App;
|
||||
})();
|
||||
|
||||
/* ---------------------------------------------------------------------- */
|
||||
|
||||
$(function () {
|
||||
var graph_app = new GraphApp (
|
||||
'project_map_graph', 'project_map_refresh_button',
|
||||
'project_map_refresh_spin', 'project_map_progress',
|
||||
'project_map_filter', 'project_map_title_band',
|
||||
'codepot_footer', 'project_map_alert');
|
||||
|
||||
$(window).resize(function () { graph_app.resize(); });
|
||||
graph_app.initRefresh ();
|
||||
graph_app.triggerRefresh ();
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -256,7 +330,7 @@ $this->load->view (
|
||||
|
||||
<div class="result" id="project_map_result">
|
||||
|
||||
<div id="project_user_relation_graph">
|
||||
<div id="project_map_graph">
|
||||
</div>
|
||||
|
||||
</div> <!-- project_map_result -->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user