<!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/dhtmlxganttpro.js?v=7.1.8"></script> <link rel="stylesheet" href="../codebase/dhtmlxgantt.css?v=7.1.8"> <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" /> <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> <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="scurve_button" title="Display S-Curve" class="btn btn-sm btn-icon-toolbar" onclick="toggleOverlay()" value="Toggle Progress Line"> <i class="fa icon-toolbar fa-chart-line"></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-row justify-content-between" style="width: 100%;"> <h5 class="modal-title" id="exampleModalLabel">Human Resource</h5> </div> <div class="modal-body"> <table id="table-hr" class="table table-sm" style="width: 100%;"> <thead> <tr> <th scope="col">User</th> <th scope="col">Role</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> </div> </div> <div class="modal-body" id="modal_comments_body"> <div id="comments_list"> </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 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 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-row justify-content-between" style="width: 100%;"> <h5 class="modal-title" id="modal-material-title">Material Resource</h5> </div> <div class="modal-body"> <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> </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-row justify-content-between" style="width: 100%;"> <h5 class="modal-title" id="exampleModalLabel">Tools Resource</h5> </div> <div class="modal-body"> <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> </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> </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> <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> <table style="width: 100%;" class="table table-sm" id="table_holiday"> <thead> <tr> <th>Date</th> <th>Duration</th> <th>Description</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> </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 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%;"> <h5 class="modal-title" id="report_activity_title">Report Activity</h5> <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"> <div class="table-responsive"> <table id="table_report" class="table table-sm" style="width: 100%;"> <thead> <tr> <th scope="col">Material</th> <th scope="col">Volume Kumulatif Plan</th> <th scope="col">Volume Kumulatif Aktual</th> <th scope="col">UOM</th> <th scope="col">Start Activity</th> <th scope="col">Finish Activity</th> <th scope="col">Status</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-row justify-content-between" style="width: 100%;"> <h5 class="modal-title" id="report_activity_material_title">Report Activity Material</h5> </div> <div class="modal-body"> <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">Material</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 Pekerjaan</th> <th scope="col">Deskripsi</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 style="margin-top: 5%;" 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"> </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> </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://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" --> <!-- integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==" --> <!-- crossorigin="anonymous" --> <!-- referrerpolicy="no-referrer"></script> --> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js?v=7.1.12"></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/overlaySCurve.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>