Untitled
unknown
plain_text
2 years ago
113 kB
11
Indexable
<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>Editor is loading...