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.
945 lines
38 KiB
945 lines
38 KiB
<!DOCTYPE html> |
|
|
|
<head> |
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
|
<title>OSPRO Gantt</title> |
|
|
|
<!-- bootstrap css --> |
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" |
|
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> |
|
<link rel="stylesheet" |
|
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" /> |
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/choices.min.css"> |
|
|
|
<script src="../codebase/dhtmlxgantt801.js?v=8.0.1"></script> |
|
<link rel="stylesheet" href="../codebase/dhtmlxgantt801.css?v=8.0.1"> |
|
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css"> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" |
|
integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" |
|
crossorigin="anonymous" referrerpolicy="no-referrer" /> |
|
<link rel="stylesheet" |
|
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" |
|
integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw==" |
|
crossorigin="anonymous" referrerpolicy="no-referrer" /> |
|
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> |
|
<link rel="stylesheet" href="../assets/css/custom.css"> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" |
|
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" |
|
crossorigin="anonymous" referrerpolicy="no-referrer" /> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" |
|
integrity="sha512-gc3xjCmIy673V6MyOAZhIW93xhM9ei1I+gLbmFjUHIjocENRsLX/QUE1htk5q1XV2D/iie/VQ8DXI6Vu8bexvQ==" |
|
crossorigin="anonymous" referrerpolicy="no-referrer" /> |
|
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" /> |
|
<style> |
|
html, |
|
body { |
|
height: 100%; |
|
padding: 0px; |
|
margin: 0px; |
|
overflow: hidden; |
|
} |
|
|
|
.modal { |
|
padding: 0 !important; |
|
} |
|
|
|
.modal .modal-dialog { |
|
width: 100%; |
|
max-width: none; |
|
height: 100%; |
|
margin: 0; |
|
} |
|
|
|
.modal .modal-content { |
|
height: 100%; |
|
border: 0; |
|
border-radius: 0; |
|
} |
|
|
|
.modal .modal-body { |
|
overflow-y: auto; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
<div class="loading-overlay"></div> |
|
<div class="container-header"> |
|
<div class="container-project"> |
|
<h6 id="project-name-header"></h6> |
|
</div> |
|
<div class="container-action"> |
|
<div class="btn-icon-toolbar btn-sm"><span class="icon-toolbar-separator">Zoom: </span></div> |
|
<div class="btn-icon-toolbar text-nowrap"> |
|
<input type="radio" id="scale1" class="gantt_radio" name="scale" value="day"> |
|
<label for="scale1" class="icon-toolbar btn-icon-toolbar-label">Days</label> |
|
</div> |
|
<div class="btn-icon-toolbar text-nowrap"> |
|
<input type="radio" id="scale2" class="gantt_radio" name="scale" value="week"> |
|
<label for="scale2" class="icon-toolbar btn-icon-toolbar-label">Weeks</label> |
|
</div> |
|
<div class="btn-icon-toolbar text-nowrap"> |
|
<input type="radio" id="scale3" class="gantt_radio" name="scale" value="month"> |
|
<label for="scale3" class="icon-toolbar btn-icon-toolbar-label">Months</label> |
|
</div> |
|
<span class="icon-toolbar-separator">|</span> |
|
<button title="Dashboard Project" class="btn btn-sm btn-icon-toolbar" id="dashboard-project"><i |
|
class="fa fa-chart-line icon-toolbar"></i></button> |
|
<span class="icon-toolbar-separator">|</span> |
|
<button title="Save" class="btn btn-sm btn-icon-toolbar" id="save-activity"><i |
|
class="fa fa-save icon-toolbar"></i></button> |
|
<span class="icon-toolbar-separator" id="save-separator">|</span> |
|
<button title="Synchronize to Report Activity" class="btn btn-sm btn-icon-toolbar" id="gantt-synchronize"><i |
|
class="fa fa-sync icon-toolbar"></i></button> |
|
<span class="icon-toolbar-separator">|</span> |
|
<button title="Update Schedule" class="btn btn-sm btn-icon-toolbar" id="update-schedule"><i |
|
class="fa fa-upload icon-toolbar"></i></button> |
|
<span class="icon-toolbar-separator">|</span> |
|
<button title="Set Baseline" class="btn btn-sm btn-icon-toolbar" id="gantt-baseline"><i |
|
class="fa fa-grip-lines icon-toolbar"></i></button> |
|
<span class="icon-toolbar-separator">|</span> |
|
<button title="Show / Hide Columns" class="btn btn-sm btn-icon-toolbar" id="gantt_toggle_columns_btn" |
|
onclick="gantt.$showDropdown(this)"><i class="fa fa-eye-slash icon-toolbar"></i></button> |
|
<span class="icon-toolbar-separator">|</span> |
|
<button title="Gantt Compare" class="btn btn-sm btn-icon-toolbar" id="compare-data"><i |
|
class="fa fa-columns icon-toolbar"></i></button> |
|
<span class="icon-toolbar-separator">|</span> |
|
<button title="Gantt Settings" class="btn btn-sm btn-icon-toolbar" id="gantt_setting_btn"><i |
|
class="fa fa-cog icon-toolbar"></i></button> |
|
<span class="icon-toolbar-separator">|</span> |
|
<button title="Expand Activities" class="btn btn-sm btn-icon-toolbar" id="gantt_toggle_task_btn"><i |
|
class="fa fa-expand-alt icon-toolbar"></i></button> |
|
<span class="icon-toolbar-separator">|</span> |
|
<button id="fullscreen_button" title="Full Screen" class="btn btn-sm btn-icon-toolbar"> |
|
<i class="fa icon-toolbar fa-expand"></i></button> |
|
</div> |
|
</div> |
|
<div id="gantt_here" style='width:100vw; height:90vh;'></div> |
|
<div id="gantt_dropdown"> |
|
<h2>Dropdown here</h2> |
|
</div> |
|
|
|
<div class="modal fade" id="modal-hr" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> |
|
<div class="modal-dialog modal-lg"> |
|
<div class="modal-content"> |
|
<div class="modal-header d-flex flex-column" style="width: 100%;"> |
|
<h5 class="modal-title" id="modal-hr-title">Human Resource</h5> |
|
<h6 id="modal-hr-sub-title"></h6> |
|
<div> |
|
<!-- <button id="show-form-hr" type="button" class="btn btn-primary btn-sm"><i class="fa fa-plus" |
|
aria-hidden="true"></i></button> |
|
<button id="hide-form-hr" type="button" class="elm-hide btn btn-primary btn-sm"><i class="fa fa-chevron-up" |
|
aria-hidden="true"></i></button> --> |
|
<!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
|
<span aria-hidden="true">×</span> |
|
</button> --> |
|
</div> |
|
</div> |
|
<div class="modal-body"> |
|
<form id="form-assign-hr"> |
|
<div class="form-row"> |
|
<div class="col-md-7 form-group"> |
|
<label>Human Resource</label> |
|
<select id="select-hr" name="user_id[]" multiple="multiple" |
|
class="form-control form-control-sm" style="width:100%;"></select> |
|
</div> |
|
<div class="col-md-2 form-group"> |
|
<label>Start Date</label> |
|
<input type="date" id="hr-start-date" class="form-control form-control-sm" /> |
|
<small style="color: #f75b5b;" id="modal-hr-time-startDate"></small> |
|
</div> |
|
<div class="col-md-2 form-group"> |
|
<label>End Date</label> |
|
<input type="date" id="hr-end-date" class="form-control form-control-sm" /> |
|
<small style="color: #f75b5b;" id="modal-hr-time-endDate"></small> |
|
</div> |
|
<div class="col-md-1 form-group"> |
|
<button style="margin-top: 31px;" id="btn-assign-hr" type="submit" |
|
class="btn btn-sm btn-primary">Assign</button> |
|
</div> |
|
<input type="hidden" id=hr_role /> |
|
</div> |
|
<hr /> |
|
</form> |
|
<table id="table-hr" class="table table-sm" style="width: 100%;"> |
|
<thead> |
|
<tr> |
|
<th scope="col">User</th> |
|
<th scope="col">Role</th> |
|
<th scope="col">Start Date</th> |
|
<th scope="col">End Date</th> |
|
<th scope="col">Actions</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
</tbody> |
|
</table> |
|
</div> |
|
<div class="modal-footer"> |
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- modal comments --> |
|
<div class="modal fade" id="modal_comments" tabindex="-1" role="dialog"> |
|
<div class="modal-dialog" role="document"> |
|
<div class="modal-content"> |
|
<div class="modal-header"> |
|
<h5 class="modal-title">Comments - <span id="comments_title"></span></h5> |
|
<div class="modal-actions"> |
|
<button title="Add Comment" type="button" class="btn btn-primary btn-sm modal_add_btn_comment"> |
|
<span aria-hidden="true"><i class="fa fa-plus"></i></span> |
|
</button> |
|
<!-- <button title="close" type="button" class="btn btn-xs" data-dismiss="modal" aria-label="Close"> |
|
<span aria-hidden="true"><i class="fa fa-times"></i></span> |
|
</button> --> |
|
</div> |
|
</div> |
|
<div class="modal-body" id="modal_comments_body"> |
|
<div> |
|
<form id="add_comment_form"> |
|
<input type="hidden" id="activity_id" name="activity_id" /> |
|
<div class="form-group"> |
|
<label for="comment"><b>Add comment</b></label> |
|
<textarea class="form-control" id="comment" name="comment" rows="3"></textarea> |
|
</div> |
|
<div class="text-right"> |
|
<button type="button" class="btn btn-sm btn-primary" |
|
id="btn_comment_submit">Submit</button> |
|
</div> |
|
<hr /> |
|
</form> |
|
</div> |
|
<div id="comments_list"> |
|
|
|
</div> |
|
</div> |
|
<div class="modal-footer"> |
|
<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button> |
|
<!-- <button type="button" class="btn btn-primary">Save changes</button> --> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- modal upload document --> |
|
<div class="modal fade" id="modal_upload_doc" tabindex="-1" role="dialog"> |
|
<div class="modal-dialog modal-lg" role="document"> |
|
<div class="modal-content"> |
|
<div class="modal-header"> |
|
<h5 class="modal-title">Upload Document - <span id="upload_doc_title"></span></h5> |
|
<div class="modal-actions"> |
|
<button title="Add Document" type="button" class="btn btn-primary btn-sm modal_add_btn_doc"> |
|
<span aria-hidden="true"><i class="fa fa-plus"></i></span> |
|
</button> |
|
</div> |
|
</div> |
|
<div class="modal-body"> |
|
<div> |
|
<form id="add_doc_form"> |
|
<input type="hidden" id="activity_id" name="activity_id" /> |
|
<div class="form-group"> |
|
<label for="dokumen"><b>Add document</b></label> |
|
<input type="file" class="form-control" name="dokumen" id="dokumen" /> |
|
</div> |
|
<div class="text-right"> |
|
<!-- <button type="button" class="btn btn-sm btn-warning text-white" id="btn_doc_reset">Reset</button> --> |
|
<button type="button" class="btn btn-sm btn-primary" id="btn_doc_submit">Upload</button> |
|
</div> |
|
<hr /> |
|
</form> |
|
</div> |
|
<div id="documents_list"> |
|
<table id="documents_table"> |
|
<thead> |
|
<tr> |
|
<th>Action</th> |
|
<th>Nama Dokumen</th> |
|
<th>Tanggal Upload</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
|
|
</tbody> |
|
</table> |
|
|
|
</div> |
|
</div> |
|
<div class="modal-footer"> |
|
<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- modal assign material --> |
|
<div class="modal fade" id="modal-material" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> |
|
<div class="modal-dialog modal-lg"> |
|
<div class="modal-content"> |
|
<div class="modal-header d-flex flex-column" style="width: 100%;"> |
|
<h5 class="modal-title" id="modal-material-title">Material Resource</h5> |
|
<h6 id="modal-material-sub-title"></h6> |
|
</div> |
|
<div class="modal-body"> |
|
<form id="form-assign-material"> |
|
<div class="form-row"> |
|
<div class="col-md-2 form-group"> |
|
<label>Description</label> |
|
<select id="select-material-integration" name="descriptionReqMaterial" |
|
class="form-control form-control-sm" style="width:100%;"></select> |
|
</div> |
|
<div class="col-md-2 form-group"> |
|
<label>Price (IDR)</label> |
|
<input type="text" id="price-req-material" name="priceReqMaterial" |
|
class="form-control form-control-sm" /> |
|
</div> |
|
<div class="col-md-1 form-group"> |
|
<label>QTY</label> |
|
<input type="text" id="qty-req-material" name="qtyReqMaterial" |
|
class="form-control form-control-sm" /> |
|
</div> |
|
<div class="col-md-2 form-group"> |
|
<label class="d-block">UOM</label> |
|
<select id="uom-req-material" name="uomReqexpense" |
|
class="form-control form-control-sm" style="width: 100% !important;"></select> |
|
</div> |
|
<div class="col-md-2 form-group"> |
|
<label>Expected Arrival Date</label> |
|
<input type="date" id="required-date-req-material" name="requiredDateReqMaterial" |
|
class="form-control form-control-sm" /> |
|
</div> |
|
<div class="col-md-2 form-group"> |
|
<label>Will Be Used At</label> |
|
<input type="date" id="required-date-plan-material" name="requiredDatePlanMaterial" |
|
class="form-control form-control-sm" /> |
|
</div> |
|
<div class="col-md-1 form-group"> |
|
<button style="margin-top: 31px; width: 100% !important;" id="btn-assign-material" type="submit" |
|
class="btn btn-sm btn-primary">Assign</button> |
|
</div> |
|
</div> |
|
<hr /> |
|
</form> |
|
<table id="table-material" class="table table-sm" style="width: 100%;"> |
|
<thead> |
|
<tr> |
|
<th scope="col">Material Name</th> |
|
<th scope="col">QTY</th> |
|
<th scope="col">UOM</th> |
|
<th scope="col">Price</th> |
|
<th scope="col">Planning Date</th> |
|
<th scope="col">Actions</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
</tbody> |
|
</table> |
|
</div> |
|
<div class="modal-footer"> |
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="modal fade" id="modal-expense" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> |
|
<div class="modal-dialog modal-lg"> |
|
<div class="modal-content"> |
|
<div class="modal-header d-flex flex-column" style="width: 100%;"> |
|
<h5 class="modal-title" id="modal-expense-title">Expense</h5> |
|
<h6 id="modal-expense-sub-title"></h6> |
|
</div> |
|
<div class="modal-body"> |
|
<form id="form-assign-expense"> |
|
<div class="form-row"> |
|
<div class="col-md-2 form-group"> |
|
<label>Description</label> |
|
<input type="text" id="desc-expense" name="descriptionReqexpense" |
|
class="form-control form-control-sm" /> |
|
</div> |
|
<div class="col-md-2 form-group"> |
|
<label>Price (IDR)</label> |
|
<input type="text" id="price-req-expense" name="priceReqexpense" |
|
class="form-control form-control-sm" /> |
|
</div> |
|
<div class="col-md-1 form-group"> |
|
<label>QTY</label> |
|
<input type="text" id="qty-req-expense" name="qtyReqexpense" |
|
class="form-control form-control-sm" /> |
|
</div> |
|
<div class="col-md-2 form-group"> |
|
<label class="d-block">UOM</label> |
|
<select id="uom-req-expense" name="uomReqexpense" |
|
class="form-control form-control-sm" style="width: 100% !important;"></select> |
|
</div> |
|
<div class="col-md-2 form-group"> |
|
<label>Expected Arrival Date</label> |
|
<input type="date" id="required-date-req-expense" name="requiredDateReqexpense" |
|
class="form-control form-control-sm" /> |
|
</div> |
|
<div class="col-md-2 form-group"> |
|
<label>Will Be Used At</label> |
|
<input type="date" id="required-date-plan-expense" name="requiredDatePlanexpense" |
|
class="form-control form-control-sm" /> |
|
</div> |
|
<div class="col-md-1 form-group"> |
|
<button style="margin-top: 31px; width: 100% !important;" id="btn-assign-expense" type="submit" |
|
class="btn btn-sm btn-primary">Assign</button> |
|
</div> |
|
</div> |
|
<hr /> |
|
</form> |
|
<table id="table-expense" class="table table-sm" style="width: 100%;"> |
|
<thead> |
|
<tr> |
|
<th scope="col">Description</th> |
|
<th scope="col">QTY</th> |
|
<th scope="col">UOM</th> |
|
<th scope="col">Price</th> |
|
<th scope="col">Will Be Used At</th> |
|
<th scope="col">Actions</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
</tbody> |
|
</table> |
|
</div> |
|
<div class="modal-footer"> |
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- modal assign tools --> |
|
<div class="modal fade" id="modal-tools" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> |
|
<div class="modal-dialog modal-lg"> |
|
<div class="modal-content"> |
|
<div class="modal-header d-flex flex-column" style="width: 100%;"> |
|
<h5 class="modal-title" id="modal-tools-title">Tools Resource</h5> |
|
<h6 id="modal-tools-sub-title"></h6> |
|
</div> |
|
<div class="modal-body"> |
|
<form id="form-assign-tools"> |
|
<div class="form-row"> |
|
<div class="col-md-5 form-group"> |
|
<label>Tools Resource</label> |
|
<select id="select-tools" name="tools_id" class="form-control form-control-sm" |
|
style="width:100%;"></select> |
|
</div> |
|
<div class="col-md-5 form-group"> |
|
<label>QTY</label> |
|
<input type="number" id="select-tools-qty" name="qty" |
|
class="form-control form-control-sm" /> |
|
</div> |
|
<div class="col-md-2 form-group"> |
|
<button style="margin-top: 31px;" id="btn-assign-tools" type="submit" |
|
class="btn btn-sm btn-primary">Assign</button> |
|
</div> |
|
</div> |
|
<hr /> |
|
</form> |
|
<table id="table-tools" class="table table-sm" style="width: 100%;"> |
|
<thead> |
|
<tr> |
|
<th scope="col">Tools Name</th> |
|
<th scope="col">QTY</th> |
|
<th scope="col">UOM</th> |
|
<th scope="col">Actions</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
</tbody> |
|
</table> |
|
</div> |
|
<div class="modal-footer"> |
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<!-- modal gantt setting --> |
|
<div class="modal fade" id="modal_gantt_setting" tabindex="-1" role="dialog"> |
|
<div class="modal-dialog modal-lg" role="document"> |
|
<div class="modal-content"> |
|
<div class="modal-header"> |
|
<h5 class="modal-title">Gantt Settings</h5> |
|
<div class="modal-actions"> |
|
<!-- <button title="add comment" type="button" class="btn btn-xs modal_add_btn_comment"> |
|
<span aria-hidden="true"><i class="fa fa-plus"></i></span> |
|
</button> --> |
|
<button title="close" type="button" class="btn btn-xs" data-dismiss="modal" aria-label="Close"> |
|
<span aria-hidden="true"><i class="fa fa-times"></i></span> |
|
</button> |
|
</div> |
|
</div> |
|
<div class="modal-body" id="modal_gantt_setting_body"> |
|
<ul class="nav nav-tabs" id="myTab" role="tablist"> |
|
<li class="nav-item" role="presentation"> |
|
<a class="nav-link active" id="days-off-tab" data-toggle="tab" href="#days-off" role="tab" |
|
aria-controls="days-off" aria-selected="true">Days Off</a> |
|
</li> |
|
<li class="nav-item" role="presentation"> |
|
<a class="nav-link" id="timeline-tab" data-toggle="tab" href="#timeline" role="tab" |
|
aria-controls="timeline" aria-selected="false">Timeline</a> |
|
</li> |
|
<li class="nav-item" role="presentation"> |
|
<a class="nav-link" id="cost-tab" data-toggle="tab" href="#cost" role="tab" |
|
aria-controls="cost" aria-selected="false">Cost</a> |
|
</li> |
|
</ul> |
|
<div class="tab-content" id="myTabContent"> |
|
<div class="tab-pane fade show active pt-1" id="days-off" role="tabpanel" |
|
aria-labelledby="days-off-tab"> |
|
<div> |
|
<form id="modal_gantt_setting_form"> |
|
<div class="form-group"> |
|
<label><b>Set Days Off</b></label> |
|
<select name="select_dayoff[]" id="select_dayoff" class="form-control" |
|
placeholder="Select Days" multiple> |
|
<option value="0">Sunday</option> |
|
<option value="1">Monday</option> |
|
<option value="2">Tuesday</option> |
|
<option value="3">Wednesday</option> |
|
<option value="4">Thursday</option> |
|
<option value="5">Friday</option> |
|
<option value="6">Saturday</option> |
|
</select> |
|
</div> |
|
</form> |
|
</div> |
|
<div> |
|
<div class="d-flex justify-content-between pr-1 pl-1 mb-1" style="width: 100%;"> |
|
<h6><b>Set Holidays</b></h6> |
|
<button id="add-holiday" class="btn btn-sm btn-primary"><i |
|
class="fa fa-plus"></i></button> |
|
<button id="hide-holiday" class="btn btn-sm btn-primary elm-hide"><i |
|
class="fa fa-chevron-up"></i></button> |
|
</div> |
|
<form class="mb-1 elm-hide" id="form_holiday"> |
|
<div class="form-row"> |
|
<div class="col-md-3 form-group"> |
|
<label>Date</label> |
|
<input id="date_holiday" required type="date" name="date" |
|
class="form-control form-control-sm" /> |
|
</div> |
|
<div class="col-md-3 form-group"> |
|
<label>Duration</label> |
|
<input id="duration_holiday" required type="number" name="duration" |
|
class="form-control form-control-sm" value="1" /> |
|
</div> |
|
<div class="col-md-6 form-group"> |
|
<label>Description</label> |
|
<textarea id="desc_holiday" type="text" name="description" |
|
class="form-control form-control-sm" |
|
placeholder="Cuti bersama tahun baru.."></textarea> |
|
</div> |
|
</div> |
|
<div class="text-right"> |
|
<button id="btn_add_holiday" type="submit" class="btn btn-sm btn-primary">Add |
|
Holiday</button> |
|
</div> |
|
<hr /> |
|
</form> |
|
<table style="width: 100%;" class="table table-sm" id="table_holiday"> |
|
<thead> |
|
<tr> |
|
<th>Date</th> |
|
<th>Duration</th> |
|
<th>Description</th> |
|
<th>Action</th> |
|
</tr> |
|
</thead> |
|
</table> |
|
</div> |
|
</div> |
|
<div class="tab-pane fade pt-1" id="timeline" role="tabpanel" aria-labelledby="timeline-tab"> |
|
<div class="row"> |
|
<div class="col-md-6"> |
|
<label>Critical Path</label> |
|
<div class="custom-control custom-switch btn-icon-toolbar"> |
|
<input type="checkbox" class="custom-control-input" id="critalPathBox"> |
|
<label class="custom-control-label" for="critalPathBox"> </label> |
|
</div> |
|
</div> |
|
<div class="col-md-6"> |
|
<label>Auto Schedule</label> |
|
<div class="custom-control custom-switch btn-icon-toolbar"> |
|
<input type="checkbox" class="custom-control-input" id="autoSchedule"> |
|
<label class="custom-control-label" for="autoSchedule"> </label> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="tab-pane fade pt-1" id="cost" role="tabpanel" aria-labelledby="cost-tab"> |
|
<div class="row"> |
|
<div class="col-md-6"> |
|
<label>Cost to Complete</label> |
|
<input type="number" class="form-control" id="costToCompleteBox"> |
|
</div> |
|
<div class="col-md-6"> |
|
<label>Committed Cost</label> |
|
<input type="number" class="form-control" id="committedCostBox"> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="modal-footer"> |
|
<!-- <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button> --> |
|
<button type="button" class="btn btn-sm btn-primary" id="btn_save_setting">Apply changes</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- modal gantt milestone --> |
|
<div class="modal fade" id="modal-add-milestone" tabindex="-1" role="dialog"> |
|
<div class="modal-dialog" role="document"> |
|
<div class="modal-content"> |
|
<div class="modal-header"> |
|
<h5 class="modal-title">Add Milestone</h5> |
|
<div class="modal-actions"> |
|
<button title="close" type="button" class="btn btn-xs" data-dismiss="modal" aria-label="Close"> |
|
<span aria-hidden="true"><i class="fa fa-times"></i></span> |
|
</button> |
|
</div> |
|
</div> |
|
<form id="form-milestone"> |
|
<div class="modal-body"> |
|
<input type="hidden" id="milestone_parent" name="milestone_parent" /> |
|
<input type="hidden" id="name_milestone" name="status" /> |
|
<div class="form-group"> |
|
<label>Milestone Name</label> |
|
<select id="select-milestone" name="id_milestone" class="form-control form-control-sm" |
|
style="width:100%;"></select> |
|
<!-- <input type="text" name="name" class="form-control form-control-sm" placeholder="Build 1.." /> --> |
|
</div> |
|
<div class="form-row"> |
|
<div class="col-md-6 form-group"> |
|
<label>Due Date</label> |
|
<input id="due_milestone" type="text" name="due_date" |
|
class="form-control form-control-sm" /> |
|
</div> |
|
<div class="col-md-6 form-group"> |
|
<label>Deadline</label> |
|
<input id="deadline_milestone" type="text" name="deadline" |
|
class="form-control form-control-sm" /> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="modal-footer"> |
|
<button type="submit" class="btn btn-sm btn-primary" id="submit-milestone">Add</button> |
|
</div> |
|
</form> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- modal gantt laporan activity new --> |
|
<div class="modal fade" id="modal_report_activity" tabindex="-1" role="dialog"> |
|
<div class="modal-dialog modal-lg" role="document"> |
|
<div class="modal-content"> |
|
<div class="modal-header d-flex flex-row justify-content-between" style="width: 100%;"> |
|
<div class="d-flex flex-column"> |
|
<h5 class="modal-title" id="report_activity_title">Report Activity</h5> |
|
<h6 id="report_activity_sub_title"></h6> |
|
</div> |
|
<div> |
|
<button id="show_form_ra" type="button" class="success btn btn-success btn-sm btn-update-status" |
|
data-toggle="tooltip" title="Input Update Status" data-placement="top" aria-hidden="true"><i |
|
class="fa fa-cog" aria-hidden="true"></i></button> |
|
</div> |
|
</div> |
|
<div class="modal-body"> |
|
|
|
<form class="elm-hide" id="form_report_activity"> |
|
<h6 class="text-update-status"></h6> |
|
<input type="hidden" id="id_ra" /> |
|
<div class="form-row"> |
|
<div class="col-md-4 form-group"> |
|
<label>Status</label> |
|
<select class="form-control" name="status_activity" id="ra_select_status"> |
|
<option value="">Select Status --</option> |
|
<option value="open">Open</option> |
|
<option value="on-progress">On Progress</option> |
|
<option value="done">Done</option> |
|
</select> |
|
</div> |
|
<div class="col-md-4 form-group"> |
|
<label>Start Activity Date</label> |
|
<input type="date" id="ra_date_start_activity" name="start_activity" |
|
class="form-control form-control-sm" /> |
|
</div> |
|
<div class="col-md-4 form-group"> |
|
<label>End Activity Date</label> |
|
<input type="date" id="ra_date_end_activity" name="finish_activity" |
|
class="form-control form-control-sm" /> |
|
</div> |
|
|
|
</div> |
|
|
|
<div class="text-right"> |
|
<button type="button" class="btn btn-sm btn-info btn-cancel-status" data-dismiss="modal" |
|
aria-label="Close">Cancel</button> |
|
<button type="submit" class="btn btn-sm btn-secondary">Save</button> |
|
</div> |
|
<hr /> |
|
</form> |
|
|
|
<div id="report-activity-information"> |
|
<h5>Activity Status Information</h5> |
|
<p style="margin-bottom:2px"> |
|
<span>Status</span> : <span id="report-activity-information-status">-</span> |
|
</p> |
|
<p style="margin-bottom:2px"> |
|
<span>Start Activity</span> : <span id="report-activity-information-start">-</span> |
|
</p> |
|
<p style="margin-bottom:2px"> |
|
<span>End Activity</span> : <span id="report-activity-information-end">-</span> |
|
</p> |
|
<hr /> |
|
</div> |
|
|
|
<div class="table-responsive"> |
|
<table id="table_report" class="table table-sm" style="width: 100%;"> |
|
<thead> |
|
<tr> |
|
<th scope="col">Deskripsi</th> |
|
<th scope="col">Tipe</th> |
|
<th scope="col">Volume Plan</th> |
|
<th scope="col">Volume Actual</th> |
|
<th scope="col">UOM</th> |
|
<th scope="col">Aksi</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
</tbody> |
|
</table> |
|
</div> |
|
</div> |
|
<div class="modal-footer"> |
|
<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal" |
|
aria-label="Close">Close</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- modal untuk add report activity per material --> |
|
<div class="modal fade" id="modal_report_activity_material" tabindex="-1" role="dialog"> |
|
<div class="modal-dialog modal-lg" role="document" style="padding-top:5%;"> |
|
<!-- <div class="modal-dialog modal-lg" role="document"> --> |
|
<div class="modal-content"> |
|
<div class="modal-header d-flex flex-column" style="width: 100%;"> |
|
<h5 class="modal-title" id="report_activity_material_title">Report Activity</h5> |
|
<h6 id="report_activity_material_sub_title"></h6> |
|
</div> |
|
<div class="modal-body"> |
|
<form class="mb-1 elm-hide" id="form_report_activity_material"> |
|
<input type="hidden" id="id_ra_material" /> |
|
<div class="form-row"> |
|
<div class="col-md-2 form-group"> |
|
<label>Human Resource</label> |
|
<select id="select_ra_hr_material" name="user_id" class="form-control form-control-sm" |
|
style="width:100%;" required></select> |
|
</div> |
|
<div class="col-md-2 form-group"> |
|
<label>Report Date</label> |
|
<input type="text" id="ra_date_material" name="report_date" |
|
class="form-control form-control-sm" required /> |
|
</div> |
|
<div class="col-md-2 form-group"> |
|
<label>Volume Aktual</label> |
|
<input type="text" id="volume_pekerjaan_material" name="qty" |
|
class="form-control form-control-sm" /> |
|
</div> |
|
<div class="col-md-2 form-group"> |
|
<label>Foto</label> |
|
<input type="file" id="foto_ra_material" name="files" |
|
class="form-control form-control-sm" /> |
|
</div> |
|
<div class="col-md-4 form-group"> |
|
<label>Keterangan</label> |
|
<textarea id="ra_description_material" class="form-control form-control-sm" |
|
name="description"></textarea> |
|
</div> |
|
</div> |
|
<div class="text-right"> |
|
<button id="btn_add_ra_material" type="submit" class="btn btn-sm btn-primary" |
|
row="1">Add</button> |
|
</div> |
|
<hr /> |
|
</form> |
|
<!-- for plan --> |
|
<div class="table-responsive" id="activity_material_plan"> |
|
<table id="table_activity_material_plan" class="table table-sm" style="width: 100%;"> |
|
<thead> |
|
<tr> |
|
<th scope="col">Deskripsi</th> |
|
<th scope="col">Volume Pekerjaan</th> |
|
<th scope="col">UOM</th> |
|
<th scope="col">Plan Date</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
</tbody> |
|
</table> |
|
</div> |
|
<!-- for actual --> |
|
<div class="table-responsive" id="activity_material_actual"> |
|
|
|
<table id="table_activity_material_actual" class="table table-sm" style="width: 100%;"> |
|
<thead> |
|
<tr> |
|
<th scope="col">Human Resource</th> |
|
<th scope="col">Report Date</th> |
|
<th scope="col">Volume Actual</th> |
|
<th scope="col">Volume Plan</th> |
|
<th scope="col">Keterangan</th> |
|
<th scope="col">Actions</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
</tbody> |
|
</table> |
|
</div> |
|
</div> |
|
<div class="modal-footer"> |
|
<button id="btn-back-material" type="button" class="btn btn-sm btn-primary">Back</button> |
|
<!-- <button id="btn-close-material" type="button" class="btn btn-sm btn-secondary" data-dismiss="modal" --> |
|
<!-- aria-label="Close">Close</button> --> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- modal gantt activity location --> |
|
<div class="modal fade" id="modal_activity_location" tabindex="-1" role="dialog"> |
|
<div class="modal-dialog modal-lg" role="document"> |
|
<div class="modal-content"> |
|
<div class="modal-header d-flex flex-row justify-content-between" style="width: 100%;"> |
|
<h5 class="modal-title" id="report_activity_location">Activity Location</h5> |
|
</div> |
|
<div class="modal-body"> |
|
<div id="map_activity"></div> |
|
</div> |
|
<div class="modal-footer"> |
|
<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal" |
|
aria-label="Close">Close</button> |
|
<button type="button" class="btn btn-primary" id="btn_save_location">Save Location</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- modal gantt activity location --> |
|
<div class="modal fade" id="modal_radius" tabindex="-1" role="dialog"> |
|
<div class="modal-dialog" role="document"> |
|
<div class="modal-content"> |
|
<div class="modal-header d-flex flex-row justify-content-between" style="width: 100%;"> |
|
<h5 class="modal-title" id="report_activity_location">Set Buffer Radius</h5> |
|
</div> |
|
<div class="modal-body"> |
|
<form> |
|
<div class="form-group"> |
|
<label>Radius (Meter)</label> |
|
<input id="buffer_radius" type="number" class="form-control form-control-sm" min="1" /> |
|
</div> |
|
</form> |
|
</div> |
|
<div class="modal-footer"> |
|
<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal" |
|
aria-label="Close">Cancel</button> |
|
<button type="button" class="btn btn-primary" id="btn_save_radius">Save Radius</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- modal gantt image report activity --> |
|
<div class="modal fade" id="modal-report-image" tabindex="-1" role="dialog"> |
|
<div class="modal-dialog modal-lg" role="document"> |
|
<div class="modal-content"> |
|
<div class="modal-header d-flex flex-row justify-content-between" style="width: 100%;"> |
|
<h5 class="modal-title" id="report_activity_location">Report Image</h5> |
|
</div> |
|
<div class="modal-body"> |
|
<div id="report-image"></div> |
|
</div> |
|
<div class="modal-footer"> |
|
<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal" |
|
aria-label="Close">Close</button> |
|
<!-- <button type="button" class="btn btn-primary" id="btn_save_location">Save Location</button> --> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
</body> |
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
|
<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" |
|
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" |
|
crossorigin="anonymous"></script> --> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" |
|
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"> |
|
</script> |
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" |
|
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"> |
|
</script> |
|
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script> |
|
<script src="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/choices.min.js"></script> |
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.24.0/axios.min.js" |
|
integrity="sha512-u9akINsQsAkG9xjc1cnGF4zw5TFDwkxuc9vUp5dltDWYCSmyd0meygbvgXrlc/z7/o4a19Fb5V0OUE58J7dcyw==" |
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script> |
|
<script src="https://cdn.jsdelivr.net/gh/xcash/bootstrap-autocomplete@v2.3.7/dist/latest/bootstrap-autocomplete.min.js"> |
|
</script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" |
|
integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ==" |
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js" |
|
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" |
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> |
|
<script src="../assets/fontawesome/js/all.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js" |
|
integrity="sha512-ozq8xQKq6urvuU6jNgkfqAmT7jKN2XumbrX1JiB3TnF7tI48DPI4Gy1GXKD/V3EExgAs1V+pRO7vwtS1LHg0Gw==" |
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script> |
|
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script> |
|
<script src="../assets/js/moment.min.js"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/underscore@latest/underscore-umd-min.js"></script> |
|
<script src="function/function.js"></script> |
|
<script src="function/ganttConfig.js"></script> |
|
<script src="function/ganttEvent.js"></script> |
|
<script src="function/restActivityLink.js"></script> |
|
<script src="function/ganttActivityComments.js"></script> |
|
<script src="function/ganttActivityUploadDoc.js"></script> |
|
<script src="function/ganttSettings.js"></script> |
|
<script src="function/humanResource.js"></script> |
|
<script src="function/toolsResource.js"></script> |
|
<script src="function/materialResource.js"></script> |
|
<script src="function/expenseResource.js"></script> |
|
<script src="function/milestone.js"></script> |
|
<script src="function/holiday.js"></script> |
|
<script src="function/reportActivity.js"></script> |
|
<script src="function/activityLocation.js"></script> |
|
<script> |
|
var button = document.getElementById("fullscreen_button"); |
|
button.addEventListener("click", function () { |
|
if (!gantt.getState().fullscreen) { |
|
gantt.expand(); |
|
} |
|
else { |
|
gantt.collapse(); |
|
} |
|
}, false); |
|
</script> |
|
</body> |