Map: adjust modal size, remove titles in right panel, reduce cluster size, add rate row in info modal, disable Google Map interactions when modal is open, move Google Map area downward
This commit is contained in:
Jaeeun.Cho
parent
ed07e95c9e
commit
3fdeade68e
|
|
@ -214,7 +214,7 @@ button.close {
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
padding: 15px;
|
||||
padding: 0 15px 0 15px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
|
|
@ -229,7 +229,7 @@ button.close {
|
|||
|
||||
.modal-title {
|
||||
flex: none;
|
||||
width: 250px !important;
|
||||
width: 350px !important;
|
||||
text-align: left;
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
|
|
|
|||
|
|
@ -56,6 +56,11 @@
|
|||
/*--------------------------------------------------------------
|
||||
# General
|
||||
--------------------------------------------------------------*/
|
||||
#map {
|
||||
margin-top: 25px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-default);
|
||||
color: var(--color-default);
|
||||
|
|
@ -1693,11 +1698,13 @@ table.table-search-report .tb-list th {
|
|||
background-color:white;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
width: 350px;
|
||||
width: 450px;
|
||||
user-select: none;
|
||||
transform: none !important;
|
||||
cursor:default;
|
||||
position: relative;
|
||||
pointer-events: auto;
|
||||
z-index: 9999999999999999;
|
||||
}
|
||||
|
||||
.address-row {
|
||||
|
|
@ -1705,11 +1712,11 @@ table.table-search-report .tb-list th {
|
|||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.address-title {
|
||||
width: 40%;
|
||||
width: 25%;
|
||||
padding: 5px 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
|
@ -1723,7 +1730,7 @@ table.table-search-report .tb-list th {
|
|||
}
|
||||
|
||||
.address-content {
|
||||
width: 60%;
|
||||
width: 75%;
|
||||
padding: 5px 10px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
|
|
|
|||
|
|
@ -592,6 +592,9 @@ input#Liter{
|
|||
border: 1px solid var(--orange-color);
|
||||
color: #fff;
|
||||
}
|
||||
#sidebar-map tr td {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
#sidebar-map .container-chk {
|
||||
position: relative;
|
||||
padding-left: 31px;
|
||||
|
|
|
|||
|
|
@ -1140,6 +1140,7 @@ class API extends CONF {
|
|||
td.d_payeename,
|
||||
td.d_payeesign,
|
||||
td.d_sludge,
|
||||
td.d_rate,
|
||||
tc.c_sludge,
|
||||
tc.c_paymenttype,
|
||||
tc.c_name
|
||||
|
|
@ -1177,6 +1178,7 @@ class API extends CONF {
|
|||
"d_sludge" => $rstInput['c_sludge'],
|
||||
"d_paymenttype" => $rstInput['c_paymenttype'],
|
||||
"d_name" => $rstInput['c_name'],
|
||||
"d_rate" => $rstInput['d_rate'],
|
||||
"d_note" => $noteSTR
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -122,9 +122,9 @@
|
|||
</tr>
|
||||
<? } ?>
|
||||
|
||||
<tr>
|
||||
<!-- <tr>
|
||||
<td> <label for="orderBy">Order Date</label></td>
|
||||
</tr>
|
||||
</tr> -->
|
||||
<tr>
|
||||
<td>
|
||||
<input type="date" name="orderdate" id="orderdate" value="<?php echo date('Y-m-d');?>">
|
||||
|
|
@ -160,9 +160,9 @@
|
|||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td > <label for="orderBy">Driver</label></td>
|
||||
</tr>
|
||||
<!-- <tr>
|
||||
<td ><label for="orderBy">Driver</label></td>
|
||||
</tr> -->
|
||||
<tr>
|
||||
<td>
|
||||
<select name="name" id="driver" class="custom-select-map-orderby">
|
||||
|
|
@ -174,18 +174,18 @@
|
|||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<!-- <tr>
|
||||
<td><label for="Search">Search</label></td>
|
||||
</tr>
|
||||
</tr> -->
|
||||
<tr>
|
||||
<td><input class="input-colour-bar" type="text" id="search-keyword" name="Search" placeholder=""></td>
|
||||
<td><input class="input-colour-bar" type="text" id="search-keyword" name="Search" placeholder="Search"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<!-- <tr>
|
||||
<td colspan="4"><label for="Quantity">Quantity</label></td>
|
||||
</tr>
|
||||
</tr> -->
|
||||
|
||||
<tr>
|
||||
<td class="box-chk">
|
||||
|
|
@ -399,6 +399,11 @@ function popup(){
|
|||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="td-title-info">Rate</td>
|
||||
<td class="td-text-info shortinput-rate">Rate</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="td-title-info">Oil Quantity</td>
|
||||
|
|
@ -1399,6 +1404,7 @@ function popup(){
|
|||
|
||||
var rstInitInput = function(json) {
|
||||
jQuery("#map-modal-input .shortinput-store-name").text(json.result['d_name']);
|
||||
jQuery("#map-modal-input .shortinput-rate").text(json.result['d_rate']);
|
||||
jQuery("#map-modal-input .d_driveruid").val(json.result['d_driveruid']);
|
||||
jQuery("#map-modal-input .d_paymenttype").val(json.result['d_paymenttype']);
|
||||
jQuery("#map-modal-input .d_sludge").val(json.result['d_sludge']);
|
||||
|
|
@ -1771,15 +1777,15 @@ function popup(){
|
|||
url:
|
||||
"data:image/svg+xml;charset=UTF-8," +
|
||||
encodeURIComponent(`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">
|
||||
<circle cx="20" cy="20" r="18"
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30">
|
||||
<circle cx="15" cy="15" r="13"
|
||||
fill="${topColor}" />
|
||||
<text x="20" y="25" text-anchor="middle"
|
||||
font-size="14" fill="#fff">${count}</text>
|
||||
<text x="15" y="20" text-anchor="middle"
|
||||
font-size="12" fill="#fff">${count}</text>
|
||||
</svg>
|
||||
`),
|
||||
scaledSize: new google.maps.Size(40, 40),
|
||||
anchor: new google.maps.Point(10, 10),
|
||||
scaledSize: new google.maps.Size(30, 30),
|
||||
anchor: new google.maps.Point(15, 15),
|
||||
},
|
||||
zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
|
||||
|
||||
|
|
@ -2391,12 +2397,10 @@ function popup(){
|
|||
<table class="tb-info-box">
|
||||
<!--table class="tb-info-box" onClick="javascript:jQuery('.overlay-close-${property.index}').trigger('click');"-->
|
||||
<tr>
|
||||
<td class="td-title-info td-left">Account</td>
|
||||
<td class="td-text-info td-right">
|
||||
<td class="td-title-info">Account</td>
|
||||
<td class="td-text-info">
|
||||
<span>${property.accountno}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-title-info">Container</td>
|
||||
<td class="td-text-info">
|
||||
<span>${property.maincontainer}</span>
|
||||
|
|
@ -2407,34 +2411,27 @@ function popup(){
|
|||
<td class="td-text-info">
|
||||
<span>${property.paymentType}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-title-info">Rate</td>
|
||||
<td class="td-text-info">
|
||||
<span>${property.rate}</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="td-title-info">Phone</td>
|
||||
<td class="td-text-info">
|
||||
<span>${property.phone}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-title-info">Forecast</td>
|
||||
<td class="td-text-info">
|
||||
<span>${property.estqty}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-title-info">Last Pickup Date</td>
|
||||
<td class="td-title-info">Last Pickup</td>
|
||||
<td class="td-text-info">
|
||||
<span>${property.lastPickupDate}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td-title-info">Last Paid Date</td>
|
||||
<td class="td-title-info">Last Paid</td>
|
||||
<td class="td-text-info">
|
||||
<span>${property.lastPaidDate}</span>
|
||||
</td>
|
||||
|
|
@ -2452,21 +2449,20 @@ function popup(){
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="text-center map-grid-layout-col-3">
|
||||
<button type="button" class="mapBtn btn-info-modal" onClick="javscript:showShortInfo(${property.customerid});" data-toggle="modal" data-target="#map-modal-info"><i class="fa-solid fa-question"></i><br>Info</button>
|
||||
<button type="submit" class="mapBtn btn-grey-modal" onClick="javascript:initHistory(${property.customerid});" data-toggle="modal" data-target="#map-modal-history"><i class="bi bi-folder2-open"></i><br>History</button>`;
|
||||
<button type="button" class="mapBtn btn-info-modal" onClick="javscript:showShortInfo(${property.customerid});" data-toggle="modal" data-target="#map-modal-info"><i class="fa-solid fa-question"></i> Info</button>
|
||||
<button type="submit" class="mapBtn btn-grey-modal" onClick="javascript:initHistory(${property.customerid});" data-toggle="modal" data-target="#map-modal-history"><i class="bi bi-folder2-open"></i> History</button>`;
|
||||
if(`${property.date}` === 'null') {
|
||||
innerHtml += `<button type="button" class="mapBtn btn-primary-modal addOrderBtn_${property.index}" data-toggle="modal" onClick="javascript:initAddOrder(${property.customerid},${property.index});"><i class="fa-solid fa-plus"></i><br>Add</button>`;
|
||||
innerHtml += `<button type="button" class="mapBtn btn-red-modal hidden removeOrderBtn_${property.index}" data-toggle="modal" data-target="#modal-confirm" onClick="javascript:removeOrder(${property.customerid},${property.duid},${property.index});"><i class="fa-solid fa-xmark"></i><br>Remove</button>`;
|
||||
innerHtml += `<button type="button" class="mapBtn btn-primary-modal addOrderBtn_${property.index}" data-toggle="modal" onClick="javascript:initAddOrder(${property.customerid},${property.index});"><i class="fa-solid fa-plus"></i> Add</button>`;
|
||||
innerHtml += `<button type="button" class="mapBtn btn-red-modal hidden removeOrderBtn_${property.index}" data-toggle="modal" data-target="#modal-confirm" onClick="javascript:removeOrder(${property.customerid},${property.duid},${property.index});"><i class="fa-solid fa-xmark"></i> Remove</button>`;
|
||||
}else{
|
||||
innerHtml += `<button type="button" class="mapBtn btn-primary-modal addOrderBtn_${property.index} hidden" data-toggle="modal" onClick="javascript:initAddOrder(${property.customerid},${property.index});"><i class="fa-solid fa-plus"></i><br>Add</button>`;
|
||||
innerHtml += `<button type="button" ${property.orderFlag} class="mapBtn btn-red-modal removeOrderBtn_${property.index}" data-toggle="modal" data-target="#modal-confirm" onClick="javascript:removeOrder(${property.customerid},${property.duid},${property.index});"><i class="fa-solid fa-xmark"></i><br>Remove</button>`;
|
||||
innerHtml += `<button type="button" class="mapBtn btn-primary-modal addOrderBtn_${property.index} hidden" data-toggle="modal" onClick="javascript:initAddOrder(${property.customerid},${property.index});"><i class="fa-solid fa-plus"></i> Add</button>`;
|
||||
innerHtml += `<button type="button" ${property.orderFlag} class="mapBtn btn-red-modal removeOrderBtn_${property.index}" data-toggle="modal" data-target="#modal-confirm" onClick="javascript:removeOrder(${property.customerid},${property.duid},${property.index});"><i class="fa-solid fa-xmark"></i> Remove</button>`;
|
||||
}
|
||||
innerHtml += `<button type="submit" class="mapBtn btn-nearby" onClick="javascript:inqNearby('${property.lat}:${property.lon}');"><i class="fa-solid fa-diamond-turn-right"></i><br>Nearby</button>
|
||||
<button type="submit" class="mapBtn btn-orange-modal ${(property.rnote && /\S/.test(property.rnote)) ? 'blink' : ''}" data-toggle="modal" data-target="#map-modal-note" onClick="javscript:showShortNotice(${property.duid});"><i class="fa fa-thumb-tack"></i><br>Notice</button>
|
||||
<button type="submit" class="mapBtn btn-purple-modal" data-toggle="modal" data-target="#map-modal-input" onClick="javascript:initInput(${property.customerid});"><i class="bi bi-truck"></i><br>Input</button>
|
||||
innerHtml += `<button type="submit" class="mapBtn btn-nearby" onClick="javascript:inqNearby('${property.lat}:${property.lon}');"><i class="fa-solid fa-diamond-turn-right"></i> Nearby</button>
|
||||
<button type="submit" class="mapBtn btn-orange-modal ${(property.rnote && /\S/.test(property.rnote)) ? 'blink' : ''}" data-toggle="modal" data-target="#map-modal-note" onClick="javscript:showShortNotice(${property.duid});"><i class="fa fa-thumb-tack"></i> Notice</button>
|
||||
<button type="submit" class="mapBtn btn-purple-modal" data-toggle="modal" data-target="#map-modal-input" onClick="javascript:initInput(${property.customerid});"><i class="bi bi-truck"></i> Input</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -2474,7 +2470,6 @@ function popup(){
|
|||
content.innerHTML = innerHtml;
|
||||
return content;
|
||||
}
|
||||
|
||||
|
||||
var rstInqMapCenter = function(json) {
|
||||
center = { lat: parseFloat(json.geo['lat']), lng: parseFloat(json.geo['lon']) };
|
||||
|
|
@ -2521,4 +2516,19 @@ async function forceRefresh() {
|
|||
}
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
$('.point-overlay').on(
|
||||
'click mousedown mouseup touchstart touchend pointerdown pointerup',
|
||||
function (e) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
);
|
||||
|
||||
$('.point-overlay *').on(
|
||||
'click mousedown mouseup touchstart touchend pointerdown pointerup',
|
||||
function (e) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
);
|
||||
|
||||
</script>
|
||||
Loading…
Reference in New Issue