hyojin.ahn
/
goiintra
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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 2025-11-24 09:31:23 -05:00
parent ed07e95c9e
commit 3fdeade68e
5 changed files with 68 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public_html/assets/css/leftside-modal.css
View File

@ -214,7 +214,7 @@ button.close {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
position: relative; position: relative;
padding: 15px; padding: 0 15px 0 15px;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
} }
@ -229,7 +229,7 @@ button.close {
.modal-title { .modal-title {
flex: none; flex: none;
width: 250px !important; width: 350px !important;
text-align: left; text-align: left;
white-space: normal; white-space: normal;
word-wrap: break-word; word-wrap: break-word;

15
public_html/assets/css/main.css
View File

@ -56,6 +56,11 @@
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# General # General
--------------------------------------------------------------*/ --------------------------------------------------------------*/
#map {
margin-top: 25px;
height: 100%;
}
body { body {
font-family: var(--font-default); font-family: var(--font-default);
color: var(--color-default); color: var(--color-default);
@ -1693,11 +1698,13 @@ table.table-search-report .tb-list th {
background-color:white; background-color:white;
padding: 5px; padding: 5px;
border-radius: 5px; border-radius: 5px;
width: 350px; width: 450px;
user-select: none; user-select: none;
transform: none !important; transform: none !important;
cursor:default; cursor:default;
position: relative; position: relative;
pointer-events: auto;
z-index: 9999999999999999;
} }
.address-row { .address-row {
@ -1705,11 +1712,11 @@ table.table-search-report .tb-list th {
justify-content: space-between; justify-content: space-between;
align-items: stretch; align-items: stretch;
padding: 0; padding: 0;
margin: 0; margin-bottom: 5px;
} }
.address-title { .address-title {
width: 40%; width: 25%;
padding: 5px 10px; padding: 5px 10px;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
@ -1723,7 +1730,7 @@ table.table-search-report .tb-list th {
} }
.address-content { .address-content {
width: 60%; width: 75%;
padding: 5px 10px; padding: 5px 10px;
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;

3
public_html/assets/css/mapMAPCSS.css
View File

@ -592,6 +592,9 @@ input#Liter{
border: 1px solid var(--orange-color); border: 1px solid var(--orange-color);
color: #fff; color: #fff;
} }
#sidebar-map tr td {
padding-bottom: 5px;
}
#sidebar-map .container-chk { #sidebar-map .container-chk {
position: relative; position: relative;
padding-left: 31px; padding-left: 31px;

2
public_html/assets/internal_api.php
View File

@ -1140,6 +1140,7 @@ class API extends CONF {
td.d_payeename, td.d_payeename,
td.d_payeesign, td.d_payeesign,
td.d_sludge, td.d_sludge,
td.d_rate,
tc.c_sludge, tc.c_sludge,
tc.c_paymenttype, tc.c_paymenttype,
tc.c_name tc.c_name
@ -1177,6 +1178,7 @@ class API extends CONF {
"d_sludge" => $rstInput['c_sludge'], "d_sludge" => $rstInput['c_sludge'],
"d_paymenttype" => $rstInput['c_paymenttype'], "d_paymenttype" => $rstInput['c_paymenttype'],
"d_name" => $rstInput['c_name'], "d_name" => $rstInput['c_name'],
"d_rate" => $rstInput['d_rate'],
"d_note" => $noteSTR "d_note" => $noteSTR
); );
} }

90
public_html/doc/map.php
View File

@ -122,9 +122,9 @@
</tr> </tr>
<? } ?> <? } ?>
<tr> <!-- <tr>
<td> <label for="orderBy">Order Date</label></td> <td> <label for="orderBy">Order Date</label></td>
</tr> </tr> -->
<tr> <tr>
<td> <td>
<input type="date" name="orderdate" id="orderdate" value="<?php echo date('Y-m-d');?>"> <input type="date" name="orderdate" id="orderdate" value="<?php echo date('Y-m-d');?>">
@ -160,9 +160,9 @@
</td> </td>
</tr> </tr>
<tr> <!-- <tr>
<td > <label for="orderBy">Driver</label></td> <td ><label for="orderBy">Driver</label></td>
</tr> </tr> -->
<tr> <tr>
<td> <td>
<select name="name" id="driver" class="custom-select-map-orderby"> <select name="name" id="driver" class="custom-select-map-orderby">
@ -174,18 +174,18 @@
</select> </select>
</td> </td>
</tr> </tr>
<tr> <!-- <tr>
<td><label for="Search">Search</label></td> <td><label for="Search">Search</label></td>
</tr> </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> </tr>
</table> </table>
<table> <table>
<tr> <!-- <tr>
<td colspan="4"><label for="Quantity">Quantity</label></td> <td colspan="4"><label for="Quantity">Quantity</label></td>
</tr> </tr> -->
<tr> <tr>
<td class="box-chk"> <td class="box-chk">
@ -400,6 +400,11 @@ function popup(){
</td> </td>
</tr> </tr>
<tr>
<td class="td-title-info">Rate</td>
<td class="td-text-info shortinput-rate">Rate</td>
</tr>
<tr> <tr>
<td class="td-title-info">Oil Quantity</td> <td class="td-title-info">Oil Quantity</td>
<td class="td-text-info"> <td class="td-text-info">
@ -1399,6 +1404,7 @@ function popup(){
var rstInitInput = function(json) { var rstInitInput = function(json) {
jQuery("#map-modal-input .shortinput-store-name").text(json.result['d_name']); 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_driveruid").val(json.result['d_driveruid']);
jQuery("#map-modal-input .d_paymenttype").val(json.result['d_paymenttype']); jQuery("#map-modal-input .d_paymenttype").val(json.result['d_paymenttype']);
jQuery("#map-modal-input .d_sludge").val(json.result['d_sludge']); jQuery("#map-modal-input .d_sludge").val(json.result['d_sludge']);
@ -1771,15 +1777,15 @@ function popup(){
url: url:
"data:image/svg+xml;charset=UTF-8," + "data:image/svg+xml;charset=UTF-8," +
encodeURIComponent(` encodeURIComponent(`
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"> <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30">
<circle cx="20" cy="20" r="18" <circle cx="15" cy="15" r="13"
fill="${topColor}" /> fill="${topColor}" />
<text x="20" y="25" text-anchor="middle" <text x="15" y="20" text-anchor="middle"
font-size="14" fill="#fff">${count}</text> font-size="12" fill="#fff">${count}</text>
</svg> </svg>
`), `),
scaledSize: new google.maps.Size(40, 40), scaledSize: new google.maps.Size(30, 30),
anchor: new google.maps.Point(10, 10), anchor: new google.maps.Point(15, 15),
}, },
zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count, zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
@ -2391,12 +2397,10 @@ function popup(){
<table class="tb-info-box"> <table class="tb-info-box">
<!--table class="tb-info-box" onClick="javascript:jQuery('.overlay-close-${property.index}').trigger('click');"--> <!--table class="tb-info-box" onClick="javascript:jQuery('.overlay-close-${property.index}').trigger('click');"-->
<tr> <tr>
<td class="td-title-info td-left">Account</td> <td class="td-title-info">Account</td>
<td class="td-text-info td-right"> <td class="td-text-info">
<span>${property.accountno}</span> <span>${property.accountno}</span>
</td> </td>
</tr>
<tr>
<td class="td-title-info">Container</td> <td class="td-title-info">Container</td>
<td class="td-text-info"> <td class="td-text-info">
<span>${property.maincontainer}</span> <span>${property.maincontainer}</span>
@ -2407,34 +2411,27 @@ function popup(){
<td class="td-text-info"> <td class="td-text-info">
<span>${property.paymentType}</span> <span>${property.paymentType}</span>
</td> </td>
</tr>
<tr>
<td class="td-title-info">Rate</td> <td class="td-title-info">Rate</td>
<td class="td-text-info"> <td class="td-text-info">
<span>${property.rate}</span> <span>${property.rate}</span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="td-title-info">Phone</td> <td class="td-title-info">Phone</td>
<td class="td-text-info"> <td class="td-text-info">
<span>${property.phone}</span> <span>${property.phone}</span>
</td> </td>
</tr>
<tr>
<td class="td-title-info">Forecast</td> <td class="td-title-info">Forecast</td>
<td class="td-text-info"> <td class="td-text-info">
<span>${property.estqty}</span> <span>${property.estqty}</span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="td-title-info">Last Pickup Date</td> <td class="td-title-info">Last Pickup</td>
<td class="td-text-info"> <td class="td-text-info">
<span>${property.lastPickupDate}</span> <span>${property.lastPickupDate}</span>
</td> </td>
</tr> <td class="td-title-info">Last Paid</td>
<tr>
<td class="td-title-info">Last Paid Date</td>
<td class="td-text-info"> <td class="td-text-info">
<span>${property.lastPaidDate}</span> <span>${property.lastPaidDate}</span>
</td> </td>
@ -2452,21 +2449,20 @@ function popup(){
</a> </a>
</div> </div>
</div> </div>
<br>
<div class="text-center map-grid-layout-col-3"> <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="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><br>History</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') { 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-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><br>Remove</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{ }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" 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><br>Remove</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> 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><br>Notice</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><br>Input</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> </div>
</div> </div>
@ -2475,7 +2471,6 @@ function popup(){
return content; return content;
} }
var rstInqMapCenter = function(json) { var rstInqMapCenter = function(json) {
center = { lat: parseFloat(json.geo['lat']), lng: parseFloat(json.geo['lon']) }; center = { lat: parseFloat(json.geo['lat']), lng: parseFloat(json.geo['lon']) };
currentLocation = { lat: parseFloat(json.geo['lat']), lon: parseFloat(json.geo['lon']) }; currentLocation = { lat: parseFloat(json.geo['lat']), lon: parseFloat(json.geo['lon']) };
@ -2521,4 +2516,19 @@ async function forceRefresh() {
} }
window.location.reload(); 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> </script>