Untitled
unknown
plain_text
7 months ago
113 kB
4
Indexable
Never
<script> var base_path = '<?=$base_path?>'; var pin = "<?=$pin.md5('++').$user_name?>"; var role = '<?=$arl_id?>'; var company = '<?=$user_detail->acm_id;?>'; // Parameter Map var base_path_image = "http://202.43.173.70:8342"; var flgsource = 'https://services.exactearth.com/www/flags/'; var mapOptions = { center: [-7, 120], zoom: 4 } var map = new L.map('map', mapOptions); var accessToken = 'pk.eyJ1Ijoic3Bhc2kiLCJhIjoiY2t6MjZobzV5MWw3cjJ2bXZjODlnMm96OSJ9.194sNKyGb_OTBZFBmAD1Sw'; var layer = new L.TileLayer('https://api.tiles.mapbox.com/styles/v1/spasi/cl7qz4i33000514r7m52qe3fr/tiles/{tileSize}/{z}/{x}/{y}?access_token='+accessToken+''); map.addLayer(layer); // Legend var map_legend = L.control({ position: 'topright' }); map_legend.onAdd = function (map) { var div = L.DomUtil.create('div', 'info map-legend-container'); div.innerHTML = '<div id="map-legend"></div>'; div.setAttribute('style', 'background:rgba(255, 255, 255, 1); color: #212529; border: 2px solid rgb(14, 182, 204, 0.5); border-radius: 4px;max-height:150px;padding: 5px; margin-bottom: 32px; width: 162px; display:block;'); L.DomEvent.disableScrollPropagation(div); return div; }; map_legend.addTo(map); var vslall = L.layerGroup(); vslall.setZIndex(5); map.addLayer(vslall); var vslpane = map.createPane('vslpane'); var vslhoverpane = map.createPane('vslhoverpane'); var notifpane = map.createPane('notifpane'); var shadowMarker = L.layerGroup(); map.getPane('vslpane').style.zIndex = 650; map.getPane('vslhoverpane').style.zIndex = 750; map.getPane('notifpane').style.zIndex = 800; $('#tblVEFHistory').dataTable({ bFilter: false, scrollX: true, scrollY: '150px', scrollCollapse: true, }); function collapsePopup(popup){ if($(popup).hasClass('collapsed')){ if($('.home-card-slider-collapse').hasClass('active')){ var vHeight = parseInt($('#map').height()) - 265; }else{ var vHeight = parseInt($('#map').height()) - 54; } $(popup).animate({height: vHeight}); $(popup).find('.collapse.chevron .svg-inline--fa').addClass('fa-chevron-up'); $(popup).find('.collapse.chevron .svg-inline--fa').removeClass('fa-chevron-down'); $(popup).removeClass('collapsed'); }else{ $(popup).find('.collapse.chevron .svg-inline--fa').removeClass('fa-chevron-up'); $(popup).find('.collapse.chevron .svg-inline--fa').addClass('fa-chevron-down'); $(popup).addClass('collapsed'); $(popup).animate({height: '32px'}); } } function openVefHistoryMap(){ $('.vsl-popup-info-main').show(); $('#tblVEFHistory').DataTable().clear().draw(); var vslid = $("#map-vsl-id").val(); $.getJSON(base_path + '/modules/webservice/rest/?method=getHistoryVEF&vsl_id=' + vslid + '&pin=' + pin + '&format=json', {}, function (json, textStatus) { if (json.data !== null) { var dt = json.data; var i = 1; var html = ''; var t = $('#tblVEFHistory').DataTable(); dt.forEach((data) => { var r1 = data.sl - data.bl; var r1_perc = ((data.sl - data.bl)/data.bl)*100; var r2 = data.bd - data.sl; var r2_perc = ((data.bd - data.sl)/data.bd)*100; var r3 = data.shore - data.bd; var r3_perc = ((data.shore - data.bd)/data.shore)*100; var r4 = data.shore - data.bl; var r4_perc = ((data.sl - data.bl)/data.shore)*100; t.row.add([i, data.display_name, data.trip, data.date, data.bl, data.sl, r1, r1_perc.toFixed(2), data.bd, r2, r2_perc.toFixed(2), data.shore, r3, r3_perc.toFixed(2), r4, r4_perc.toFixed(2)]).draw(false); i++; }); } }); } function closePopup(popup){ $(popup).hide(); map.addLayer(vslall); map.addLayer(window['layer_open_request']); map.removeLayer(trackLayer); } function trackingClose(){ $('#tooltip-tab-tracking').removeClass('active'); $('#tooltip-tab-tracking').hide(); $('#tooltip-tab-vessel-info').show(); $('#tooltip-tab-vessel-info').addClass('active'); $('#vessel-info-btn-div').show(); $('#tracking-btn-div').removeClass('d-flex'); $('#tracking-btn-div').hide(); } // function trackingCollapse(){ // $('#tooltip-tab-vessel-info').removeClass('active'); // $('#tooltip-tab-vessel-info').hide(); // $('#tooltip-tab-tracking').show(); // $('#tooltip-tab-tracking').addClass('active'); // $('#vessel-info-btn-div').hide(); // $('#tracking-btn-div').show(); // $('#tracking-btn-div').addClass('d-flex'); // } // $(document).ready(function() { // Call Function $(function() { renderMapLegend(); GetvesselAll(); carouselVsl(); getPendingWorkflow(); // getOpenPositionLayer(); getOpenRequestLayer(); // getVesselOpenPosition(); // getVesselOnCharter(); getVesselOpenPositionOnCharter(); // defaultVesselOncharter(); homeCardSlider(); // if (role != '2') getVesselShare(); getPendingTask(); if (role == '3') getPendingEnquirySuggestion(); }); function homeCardSlider(){ $('.home-card-slider-collapse').click(function(){ if($(this).hasClass('active')){ $('#vessel-tab').animate({ bottom: 0 }); $('#contentVesselDashboard').animate({ bottom: -200 }); $(this).removeClass('active'); $('.vsl-info-fixed').css('height', 'calc(100% - 54px)'); }else{ $('#vessel-tab').animate({ bottom: 208 }); $('#contentVesselDashboard').animate({ bottom: 10 }); $(this).addClass('active'); $('.vsl-info-fixed').css('height', 'calc(100% - 265px)'); } }); } function defaultAllVessel(n) { // Tab Vessel Open Position if (n >= 3){ $('#all-potition-text-default').hide(); $('#all-position-vessel-not-data-default').addClass('d-none'); // var divs = $("div.home-card-slider-item").get().sort(function(){ // return Math.round(Math.random())-0.2; //random so we get the right +/- combo // }); // $(divs).show(); // $(divs).appendTo(divs[0].parentNode).show(); } else if (n == 0){ $('#all-position-vessel-not-data-default').addClass('col-12'); $('#all-potition-text-default').show(); $('#all-potition-text-default').text('No Vessel Found'); } else if (n == 1){ $('#all-position-vessel-not-data-default').addClass('col-7'); $('#all-position-text-default').hide(); } else if (n == 2){ $('#all-position-vessel-not-data-default').addClass('col-2'); $('#all-position-text-default').hide(); } } function defaultVesselOncharter(n) { // Tab Vessel On Charter if (n >= 3){ $('#on-charter-text-default').hide(); $('#on-charter-vessel-not-data-default').addClass('d-none'); } if(n >= 2){ $('#on-charter-vessel-not-data-default').addClass('col-2'); $('#on-charter-text-default').hide(); } if(n == 0){ $('#on-charter-vessel-not-data-default').addClass('data-0'); $('#on-charter-text-default').show(); $('#on-charter-text-default').text('No Vessel On Charter Found'); } if(n == 1){ $('#on-charter-vessel-not-data-default').addClass('data-1'); $('#on-charter-text-default').hide(); } } function defaultVesselOpenPosition(n) { // Tab Vessel Open Position if(n >= 3){ $('#open-position-vessel-not-data-default').addClass('d-none'); } if(n == 0){ $('#open-position-vessel-not-data-default').addClass('col-12'); $('#open-position-text-default').show(); $('#open-position-text-default').text('No Vessel On Open Position Found'); } if(n == 1){ $('#open-position-vessel-not-data-default').addClass('col-7'); $('#open-position-text-default').hide(); } if(n == 2){ $('#open-position-vessel-not-data-default').addClass('col-2'); $('#open-position-text-default').hide(); } } function carouselVsl(){ $('.list-vsl-btn-next').click(function(){ var pos = $(this).closest('.vsl-parent-container').find('.vsl-container-scroll').scrollLeft() + $(this).closest('.vsl-parent-container').find('.vessel-item').width() + 40; var maxScroll = $(this).closest('.vsl-parent-container').find('.vsl-container-scroll').width() - $(this).closest('.vsl-parent-container').find('.vsl-container-scroll').scrollLeft(); var lastScroll = maxScroll + $(this).closest('.vsl-parent-container').find('.vsl-container-scroll').scrollLeft(); $(this).closest('.vsl-parent-container').find('.vsl-container-scroll').animate({ scrollLeft: pos, }); $(this).closest('.vsl-parent-container').find('.vsl-container-scroll').scrollLeft(pos); if($(this).closest('.vsl-parent-container').find('.vsl-container-scroll').scrollLeft() != 0){ $(this).closest('.vsl-parent-container').find('.list-vsl-btn-prev').fadeIn(); } // if(lastScroll == maxScroll){ // $('.list-vsl-btn-next').addClass('d-none'); // } }); $('.list-vsl-btn-prev').click(function(){ var pos = $(this).closest('.vsl-parent-container').find('.vsl-container-scroll').scrollLeft() - $(this).closest('.vsl-parent-container').find('.vessel-item').width() - 40; var maxScroll = $(this).closest('.vsl-parent-container').find('.vsl-container-scroll').width() - $(this).closest('.vsl-parent-container').find('.vsl-container-scroll').scrollLeft(); var lastScroll = maxScroll + $(this).closest('.vsl-parent-container').find('.vsl-container-scroll').scrollLeft(); $(this).closest('.vsl-parent-container').find('.vsl-container-scroll').animate({ scrollLeft: pos, }); $(this).closest('.vsl-parent-container').find('.vsl-container-scroll').scrollLeft(pos); if($(this).closest('.vsl-parent-container').find('.vsl-container-scroll').scrollLeft() == 0){ $(this).closest('.vsl-parent-container').find('.list-vsl-btn-prev').fadeOut(); } // if(lastScroll != maxScroll){ // $('.list-vsl-btn-next').removeClass('d-none'); // } }); } function numberWithCommas(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } function GetvesselAll() { $("#vesselInfo").empty(); $('#map-tooltip-name').empty(); $.get(base_path + '/modules/webservice/rest/?pin='+pin+'&method=GetVesselAll&format=jsondatatable', {}, function (json, textStatus) { if (json != null && json != false) { var vsl_all = []; vsldata = json.split('\n'); for (var i = 0; i < vsldata.length; i++) { if (vsldata[i].includes('||')) { vsl_last_update = vsldata[i].split('||')[1].replace('"', ''); vsl_count = vsldata[i].split('||')[2].replace('"', ''); $('#btnVslLastUpdate').attr('title', 'Last Update : '+ vsl_last_update); new bootstrap.Tooltip($('#btnVslLastUpdate')) $('#total_vessel').text(vsl_count); } else { gtter = vsldata[i].split('\t'); vsl_count = gtter[13]; if (!(Number.isNaN(parseFloat(gtter[0])))) { vsl_all.push({ type: 'Feature', geometry: { type: 'Point', coordinates: [parseFloat(gtter[0]), parseFloat(gtter[1])], }, properties: { heading: parseFloat(gtter[4]), vsl_id: parseInt(gtter[2]), name: gtter[3], local_times: gtter[5], icon: gtter[10], isinaport: gtter[8], vessel_type: gtter[9], lnglat: [parseFloat(gtter[0]), parseFloat(gtter[1])], flag: gtter[6], ship_owner: gtter[12], trs_id: gtter[14], chartered_by: gtter[15], cargo: gtter[16], port_load: gtter[17], port_discharge: gtter[18], laycan_from: gtter[19], laycan_to: gtter[20], total_tank_capacity: gtter[21], last_cargo: gtter[22], ship_type: gtter[23], // mmsi: gtter[24], ref_id: gtter[25], inquiry_type: gtter[26], min_quantity: gtter[27], max_quantity: gtter[28], total_volume: gtter[29], quantity: gtter[30] }, style: { icon: { iconUrl: gtter[10], iconSize: [9, 10], iconAnchor: [8, 8], className: 'animated-icon my-icon-id', }, }, popupTemplate: '{name}', }); } } } var vsldat_all = { type: 'FeatureCollection', crs: { type: 'name', properties: { name: 'EPSG:4326' } }, features: vsl_all }; var iconsize = [13, 20]; var iconanchor = [7, 7]; // Layer All canvasTileAll = L.vectorGrid .slicer(vsldat_all, { interactive: true, maxZoom: 26, pane: 'vslpane', buffer: 500, rendererFactory: L.svg.tile, vectorTileLayerStyles: { sliced: function (feature) { return { icon: new L.icon({ iconUrl: feature.icon, Rotate: feature.heading, iconSize: iconsize, iconAnchor: iconanchor, labels: feature.name, }), }; }, }, getFeatureId: function (f) { return f.properties; }, }) .on('click', function (e) { $('#historytrack').empty(); $('.vsl-info-fixed.tracking .loading-data').show(); var pro = e.layer.properties; var urlflg = '/assets/img/flags/flag-default.png'; if (e.layer.properties.flag != null) { flg = e.layer.properties.flag; flg = flg.split('(')[0].trim(); flg = flg.split('[')[0].trim(); urlflg = flgsource + flg.replace(' ', '').replace('Unknown', 'unknown') + '.png'; } var content = ''; if (pro.trs_id > 0) { // enquiry exist var port_load = pro.port_load ? pro.port_load : '-'; var port_discharge = pro.port_discharge ? pro.port_discharge : '-'; var laycan_from = '-'; var laycan_to = '-'; if (pro.laycan_from) { laycan_from = moment(pro.laycan_from).format('DD/MM/Y'); } if (pro.laycan_to) { laycan_to = moment(pro.laycan_to).format('DD/MM/Y'); } var lblStatusVessel = ''; if (pro.trs_id === '4') { lblStatusVessel = 'Negotiation with'; } else if (pro.trs_id === '5') { lblStatusVessel = 'Chartered by'; } var inq_type = pro.inquiry_type; var capacity = pro.quantity ? numberWithCommas(pro.quantity) : '-'; // var capacity = pro.total_tank_capacity ? numberWithCommas(pro.total_tank_capacity) : '-'; // var capacity = ''; // if (inq_type === 'CA') { // capacity = pro.total_volume ? numberWithCommas(pro.total_volume) : '-'; // } else { // capacity = numberWithCommas(pro.min_quantity)+' - '+numberWithCommas(pro.max_quantity); // } content = '<input type="hidden" id="map-vsl-id" value="'+pro.vsl_id+'">'+ '<div id="reference_id" class="col-12 border-bottom pb-2">'+ '<span class="trx-badge '+inq_type.toLowerCase()+'">'+inq_type+'</span> <span style="font-weight: bold">'+pro.ref_id +'</span>'+ '</div>'+ '<div class="col-12">'+ '<p class="text-secondary mt-0 mb-1">'+lblStatusVessel+':</p>'+ '<p class="fw-bold my-0">'+pro.chartered_by+'</p>'+ '</div>'+ '<div class="col-6">'+ '<p class="text-secondary mt-0 mb-1">Cargo:</p>'+ '<p id="map-tooltip-cargo" class="fw-bold my-0">'+pro.cargo+'</p>'+ '</div>'+ '<div class="col-6">'+ '<p class="text-secondary mt-0 mb-1">Capacity:</p>'+ '<p id="map-tooltip-cargo" class="fw-bold my-0">'+capacity+'</p>'+ '</div>'+ '<div class="col-6 position-relative">'+ '<div class="d-flex align-items-start mb-3" style="z-index: 1; position: relative;">'+ '<img src="/i/icons/icon-port-circle.svg" class="me-2 mt-1"/>'+ '<div>'+ '<p class="my-0 text-secondary fs-10">Loading Port:</p>'+ '<p class="my-0" id="map-tooltip-loading-port">'+port_load+'</p>'+ '</div>'+ '</div>'+ '<div class="d-flex align-items-start" style="z-index: 1; position: relative;">'+ '<img src="/i/icons/icon-port-circle-filled.svg" class="me-2 mt-1"/>'+ '<div class="tooltip-discharging-port">'+ '<p class="my-0 text-secondary fs-10">Discharging Port:</p>'+ '<p class="my-0" id="map-tooltip-discharging-port">'+port_discharge+'</p>'+ '</div>'+ '</div>'+ '<div class="line-port"></div>'+ '<div class="line-port-hide"></div>'+ '</div>'+ '<div class="col-6 position-relative">'+ '<div class="d-flex align-items-start mb-3" style="z-index: 1; position: relative;">'+ '<img src="/i/icons/icon-port-circle.svg" class="me-2 mt-1"/>'+ '<div>'+ '<p class="my-0 text-secondary fs-10">Laycan:</p>'+ '<p class="my-0" id="map-tooltip-laycan-start">'+laycan_from+'</p>'+ '</div>'+ '</div>'+ '<div class="d-flex align-items-start" style="z-index: 1; position: relative;">'+ '<img src="/i/icons/icon-port-circle-filled.svg" class="me-2 mt-1"/>'+ '<div class="tooltip-discharging-port">'+ '<p class="my-0" id="map-tooltip-laycan-end">'+laycan_to+'</p>'+ '</div>'+ '</div>'+ '<div class="line-port"></div>'+ '<div class="line-port-hide"></div>'+ '</div>'; $('#map-tooltip-name').text(pro.name); } else { var last_cargo = pro.last_cargo ? pro.last_cargo : '-'; var capacity = pro.total_tank_capacity ? numberWithCommas(pro.total_tank_capacity) : '-'; var vessel_type = pro.ship_type ? pro.ship_type : '-'; content = '<input type="hidden" id="map-vsl-id" value="'+pro.vsl_id+'">'+ // '<div id="map-tooltip-local-times" class="col-12 border-bottom pb-2">'+ // pro.local_times + // '</div>'+ '<div class="col-12">'+ '<p class="text-secondary mt-0 mb-1">Last Cargo:</p>'+ '<p class="fw-bold my-0">'+last_cargo+'</p>'+ '</div>'+ '<div class="col-6">'+ '<p class="text-secondary mt-0 mb-1">Vessel Type:</p>'+ '<p id="map-tooltip-cargo" class="fw-bold my-0">'+vessel_type+'</p>'+ '</div>'+ '<div class="col-6">'+ '<p class="text-secondary mt-0 mb-1">Capacity:</p>'+ '<p id="map-tooltip-cargo" class="fw-bold my-0">'+capacity+'</p>'+ '</div>'; // show vessel name // show vessel name if (role === '2') { $('#map-tooltip-name').text(""); } else { $('#map-tooltip-name').text(pro.name); } } $("#vesselInfo").html(content) // $('#map-vsl-id').val(pro['vsl_id']); // $('#map-tooltip-local-times').text(pro['local_times']); // $('#map-tooltip-cargo').text(pro['vessel_type']); $('#map-tooltip-lnglat').text(pro.lnglat); $('#map-tooltip-local-times').text(pro.local_times); $('.vsl-info-fixed').hide(); $('.vsl-info-fixed.tracking').show(); $('.vsl-info-fixed.tracking .loading-data').hide(); tooltipLinePort(); }) .on('mouseover', function (f) { var fn = f; if (fn.layer.properties) { var urlflg = '/assets/img/flags/flag-default.png'; if (fn.layer.properties.flag != null) { flg = fn.layer.properties.flag; flg = flg.split('(')[0].trim(); flg = flg.split('[')[0].trim(); urlflg = flgsource + flg.replace(' ', '').replace('Unknown', 'unknown') + '.png'; } // this.bindPopup('<div class="overflow-hidden"><div class="d-flex flex-row align-items-center justify-content-center tootipRiskScore-title py-2"><span class="flag-vsl-popup"><img src="' + urlflg + '" width="20px"> </span><span class="title-vsl-popup"><b>' + fn.layer.properties.name + '</b></span></div><div class="py-2 px-3 row" style="min-width: 300px;"><div class="col-12"><span class="update-info-vsl-popup fw-bold fs-12">Last Update : <span class="fw-light fs-12 tooltipRiskScore-data">' + moment(fn.layer.properties.local_times, 'YYYY-MM-DD h:mm:ss').fromNow() + '</span></span><br><span class="fw-bold fs-12">Date Update : <span class="fw-light fs-12 tooltipRiskScore-data">' + fn.layer.properties.local_times + ' UTC +7</span></span></div></div></div>', { closeButton: false, offset: L.point(-4, -6) }); // this.openPopup(); } }) .on('mouseout', function () { // $('.leaflet-marker-icon').removeClass('circle-selected'); }); vslall.addLayer(canvasTileAll); vslall.setZIndex(5); } loadfirst = 1; }); } $('#tblPortVesselOpen').dataTable({bFilter: false}); $('#tblPortCargoOpen').dataTable({bFilter: false}); function getOpenPositionLayer() { $.get(base_path + '/modules/webservice/rest/?pin='+pin+'&method=getOpenPositionLayer&format=jsondatatable', {}, function (json, textStatus) { if (json.data !== null) { window['layer_open_position'] = L.layerGroup(); var newLayer = L.geoJSON(json.geojson, { pointToLayer: function (feature, latlng) { var mapsIcon = L.divIcon({ iconSize: "auto", className: 'number-icon open-position', iconAnchor: [8,8], html: "<b>"+feature.properties.total+"</b>" }) return L.marker(latlng, { icon: mapsIcon }); }, onEachFeature: function (feature, layer) { var data = feature.properties; var content = '<div class="detail-info">' + '<div class="info-title"><i class="fa-solid fa-anchor me-1"></i>' + data.port_name + '</div>' + '<div class="info-body">' + '</div>' '</div>' layer.on('click', function (e) { $('.vsl-info-fixed').hide(); $('.vsl-info-fixed.port').show(); $('#port-info-name').html(data.port_name) }); // layer.bindPopup(content); } }); window['layer_open_position'].addLayer(newLayer); window['layer_open_position'].addTo(map); } }) } function activeTab(tab){ $('.nav-link[data-bs-target="#' + tab + '"]').tab('show'); }; function getOpenRequestLayer() { $.get(base_path + '/modules/webservice/rest/?pin='+pin+'&method=getOpenRequestLayer&format=jsondatatable', {}, function (json, textStatus) { if (json.data !== null) { window['layer_open_request'] = L.layerGroup(); var newLayer = L.geoJSON(json.geojson, { pointToLayer: function (feature, latlng) { var {total_open_position,total_open_enquiry} = feature.properties; var countDiv = 0; var open_position = total_open_position ? total_open_position : 0; var open_enquiry = total_open_enquiry ? total_open_enquiry : 0; var divOpen = '<span class="open-position">'+open_position+'</span>'+ '<span class="open-enquiry">'+open_enquiry+'</span>'; // if (total_open_position) { // countDiv++; // divOpen += '<span class="open-position">'+total_open_position+'</span>'; // } // if (total_open_enquiry) { // countDiv++; // divOpen += '<span class="open-enquiry">'+total_open_enquiry+'</span>'; // } // var iconAnchor = [9,4] // if (countDiv > 1) { // iconAnchor = [20,4]; // } var mapsIcon = L.divIcon({ iconSize: "auto", className: 'number-icon open-request', iconAnchor: [20,4], // html: "<b>"+feature.properties.total+"</b>" html: divOpen }) return L.marker(latlng, { icon: mapsIcon, pane: 'notifpane' }); }, onEachFeature: function (feature, layer) { var data = feature.properties; var content = '<div class="detail-info">' + '<div class="info-title text-center"><i class="fa-solid fa-anchor me-1"></i> Port</div>' + '<div class="info-body text-center">' + data.port_name+ '</div>'+ '</div>'; layer.bindPopup(content, {closeButton: false, offset: L.point(5, 5)}); layer.on('mouseover', function() { layer.openPopup(); }); layer.on('mouseout', function() { layer.closePopup(); }); layer.on('click', function (e) { getDetailsOnPort(data.rpr_id); $('.vsl-info-fixed').hide(); $('.vsl-info-fixed.port').show(); $('#port-info-name').html(data.port_name) }); } }); window['layer_open_request'].addLayer(newLayer); window['layer_open_request'].addTo(map); } }) } function funzione(feature, layer) { if (feature.properties) { layer.bindPopup(feature.properties.name, { closeButton: false, offset: L.point(-4, -6) }); layer.on('mouseover', function () { layer.openPopup(); }); layer.on('mouseout', function () { layer.closePopup(); }); } } function tooltipLinePort(){ var height = $('.tooltip-discharging-port').height()+'px'; $('.line-port-hide').css('height', height); } function getPendingTask() { $.post( base_path+'/modules/webservice/rest/?method=getPendingTask&format=json', { "pending": ['open', 'negotiation', 'fixing', 'closed', 'fail'], "pin": '<?=$pin?>' }, function( json ) { if (json.data != null) { var role = '<?=$arl_id?>'; var html = ''; var html_nego = ''; // var all = 0; var open = 0; var nego = 0; var fixing = 0; var closed = 0; var failed = 0; var script = ""; var param = []; var quantity = "-"; $('#pendingFixingTask').html(""); $('#pendingOpenTask').html(""); $('#pendingNegoTask').html(""); json.data.forEach((data) => { var status = data['status_name'].toLowerCase(); var type = data['inquiry_type']; var laycan_from = "-"; if (data['laycan_from'] != null) { laycan_from = moment(data['laycan_from']).format('DD/MM/Y'); } else { if (type == 'TC') { if (data['lay_from'] != null) { laycan_from = moment(data['lay_from']).format('DD/MM/Y'); } } } var laycan_to = "-"; if (data['laycan_to'] != null) { laycan_to = moment(data['laycan_to']).format('DD/MM/Y'); } else { if (type == 'TC') { if (data['lay_to'] != null) { laycan_to = moment(data['lay_to']).format('DD/MM/Y'); } } } var port_load = "-"; if (data['port_load'] != null) { port_load = data['port_load']; } else { if (type == 'TC') { if (data['onhire_port'] != null) { port_load = data['onhire_port']; } } } var port_discharge = "-"; if (data['port_discharge'] != null) { port_discharge = data['port_discharge']; } else { if (type == 'TC') { if (data['offhire_port'] != null) { port_discharge = data['offhire_port']; } } } if (status == 'open') open++; if (status == 'negotiation') nego++; if (status == 'fixing') fixing++; if (status == 'closed') closed++; if (status == 'failed') failed++; var quantity = ''; if (type == 'CA') { quantity = (data['total_volume'] == null) ? "-" : numberWithCommas(data['total_volume']); } else { if (data['voyage_type'] == '1' && type == 'FC') { if (data['quantity'] != null) { quantity = numberWithCommas(data['quantity']); } else { quantity = '-'; } } else { var min_quantity = (data['min_quantity'] == null) ? "" : numberWithCommas(data['min_quantity']); var max_quantity = (data['max_quantity'] == null) ? "" : numberWithCommas(data['max_quantity']); quantity = min_quantity+' - '+ max_quantity; } } if (type == 'FC') script = "/modules/enq/freight_charter"; if (type == 'TC') script = "/modules/enq/time_charter"; if (type == 'CA') script = "/modules/enq/contract_affreightment"; var publish_date = (status == 'open') ? moment(data['publish_date']).format('D MMM Y') : moment(data['offer_date']).format('D MMM Y'); var charter = data['acm_id']; if(status == 'open' && charter == company){ var infoOffer = "<div class='info-offering'> <span class='text'>Offer</span> <span class='bullet'>"+data['number_of_bids']+"</span> </div>"; } else { var infoOffer = ''; } var cargo = '-'; if (data['cargo'] != null) cargo = data['cargo']; if (role == '1') { if (status == 'fixing') { $('#pendingFixingTask').append("<div class='chartered-content'> <a href='"+script+"/p/"+data['param']+"/' class='text-decoration-none'> <div class='title p-2 mb-2'> <div> <p class='fw-bold mb-2'><span class='trx-badge "+type.toLowerCase()+"'>"+type+"</span> "+data['ref_id']+"</p><p class='fw-bold mb-0 t-negotiation'>"+data['company_name']+"</p></div><div> <p class='t-gray mb-0'>"+publish_date+"</p>"+infoOffer+" </div></div><div class='body p-2'> <div class='d-flex justify-content-between'> <div> <p class='t-gray-dark fw-bold mb-1'>Port</p><div class='position-relative'> <p class='ms-3 mb-2 t-gray-dark port-text'>"+port_load+"</p><p class='ms-3 mb-0 t-gray-dark port-text'>"+port_discharge+"</p><img src='/i/icons/icon-port-way.svg' class='position-absolute' style='top: 6px; left: 0;'/> </div></div><div style='width:40%;'> <p class='t-gray-dark fw-bold mb-1'>Laycan</p><div class='position-relative'> <p class='ms-3 mb-2 t-gray-dark'>"+laycan_from+"</p><p class='ms-3 mb-0 t-gray-dark'>"+laycan_to+"</p><img src='/i/icons/icon-port-way.svg' class='position-absolute' style='top: 6px; left: 0;'/> </div></div></div><div class='d-flex justify-content-between border-top mt-2 pt-2'> <div> <p class='t-gray-dark fw-bold mb-1'>Cargo</p><div class='position-relative'> <p class='mb-2 t-gray-dark'>"+cargo+"</p></div></div><div style='width:40%;'> <p class='t-gray-dark fw-bold mb-1'>Quantity</p><div class='position-relative'> <p class='mb-2 t-gray-dark decimalValue'>"+quantity+"</p></div></div></div></div></a></div>"); } } if (status == 'open') { $('#pendingOpenTask').append("<div class='chartered-content'> <a href='"+script+"/p/"+data['param']+"/' class='text-decoration-none'> <div class='title p-2 mb-2'> <div> <p class='fw-bold mb-2'><span class='trx-badge "+type.toLowerCase()+"'>"+type+"</span> "+data['ref_id']+"</p><p class='fw-bold mb-0 t-negotiation'></p></div><div> <p class='t-gray mb-0'>"+publish_date+"</p>"+infoOffer+"</div></div> <div class='body p-2'> <div class='d-flex justify-content-between'> <div> <p class='t-gray-dark fw-bold mb-1'>Port</p><div class='position-relative'> <p class='ms-3 mb-2 t-gray-dark port-text'>"+port_load+"</p><p class='ms-3 mb-0 t-gray-dark port-text'>"+port_discharge+"</p><img src='/i/icons/icon-port-way.svg' class='position-absolute' style='top: 6px; left: 0;'/> </div></div><div style='width:40%;'> <p class='t-gray-dark fw-bold mb-1'>Laycan</p><div class='position-relative'> <p class='ms-3 mb-2 t-gray-dark'>"+laycan_from+"</p><p class='ms-3 mb-0 t-gray-dark'>"+laycan_to+"</p><img src='/i/icons/icon-port-way.svg' class='position-absolute' style='top: 6px; left: 0;'/> </div></div></div><div class='d-flex justify-content-between border-top mt-2 pt-2'> <div> <p class='t-gray-dark fw-bold mb-1'>Cargo</p><div class='position-relative'> <p class='mb-2 t-gray-dark'>"+cargo+"</p></div></div><div style='width:40%;'> <p class='t-gray-dark fw-bold mb-1'>Quantity</p><div class='position-relative'> <p class='mb-2 t-gray-dark decimalValue'>"+quantity+"</p></div></div></div></div></a></div>"); } if (status == 'negotiation') { $('#pendingNegoTask').append("<div class='chartered-content'> <a href='"+script+"/p/"+data['param']+"/' class='text-decoration-none'> <div class='title p-2 mb-2'> <div> <p class='fw-bold mb-2'><span class='trx-badge "+type.toLowerCase()+"'>"+type+"</span> "+data['ref_id']+"</p> <p class='fw-bold mb-0 t-negotiation'>"+data['company_name']+"</p> </div> <p class='t-gray mb-0'>"+publish_date+"</p> </div> <div class='body p-2'> <div class='d-flex justify-content-between'> <div> <p class='t-gray-dark fw-bold mb-1'>Port</p> <div class='position-relative'> <p class='ms-3 mb-2 t-gray-dark port-text'>"+port_load+"</p> <p class='ms-3 mb-0 t-gray-dark port-text'>"+port_discharge+"</p> <img src='/i/icons/icon-port-way.svg' class='position-absolute' style='top: 6px; left: 0;'/> </div> </div> <div style='width:40%;'> <p class='t-gray-dark fw-bold mb-1'>Laycan</p> <div class='position-relative'> <p class='ms-3 mb-2 t-gray-dark'>"+laycan_from+"</p> <p class='ms-3 mb-0 t-gray-dark'>"+laycan_to+"</p> <img src='/i/icons/icon-port-way.svg' class='position-absolute' style='top: 6px; left: 0;'/> </div> </div> </div> <div class='d-flex justify-content-between border-top mt-2 pt-2'> <div> <p class='t-gray-dark fw-bold mb-1'>Cargo</p> <div class='position-relative'> <p class='mb-2 t-gray-dark'>"+cargo+"</p></div> </div> <div style='width:40%;'> <p class='t-gray-dark fw-bold mb-1'>Quantity</p> <div class='position-relative'> <p class='mb-2 t-gray-dark decimalValue'>"+quantity+"</p></div> </div> </div> </div> </a> </div>"); } }); $('#fixingDashboard').html(fixing); $('#openDashboard').html(open); $('#negoDashboard').html(nego); $('#pendingTaskAmountOpen').text(open); $('#pendingTaskAmountNego').text(nego); if (role == '1') { $('#pendingTaskAmountFixing').text(fixing); } var history_amount = closed + failed; // $('#closedDashboard').html(history_amount); } }, "json").done(function() { $.get(base_path + '/modules/webservice/rest/?pin='+pin+'&method=getTotalHistory&format=json', {}, function (json, textStatus) { amount = 0; if (json.status == 200) { amount = json.data; } $('#closedDashboard').html(amount); }); $.get(base_path + '/modules/webservice/rest/?pin='+pin+'&method=getNewRegister&format=json', {}, function (json, textStatus) { if (json.data.success && json.data.data != null) { var datas = json.data.data; var register_amount = json.data.count; var role = '<?=$arl_id?>'; $('#pendingRegisterRequestTask').html(""); datas.forEach((data) => { var register_date = moment(data['register_date']).format('D MMM Y'); $('#pendingRegisterRequestTask').append("<div class='chartered-content'> <a href='/modules/adm/register/p/"+data['param']+"/' class='text-decoration-none'> <div class='title p-2 mb-2'> <div> <p class='fw-bold mb-2'><span class='trx-badge'>"+data['type_name']+"</span></p> <p class='fw-bold mb-0 t-negotiation'>"+data['company_name']+"</p> </div> <p class='t-gray mb-0'>"+register_date+"</p> </div> <div class='body p-2'> <div class='d-flex justify-content-between'> <div> <p class='t-gray-dark fw-bold mb-1'>Name</p> <div class='position-relative'> <p class='mb-2 t-gray-dark pe-2'>"+data['fullname']+"</p></div> </div> <div style='width:40%;'> <p class='t-gray-dark fw-bold mb-1'>Email</p> <div class='position-relative'> <p class='mb-2 t-gray-dark decimalValue text-truncate' data-bs-toggle='tooltip' data-bs-placement='top' title='"+data['email']+"'>"+data['email']+"</p></div> </div> </div> </div> </a> </div>"); }); $('#pendingTaskAmountRegisterRequest').text(register_amount); } }); $.get(base_path + '/modules/webservice/rest/?pin='+pin+'&method=getNewBehalfCompany&format=json', {}, function (json, textStatus) { if (json.data.success && json.data.data != null) { var datab = json.data.data; var behalf_amount = json.data.count; var role = '<?=$arl_id?>'; $('#pendingBehalfRequestTask').html(""); datab.forEach((data) => { var register_date = moment(data['c_time']).format('D MMM Y'); var type = data['type_name'].toLowerCase().replace(' ', '_'); var item = ` <div class='chartered-content'> <a href='/modules/clt/${type}/p/${data['param']}/' class='text-decoration-none'> <div class='title p-2 mb-2'> <div> <p class='fw-bold mb-2'> <span class='trx-badge'>${data['type_name']}</span> </p> <p class='fw-bold mb-1 t-negotiation'>${data['company_name']}</p> <p class='fw-bold mb-2'> <span class='trx-badge'>On Behalf</span> </p> <p class='fw-bold mb-0'>${data['acm_parent_name']}</p> </div> <p class='t-gray mb-0'>${register_date}</p> </div> <div class='body p-2'> <div class='d-flex justify-content-between'> <div> <p class='t-gray-dark fw-bold mb-1'>Name</p> <div class='position-relative'> <p class='mb-2 t-gray-dark pe-2'>${data['manager'] ?? '-'}</p> </div> </div> <div style='width:40%;'> <p class='t-gray-dark fw-bold mb-1'>Email</p> <div class='position-relative'> <p class='mb-2 t-gray-dark decimalValue text-truncate' data-bs-toggle='tooltip' data-bs-placement='top' title='${data['email'] ?? '-'}'>${data['email'] ?? '-'}</p> </div> </div> </div> </div> </a> </div>`; $('#pendingBehalfRequestTask').append(item); }); $('#pendingTaskAmountBehalfRequest').text(behalf_amount); } }); $.get(base_path + '/modules/webservice/rest/?pin='+pin+'&method=getNewVessel&format=json', {}, function (json, textStatus) { if (json.data.success && json.data.data != null) { var datas = json.data.data; var vessel_amount = json.data.count; var role = '<?=$arl_id?>'; $('#pendingVesselRequestTask').html(""); datas.forEach((data) => { var register_date = moment(data['register_date']).format('D MMM Y'); $('#pendingVesselRequestTask').append("<div class='chartered-content'> <a href='/modules/adm/vessel_approval/p/"+data['param']+"/' class='text-decoration-none'> <div class='title p-2 mb-2'> <div> <p class='fw-bold mb-2'></p> <p class='fw-bold mb-0 t-negotiation'>"+data['vessel_name']+"</p> </div> <p class='t-gray mb-0'>"+register_date+"</p> </div> <div class='body p-2'> <div class='d-flex justify-content-between'> <div> <p class='t-gray-dark fw-bold mb-1'>Company</p> <div class='position-relative'> <p class='mb-2 t-gray-dark'>"+data['company_name']+"</p></div> </div> <div style='width:40%;'> <p class='t-gray-dark fw-bold mb-1'>Vessel Type</p> <div class='position-relative'> <p class='mb-2 t-gray-dark decimalValue'>"+data['ship_type']+"</p></div> </div> </div> </div> </a> </div>"); }); $('#pendingTaskAmountVesselRequest').text(vessel_amount); } }); }); } function getPendingWorkflow() { $.get(base_path + '/modules/webservice/rest/?pin='+pin+'&method=getPendingWorkflow&format=json', {}, function (json, textStatus) { if (json.data.success && json.data.data != null) { var datas = json.data.data; var task_count = json.data.count; datas.forEach((data) => { var register_date = moment(data['register_date']).format('D MMM Y'); $('#pendingWorkflowTask').append(` <div class="chartered-content"> <a href="/modules/workflow/case/p/${data.param}/" class="text-decoration-none"> <div href="#" class="title p-2"> <div class="home-workflow-item"> <div class="left"> <img src="/assets/img/workflow-icon.svg"/> <div> <p class="date">${data.last_case}</p> <p class="fw-bold mb-2">${data.workflow}</p> </div> </div> <p class="fw-bold mb-0 t-negotiation t-workflow">${data.total}</p> </div> </div> </a> </div> `); $('#pendingTaskAmountWorkflow').text(task_count); }); } }); } function getPendingEnquirySuggestion(){ $('#pendingEnquirySuggestion').removeClass('d-none'); $('#pendingEnquirySuggestionTask').show(); $.get(base_path + '/modules/webservice/rest/?pin='+pin+'&method=getPendingEnquirySuggestion&format=json', {}, function (json, textStatus) { if (json.data.success && json.data.data != null) { var datas = json.data.data; var task_count = json.data.count; $('#pendingEnquirySuggestionTask').append(` <div class="chartered-content"> <a href="/modules/enq/enquiry_suggestion/p/0/" class="text-decoration-none"> <div href="#" class="title p-2"> <div class="home-workflow-item"> <div class="left"> <img src="/assets/img/workflow-icon.svg"/> <div> <p class="fw-bold mb-2">List Enquiry Suggestion</p> </div> </div> <p class="fw-bold mb-0 t-negotiation t-workflow">${task_count}</p> </div> </div> </a> </div> `); var script = ''; datas.forEach((data) => { var type = data.inquiry_type; if (type == 'FC') script = "/modules/enq/freight_charter/p"; if (type == 'TC') script = "/modules/enq/time_charter/p"; if (type == 'CA') script = "/modules/enq/contract_affreightment/p"; $('#pendingEnquirySuggestionTask').append(` <div class='chartered-content'> <a href='${script}/${data.param}/' class='text-decoration-none'> <div class='title p-2 mb-2'> <div> <p class='fw-bold mb-0 t-negotiation'>${data.ref_id}</p> </div> <p class='t-gray mb-0'>${data.offer_date}</p> </div> <div class='body p-2'> <div class='d-flex justify-content-between'> <div> <p class='t-gray-dark fw-bold mb-1'>Cargo</p> <div class='position-relative'> <p class='mb-2 t-gray-dark'>${data.cargo}</p> </div> </div> <div style='width:40%;'> <p class='t-gray-dark fw-bold mb-1'>Status</p> <div class='position-relative'> <p class='mb-2 t-gray-dark decimalValue'>${data.status_name}</p> </div> </div> </div> </div> </a> </div> `); $('#pendingEnquirySuggestionCount').text(task_count); }); } }); } function checkImage(src, good, bad) { var img = new Image(); img.onload = good; img.onerror = bad; img.src = src; } function getDetailsOnPort(rpr_id) { $('.vsl-info-fixed.port .loading-data').show(); $("#contentVesselOpenPosition").empty(); $.get(base_path + '/modules/webservice/rest/?pin='+pin+'&rpr_id='+rpr_id+'&method=getOpenPosition&format=json', {}, function (json, textStatus) { $('.vsl-info-fixed.port .loading-data').hide(); var divContent = ""; if (json.data.data) { var data = json.data.data; for(var i = 0; i < data.length; i++ ) { const { vessel_name, oil_barge, cargo, open_from, open_to, ship_type, total_tank_capacity, capacity, param, rvt_id, on_negotiation } = data[i]; var last_cargo = cargo ? cargo : '-'; var date_from = "-"; if (open_from != null) { date_from = moment(open_from).format('DD/MM/Y'); } var date_to = "-"; if (open_to != null) { date_to = moment(open_to).format('DD/MM/Y'); } var oilBarge = ''; if (oil_barge !== null) { oilBarge = '<p class="fw-bold mb-1" style="color: #1c73c0;font-size: 16px;">'+oil_barge+'</p>'; } var vessel_type = (rvt_id == '5') ? 'Tug Boat & Oil Barge' : ship_type; var vessel_display = ''; if (role == '2') { if (on_negotiation) { vessel_display = '<p class="fw-bold mb-1" style="color: #1c73c0;font-size: 16px;">'+vessel_name+'</p>'+ oilBarge; } } else { vessel_display = '<p class="fw-bold mb-1" style="color: #1c73c0;font-size: 16px;">'+vessel_name+'</p>'+ oilBarge; } var total_capacity = capacity ? numberWithCommas(capacity) : '-'; divContent += '<div class="card-content ">'+ '<a href="/modules/enq/open_position/p/'+param+'/" class="header p-2">'+ '<div>'+ vessel_display+ '<div>'+ '<p class="t-gray-dark fw-bold mb-1">Last Cargo</p>'+ '<div class="position-relative">'+ '<p class="mb-2 t-gray-dark">'+last_cargo+'</p>'+ '</div>'+ '</div>'+ '</div>'+ '<div style="width:40%;">'+ '<p class="t-gray-dark fw-bold mb-1">Date Open</p>'+ '<div class="position-relative">'+ '<p class="ms-3 mb-2 t-gray-dark">'+date_from+'</p>'+ '<p class="ms-3 mb-0 t-gray-dark">'+date_to+'</p>'+ '<img src="/i/icons/icon-port-way.svg" class="position-absolute" style="top: 2px; left: 0;">'+ '</div>'+ '</div>'+ '</a>'+ '<div class="body p-2">'+ '<div class="d-flex justify-content-between">'+ '<div>'+ '<p class="t-gray-dark fw-bold mb-1">Type</p>'+ '<div class="position-relative">'+ '<p class="mb-2 t-gray-dark">'+vessel_type+'</p>'+ '</div>'+ '</div>'+ '<div style="width:40%;">'+ '<p class="t-gray-dark fw-bold mb-1">Capacity</p>'+ '<div class="position-relative"> '+ '<p class="mb-2 t-gray-dark decimalValue">'+total_capacity+'</p>'+ '</div>'+ '</div>'+ '</div>'+ '</div>'+ '</div>'; } } else { divContent += '<div id="on-charter-vessel-not-data-default"><div class="no-data-vessel-on-charter port"><div class="text"><p id="on-charter-text-default" class="text-center text-uppercase">No Vessel On Open Position Found</p></div><lottie-player src="/assets/lottie/tanker-ship.json" background="transparent" speed="1" style="width:100%;height:200px;margin-top:23px" loop autoplay></lottie-player></div></div>'; } $("#contentVesselOpenPosition").html(divContent); if (role === '3') { activeTab('tab-content-cargo-open') } else { activeTab('tab-content-vessel-open') } }); var params = { "pending": ['open'], "rprid":rpr_id, "pin": '<?=$pin?>' }; $("#contentCargoOpen").empty(); $.post( base_path+'/modules/webservice/rest/?method=getPendingTask&format=json', params, function( json ) { $('.vsl-info-fixed.port .loading-data').hide(); var divContent = ""; if (json.data) { var data = json.data; data.forEach((data) => { var status = data['status_name'].toLowerCase(); var type = data['inquiry_type']; if (type !== 'TC') { var laycan_from = "-"; if (data['laycan_from'] != null) { laycan_from = moment(data['laycan_from']).format('DD/MM/Y'); } var laycan_to = "-"; if (data['laycan_to'] != null) { laycan_to = moment(data['laycan_to']).format('DD/MM/Y'); } var port_load = "-"; if (data['port_load'] != null) { port_load = data['port_load']; } var port_discharge = "-"; if (data['port_discharge'] != null) { port_discharge = data['port_discharge']; } var quantity = ''; if (type == 'CA') { quantity = (data['total_volume'] == null) ? "-" : numberWithCommas(data['total_volume']); } else { var min_quantity = (data['min_quantity'] == null) ? "" : numberWithCommas(data['min_quantity']); var max_quantity = (data['max_quantity'] == null) ? "" : numberWithCommas(data['max_quantity']); quantity = min_quantity+' - '+ max_quantity; } if (type == 'FC') script = "/modules/enq/freight_charter"; // if (type == 'TC') script = "/modules/enq/time_charter"; if (type == 'CA') script = "/modules/enq/contract_affreightment"; var publish_date = moment(data['publish_date']).format('D MMM Y'); var charter = data['acm_id']; if (status == 'open' && charter == company){ var infoOffer = "<div class='info-offering'> <span class='text'>Offer</span> <span class='bullet'>"+data['number_of_bids']+"</span> </div>"; } else { var infoOffer = ''; } var company_name = "<p class='fw-bold mb-0 t-negotiation'>"+data['company_name']+"</p>"; if (role === '3') { company_name = ''; } divContent += "<div class='card-content'> <a href='"+script+"/p/"+data['param']+"/' class='header p-2 mb-2'> <div> <p class='fw-bold mb-2'><span class='trx-badge "+type.toLowerCase()+"'>"+type+"</span> "+data['ref_id']+"</p>"+company_name+"</div><div> <p class='t-gray mb-0'>"+publish_date+"</p>"+infoOffer+"</div></a> <div class='body p-2'> <div class='d-flex justify-content-between'> <div> <p class='t-gray-dark fw-bold mb-1'>Port</p><div class='position-relative'> <p class='ms-3 mb-2 t-gray-dark port-text'>"+port_load+"</p><p class='ms-3 mb-0 t-gray-dark port-text'>"+port_discharge+"</p><img src='/i/icons/icon-port-way.svg' class='position-absolute' style='top: 1px; left: 0;'/> </div></div><div style='width:40%;'> <p class='t-gray-dark fw-bold mb-1'>Laycan</p><div class='position-relative'> <p class='ms-3 mb-2 t-gray-dark'>"+laycan_from+"</p><p class='ms-3 mb-0 t-gray-dark'>"+laycan_to+"</p><img src='/i/icons/icon-port-way.svg' class='position-absolute' style='top: 1px; left: 0;'/> </div></div></div><div class='d-flex justify-content-between border-top mt-2 pt-2'> <div> <p class='t-gray-dark fw-bold mb-1'>Cargo</p><div class='position-relative'> <p class='mb-2 t-gray-dark'>"+data['cargo']+"</p></div></div><div style='width:40%;'> <p class='t-gray-dark fw-bold mb-1'>Quantity</p><div class='position-relative'> <p class='mb-2 t-gray-dark decimalValue'>"+quantity+"</p></div></div></div></div></div>"; } }); } else { divContent += '<div id="on-charter-vessel-not-data-default"><div class="no-data-vessel-on-charter"><div class="text"><p id="on-charter-text-default" class="text-center text-uppercase">No Cargo Open Found</p></div><lottie-player src="/assets/lottie/tanker-ship.json" background="transparent" speed="1" style="width:100%;height:160px;margin-top:23px" loop autoplay></lottie-player></div></div>'; } $("#contentCargoOpen").html(divContent); }); } var all_amount = 0; var all_html = ''; function getVesselOpenPositionOnCharter() { $.get(base_path + '/modules/webservice/rest/?pin='+pin+'&method=getOpenPosition&format=json', {}, function (json, textStatus) { if (json.data.success && json.data.data != null) { var c_op = json.data.count; all_amount = all_amount + c_op; $('#AllAmount').text(all_amount); $('#OpenPositionAmount').text(c_op); $('#pendingAmountOpenPosition').text(c_op); var d_op = json.data.data; var html = ""; var html_op = ""; d_op.forEach((data) => { // var mmsi = data['mmsi']; var vslid = data['ais_vessel_id']; var vessel_display = ""; var capacity = (data['capacity'] == null) ? "-" : numberWithCommas(data['capacity']); // if (mmsi != null && ais_vessel_id != null) { // var vessel_image = base_path_image + '/ship_img/' + mmsi.substring(0, 1) + '/' + mmsi.substring(1, 2) + '/' + mmsi.substring(2, 3) + '/' + mmsi + '_' + ais_vessel_id + '_1.jpg'; // $.get("/modules/webservice/proxy_image.php?url="+btoa(vessel_image)+"&msi="+btoa(mmsi)); // var vessel_image_proxy = "/i/upload/vessel_img/"+mmsi+".jpg"; // checkImage(vessel_image_proxy, function (x) { // $("#vesselImageOP_"+mmsi).html("<img src='/i/upload/vessel_img/"+mmsi+".jpg' width='100%'/>"); // }, function (x) { // $('#vesselImageOP_'+mmsi).html("<img src='/assets/img/vessel-default-no-photo.jpg' width='100%'/>"); // }); // } else { // vessel_display = '/assets/img/vessel-default-no-photo.jpg'; // } vessel_display = '/assets/img/vessel-default-no-photo.jpg'; var on_nego = data['on_negotiation']; var ship_type = (data['rvt_id'] == '5') ? data['ship_type']+' & Oil Barge' : data['ship_type']; var vessel_name = (role == '2' && on_nego == false) ? ship_type : data['vessel_name']; var publish_date = moment(data['publish_date'], 'Y-M-DD').format('DD MMM Y'); var open_from = moment(data['open_from'], 'Y-M-DD').format('DD MMM Y'); var open_to = moment(data['open_to'], 'Y-M-DD').format('DD MMM Y'); var open = open_from+" - "+open_to; var types = "-"; var double_hull = ""; if (data['double_hull'] != null) { double_hull = (data['double_hull'] == '0') ? 'Single Hull' : "Double Hull"; types = types.replace(/-\s*$/, ""); types += double_hull+', '; } var double_bottom = ""; if (data['double_bottom'] != null) { double_bottom = (data['double_bottom'] == '0') ? 'Single Bottom' : "Double Bottom"; types = types.replace(/-\s*$/, ""); types += double_bottom+', '; } var heating = ""; if (data['heating'] != null) { heating = (data['heating'] == '0') ? 'No Heating' : "Heating"; types = types.replace(/-\s*$/, ""); types += heating+', '; } types = types.replace(/,\s*$/, ""); let infoVessel = ''; if (vslid !== null) { infoVessel = '<a href="#" onclick="getDetailVessel('+vslid+')" class="btn btn-info-vessel mt-1"> Info Vessel <i class="fa-solid fa-caret-right ms-1"></i> </a>'; } else { infoVessel = '<a href="#" class="btn btn-info-vessel mt-1 disabled"> Info Vessel <i class="fa-solid fa-caret-right ms-1"></i> </a>'; } // html += '<div class="home-card-slider-item"><div class="vessel-item"><div class="top"><div class="img-container me-3" id="vesselImageOC_'+mmsi+'"><img src="'+vessel_display+'" width="100%"></div><div class="info"><p class="title"><a href="/modules/enq/open_position/p/'+data['param']+'/">'+data['vessel_name']+'</a></p><div class="d-flex align-items-center"><i class="fa-solid fa-location-crosshairs me-2"></i><span class="desc">'+data['port_name']+'</span></div><div class="d-flex align-items-center"><i class="fa-solid fa-circle-check me-2"></i><span class="desc">'+publish_date+'</span></div></div><div class="badge op">OP</div></div><div class="text row"><div class="col-6"><div class="bottom"><div class="rounded-square cargo"><img src="/i/icons/icon-card-cargo.svg"></div><div class="ms-2"><p class="title">Cargo</p><p class="desc">'+data['cargo']+'</p></div></div></div><div class="col-6"><div class="bottom"><div class="rounded-square quantity"><img src="/i/icons/icon-card-quantity.svg"></div><div class="ms-2"><p class="title">Quantity</p><p class="desc">'+capacity+'</p></div></div></div></div></div></div>'; html += '<div class="home-card-slider-item"> <div class="vessel-item"> <div class="top"> <div class="top-item-left me-3"> <div class="img-container" id="vesselImageOC_'+vslid+'"><img src="'+vessel_display+'" width="100%"></div>'+infoVessel+'</div><div class="info"> <p class="title"><a href="/modules/enq/open_position/p/'+data['param']+'/">'+vessel_name+'</a></p><div class="d-flex align-items-center"><i class="fa-solid fa-location-crosshairs me-2"></i><span class="desc">'+data['port_name']+'</span></div><div class="d-flex align-items-center"><i class="fa-solid fa-circle-check me-2"></i><span class="desc">'+open+'</span></div></div><div class="badge op">OP</div></div><div class="text row"> <div class="col-6"> <div class="bottom"> <div class="rounded-square cargo"><img src="/i/icons/icon-card-cargo.svg"/></div><div class="ms-2"> <p class="title">Cargo</p><p class="desc">'+data['cargo']+'</p></div></div></div><div class="col-6"> <div class="bottom"> <div class="rounded-square quantity"><img src="/i/icons/icon-card-quantity.svg"/></div><div class="ms-2"> <p class="title">Size</p><p class="desc">'+capacity+'</p></div></div></div></div><div class="text engine row"> <div class="col-12"> <div class="bottom"> <div class="rounded-square cargo"><img src="/i/icons/icon-engine.svg"/></div><div class="ms-2"> <p class="title mb-1">Type: '+types+'</p></div></div></div></div></div></div></div></div>'; var infoResponse = "<div class='info-offering'> <span class='text'>Response</span> <span class='bullet'>"+data['number_of_responses']+"</span> </div>"; html_op += "<div class='chartered-content'> <a href='/modules/enq/open_position/p/"+data['param']+"/' class='title p-2 mb-2'> <div> <p class='fw-bold mb-2'><span class='trx-badge'>OP</span></p><p class='fw-bold mb-0 t-negotiation'>"+data['vessel_name']+"</p></div><div> <p class='t-gray mb-0'>"+publish_date+"</p>"+infoResponse+"</div></a> <div class='body p-2'> <div class='d-flex justify-content-between'> <div> <p class='t-gray-dark fw-bold mb-1'>Port</p><div class='position-relative'> <p class='ms-3 mb-2 t-gray-dark port-text'>"+data['port_name']+"</p><img src='/i/icons/icon-port-way-one.svg' class='position-absolute' style='top: 6px; left: 0;'/> </div></div><div style='width:40%;'> <p class='t-gray-dark fw-bold mb-1'>Open From/To</p><div class='position-relative'> <p class='ms-3 mb-2 t-gray-dark'>"+open_from+"</p><p class='ms-3 mb-0 t-gray-dark port-text'>"+open_to+"</p><img src='/i/icons/icon-port-way.svg' class='position-absolute' style='top: 6px; left: 0;'/> </div></div></div><div class='d-flex justify-content-between border-top mt-2 pt-2'> <div> <p class='t-gray-dark fw-bold mb-1'>Cargo</p><div class='position-relative'> <p class='mb-2 t-gray-dark'>"+data['cargo']+"</p></div></div><div style='width:40%;'> <p class='t-gray-dark fw-bold mb-1'>Quantity</p><div class='position-relative'> <p class='mb-2 t-gray-dark decimalValue'>"+data['capacity']+"</p></div></div></div></div></div>"; // all_html += '<div class="home-card-slider-item"><div class="vessel-item"><div class="top"><div class="img-container me-3" id="vesselImageOC_'+mmsi+'"><img src="'+vessel_display+'" width="100%"></div><div class="info"><p class="title"><a href="/modules/enq/open_position/p/'+data['param']+'/">'+data['vessel_name']+'</a></p><div class="d-flex align-items-center"><i class="fa-solid fa-location-crosshairs me-2"></i><span class="desc">'+data['port_name']+'</span></div><div class="d-flex align-items-center"><i class="fa-solid fa-circle-check me-2"></i><span class="desc">'+publish_date+'</span></div></div><div class="badge op">OP</div></div><div class="text row"><div class="col-6"><div class="bottom"><div class="rounded-square cargo"><img src="/i/icons/icon-card-cargo.svg"></div><div class="ms-2"><p class="title">Cargo</p><p class="desc">'+data['cargo']+'</p></div></div></div><div class="col-6"><div class="bottom"><div class="rounded-square quantity"><img src="/i/icons/icon-card-quantity.svg"></div><div class="ms-2"><p class="title">Quantity</p><p class="desc">'+capacity+'</p></div></div></div></div></div></div>'; all_html += '<div class="home-card-slider-item"> <div class="vessel-item"> <div class="top"> <div class="top-item-left me-3"> <div class="img-container" id="vesselImageOC_'+vslid+'"><img src="'+vessel_display+'" width="100%"></div>'+infoVessel+'</div><div class="info"> <p class="title"><a href="/modules/enq/open_position/p/'+data['param']+'/">'+vessel_name+'</a></p><div class="d-flex align-items-center"><i class="fa-solid fa-location-crosshairs me-2"></i><span class="desc">'+data['port_name']+'</span></div><div class="d-flex align-items-center"><i class="fa-solid fa-circle-check me-2"></i><span class="desc">'+open+'</span></div></div><div class="badge op">OP</div></div><div class="text row"> <div class="col-6"> <div class="bottom"> <div class="rounded-square cargo"><img src="/i/icons/icon-card-cargo.svg"/></div><div class="ms-2"> <p class="title">Cargo</p><p class="desc">'+data['cargo']+'</p></div></div></div><div class="col-6"> <div class="bottom"> <div class="rounded-square quantity"><img src="/i/icons/icon-card-quantity.svg"/></div><div class="ms-2"> <p class="title">Quantity</p><p class="desc">'+capacity+'</p></div></div></div></div><div class="text engine row"> <div class="col-12"> <div class="bottom"> <div class="rounded-square cargo"><img src="/i/icons/icon-engine.svg"/></div><div class="d-flex align-items-center ms-2"> <p class="title mb-0">Type: '+types+'</p></div></div></div></div></div></div>'; // html += "<div class='col-md-6 col-xl-4'> <div class='vessel-item'> <div class='img-container' id='vesselImageOP_"+mmsi+"'> <img src='"+vessel_display+"' width='100%' /> </div> <p class='title'> <a href='/modules/enq/open_position/p/"+data['param']+"/'>"+data['vessel_name']+"</a> </p> <div class='text'> <div class='d-flex justify-content-between mb-2'> <span class='title'> Location : </span> <span class='value fw-bold'> "+data['port_name']+" </span> </div> <div class='d-flex justify-content-between mb-2'> <span class='title'>Last 3rd Cargo : </span> <span class='value fw-bold'> "+data['cargo']+" </span> </div> <div class='d-flex justify-content-between mb-2'> <span class='title'> Publish Date : </span> <span class='value fw-bold'> "+publish_date+" </span> </div> </div> </div> </div>"; }); html += '<div id="open-position-vessel-not-data-default"><div class="no-data-vessel-on-charter"><div class="text"><p id="open-position-text-default" class="text-center text-uppercase">No Vessel On Open Position Found</p></div></div></div>'; // Ada lotie player // html += '<div id="open-position-vessel-not-data-default"><div class="no-data-vessel-on-charter"><div class="text"><p id="open-position-text-default" class="text-center text-uppercase">No Vessel On Open Position Found</p></div><lottie-player src="/assets/lottie/tanker-ship.json" background="transparent" speed="1" style="width:100%;height:160px;margin-top:23px" loop autoplay></lottie-player></div></div>'; // all_html += '<div id="all-position-vessel-not-data-default"><div class="no-data-vessel-on-charter"><div class="text"><p id="all-position-text-default" class="text-center text-uppercase">No Vessel All Found</p></div><lottie-player src="/assets/lottie/tanker-ship.json" background="transparent" speed="1" style="width:100%;height:160px;margin-top:23px" loop autoplay></lottie-player></div></div>'; $('#VesselOpenPositionSlider').html(html); $('#pendingOpenPositionTask').html(html_op); // $('#AllPositionSlider').html(all_html); defaultVesselOpenPosition(c_op); // defaultAllVessel(all_amount); } else { var html = '<div id="open-position-vessel-not-data-default"><div class="no-data-vessel-on-charter"><div class="text"><p id="open-position-text-default" class="text-center text-uppercase">No Vessel On Open Position Found</p></div></div></div>'; // Ada lottie player // var html = '<div id="open-position-vessel-not-data-default"><div class="no-data-vessel-on-charter"><div class="text"><p id="open-position-text-default" class="text-center text-uppercase">No Vessel On Open Position Found</p></div><lottie-player src="/assets/lottie/tanker-ship.json" background="transparent" speed="1" style="width:100%;height:160px;margin-top:23px" loop autoplay></lottie-player></div></div>'; $('#VesselOpenPositionSlider').html(html); defaultVesselOpenPosition(0); } }).done(function() { $.get(base_path + '/modules/webservice/rest/?pin='+pin+'&method=getOnCharter&format=json', {}, function (json, textStatus) { if (json.data.success && json.data.count > 0) { var c_oc = json.data.count; all_amount = all_amount + c_oc; $('#OnCharterAmount').text(c_oc); $('#AllAmount').text(all_amount); var d_oc = json.data.data; var html = ""; d_oc.forEach((data) => { // var mmsi = data['mmsi']; var type = data['inquiry_type']; var vslid = data['ais_vessel_id']; var vessel_display = ""; // if (mmsi != null && ais_vessel_id != null) { // var vessel_image = base_path_image + '/ship_img/' + mmsi.substring(0, 1) + '/' + mmsi.substring(1, 2) + '/' + mmsi.substring(2, 3) + '/' + mmsi + '_' + ais_vessel_id + '_1.jpg'; // $.get("/modules/webservice/proxy_image.php?url="+btoa(vessel_image)+"&msi="+btoa(mmsi)); // var vessel_image_proxy = "/i/upload/vessel_img/"+mmsi+".jpg"; // checkImage(vessel_image_proxy, function (x) { // $("#vesselImageOC_"+mmsi).html("<img src='/i/upload/vessel_img/"+mmsi+".jpg' width='100%'/>"); // }, function (x) { // $('#vesselImageOC_'+mmsi).html("<img src='/assets/img/vessel-default-no-photo.jpg' width='100%'/>"); // }); // } else { // vessel_display = '/assets/img/vessel-default-no-photo.jpg'; // } vessel_display = '/assets/img/vessel-default-no-photo.jpg'; // var quantity = ''; // if (type == 'CA') { // quantity = (data['total_volume'] == null) ? "-" : numberWithCommas(data['total_volume']); // } else { // var min_quantity = (data['min_quantity'] == null) ? "" : numberWithCommas(data['min_quantity']); // var max_quantity = (data['max_quantity'] == null) ? "" : numberWithCommas(data['max_quantity']); // quantity = min_quantity+' - '+ max_quantity; // } var quantity = (data['quantity'] == null) ? "-" : numberWithCommas(data['quantity']); var url_enq = ''; if (type == 'FC') url_enq = "/modules/enq/freight_charter"; if (type == 'TC') url_enq = "/modules/enq/time_charter"; if (type == 'CA') url_enq = "/modules/enq/contract_affreightment"; var port_load = "-"; if (type != 'TC') { port_load = data['port_load']; } var publish_date = moment(data['publish_date']).format('D MMM Y'); var types = "-"; var double_hull = ""; if (data['double_hull'] != null) { double_hull = (data['double_hull'] == '0') ? 'Single Hull' : "Double Hull"; types = types.replace(/-\s*$/, ""); types += double_hull+', '; } var double_bottom = ""; if (data['double_bottom'] != null) { double_bottom = (data['double_bottom'] == '0') ? 'Single Bottom' : "Double Bottom"; types = types.replace(/-\s*$/, ""); types += double_bottom+', '; } var heating = ""; if (data['heating'] != null) { heating = (data['heating'] == '0') ? 'No Heating' : "Yes Heating"; types = types.replace(/-\s*$/, ""); types += heating+', '; } types = types.replace(/,\s*$/, ""); let infoVessel = ''; if (vslid !== null) { infoVessel = '<a href="#" onclick="getDetailVessel('+vslid+')" class="btn btn-info-vessel mt-1"> Info Vessel <i class="fa-solid fa-caret-right ms-1"></i> </a>'; } else { infoVessel = '<a href="#" class="btn btn-info-vessel mt-1 disabled"> Info Vessel <i class="fa-solid fa-caret-right ms-1"></i> </a>'; } // html += '<div class="home-card-slider-item"><div class="vessel-item"><div class="top"><div class="img-container me-3" id="vesselImageOC_'+mmsi+'"><img src="'+vessel_display+'" width="100%"></div><div class="info"><p class="title"><a href="'+url_enq+'/p/'+data['param']+'/">'+data['vessel_name']+'</a></p><div class="d-flex align-items-center"><i class="fa-solid fa-location-crosshairs me-2"></i><span class="desc">'+port_load+'</span></div><div class="d-flex align-items-center"><i class="fa-solid fa-circle-check me-2"></i><span class="desc">'+publish_date+'</span></div></div><div class="badge op">'+type+'</div></div><div class="text row"><div class="col-6"><div class="bottom"><div class="rounded-square cargo"><img src="/i/icons/icon-card-cargo.svg"></div><div class="ms-2"><p class="title">Cargo</p><p class="desc">'+data['cargo']+'</p></div></div></div><div class="col-6"><div class="bottom"><div class="rounded-square quantity"><img src="/i/icons/icon-card-quantity.svg"></div><div class="ms-2"><p class="title">Quantity</p><p class="desc">'+quantity+'</p></div></div></div></div></div></div>'; html += '<div class="home-card-slider-item"> <div class="vessel-item"> <div class="top"> <div class="top-item-left me-3"> <div class="img-container" id="vesselImageOC_'+vslid+'"><img src="'+vessel_display+'" width="100%"></div>'+infoVessel+'</div><div class="info"> <p class="title"><a href="'+url_enq+'/p/'+data['param']+'/">'+data['vessel_name']+'</a></p><div class="d-flex align-items-center"><i class="fa-solid fa-location-crosshairs me-2"></i><span class="desc">'+port_load+'</span></div><div class="d-flex align-items-center"><i class="fa-solid fa-circle-check me-2"></i><span class="desc">'+publish_date+'</span></div></div><div class="badge '+type+'">'+type+'</div></div><div class="text row"> <div class="col-6"> <div class="bottom"> <div class="rounded-square cargo"><img src="/i/icons/icon-card-cargo.svg"/></div><div class="ms-2"> <p class="title">Cargo</p><p class="desc">'+data['cargo']+'</p></div></div></div><div class="col-6"> <div class="bottom"> <div class="rounded-square quantity"><img src="/i/icons/icon-card-quantity.svg"/></div><div class="ms-2"> <p class="title">Quantity</p><p class="desc">'+quantity+'</p></div></div></div></div><div class="text engine row"> <div class="col-12"> <div class="bottom"> <div class="rounded-square cargo"><img src="/i/icons/icon-engine.svg"/></div><div class="d-flex align-items-center ms-2"> <p class="title mb-0">Type: '+types+'</p></div></div></div></div></div></div>'; // all_html += '<div class="home-card-slider-item"><div class="vessel-item"><div class="top"><div class="img-container me-3" id="vesselImageOC_'+mmsi+'"><img src="'+vessel_display+'" width="100%"></div><div class="info"><p class="title"><a href="'+url_enq+'/p/'+data['param']+'/">'+data['vessel_name']+'</a></p><div class="d-flex align-items-center"><i class="fa-solid fa-location-crosshairs me-2"></i><span class="desc">'+port_load+'</span></div><div class="d-flex align-items-center"><i class="fa-solid fa-circle-check me-2"></i><span class="desc">'+publish_date+'</span></div></div><div class="badge op">'+type+'</div></div><div class="text row"><div class="col-6"><div class="bottom"><div class="rounded-square cargo"><img src="/i/icons/icon-card-cargo.svg"></div><div class="ms-2"><p class="title">Cargo</p><p class="desc">'+data['cargo']+'</p></div></div></div><div class="col-6"><div class="bottom"><div class="rounded-square quantity"><img src="/i/icons/icon-card-quantity.svg"></div><div class="ms-2"><p class="title">Quantity</p><p class="desc">'+quantity+'</p></div></div></div></div></div></div>'; all_html += '<div class="home-card-slider-item"> <div class="vessel-item"> <div class="top"> <div class="top-item-left me-3"> <div class="img-container" id="vesselImageOC_'+vslid+'"><img src="'+vessel_display+'" width="100%"></div>'+infoVessel+'</div><div class="info"> <p class="title"><a href="'+url_enq+'/p/'+data['param']+'/">'+data['vessel_name']+'</a></p><div class="d-flex align-items-center"><i class="fa-solid fa-location-crosshairs me-2"></i><span class="desc">'+port_load+'</span></div><div class="d-flex align-items-center"><i class="fa-solid fa-circle-check me-2"></i><span class="desc">'+publish_date+'</span></div></div><div class="badge '+type+'">'+type+'</div></div><div class="text row"> <div class="col-6"> <div class="bottom"> <div class="rounded-square cargo"><img src="/i/icons/icon-card-cargo.svg"/></div><div class="ms-2"> <p class="title">Cargo</p><p class="desc">'+data['cargo']+'</p></div></div></div><div class="col-6"> <div class="bottom"> <div class="rounded-square quantity"><img src="/i/icons/icon-card-quantity.svg"/></div><div class="ms-2"> <p class="title">Quantity</p><p class="desc">'+quantity+'</p></div></div></div></div><div class="text engine row"> <div class="col-12"> <div class="bottom"> <div class="rounded-square cargo"><img src="/i/icons/icon-engine.svg"/></div><div class="d-flex align-items-center ms-2"> <p class="title mb-0">Type: '+types+'</p></div></div></div></div></div></div>'; // html += "<div class='col-md-6 col-xl-4'> <div class='vessel-item'> <div class='img-container' id='vesselImageOC_"+mmsi+"'> <img src='"+vessel_display+"' width='100%' /> </div> <p class='title'> <a href='#'>"+data['vessel_name']+"</a> </p> <div class='text'> <div class='d-flex justify-content-between mb-2'> <span class='title'> Location : </span> <span class='value fw-bold'> "+data['port_load']+" </span> </div> <div class='d-flex justify-content-between mb-2'> <span class='title'>Cargo : </span> <span class='value fw-bold'> "+data['cargo']+" </span> </div> <div class='d-flex justify-content-between mb-2'> <span class='title'> Fixing Date : </span> <span class='value fw-bold'> "+publish_date+" </span> </div> </div> </div> </div>"; }); html += '<div id="on-charter-vessel-not-data-default"><div class="no-data-vessel-on-charter"><div class="text"><p id="on-charter-text-default" class="text-center text-uppercase">No Vessel On Charter Found</p></div></div></div>'; all_html += '<div id="all-position-vessel-not-data-default"><div class="no-data-vessel-on-charter"><div class="text"><p id="all-position-text-default" class="text-center text-uppercase">No Vessel On Charter Found</p></div></div></div>'; // Ada lottie player // html += '<div id="on-charter-vessel-not-data-default"><div class="no-data-vessel-on-charter"><div class="text"><p id="on-charter-text-default" class="text-center text-uppercase">No Vessel On Charter Found</p></div><lottie-player src="/assets/lottie/tanker-ship.json" background="transparent" speed="1" style="width:100%;height:160px;margin-top:23px" loop autoplay></lottie-player></div></div>'; // all_html += '<div id="all-position-vessel-not-data-default"><div class="no-data-vessel-on-charter"><div class="text"><p id="all-position-text-default" class="text-center text-uppercase">No Vessel On Charter Found</p></div><lottie-player src="/assets/lottie/tanker-ship.json" background="transparent" speed="1" style="width:100%;height:160px;margin-top:23px" loop autoplay></lottie-player></div></div>'; $('#VesselOnCharterSlider').html(html); defaultVesselOncharter(c_oc); $('#AllPositionSlider').html(all_html); defaultAllVessel(all_amount); } else { html = '<div id="on-charter-vessel-not-data-default"><div class="no-data-vessel-on-charter"><div class="text"><p id="on-charter-text-default" class="text-center text-uppercase">No Vessel On Charter Found</p></div></div></div>'; $('#VesselOnCharterSlider').html(html); all_html += '<div id="all-position-vessel-not-data-default"><div class="no-data-vessel-on-charter"><div class="text"><p id="all-position-text-default" class="text-center text-uppercase">No Vessel Found</p></div></div></div>'; $('#AllPositionSlider').html(all_html); // html = '<div id="on-charter-vessel-not-data-default"><div class="no-data-vessel-on-charter"><div class="text"><p id="on-charter-text-default" class="text-center text-uppercase">No Vessel On Charter Found</p></div><lottie-player src="/assets/lottie/tanker-ship.json" background="transparent" speed="1" style="width:100%;height:160px;margin-top:23px" loop autoplay></lottie-player></div></div>'; // $('#VesselOnCharterSlider').html(html); // all_html += '<div id="all-position-vessel-not-data-default"><div class="no-data-vessel-on-charter"><div class="text"><p id="all-position-text-default" class="text-center text-uppercase">No Vessel Found</p></div><lottie-player src="/assets/lottie/tanker-ship.json" background="transparent" speed="1" style="width:100%;height:160px;margin-top:23px" loop autoplay></lottie-player></div></div>'; // $('#AllPositionSlider').html(all_html); defaultAllVessel(all_amount); } }); }); } function getVesselShare() { $.get(base_path + '/modules/webservice/rest/?pin='+pin+'&method=getVesselShare&format=json', {}, function (json, textStatus) { if (json.data != null) { var d_vs = json.data; var html = ''; var request = 0; d_vs.forEach((data) => { request++; var type = data['inquiry_type']; var status = data['status']; var publish_date = moment(data['c_time']).format('d MMM Y'); var quantity = ''; if (type == 'CA') { quantity = (data['total_volume'] == null) ? "-" : numberWithCommas(data['total_volume']); } else { var min_quantity = (data['min_quantity'] == null) ? "" : numberWithCommas(data['min_quantity']); var max_quantity = (data['max_quantity'] == null) ? "" : numberWithCommas(data['max_quantity']); quantity = min_quantity+' - '+ max_quantity; } var laycan_from = "-"; if (data['laycan_from'] != null) { laycan_from = moment(data['laycan_from']).format('DD/MM/Y'); } var laycan_to = "-"; if (data['laycan_to'] != null) { laycan_to = moment(data['laycan_to']).format('DD/MM/Y'); } var port_load = "-"; if (data['port_load'] != null) { port_load = data['port_load']; } var port_discharge = "-"; if (data['port_discharge'] != null) { port_discharge = data['port_load']; } html += "<div class='chartered-content'> <a href='#' class='title p-2 mb-2'> <div> <p class='fw-bold mb-2'><span class='trx-badge "+type.toLowerCase()+"'>"+type+"</span> "+data['company_name']+"</p> <p class='fw-bold mb-0 t-negotiation'>"+status+"</p> </div> <p class='t-gray mb-0'>"+publish_date+"</p> </a> <div class='body p-2'> <div class='d-flex justify-content-between'> <div> <p class='t-gray-dark fw-bold mb-1'>Port</p> <div class='position-relative'> <p class='ms-3 mb-2 t-gray-dark port-text'>"+port_load+"</p> <p class='ms-3 mb-0 t-gray-dark port-text'>"+port_discharge+"</p> <img src='/i/icons/icon-port-way.svg' class='position-absolute' style='top: 6px; left: 0;'/> </div> </div> <div style='width:40%;'> <p class='t-gray-dark fw-bold mb-1'>Laycan</p> <div class='position-relative'> <p class='ms-3 mb-2 t-gray-dark'>"+laycan_from+"</p> <p class='ms-3 mb-0 t-gray-dark'>"+laycan_to+"</p> <img src='/i/icons/icon-port-way.svg' class='position-absolute' style='top: 6px; left: 0;'/> </div> </div> </div> <div class='d-flex justify-content-between border-top mt-2 pt-2'> <div> <p class='t-gray-dark fw-bold mb-1'>Cargo</p> <div class='position-relative'> <p class='mb-2 t-gray-dark'>"+data['cargo']+"</p></div> </div> <div style='width:40%;'> <p class='t-gray-dark fw-bold mb-1'>Quantity</p> <div class='position-relative'> <p class='mb-2 t-gray-dark decimalValue'>"+quantity+"</p></div> </div> </div> </div> </div>"; }); $('#pendingVesselRequestTask').html(html); $('#pendingTaskAmountVesselRequest').text(request); } }); } // }); var optzoom = { animate: false, duration: 1.5 }; function getDetailVessel(vslid){ jQuery.getJSON(base_path+'/modules/webservice/rest/?method=GetVesselById&vsl_id='+vslid+'&pin='+pin+'&format=json', {}, function(json, textStatus) { // jQuery.getJSON(base_path+'/modules/webservice/rest/?method=GetVesselByMmsi&mmsi='+mmsi+'&pin='+pin+'&format=json', {}, function(json, textStatus) { var longitude = json.data[0].longitude; var latitude = json.data[0].latitude; var iconsize = [15, 20]; shadowMarker.clearLayers(); setTimeout(function () { var shdwicon = L.icon({ iconUrl: '/i/icon_png/'+json.data[0].icon, iconSize: iconsize, iconAnchor: [8, 8], className: 'animated-icon oor-vsl selectedMarker', }); var markr = L.marker(L.latLng(json.data[0].latitude,json.data[0].longitude), {icon: shdwicon, rotationAngle: json.data[0].heading}).on('mouseover', function() { $(this._icon).addClass('selectedMarker'); }).on('mouseout',function() { }) shadowMarker.clearLayers(); markr.setOpacity(0.9); markr.bindPopup(json.data[0].name,{closeButton: false, offset: L.point(-4, -6)}); shadowMarker.addLayer(markr); shadowMarker.addTo(map); }, 2000) map.flyTo(L.latLng(latitude, longitude), 14, optzoom); var pro = json.data[0]; var content = ''; if (pro.trs_id > 0) { // enquiry exist var port_load = pro.port_load ? pro.port_load : '-'; var port_discharge = pro.port_discharge ? pro.port_discharge : '-'; var laycan_from = '-'; var laycan_to = '-'; if (pro.laycan_from) { laycan_from = moment(pro.laycan_from).format('DD/MM/Y'); } if (pro.laycan_to) { laycan_to = moment(pro.laycan_to).format('DD/MM/Y'); } var inq_type = pro.inquiry_type; var capacity = pro.quantity ? numberWithCommas(pro.quantity) : '-'; // var capacity = pro.total_tank_capacity ? numberWithCommas(pro.total_tank_capacity) : '-'; // var capacity = ''; // if (inq_type === 'CA') { // capacity = pro.total_volume ? numberWithCommas(pro.total_volume) : '-'; // } else { // capacity = numberWithCommas(pro.min_quantity)+' - '+numberWithCommas(pro.max_quantity); // } content = '<input type="hidden" id="map-vsl-id" value="'+pro.vsl_id+'">'+ '<div id="reference_id" class="col-12 border-bottom pb-2">'+ '<span class="trx-badge '+inq_type.toLowerCase()+'">'+inq_type+'</span> <span style="font-weight: bold">'+pro.ref_id +'</span>'+ '</div>'+ '<div class="col-12">'+ '<p class="text-secondary mt-0 mb-1">Chartered by:</p>'+ '<p class="fw-bold my-0">'+pro.chartered_by+'</p>'+ '</div>'+ '<div class="col-6">'+ '<p class="text-secondary mt-0 mb-1">Cargo:</p>'+ '<p id="map-tooltip-cargo" class="fw-bold my-0">'+pro.cargo+'</p>'+ '</div>'+ '<div class="col-6">'+ '<p class="text-secondary mt-0 mb-1">Capacity:</p>'+ '<p id="map-tooltip-cargo" class="fw-bold my-0">'+capacity+'</p>'+ '</div>'+ '<div class="col-6 position-relative">'+ '<div class="d-flex align-items-start mb-3" style="z-index: 1; position: relative;">'+ '<img src="/i/icons/icon-port-circle.svg" class="me-2 mt-1"/>'+ '<div>'+ '<p class="my-0 text-secondary fs-10">Loading Port:</p>'+ '<p class="my-0" id="map-tooltip-loading-port">'+port_load+'</p>'+ '</div>'+ '</div>'+ '<div class="d-flex align-items-start" style="z-index: 1; position: relative;">'+ '<img src="/i/icons/icon-port-circle-filled.svg" class="me-2 mt-1"/>'+ '<div class="tooltip-discharging-port">'+ '<p class="my-0 text-secondary fs-10">Discharging Port:</p>'+ '<p class="my-0" id="map-tooltip-discharging-port">'+port_discharge+'</p>'+ '</div>'+ '</div>'+ '<div class="line-port"></div>'+ '<div class="line-port-hide"></div>'+ '</div>'+ '<div class="col-6 position-relative">'+ '<div class="d-flex align-items-start mb-3" style="z-index: 1; position: relative;">'+ '<img src="/i/icons/icon-port-circle.svg" class="me-2 mt-1"/>'+ '<div>'+ '<p class="my-0 text-secondary fs-10">Laycan:</p>'+ '<p class="my-0" id="map-tooltip-laycan-start">'+laycan_from+'</p>'+ '</div>'+ '</div>'+ '<div class="d-flex align-items-start" style="z-index: 1; position: relative;">'+ '<img src="/i/icons/icon-port-circle-filled.svg" class="me-2 mt-1"/>'+ '<div class="tooltip-discharging-port">'+ '<p class="my-0" id="map-tooltip-laycan-end">'+laycan_to+'</p>'+ '</div>'+ '</div>'+ '<div class="line-port"></div>'+ '<div class="line-port-hide"></div>'+ '</div>'; $('#map-tooltip-name').text(pro.name); } else { var last_cargo = pro.last_cargo ? pro.last_cargo : '-'; var capacity = pro.total_tank_capacity ? numberWithCommas(pro.total_tank_capacity) : '-'; var vessel_type = pro.ship_type ? pro.ship_type : '-'; content = '<input type="hidden" id="map-vsl-id" value="'+pro.vsl_id+'">'+ // '<div id="map-tooltip-local-times" class="col-12 border-bottom pb-2">'+ // pro.local_times + // '</div>'+ '<div class="col-12">'+ '<p class="text-secondary mt-0 mb-1">Last Cargo:</p>'+ '<p class="fw-bold my-0">'+last_cargo+'</p>'+ '</div>'+ '<div class="col-6">'+ '<p class="text-secondary mt-0 mb-1">Vessel Type:</p>'+ '<p id="map-tooltip-cargo" class="fw-bold my-0">'+vessel_type+'</p>'+ '</div>'+ '<div class="col-6">'+ '<p class="text-secondary mt-0 mb-1">Capacity:</p>'+ '<p id="map-tooltip-cargo" class="fw-bold my-0">'+capacity+'</p>'+ '</div>'; // show vessel name if (role === '2') { $('#map-tooltip-name').text(""); } else { $('#map-tooltip-name').text(pro.name); } } $("#vesselInfo").html(content) // $('#map-vsl-id').val(pro['vsl_id']); var lnglat = [parseFloat(latitude), parseFloat(longitude)] // $('#map-tooltip-local-times').text(pro['local_times']); // $('#map-tooltip-cargo').text(pro['vessel_type']); $('#map-tooltip-lnglat').text(lnglat); $('#map-tooltip-local-times').text(pro.local_times); $('.vsl-info-fixed').hide(); $('.vsl-info-fixed.tracking').show(); $('.vsl-info-fixed.tracking .loading-data').hide(); tooltipLinePort(); }); } var trackLayer = L.layerGroup(); var monthNames = ['', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; function showHistoricalTracking() { $("#historytrack").empty(); map.removeLayer(vslall); map.removeLayer(window['layer_open_request']); trackLayer.clearLayers(); var vslid = $("#map-vsl-id").val(); var _threshold = 4; $.getJSON(base_path + '/modules/webservice/rest/?method=getHistoricalTracking&vsl_id=' + vslid + '&days=14&pin=' + pin + '&format=json', {}, function (json, textStatus) { if (json.data !== null) { var linetrack = []; var propmark = []; var htmz = ''; var eac100 = 1; var ii = 0; var vsl_nm = ''; var vsl_imo = ''; var vsl_mmsi = ''; var flag = ''; var icon = ''; var heading = ''; $.each(json.data, function (i, v) { var tgl = v['data_time']; if (i == 1) { vsl_nm = v['name']; vsl_imo = v['imo']; vsl_mmsi = v['mmsi']; flag = v['flag']; icon = v['icon']; heading = v['heading']; } eta = ''; var ddeta = v['eta']; if (ddeta != null && ddeta != 'null') { eta = ddeta.substring(2, 4) + ' - ' + monthNames[parseInt(ddeta.substring(0, 2), 10)] + ' ' + ddeta.substring(4, 6) + ':' + ddeta.substring(6, 8); } var lat = parseFloat(v['latitude']).toFixed(2); var lon = parseFloat(v['longitude']).toFixed(2); htmz += '<div class="col-12 mb-2">'+ '<div class="card">'+ '<div class="card-header">'+v['data_time']+'</div>'+ '<div class="card-body">'+ // '<p class="mb-0 border-bottom pb-2 mb-2">'+ // '<span class="fw-bold">'+v['mmsi']+'</span>'+ // '<span class="ms-1 fw-bold">'+v['name'] +'</span>'+ // '</p>'+ '<p class="mb-0">'+ '<span class="me-1">Latlong : </span>'+ '<span class="fw-bold">'+lat+', '+ lon +'</span>'+ '</p>'+ '<p class="mb-0">'+ '<span class="me-1">Type : </span>'+ '<span class="fw-bold">'+ v['vessel_type'] +'</span>'+ '</p>'+ '<p class="mb-0">'+ '<span class="me-1">Speed:</span>'+ '<span class="fw-bold">'+ v['sog'] +' kn</span>'+ '</p>'+ '<p class="mb-0">'+ '<span class="me-1">Draught : </span>'+ '<span class="fw-bold">'+ v['draught'] +'</span>'+ '</p>'+ '<p class="mb-0">'+ '<span class="me-1">Heading : </span>'+ '<span class="fw-bold">' + v['heading'] + 'º</span>'+ '</p>'+ '<p class="mb-0">'+ '<span class="me-1">Destination : </span>'+ '<span class="fw-bold">'+ v['destination'] + '</span>'+ '</p>'+ '<p class="mb-0">'+ '<span class="me-1">Activity : </span>'+ '<span class="fw-bold">'+ v['nav_status'] +'</span>'+ '</p>'+ '<p class="mb-0">'+ '<span class="me-1">Eta : </span>'+ '<span class="fw-bold">'+eta+'</span>'+ '</p>'+ '</div>'+ '</div>'+ '</div>'+ '</div>'; // htmz += '<td class="fs-12" style="width: 25%;">'+ // '<b class="fs-12">' + v['data_time'] + '</b>'+ // '</td>'+ // '<td class="fs-12" style="width: 75%;">'+ // '<a class="fs-12" href="javascript:;" onclick="trackbackdate(' + v['longitude'] + ',' + v['latitude'] + ',' + v['mmsi'] + ",'" + tgl.replace(':', '_').replace(':', '_') + "','" + v['icon'] + "'," + v['heading'] + ');" style="color: #CE6700">' + v['mmsi'] + ' (' + v['name'] + ') </a><br>Speed : ' + v['sog'] + 'kn, Draught : ' + v['draught'] + 'm, Heading : ' + v['heading'] + 'º <br> LatLon :' +v['latitude']+', '+v['longitude'] + '<br> Type :' + v['vessel_type'] + ', Destination :' + v['destination'] + '<br> Activity : ' + v['nav_status'] + '<br> Eta :' + eta + '</td></tr>'; linetrack.push([parseFloat(v['latitude']), parseFloat(v['longitude']), tgl, parseFloat(v['sog'])]); if (eac100 == 10) { makr = new L.circleMarker([parseFloat(v['latitude']), parseFloat(v['longitude'])], { color: '#c50000', radius: 1, }) // .on('mouseover', function (f) { // this.bindTooltip(v['data_time'].replace(' UTC +7', '')) // }); .bindTooltip(v['data_time'].replace(' UTC +7', ''), { permanent: true, direction: 'right', offset: L.point(3, 0), opacity: 1, className: 'vsl_label_track', }) .openTooltip(); eac100 = 0; } else { makr = new L.circleMarker([parseFloat(v['latitude']), parseFloat(v['longitude'])], { color: '#c50000', radius: 1, }).on('mouseover', function (f) { this.bindTooltip(v['data_time'].replace(' UTC +7', '')) }); // .bindTooltip(v['data_time']) // .openTooltip(); } eac100++; trackLayer.addLayer(makr); propmark.push(tgl); ii++; }); $("#historytrack").html(htmz); var shdwicon = L.icon({ iconUrl: '/i/icon_png/' + icon, iconSize: [13, 20], iconAnchor: [8, 8], className: 'animated-icon oor-vsl circle-selected', }); var markr = L.marker([linetrack[0][0], linetrack[0][1]], { icon: shdwicon, rotationAngle: heading, }) .on('click', function (e) { // tesgetid1(vsl_id); console.log('testgetid'); }) .on('mouseover', function () { if ($('.leaflet-marker-icon').hasClass('circle-selected')) { $('.leaflet-marker-icon').removeClass('circle-selected'); } $(this._icon).addClass('circle-selected'); }) .on('mouseout', function () { $('.leaflet-marker-icon').removeClass('circle-selected'); }); markr.setOpacity(1); // markr // .bindTooltip(vsl_nm, { // permanent: true, // direction: 'right', // offset: L.point(3, 0), // opacity: 1, // className: 'vsl_label', // }) // .openTooltip(); trackLayer.addLayer(markr); var oldtgl = ''; var oldpoint = ''; var oldpointh = ''; var markers = []; var markersline = []; var _marker = []; var _markerline = []; var hotline = []; var _hotline = []; var cd = 0; var c = 0; linetrack.reverse(); for (var dd = 0; dd < linetrack.length; dd++) { if (oldtgl != '') { var _wtkold = new Date(oldtgl.replace(/-/g, '/')); var _tgl = new Date(linetrack[dd][2].replace(/-/g, '/')); var spd = linetrack[dd][3]; var diff = Math.abs(_wtkold.getTime() - _tgl.getTime()) / 3600000; if (diff < parseInt(_threshold)) { _marker.push(oldpoint); _marker.push(L.latLng(linetrack[dd][0], linetrack[dd][1])); _hotline.push(oldpointh); _hotline.push([linetrack[dd][0], linetrack[dd][1], spd]); if (_markerline.length > 0) { markersline[cd] = _markerline; _markerline = []; cd++; } } else { //_marker.push(oldpoint); _markerline.push(oldpoint); _markerline.push(L.latLng(linetrack[dd][0], linetrack[dd][1])); if (_marker.length > 0) { hotline[c] = _hotline; markers[c] = _marker; _marker = []; _hotline = []; c++; } } } else { var _wtkold1 = new Date(linetrack[0][2].replace(/-/g, '/')); var _tgl1 = new Date(linetrack[dd][2].replace(/-/g, '/')); var spd = linetrack[dd][3]; var diff1 = Math.abs(_wtkold1.getTime() - _tgl1.getTime()) / 3600000; _marker.push(L.latLng(linetrack[dd][0], linetrack[dd][1])); _hotline.push([linetrack[dd][0], linetrack[dd][1], spd]); } oldtgl = linetrack[dd][2]; oldpoint = L.latLng(linetrack[dd][0], linetrack[dd][1]); oldpointh = [linetrack[dd][0], linetrack[dd][1], spd]; } if (_marker.length > 0) { hotline[c] = _hotline; markers[c] = _marker; _marker = []; _hotline = []; } if (_markerline.length > 0) { markersline[cd] = _markerline; _markerline = []; } linestrt = new L.polyline(markers, { color: '#c50000', weight: 0.8, }); linestr = L.hotline(hotline, { min: 0, max: 100, palette: { 0.0: '#20af29', 0.05: '#20af29', 0.1: '#b4f73e', 0.15: '#fffd32', 0.2: '#49ddee', 0.25: '#a4c073', 0.3: '#c939e8', 0.35: '#fd1d2d', 1.0: '#fd1d2d', }, weight: 4, outlineColor: '#c50000', outlineWidth: 0.4, }); linestr1 = new L.polyline(markersline, { color: '#848689', weight: 4, }); trackLayer.addLayer(linestr); trackLayer.addLayer(linestrt); trackLayer.addLayer(linestr1); linestrike = new L.polylineDecorator(linestr, { patterns: [ { offset: 25, repeat: 150, symbol: L.Symbol.arrowHead({ pixelSize: 16, pathOptions: { color: '#c50000', fillOpacity: 1, weight: 0, }, }), }, ], }); linestrike.setZIndex(5); linestrike1 = new L.polylineDecorator(linestr1, { patterns: [ { offset: 25, repeat: 150, symbol: L.Symbol.arrowHead({ pixelSize: 16, pathOptions: { color: '#848689', fillOpacity: 1, weight: 0, }, }), }, ], }); linestrike1.setZIndex(3); trackLayer.addLayer(linestrike); trackLayer.addLayer(linestrike1); linestrike.bringToFront(); linestrike1.bringToFront(); //END CREATE LINE TRACK map.addLayer(trackLayer); // boundTrack.push(markers); } }); } $('.datepicker').datepicker({ todayHighlight: true, changeYear: true, changeMonth: true, }); $('.pending-task-class').on('click', function(event) { $('.pending-task-class').removeClass('active'); $(this).addClass('active'); $('.chartered-container').hide(); $('#'+this.id+"Task").show(); }); function renderMapLegend() { window['legend_vessel'] = L.control({ position: 'topright' }); window['legend_vessel'].onAdd = function (map) { var div = L.DomUtil.create('div', 'info legend'); var legendtbl = '<div id="legend_vessel">'; legendtbl += '<table style="width:300px; margin-bottom: 10px;"><tbody>'+ '<tr valign="middle"> <td style="width:10%"><img src="/i/icon_png/vessel-open.png" alt="Open" height="20" > </td><td>Open</td> </tr>'+ '<tr valign="middle"> <td style="width:10%"><img src="/i/icon_png/vessel-negotiation.png" alt="Negotiation" height="20" > </td><td>Negotiation</td> </tr>'+ '<tr valign="middle"> <td style="width:10%"><img src="/i/icon_png/vessel-fixing.png" alt="Fixing" height="20" > </td><td>Fixing</td> </tr>'+ '</tbody></table>'+ '</div>'; $("#map-legend").append(legendtbl); div.setAttribute("style", "background:white; margin-bottom:0px;"); return div; }; window['legend_vessel'].addTo(map) window['legend_info'] = L.control({ position: 'topright' }); window['legend_info'].onAdd = function (map) { var div = L.DomUtil.create('div', 'info legend'); var legendtbl = '<div id="legend_vessel">'; legendtbl += '<table style="width:300px;"><tbody>'+ '<tr valign="middle"> <td style="width:10%"><div style="background-color: #9fc9c1; width: 15px;height: 15px;border: 1px solid rgb(38, 38, 38) !important;border-radius: 6px;"></div></td><td>Vessel Open Position</td> </tr>'+ '<tr valign="middle"> <td style="width:10%"><div style="background-color: #279674; width: 15px; height: 15px; border: 1px solid rgb(38, 38, 38) !important; border-radius: 6px;"></div></td><td>Cargo Open Enquiry</td> </tr>'+ '</tbody></table>'+ '</div>'; $("#map-legend").append(legendtbl); div.setAttribute("style", "background:white; margin-bottom:0px;"); return div; }; window['legend_info'].addTo(map) } $('#btnLegend').click(function () { var show_legend = $('#btnLegend').hasClass('active'); if (!show_legend) { // show legend $('.map-legend-container').show(); $('#btnLegend').addClass('active'); } else { // hide legend $('.map-legend-container').hide(); $('#btnLegend').removeClass('active'); } }); // disable scroll map on historical track L.DomEvent.disableScrollPropagation(document.getElementById('historytrack')) L.DomEvent.disableScrollPropagation(document.getElementById('modalPort')) // var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) // var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { // return new bootstrap.Tooltip(tooltipTriggerEl) // }); </script>