<!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">|</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="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-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-row justify-content-between" style="width: 100%;"> <h5 class="modal-title" id="exampleModalLabel">Human Resource</h5> <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-10 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"> <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 class="col-md-6 form-group"> <label>Project Role Resource</label> <select id="select-role-hr" name="role_proyek_id" class="form-control form-control-sm" style="width:100%;"></select> </div> --> </div> <!-- <div class="text-right"> <button id="btn-assign-hr" type="submit" class="btn btn-sm btn-primary">Assign</button> </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">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-row justify-content-between" style="width: 100%;"> <h5 class="modal-title" id="modal-material-title">Material Resource</h5> <div> </div> </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-2 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-1 form-group"> <label>UOM</label> <select id="uom-req-material" name="uomReqMaterial" class="form-control form-control-sm"></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;" 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-row justify-content-between" style="width: 100%;"> <h5 class="modal-title" id="modal-expense-title">Expense</h5> </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-2 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-1 form-group"> <label>UOM</label> <select id="uom-req-expense" name="uomReqexpense" class="form-control form-control-sm"></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;" 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">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> <!-- 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> </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="date" 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="date" 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%;"> <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"> <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 Kumulatif Plan</th> <th scope="col">Volume Kumulatif Aktual</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-row justify-content-between" style="width: 100%;"> <h5 class="modal-title" id="report_activity_material_title">Report Activity</h5> </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="date" 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 Pekerjaan</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>