feat: Integrate JS Gantt Chart library and update styles

- Added JS Gantt Chart library files including CSS and JS.
- Updated existing Gantt chart styles for better visual representation.
- Translated month and day names to Polish in the Gantt chart settings.
- Implemented Gantt chart initialization in the main view with sample data.
- Added a toggle switch for displaying tasks in the calendar.
- Enhanced task edit form with a new checkbox for calendar visibility.
- Improved the layout of the logged-in user template to include Gantt chart styles and scripts.
This commit is contained in:
2025-04-11 00:26:54 +02:00
parent 39b30c4ea4
commit 1f38807599
21 changed files with 765 additions and 27 deletions

View File

@@ -20,6 +20,7 @@
<script type="text/javascript" src="/libraries/framework/vendor/plugins/daterange/daterangepicker.js"></script>
<script type="text/javascript" src="/libraries/jquery-confirm/jquery-confirm.min.js"></script>
<script type="text/javascript" src="/libraries/select2/js/select2.full.min.js"></script>
<script type="text/javascript" src="/libraries/jquery-gantt/jquery-gantt.js"></script>
<script type="text/javascript" src="/libraries/functions.js"></script>
<link rel="Stylesheet" type="text/css" href="/libraries/framework/skin/default_skin/css/theme.css">
<link rel="stylesheet" type="text/css" href="/libraries/framework/vendor/plugins/datepicker/css/bootstrap-datetimepicker.css">
@@ -28,6 +29,7 @@
<link rel="stylesheet" type="text/css" href="/libraries/select2/css/select2.min.css">
<link rel="stylesheet" type="text/css" href="/libraries/select2/css/select2-bootstrap-5-theme.min.css">
<link rel="stylesheet" type="text/css" href="/libraries/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/libraries/jquery-gantt/jquery-gantt.css">
<link rel="stylesheet" type="text/css" href="/layout/style.css">
</head>
<body class="logged">

View File

@@ -3,6 +3,7 @@
<i class="fa fa-plus"></i>Dodaj zadanie
</a>
</div>
<div id="chart" style="margin-bottom: 25px;"></div>
<div class="projects_container">
<div class="left">
<div class="_projects">
@@ -156,6 +157,25 @@
</div>
<script type="text/javascript">
<? if ( $this -> user['email'] == 'biuro@project-pro.pl' ):?>
$("#chart").gantt({
source: "/tasks/gantt_json/",
scale: "hours",
minScale: "hours",
maxScale: "months",
scaleStep: 1,
scrollToToday: false,
onItemClick: function(data) {
alert("Item clicked - show some details");
},
onAddClick: function(dt, rowId) {
alert("Empty space clicked - add an item!");
},
onRender: function() {
console.log("chart rendered");
}
});
<? endif;?>
function reload_tasks( projects, users )
{
//load tasks by ajax

View File

@@ -163,6 +163,15 @@ if ( is_array( $this -> clients ) )
'type' => 'checkbox'
] );
?>
<?=
\Html::input_switch( [
'label' => 'Pokaż w kalendarzu',
'name' => 'show_in_calendar',
'id' => 'show_in_calendar',
'checked' => $this -> task[ 'show_in_calendar' ] ? true : false,
'type' => 'checkbox'
] );
?>
<? if ( $this -> task['id'] ):?>
<div class="form-group row">
<label class="col-md-3 col-form-label"></label>