galads/icehrm
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Changes for v22.0.0.OS

Browse Source
This commit is contained in:
Thilina Hasantha
2018-04-28 03:04:36 +02:00
parent d105ee3512
commit 8ebf28fbcb
471 changed files with 160244 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
web/bower_components/vis/examples/timeline/editing/customSnappingOfItems.html vendored Normal file
View File

@@ -0,0 +1,55 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Custom snapping</title>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
When moving the items in on the Timeline below, they will snap to full hours,
independent of being zoomed in or out.
</p>
<div id="visualization"></div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: 'A', start: '2015-02-09T04:00:00'},
{id: 2, content: 'B', start: '2015-02-09T14:00:00'},
{id: 3, content: 'C', start: '2015-02-09T16:00:00'},
{id: 4, content: 'D', start: '2015-02-09T17:00:00'},
{id: 5, content: 'E', start: '2015-02-10T03:00:00'}
]);
// Configuration for the Timeline
var options = {
editable: true,
// always snap to full hours, independent of the scale
snap: function (date, scale, step) {
var hour = 60 * 60 * 1000;
return Math.round(date / hour) * hour;
}
// to configure no snapping at all:
//
// snap: null
//
// or let the snap function return the date unchanged:
//
// snap: function (date, scale, step) {
// return date;
// }
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

77
web/bower_components/vis/examples/timeline/editing/editingItems.html vendored Normal file
View File

@@ -0,0 +1,77 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Manipulation example</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>An editable timeline allows to drag items around, create new items, and remove items. Changes are logged in the browser console.</p>
<div id="visualization"></div>
<script>
// create a dataset with items
// we specify the type of the fields `start` and `end` here to be strings
// containing an ISO date. The fields will be outputted as ISO dates
// automatically getting data from the DataSet via items.get().
var items = new vis.DataSet({
type: { start: 'ISODate', end: 'ISODate' }
});
// add items to the DataSet
items.add([
{id: 1, content: 'item 1<br>start', start: '2014-01-23'},
{id: 2, content: 'item 2', start: '2014-01-18'},
{id: 3, content: 'item 3', start: '2014-01-21'},
{id: 4, content: 'item 4', start: '2014-01-19', end: '2014-01-24'},
{id: 5, content: 'item 5', start: '2014-01-28', type:'point'},
{id: 6, content: 'item 6', start: '2014-01-26'}
]);
// log changes to the console
items.on('*', function (event, properties) {
console.log(event, properties.items);
});
var container = document.getElementById('visualization');
var options = {
start: '2014-01-10',
end: '2014-02-10',
height: '300px',
// allow selecting multiple items using ctrl+click, shift+click, or hold.
multiselect: true,
// allow manipulation of items
editable: true,
/* alternatively, enable/disable individual actions:
editable: {
add: true,
updateTime: true,
updateGroup: true,
remove: true
},
*/
showCurrentTime: true
};
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

141
web/bower_components/vis/examples/timeline/editing/editingItemsCallbacks.html vendored Normal file
View File

@@ -0,0 +1,141 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Manipulation callbacks</title>
<style type="text/css">
body, html {
font-family: sans-serif;
font-size: 11pt;
}
</style>
<script src="http://t4t5.github.io/sweetalert/dist/sweetalert.min.js"></script>
<link href="http://t4t5.github.io/sweetalert/dist/sweetalert.css" rel="stylesheet" type="text/css"/>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p style="max-width: 800px;">
This example shows how to use callback functions <code>onAdd</code>, <code>onMove</code>, <code>onMoving</code>, <code>onUpdate</code>, and <code>onRemove</code>. The <code>onMoving</code> function updates an item while dragging, and can be used to prevent the item from being drawn at disallowed or infeasible timeslots. In this example, the items cannot be moved outside of the month April 2013. The other callback functions are called after an add, move, update, or remove action has taken place, and can be used to cancel these actions.
</p>
<div id="visualization"></div>
<p></p>
<div id="log"></div>
<script type="text/javascript">
// note that months are zero-based in the JavaScript Date object, so month 3 is April
var items = new vis.DataSet([
{id: 1, content: 'item 1', start: new Date(2013, 3, 20)},
{id: 2, content: 'item 2', start: new Date(2013, 3, 14)},
{id: 3, content: 'item 3', start: new Date(2013, 3, 18)},
{id: 4, content: 'item 4', start: new Date(2013, 3, 16), end: new Date(2013, 3, 19)},
{id: 5, content: 'item 5', start: new Date(2013, 3, 25)},
{id: 6, content: 'item 6', start: new Date(2013, 3, 27)}
]);
var min = new Date(2013, 3, 1); // 1 april
var max = new Date(2013, 3, 30, 23, 59, 59); // 30 april
var container = document.getElementById('visualization');
var options = {
editable: true,
onAdd: function (item, callback) {
prettyPrompt('Add item', 'Enter text content for new item:', item.content, function (value) {
if (value) {
item.content = value;
callback(item); // send back adjusted new item
}
else {
callback(null); // cancel item creation
}
});
},
onMove: function (item, callback) {
var title = 'Do you really want to move the item to\n' +
'start: ' + item.start + '\n' +
'end: ' + item.end + '?';
prettyConfirm('Move item', title, function (ok) {
if (ok) {
callback(item); // send back item as confirmation (can be changed)
}
else {
callback(null); // cancel editing item
}
});
},
onMoving: function (item, callback) {
if (item.start < min) item.start = min;
if (item.start > max) item.start = max;
if (item.end > max) item.end = max;
callback(item); // send back the (possibly) changed item
},
onUpdate: function (item, callback) {
prettyPrompt('Update item', 'Edit items text:', item.content, function (value) {
if (value) {
item.content = value;
callback(item); // send back adjusted item
}
else {
callback(null); // cancel updating the item
}
});
},
onRemove: function (item, callback) {
prettyConfirm('Remove item', 'Do you really want to remove item ' + item.content + '?', function (ok) {
if (ok) {
callback(item); // confirm deletion
}
else {
callback(null); // cancel deletion
}
});
}
};
var timeline = new vis.Timeline(container, items, options);
items.on('*', function (event, properties) {
logEvent(event, properties);
});
function logEvent(event, properties) {
var log = document.getElementById('log');
var msg = document.createElement('div');
msg.innerHTML = 'event=' + JSON.stringify(event) + ', ' +
'properties=' + JSON.stringify(properties);
log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
}
function prettyConfirm(title, text, callback) {
swal({
title: title,
text: text,
type: 'warning',
showCancelButton: true,
confirmButtonColor: "#DD6B55"
}, callback);
}
function prettyPrompt(title, text, inputValue, callback) {
swal({
title: title,
text: text,
type: 'input',
showCancelButton: true,
inputValue: inputValue
}, callback);
}
</script>
</body>
</html>

63
web/bower_components/vis/examples/timeline/editing/individualEditableItems.html vendored Normal file
View File

@@ -0,0 +1,63 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Individual editable items</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
div.vis-editable,
div.vis-editable.vis-selected {
/* custom styling for editable items... */
}
div.vis-readonly,
div.vis-readonly.vis-selected {
/* custom styling for readonly items... */
background-color: #ff4500;
border-color: red;
color: white;
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>Specify individual items to be editable or readonly.</p>
<div id="visualization"></div>
<script>
// create groups to highlight groupUpdate
var groups = new vis.DataSet([
{id: 1, content: 'Group 1'},
{id: 2, content: 'Group 2'}
]);
// create a DataSet with items
var items = new vis.DataSet([
{id: 1, content: 'Editable', editable: true, start: '2010-08-23', group: 1},
{id: 2, content: 'Editable', editable: true, start: '2010-08-23T23:00:00', group: 2},
{id: 3, content: 'Read-only', editable: false, start: '2010-08-24T16:00:00', group: 1},
{id: 4, content: 'Read-only', editable: false, start: '2010-08-26', end: '2010-09-02', group: 2},
{id: 5, content: 'Edit Time Only', editable: { updateTime: true, updateGroup: false, remove: false }, start: '2010-08-28', group: 1},
{id: 6, content: 'Edit Group Only', editable: { updateTime: false, updateGroup: true, remove: false }, start: '2010-08-29', group: 2},
{id: 7, content: 'Remove Only', editable: { updateTime: false, updateGroup: false, remove: true }, start: '2010-08-31', end: '2010-09-03', group: 1},
{id: 8, content: 'Default', start: '2010-09-04T12:00:00', group: 2}
]);
var container = document.getElementById('visualization');
var options = {
editable: true // default for all items
};
var timeline = new vis.Timeline(container, items, groups, options);
</script>
</body>
</html>

38
web/bower_components/vis/examples/timeline/editing/itemsAlwaysDraggable.html vendored Normal file
View File

@@ -0,0 +1,38 @@
<html>
<head>
<title>Timeline | itemsAlwaysDraggable Option</title>
<meta charset="utf-8">
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>The <code>itemsAlwaysDraggable</code> option allows to drag items around without first selecting them. When <code>itemsAlwaysDraggable.range</code> is set to <code>true</code>, the range can be changed without selection as well.</p>
<div id="mytimeline"></div>
<script>
var container = document.getElementById('mytimeline'),
items = new vis.DataSet();
for (var i = 10; i >= 0; i--) {
var start = new Date(new Date().getTime() + i * 100000);
items.add({
id: i,
content: "item " + i,
start: start,
end: new Date(start.getTime() + 100000)
});
}
var options = {
start: new Date(),
end: new Date(new Date().getTime() + 1000000),
editable: true,
itemsAlwaysDraggable: {
item: true,
range: true
}
};
var timeline = new vis.Timeline(container, items, null, options);
</script>
</body>
</html>

99
web/bower_components/vis/examples/timeline/editing/overrideEditingItems.html vendored Normal file
View File

@@ -0,0 +1,99 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Individual editable items</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
div.vis-editable,
div.vis-editable.vis-selected {
/* custom styling for editable items... */
}
div.vis-readonly,
div.vis-readonly.vis-selected {
/* custom styling for readonly items... */
background-color: #ff4500;
border-color: red;
color: white;
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>Specify individual items to be editable or readonly. Toggle edit options and override behavior from timeline.editable</p>
<div id="visualization"></div>
<p>
<form>
Timeline.editable = {</br>
<input name="add" type="checkbox" checked>add</input></br>
<input name="remove" type="checkbox" checked>remove</input></br>
<input name="updateGroup" type="checkbox">updateGroup</input></br>
<input name="updateTime" type="checkbox" checked>updateTime</input><br>
<input name="overrideItems" type="checkbox">overrideItems</input><br>
}
</form>
</p>
<script>
// create a DataSet with items
var items = new vis.DataSet([
{id: 1, content: 'Editable', editable: true, start: '2010-08-23', group: 1},
{id: 2, content: 'Editable', editable: true, start: '2010-08-23T23:00:00', group: 2},
{id: 3, content: 'Read-only', editable: false, start: '2010-08-24T16:00:00', group: 1},
{id: 4, content: 'Read-only', editable: false, start: '2010-08-26', end: '2010-09-02', group: 2},
{id: 5, content: 'Editable', editable: true, start: '2010-08-28', group: 1},
{id: 6, content: 'Read-only', editable: false, start: '2010-08-29', group: 2},
{id: 7, content: 'Editable', editable: true, start: '2010-08-31', end: '2010-09-03', group: 1},
{id: 8, content: 'Read-only', editable: false, start: '2010-09-04T12:00:00', group: 2},
{id: 9, content: 'Default', start: '2010-09-04', group: 1},
{id: 10, content: 'Default', start: '2010-08-24', group: 2}
]);
var groups = [
{
id: 1,
content: 'group 1'
},
{
id: 2,
content: 'group 2'
}
]
var container = document.getElementById('visualization');
var options = {
editable: {
add: true,
remove: true,
updateGroup: false,
updateTime: true,
overrideItems: false
} // default for all items
};
var timeline = new vis.Timeline(container, items, groups, options);
var updateEditOptions = function(e){
var changedOption = e.target.name;
var options = { editable: { } };
options.editable[changedOption] = e.target.checked;
timeline.setOptions(options);
};
var cbs = document.getElementsByTagName("input");
[].forEach.call(cbs, function(cb){
cb.onchange = updateEditOptions;
});
</script>
</body>
</html>

131
web/bower_components/vis/examples/timeline/editing/tooltipOnItemChange.html vendored Normal file
View File

@@ -0,0 +1,131 @@
<html>
<head>
<title>Timeline | Tooltip on item onUpdateTime Option</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.vis-item .vis-onUpdateTime-tooltip {
border-radius: 4px;
}
</style>
</head>
<body>
<h1>Timeline Tooltip on item onUpdateTime Option</h1>
<h2>With <code>tooltipOnItemUpdateTime: true</code>
</h2>
<div id="mytimeline1"></div>
<h2>With <code>tooltipOnItemUpdateTime: { template: [Function] }</code>
</h2>
<div id="mytimeline2"></div>
<h2>With groups</h2>
<div id="mytimeline3"></div>
<script>
// create items
var numberOfItems = 10;
var items = new vis.DataSet();
var types = [ 'box', 'point', 'range']
for (var order = 0; order < numberOfItems; order++) {
var date = vis.moment();
date.add(Math.round(Math.random() * 2), 'hour');
items.add({
id: order,
type: types[Math.floor(3 * Math.random())],
content: 'Item ' + order,
start: date.clone().add(order + 1, 'hour'),
end: date.clone().add(order + 3, 'hour')
});
}
// specify options
var options = {
multiselect: true,
maxHeight: 400,
start: new Date((new Date()).valueOf() - 10000000),
end: new Date(1000*60*60*24 + (new Date()).valueOf()),
editable: true
};
var options1 = jQuery.extend(options, {
tooltipOnItemUpdateTime: true
})
var container1 = document.getElementById('mytimeline1');
timeline1 = new vis.Timeline(container1, items, null, options1);
var options2 = jQuery.extend(options, {
orientation: 'top',
tooltipOnItemUpdateTime: {
template: function(item) {
return 'html template for tooltip with <b>item.start</b>: ' + item.start;
}
}
})
var container2 = document.getElementById('mytimeline2');
timeline2 = new vis.Timeline(container2, items, null, options2);
// create groups
var numberOfGroups = 25;
var groups = new vis.DataSet()
for (var i = 0; i < numberOfGroups; i++) {
groups.add({
id: i,
content: 'Truck&nbsp;' + i
})
}
// create items for groups
var numberOfItems = 1000;
var itemsWithGroups = new vis.DataSet();
var itemsPerGroup = Math.round(numberOfItems/numberOfGroups);
for (var truck = 0; truck < numberOfGroups; truck++) {
var date = new Date();
for (var order = 0; order < itemsPerGroup; order++) {
date.setHours(date.getHours() + 4 * (Math.random() < 0.2));
var start = new Date(date);
date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
var end = new Date(date);
itemsWithGroups.add({
id: order + itemsPerGroup * truck,
group: truck,
start: start,
end: end,
content: 'Order ' + order
});
}
}
var options3 = jQuery.extend(options, {
orientation: 'top',
tooltipOnItemUpdateTime: true
})
var container3 = document.getElementById('mytimeline3');
timeline3 = new vis.Timeline(container3, itemsWithGroups, groups, options3);
</script>
</body>
</html>

90
web/bower_components/vis/examples/timeline/editing/updateDataOnEvent.html vendored Normal file
View File

@@ -0,0 +1,90 @@
<html>
<head>
<title>Timeline | Update data on event</title>
<style type="text/css">
body {
font: 11pt verdana;
}
.vis.timeline .item.past {
filter: alpha(opacity=50);
opacity: 0.5;
}
</style>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p style="width: 600px;">
When the custom time bar is shown, the user can drag this bar to a specific
time. The Timeline sends an event that the custom time is changed, after
which the contents of the timeline can be changed according to the specified
time in past or future.
</p>
<div id="customTime">&nbsp;</div>
<p></p>
<div id="mytimeline"></div>
<script>
// create a data set
var data = new vis.DataSet([
{
id: 1,
start: new Date((new Date()).getTime() - 60 * 1000),
end: new Date(),
content: 'Dynamic event'
}
]);
// specify options
var options = {
showCurrentTime: true
};
// create a timeline
var container = document.getElementById('mytimeline');
timeline = new vis.Timeline(container, data, options);
timeline.addCustomTime(new Date());
// add event listener
timeline.on('timechange', function (event) {
document.getElementById("customTime").innerHTML = "Custom Time: " + event.time;
var item = data.get(1);
if (event.time > item.start) {
item.end = new Date(event.time);
var now = new Date();
if (event.time < now) {
item.content = "Dynamic event (past)";
item.className = 'past';
}
else if (event.time > now) {
item.content = "Dynamic event (future)";
item.className = 'future';
}
else {
item.content = "Dynamic event (now)";
item.className = 'now';
}
data.update(item);
}
});
// set a custom range from -2 minute to +3 minutes current time
var start = new Date((new Date()).getTime() - 2 * 60 * 1000);
var end = new Date((new Date()).getTime() + 3 * 60 * 1000);
timeline.setWindow(start, end, {animation: false});
</script>
</body>
</html>