You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
472 lines
16 KiB
472 lines
16 KiB
14 years ago
|
<?php
|
||
|
|
/* For licensing terms, see /license.txt */
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @package chamilo.admin
|
||
|
|
*/
|
||
|
|
|
||
|
|
// Language files that need to be included.
|
||
|
|
$language_file = array('admin');
|
||
|
|
|
||
|
|
$cidReset = true;
|
||
|
|
require_once '../inc/global.inc.php';
|
||
|
|
require_once api_get_path(LIBRARY_PATH).'skill.lib.php';
|
||
|
|
require_once api_get_path(LIBRARY_PATH).'skill.visualizer.lib.php';
|
||
|
|
$this_section = SECTION_PLATFORM_ADMIN;
|
||
|
|
|
||
|
|
//api_protect_admin_script();
|
||
|
|
|
||
|
|
//Adds the JS needed to use the jqgrid
|
||
|
|
$htmlHeadXtra[] = api_get_jquery_ui_js(true);
|
||
|
|
$htmlHeadXtra[] = api_get_js('jquery.jsPlumb.all.js');
|
||
|
|
|
||
|
|
Display::display_header();
|
||
|
|
//Display::display_reduced_header();
|
||
|
|
|
||
|
|
$skill = new Skill();
|
||
|
|
$skills = $skill->get_all(true);
|
||
|
|
$type = 'edit'; //edit
|
||
|
|
$skill_visualizer = new SkillVisualizer($skills, $type);
|
||
|
|
|
||
|
|
$skill_visualizer->display_html();
|
||
|
|
|
||
|
|
$url = api_get_path(WEB_AJAX_PATH).'skill.ajax.php?1=1';
|
||
|
|
//$url = api_get_path(WEB_AJAX_PATH).'skill.ajax.php?load_user_data=1';
|
||
|
|
?>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
jsPlumb.bind("ready", function() {
|
||
|
|
$("#dialog-form").dialog({
|
||
|
|
autoOpen: false,
|
||
|
|
modal : true,
|
||
|
|
width : 550,
|
||
|
|
height : 380
|
||
|
|
});
|
||
|
|
|
||
|
|
$.getJSON( "<?php echo $url.'&a=get_skills' ?>", {},
|
||
|
|
function(data) {
|
||
|
|
$.each(data, function(n, parent) {
|
||
|
|
// add a new option with the JSON-specified value and text
|
||
|
|
$("<option />").attr("value", parent.id).text(parent.name).appendTo("#parent_id");
|
||
|
|
});
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
$.getJSON( "<?php echo $url.'&a=get_gradebooks' ?>", {},
|
||
|
|
function(data) {
|
||
|
|
$.each(data, function(n, gradebook) {
|
||
|
|
// add a new option with the JSON-specified value and text
|
||
|
|
$("<option />").attr("value", gradebook.id).text(gradebook.name).appendTo("#gradebook_id");
|
||
|
|
});
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//Filling select
|
||
|
|
$("#add_item_link").click(function() {
|
||
|
|
$("#dialog-form").dialog("open");
|
||
|
|
$("#gradebook_id").addClass('chzn-select');
|
||
|
|
|
||
|
|
$("#gradebook_id").chosen();
|
||
|
|
$("#parent_id").chosen();
|
||
|
|
});
|
||
|
|
|
||
|
|
var url = '<?php echo $url; ?>';
|
||
|
|
|
||
|
|
var name = $( "#name" ),
|
||
|
|
description = $( "#description" ),
|
||
|
|
allFields = $( [] ).add( name ).add( description ), tips = $(".validateTips");
|
||
|
|
|
||
|
|
|
||
|
|
$("#dialog-form").dialog({
|
||
|
|
buttons: {
|
||
|
|
"Add" : function() {
|
||
|
|
var bValid = true;
|
||
|
|
bValid = bValid && checkLength( name, "name", 1, 255 );
|
||
|
|
var params = $("#add_item").serialize();
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
url: url+'&a=add&'+params,
|
||
|
|
success:function(data) {
|
||
|
|
|
||
|
|
/*jsPlumb.connect({
|
||
|
|
source : "block_2",
|
||
|
|
target : "block_1",
|
||
|
|
overlays : overlays
|
||
|
|
});*/
|
||
|
|
|
||
|
|
/*
|
||
|
|
calEvent.title = $("#name").val();
|
||
|
|
calEvent.start = calEvent.start;
|
||
|
|
calEvent.end = calEvent.end;
|
||
|
|
calEvent.allDay = calEvent.allDay;
|
||
|
|
calEvent.description = $("#content").val();
|
||
|
|
calendar.fullCalendar('updateEvent',
|
||
|
|
calEvent,
|
||
|
|
true // make the event "stick"
|
||
|
|
);*/
|
||
|
|
|
||
|
|
$("#dialog-form").dialog("close");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
close: function() {
|
||
|
|
$("#name").attr('value', '');
|
||
|
|
$("#description").attr('value', '');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
$(".window").bind('click', function() {
|
||
|
|
var id = $(this).attr('id');
|
||
|
|
id = id.split('_')[1];
|
||
|
|
//$("#dialog-form").dialog("open");
|
||
|
|
});
|
||
|
|
|
||
|
|
// chrome fix.
|
||
|
|
document.onselectstart = function () { return false; };
|
||
|
|
|
||
|
|
// render mode
|
||
|
|
var resetRenderMode = function(desiredMode) {
|
||
|
|
var newMode = jsPlumb.setRenderMode(desiredMode);
|
||
|
|
jsPlumbDemo.init();
|
||
|
|
};
|
||
|
|
resetRenderMode(jsPlumb.CANVAS);
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
;(function() {
|
||
|
|
|
||
|
|
prepare = function(elId, endpoint) {
|
||
|
|
jsPlumbDemo.initHover(elId);
|
||
|
|
//jsPlumbDemo.initAnimation(elId);
|
||
|
|
var e = jsPlumb.addEndpoint(elId, endpoint);
|
||
|
|
jsPlumbDemo.initjulio(e);
|
||
|
|
|
||
|
|
return e;
|
||
|
|
},
|
||
|
|
|
||
|
|
window.jsPlumbDemo = {
|
||
|
|
initjulio :function(e) {
|
||
|
|
|
||
|
|
},
|
||
|
|
initHover :function(elId) {
|
||
|
|
|
||
|
|
$("#" + elId).click(function() {
|
||
|
|
var all = jsPlumb.getConnections({source:elId});
|
||
|
|
for (var i = 0; i < discs.length; i++) {
|
||
|
|
var d = document.getElementById(discs[i]);
|
||
|
|
if (d) d.parentNode.removeChild(d);
|
||
|
|
}
|
||
|
|
//var all = jsPlumb.getConnections({scope:"DEFAULT", source:elId});
|
||
|
|
|
||
|
|
console.log(all);
|
||
|
|
|
||
|
|
//alert(elId);
|
||
|
|
// jsPlumb.hide(elId);
|
||
|
|
});
|
||
|
|
|
||
|
|
/*$("#" + elId).hover(
|
||
|
|
function() { $(this).addClass("bigdot-hover"); },
|
||
|
|
function() { $(this).removeClass("bigdot-hover"); }
|
||
|
|
);*/
|
||
|
|
},
|
||
|
|
init : function() {
|
||
|
|
|
||
|
|
jsPlumb.Defaults.DragOptions = { cursor: 'pointer', zIndex:2000 };
|
||
|
|
jsPlumb.Defaults.PaintStyle = { strokeStyle:'#666' };
|
||
|
|
jsPlumb.Defaults.EndpointStyle = { width:20, height:16, strokeStyle:'#666' };
|
||
|
|
jsPlumb.Defaults.Endpoint = "Rectangle";
|
||
|
|
jsPlumb.Defaults.Anchors = ["TopCenter", "TopCenter"];
|
||
|
|
|
||
|
|
var connections = [];
|
||
|
|
var updateConnections = function(conn, remove) {
|
||
|
|
if (!remove) connections.push(conn);
|
||
|
|
else {
|
||
|
|
var idx = -1;
|
||
|
|
for (var i = 0; i < connections.length; i++) {
|
||
|
|
if (connections[i] == conn) {
|
||
|
|
idx = i; break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (idx != -1) connections.splice(idx, 1);
|
||
|
|
}
|
||
|
|
if (connections.length > 0) {
|
||
|
|
var s = "<span>current connections</span><br/><br/><table><tr><th>scope</th><th>source</th><th>target</th></tr>";
|
||
|
|
for (var j = 0; j < connections.length; j++) {
|
||
|
|
s = s + "<tr><td>" + connections[j].scope + "</td>" + "<td>" + connections[j].sourceId + "</td><td>" + connections[j].targetId + "</td></tr>";
|
||
|
|
}
|
||
|
|
jsPlumbDemo.showConnectionInfo(s);
|
||
|
|
} else
|
||
|
|
jsPlumbDemo.hideConnectionInfo();
|
||
|
|
};
|
||
|
|
|
||
|
|
jsPlumb.bind("jsPlumbConnection", function(e) {
|
||
|
|
updateConnections(e.connection);
|
||
|
|
});
|
||
|
|
jsPlumb.bind("jsPlumbConnectionDetached", function(e) {
|
||
|
|
updateConnections(e.connection, true);
|
||
|
|
});
|
||
|
|
|
||
|
|
var exampleDropOptions = {
|
||
|
|
tolerance:'touch',
|
||
|
|
hoverClass:'dropHover',
|
||
|
|
activeClass:'dragActive'
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
first example endpoint. it's a 25x21 rectangle (the size is provided in the 'style' arg to the Endpoint), and it's both a source
|
||
|
|
and target. the 'scope' of this Endpoint is 'exampleConnection', meaning any connection starting from this Endpoint is of type
|
||
|
|
'exampleConnection' and can only be dropped on an Endpoint target that declares 'exampleEndpoint' as its drop scope, and also that
|
||
|
|
only 'exampleConnection' types can be dropped here.
|
||
|
|
|
||
|
|
the connection style for this endpoint is a Bezier curve (we didn't provide one, so we use the default), with a lineWidth of
|
||
|
|
5 pixels, and a gradient.
|
||
|
|
|
||
|
|
note the use of the '$.extend' function to setup generic connection types. this will save you a lot of typing, and probably
|
||
|
|
errors.
|
||
|
|
|
||
|
|
*/
|
||
|
|
// this is the paint style for the connecting lines..
|
||
|
|
var connectorPaintStyle = {
|
||
|
|
lineWidth:5,
|
||
|
|
strokeStyle:"#deea18",
|
||
|
|
joinstyle:"round"
|
||
|
|
};
|
||
|
|
// .. and this is the hover style.
|
||
|
|
var connectorHoverStyle = {
|
||
|
|
lineWidth:7,
|
||
|
|
strokeStyle:"#2e2aF8"
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
jsPlumb.Defaults.Overlays = [
|
||
|
|
[ "Arrow", { location:0.9 } ],
|
||
|
|
[ "Label", {
|
||
|
|
location:0.1,
|
||
|
|
label:function(label) {
|
||
|
|
return label.connection.labelText || "";
|
||
|
|
},
|
||
|
|
cssClass:"aLabel",
|
||
|
|
|
||
|
|
}]
|
||
|
|
];
|
||
|
|
|
||
|
|
//Settings when editing stuff
|
||
|
|
var edit_arrow_color = '#ccc';
|
||
|
|
var editEndpoint = {
|
||
|
|
//connectorStyle:connectorPaintStyle,
|
||
|
|
connector:[ "Flowchart", { stub:40 } ],
|
||
|
|
hoverPaintStyle:connectorHoverStyle,
|
||
|
|
connectorHoverStyle:connectorHoverStyle,
|
||
|
|
anchors: ['BottomCenter','TopCenter'],
|
||
|
|
endpoint:"Rectangle",
|
||
|
|
paintStyle:{ width:25, height:21, fillStyle:edit_arrow_color },
|
||
|
|
isSource:true,
|
||
|
|
scope:'blue rectangle',
|
||
|
|
maxConnections:10,
|
||
|
|
connectorStyle : {
|
||
|
|
gradient:{stops:[[0, edit_arrow_color], [0.5, edit_arrow_color], [1, edit_arrow_color]]}, //gradient stuff
|
||
|
|
lineWidth:5,
|
||
|
|
strokeStyle: edit_arrow_color
|
||
|
|
},
|
||
|
|
isTarget:true,
|
||
|
|
dropOptions : exampleDropOptions
|
||
|
|
};
|
||
|
|
|
||
|
|
jsPlumb.setMouseEventsEnabled(true);
|
||
|
|
|
||
|
|
|
||
|
|
//Default
|
||
|
|
var default_arrow_color = '#ccc';
|
||
|
|
var defaultEndpoint = {
|
||
|
|
anchors: ['BottomCenter','TopCenter'],
|
||
|
|
endpoint:"Rectangle",
|
||
|
|
paintStyle:{ width:1, height:1, fillStyle:default_arrow_color },
|
||
|
|
isSource:false,
|
||
|
|
scope:'blue rectangle',
|
||
|
|
maxConnections:10,
|
||
|
|
connectorStyle : {
|
||
|
|
gradient:{stops:[[0, default_arrow_color], [0.5, default_arrow_color], [1, default_arrow_color]]},
|
||
|
|
lineWidth:5,
|
||
|
|
strokeStyle:default_arrow_color
|
||
|
|
},
|
||
|
|
isTarget:false,
|
||
|
|
setDraggableByDefault : false,
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
// Done end point
|
||
|
|
var done_arrow_color = '#73982C';
|
||
|
|
var doneEndpoint = {
|
||
|
|
endpoint:"Rectangle",
|
||
|
|
paintStyle:{ width:1, height:1, fillStyle:done_arrow_color},
|
||
|
|
isSource:false,
|
||
|
|
scope:'blue rectangle',
|
||
|
|
maxConnections:10,
|
||
|
|
connectorStyle : {
|
||
|
|
gradient:{stops:[[0, done_arrow_color], [0.5, done_arrow_color], [1, done_arrow_color]]},
|
||
|
|
lineWidth:5,
|
||
|
|
strokeStyle:done_arrow_color
|
||
|
|
},
|
||
|
|
isTarget:false,
|
||
|
|
setDraggableByDefault : false,
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<?php $skill_visualizer->display_js();?>
|
||
|
|
// three ways to do this - an id, a list of ids, or a selector (note the two different types of selectors shown here...anything that is valid jquery will work of course)
|
||
|
|
//jsPlumb.draggable("window1");
|
||
|
|
//jsPlumb.draggable(["window1", "window2"]);
|
||
|
|
//jsPlumb.draggable($("#window1"));
|
||
|
|
var divsWithWindowClass = jsPlumbDemo.getSelector(".window");
|
||
|
|
jsPlumb.draggable(divsWithWindowClass);
|
||
|
|
|
||
|
|
// add the third example using the '.window' class.
|
||
|
|
//jsPlumb.addEndpoint(divsWithWindowClass, exampleEndpoint3);
|
||
|
|
|
||
|
|
// each library uses different syntax for event stuff, so it is handed off
|
||
|
|
// to the draggableConnectorsDemo-<library>.js files.
|
||
|
|
jsPlumbDemo.attachBehaviour();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
})();
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
$(document).ready( function() {
|
||
|
|
//When creating a connection see
|
||
|
|
//http://jsplumb.org/apidocs/files/jsPlumb-1-3-2-all-js.html#bind
|
||
|
|
jsPlumb.bind("jsPlumbConnection", function(conn) {
|
||
|
|
alert("Connection created " + conn.sourceId + " to " + conn.targetId + " ");
|
||
|
|
//jsPlumb.detach(conn);
|
||
|
|
});
|
||
|
|
//When double clicking a connection
|
||
|
|
jsPlumb.bind("click", function(conn) {
|
||
|
|
if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
|
||
|
|
jsPlumb.detach(conn);
|
||
|
|
});
|
||
|
|
|
||
|
|
//When double clicking a connection
|
||
|
|
jsPlumb.bind("click", function(endpoint) {
|
||
|
|
if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
|
||
|
|
jsPlumb.detach(conn);
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
;(function() {
|
||
|
|
|
||
|
|
jsPlumbDemo.showConnectionInfo = function(s) {
|
||
|
|
$("#list").html(s);
|
||
|
|
$("#list").fadeIn({complete:function() { jsPlumb.repaintEverything(); }});
|
||
|
|
};
|
||
|
|
|
||
|
|
jsPlumbDemo.hideConnectionInfo = function() {
|
||
|
|
$("#list").fadeOut({complete:function() { jsPlumb.repaintEverything(); }});
|
||
|
|
};
|
||
|
|
|
||
|
|
jsPlumbDemo.getSelector = function(spec) {
|
||
|
|
return $(spec);
|
||
|
|
};
|
||
|
|
|
||
|
|
jsPlumbDemo.attachBehaviour = function() {
|
||
|
|
$(".hide").click(function() {
|
||
|
|
jsPlumb.toggle($(this).attr("rel"));
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".drag").click(function() {
|
||
|
|
var s = jsPlumb.toggleDraggable($(this).attr("rel"));
|
||
|
|
$(this).html(s ? 'disable dragging' : 'enable dragging');
|
||
|
|
if (!s) $("#" + $(this).attr("rel")).addClass('drag-locked'); else $("#" + $(this).attr("rel")).removeClass('drag-locked');
|
||
|
|
$("#" + $(this).attr("rel")).css("cursor", s ? "pointer" : "default");
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".detach").click(function() {
|
||
|
|
jsPlumb.detachAll($(this).attr("rel"));
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#clear").click(function() {
|
||
|
|
jsPlumb.detachEverything(); showConnections();
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
})();
|
||
|
|
|
||
|
|
function checkLength( o, n, min, max ) {
|
||
|
|
if ( o.val().length > max || o.val().length < min ) {
|
||
|
|
o.addClass( "ui-state-error" );
|
||
|
|
updateTips( "Length of " + n + " must be between " +
|
||
|
|
min + " and " + max + "." );
|
||
|
|
return false;
|
||
|
|
} else {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<a class="a_button gray" id="add_item_link" href="#">Add item</a>
|
||
|
|
|
||
|
|
<div id="dialog-form" style="display:none;">
|
||
|
|
<div style="width:500px">
|
||
|
|
<form id="add_item" name="form">
|
||
|
|
<div class="row">
|
||
|
|
<div class="label">
|
||
|
|
<label for="name">Name</label>
|
||
|
|
</div>
|
||
|
|
<div class="formw">
|
||
|
|
<input type="text" name="name" id="name" size="40" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="label">
|
||
|
|
<label for="name">Parent</label>
|
||
|
|
</div>
|
||
|
|
<div class="formw">
|
||
|
|
<select id="parent_id" name="parent_id" />
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="label">
|
||
|
|
<label for="name">Gradebook</label>
|
||
|
|
</div>
|
||
|
|
<div class="formw">
|
||
|
|
<select id="gradebook_id" name="gradebook_id[]" multiple="multiple" />
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="label">
|
||
|
|
<label for="name">Description</label>
|
||
|
|
</div>
|
||
|
|
<div class="formw">
|
||
|
|
<textarea name="description" id="description" cols="40" rows="7"></textarea>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<?php
|
||
|
|
|
||
|
|
Display::display_footer();
|
||
|
|
|
||
|
|
// The header.
|
||
|
|
/*
|
||
|
|
$tpl = new Template();
|
||
|
|
|
||
|
|
$tpl->assign('content', $content);
|
||
|
|
$tpl->display_one_col_template();
|
||
|
|
|
||
|
|
*
|
||
|
|
*/
|