Skip to content

irul / opensipkd-base

Go to a project
Commit 97643556 by aa.gusti
Options

perbaikan gmap.js

1 parent 8de27740
Inline Side-by-side
Showing 6 changed files with 196 additions and 145 deletions
opensipkd/base/alembic/helpers.py
...@@ -2,14 +2,55 @@ ...@@ -2,14 +2,55 @@
from alembic import op from alembic import op
from sqlalchemy.engine import reflection from sqlalchemy.engine import reflection
import sqlalchemy as sa
def table_has_column(table, column): def has_table(table, schema=None, insp=None):
if not insp:
engine = op.get_bind()
insp = reflection.Inspector.from_engine(engine)
return insp.has_table(table, schema=schema)
def table_has_column(table, column, schema=None):
engine = op.get_bind() engine = op.get_bind()
insp = reflection.Inspector.from_engine(engine) insp = reflection.Inspector.from_engine(engine)
has_column = False has_column = False
for col in insp.get_columns(table):
if column not in col['name']: if has_table(table, schema, insp):
continue for col in insp.get_columns(table, schema=schema):
if column != col['name']:
continue
has_column = True
else:
has_column = True has_column = True
return has_column return has_column
def table_has_seq(table, name, schema=None):
engine = op.get_bind()
insp = reflection.Inspector.from_engine(engine)
has_seq = False
if has_table(table, schema, insp):
for seq in insp.get_sequence_names(schema=schema):
if name != seq:
continue
has_seq = True
else:
has_seq = True
return has_seq
def fields_update(table, field, typ, schema=None, **kw):
context = op.get_context()
helpers = context.opts['helpers']
if not helpers.table_has_column(table, field, schema):
op.add_column(table, sa.Column(field, typ), schema=schema)
nullable = kw.get("nullable", None)
if nullable != None and nullable == False:
default = kw.get("default")
if default != None:
op.execute(
f"UPDATE {schema}.{table} SET {field} = {default}")
op.alter_column(table, field, nullable=False, schema=schema)
opensipkd/base/alembic/versions/3d466f57ca86_upgrade_routes.py deleted 100644 → 0
"""upgrade routes
Revision ID: 3d466f57ca86
Revises: 8e703a7a0657
Create Date: 2024-12-13 11:24:35.337079
"""
# revision identifiers, used by Alembic.
revision = '3d466f57ca86'
down_revision = '8e703a7a0657'
branch_labels = None
depends_on = None
from alembic import op
import sqlalchemy as sa
def upgrade():
pass
def downgrade():
pass
opensipkd/base/alembic/versions/671617e55c56_menus_add_valu_and_action.py
...@@ -31,5 +31,6 @@ def upgrade(): ...@@ -31,5 +31,6 @@ def upgrade():
sa.Column('page_typ', sa.String(256))) sa.Column('page_typ', sa.String(256)))
def downgrade(): def downgrade():
pass pass
opensipkd/base/alembic/versions/8ad1f7810384_add_route_updated.py
...@@ -26,6 +26,7 @@ def upgrade(): ...@@ -26,6 +26,7 @@ def upgrade():
if not helpers.table_has_column('routes', 'update_uid'): if not helpers.table_has_column('routes', 'update_uid'):
op.add_column('routes', sa.Column('update_uid', sa.Integer, default=0)) op.add_column('routes', sa.Column('update_uid', sa.Integer, default=0))
def downgrade(): def downgrade():
pass pass
opensipkd/base/alembic/versions/8e703a7a0657_create_table.py deleted 100644 → 0
"""create table
Revision ID: 8e703a7a0657
Revises: 671617e55c56
Create Date: 2024-11-16 09:03:42.025169
"""
# revision identifiers, used by Alembic.
revision = '8e703a7a0657'
down_revision = '671617e55c56'
branch_labels = None
depends_on = None
from alembic import op
import sqlalchemy as sa
def upgrade():
pass
def downgrade():
pass
opensipkd/base/static/js/gmap.js
let map; let map;
let btnCurrent = {lat: 0, lng: 0}; let btnCurrent = { lat: 0, lng: 0 };
let selectedFeature = null; let selectedFeature = null;
let btnRemove; let btnRemove;
let infoWindow; let infoWindow;
let feature_data = {}; let feature_data = {};
let strokeColor, strokeOpacity, strokeWeight, fillColor, fillOpacity; let strokeColor, strokeOpacity, strokeWeight, fillColor, fillOpacity;
let strokeColorControl, strokeOpacityControl, strokeWeightControl, fillColorControl, fillOpacityControl; let strokeColorControl,
strokeOpacityControl,
strokeWeightControl,
fillColorControl,
fillOpacityControl;
//let styleControls; //let styleControls;
let featureStyleOptions = { let featureStyleOptions = {
strokeColor: "#810fcb", strokeColor: "#810fcb",
...@@ -17,7 +21,7 @@ let featureStyleOptions = { ...@@ -17,7 +21,7 @@ let featureStyleOptions = {
function initMap() { function initMap() {
map = new google.maps.Map(document.getElementById("gmap"), { map = new google.maps.Map(document.getElementById("gmap"), {
center: {lat: map_center[0], lng: map_center[1]}, center: { lat: map_center[0], lng: map_center[1] },
zoom: map_zoom, zoom: map_zoom,
animation: google.maps.Animation.DROP, animation: google.maps.Animation.DROP,
streetViewControl: false, streetViewControl: false,
...@@ -36,16 +40,39 @@ function initMap() { ...@@ -36,16 +40,39 @@ function initMap() {
map.data.setControls(gmapControls); map.data.setControls(gmapControls);
google.maps.event.addListener(map.data, 'addfeature', function (e) { google.maps.event.addListener(map, "center_changed", function (e) {
latLngObj = map.getCenter();
console.log("lat long object " + latLngObj);
console.log(e);
});
google.maps.event.addListener(map.data, "center_changed", function (e) {
latLngObj = map.data.getCenter();
console.log("lat long object data " + latLngObj);
console.log(e);
});
google.maps.event.addListener(map.data, "addfeature", function (e) {
if (map.data.map.data.getControls() !== null) { if (map.data.map.data.getControls() !== null) {
let bounds = new google.maps.LatLngBounds(); if (e.feature.getGeometry().getType() === "Point") {
bounds = extendBound(bounds, e.feature); var center = {
selectedFeature = e.feature; lat: e.feature.getGeometry().get().lat(),
btnRemove.disabled = false; lng: e.feature.getGeometry().get().lng(),
map.fitBounds(bounds); };
selectedFeature = e.feature;
btnRemove.disabled = false;
map.setCenter(center);
// map.setZoom(18);
} else {
let bounds = new google.maps.LatLngBounds();
bounds = extendBound(bounds, e.feature);
selectedFeature = e.feature;
btnRemove.disabled = false;
map.fitBounds(bounds);
}
} }
}); });
google.maps.event.addListener(map.data, 'click', function (e) { google.maps.event.addListener(map.data, "click", function (e) {
if (e.hasOwnProperty("feature") === true) { if (e.hasOwnProperty("feature") === true) {
selectedFeature = e.feature; selectedFeature = e.feature;
btnRemove.disabled = false; btnRemove.disabled = false;
...@@ -62,10 +89,13 @@ function initMap() { ...@@ -62,10 +89,13 @@ function initMap() {
map.data.setStyle((feature) => { map.data.setStyle((feature) => {
if (feature.getProperty("styles")) { if (feature.getProperty("styles")) {
featureStyleOptions = Object.assign(featureStyleOptions, JSON.parse(feature.getProperty("styles"))); featureStyleOptions = Object.assign(
featureStyleOptions,
JSON.parse(feature.getProperty("styles"))
);
setFeatureStyleOptionControls(); setFeatureStyleOptionControls();
} else { } else {
feature.setProperty("styles", JSON.stringify(featureStyleOptions)) feature.setProperty("styles", JSON.stringify(featureStyleOptions));
} }
return featureStyleOptions; return featureStyleOptions;
}); });
...@@ -73,11 +103,11 @@ function initMap() { ...@@ -73,11 +103,11 @@ function initMap() {
addYourLocationButton(); addYourLocationButton();
loadData(); loadData();
bindDataLayerListeners(map.data); bindDataLayerListeners(map.data);
strokeColorControl = document.getElementById('strokeColor'); strokeColorControl = document.getElementById("strokeColor");
strokeOpacityControl = document.getElementById('strokeOpacity'); strokeOpacityControl = document.getElementById("strokeOpacity");
strokeWeightControl = document.getElementById('strokeWeight'); strokeWeightControl = document.getElementById("strokeWeight");
fillColorControl = document.getElementById('fillColor'); fillColorControl = document.getElementById("fillColor");
fillOpacityControl = document.getElementById('fillOpacity'); fillOpacityControl = document.getElementById("fillOpacity");
if (strokeColorControl !== null) { if (strokeColorControl !== null) {
setFeatureStyleOptionControls(); setFeatureStyleOptionControls();
setStyleControlEvents(); setStyleControlEvents();
...@@ -86,11 +116,26 @@ function initMap() { ...@@ -86,11 +116,26 @@ function initMap() {
function setStyleControlEvents() { function setStyleControlEvents() {
if (strokeColorControl !== null) { if (strokeColorControl !== null) {
strokeColorControl.addEventListener('change', featureStyleOptionsControlChange); strokeColorControl.addEventListener(
strokeOpacityControl.addEventListener('change', featureStyleOptionsControlChange); "change",
strokeWeightControl.addEventListener('change', featureStyleOptionsControlChange); featureStyleOptionsControlChange
fillColorControl.addEventListener('change', featureStyleOptionsControlChange); );
fillOpacityControl.addEventListener('change', featureStyleOptionsControlChange); strokeOpacityControl.addEventListener(
"change",
featureStyleOptionsControlChange
);
strokeWeightControl.addEventListener(
"change",
featureStyleOptionsControlChange
);
fillColorControl.addEventListener(
"change",
featureStyleOptionsControlChange
);
fillOpacityControl.addEventListener(
"change",
featureStyleOptionsControlChange
);
} }
} }
...@@ -139,43 +184,53 @@ function showInfo(event) { ...@@ -139,43 +184,53 @@ function showInfo(event) {
let content = ""; let content = "";
for (let key in contents) { for (let key in contents) {
let keys = contents[key]; let keys = contents[key];
let value = key === "id" ? event.feature.getId() : event.feature.getProperty(key); let value =
value = value === undefined ? "" : value key === "id" ? event.feature.getId() : event.feature.getProperty(key);
value = value === undefined ? "" : value;
let cnt = keys[0] + ": " + value; let cnt = keys[0] + ": " + value;
if (keys.length > 1) { if (keys.length > 1) {
if (keys[1] === 'b') { if (keys[1] === "b") {
cnt = "<b>" + cnt + "</b>" cnt = "<b>" + cnt + "</b>";
} }
} }
content += cnt + '<br>'; content += cnt + "<br>";
} }
if (edit_url !== "" && event.feature.getId() !== undefined) { if (edit_url !== "" && event.feature.getId() !== undefined) {
let url = edit_url.replace("{id}", selectedFeature.getId()); let url = edit_url.replace("{id}", selectedFeature.getId());
content += '<a class="btn btn-info" href="{url}">Edit</a>'.replace("{url}", url); content += '<a class="btn btn-info" href="{url}">Edit</a>'.replace(
"{url}",
url
);
} }
infoWindow.setContent(content); infoWindow.setContent(content);
infoWindow.open(map); infoWindow.open(map);
} }
function bindDataLayerListeners(dataLayer) { function bindDataLayerListeners(dataLayer) {
dataLayer.addListener('addfeature', saveData); dataLayer.addListener("addfeature", saveData);
dataLayer.addListener('removefeature', saveData); dataLayer.addListener("removefeature", saveData);
dataLayer.addListener('setgeometry', saveData); dataLayer.addListener("setgeometry", saveData);
} }
function extendBound(newbounds, feature) { function extendBound(newbounds, feature) {
if (feature === undefined) return newbounds; if (feature === undefined) return newbounds;
let featureType = feature.getGeometry().getType(); let featureType = feature.getGeometry().getType();
if (featureType === 'LineString') { if (featureType === "LineString") {
feature.getGeometry().getArray().forEach(function (latLng) { feature
newbounds.extend(latLng); .getGeometry()
}); .getArray()
} else if (featureType === 'Polygon') { .forEach(function (latLng) {
feature.getGeometry().getArray().forEach(function (path) {
path.getArray().forEach(function (latLng) {
newbounds.extend(latLng); newbounds.extend(latLng);
}); });
}); } else if (featureType === "Polygon") {
feature
.getGeometry()
.getArray()
.forEach(function (path) {
path.getArray().forEach(function (latLng) {
newbounds.extend(latLng);
});
});
} }
return newbounds; return newbounds;
} }
...@@ -205,11 +260,9 @@ function setControls() { ...@@ -205,11 +260,9 @@ function setControls() {
let bounds = new google.maps.LatLngBounds(); let bounds = new google.maps.LatLngBounds();
bounds = extendBound(bounds, e); bounds = extendBound(bounds, e);
let properties = {}; let properties = {};
e.forEachProperty( e.forEachProperty(function (val, key) {
function (val, key) { properties[key] = val;
properties[key] = val; });
}
);
map.data.add({ map.data.add({
geometry: new google.maps.Data.Point(bounds.getCenter()), geometry: new google.maps.Data.Point(bounds.getCenter()),
properties: properties, properties: properties,
...@@ -231,83 +284,86 @@ function saveData() { ...@@ -231,83 +284,86 @@ function saveData() {
} }
function addYourLocationButton() { function addYourLocationButton() {
let controlDiv = document.createElement('div'); let controlDiv = document.createElement("div");
let btnCurrent = document.createElement('button'); let btnCurrent = document.createElement("button");
btnCurrent.type = "button"; btnCurrent.type = "button";
btnCurrent.style.backgroundColor = '#fff'; btnCurrent.style.backgroundColor = "#fff";
btnCurrent.style.border = 'none'; btnCurrent.style.border = "none";
btnCurrent.style.outline = 'none'; btnCurrent.style.outline = "none";
btnCurrent.style.width = '28px'; btnCurrent.style.width = "28px";
btnCurrent.style.height = '28px'; btnCurrent.style.height = "28px";
btnCurrent.style.borderRadius = '2px'; btnCurrent.style.borderRadius = "2px";
btnCurrent.style.boxShadow = '0 1px 4px rgba(0,0,0,0.3)'; btnCurrent.style.boxShadow = "0 1px 4px rgba(0,0,0,0.3)";
btnCurrent.style.cursor = 'pointer'; btnCurrent.style.cursor = "pointer";
btnCurrent.style.marginRight = '10px'; btnCurrent.style.marginRight = "10px";
btnCurrent.style.padding = '0'; btnCurrent.style.padding = "0";
btnCurrent.title = 'Your Location'; btnCurrent.title = "Your Location";
controlDiv.appendChild(btnCurrent); controlDiv.appendChild(btnCurrent);
let imgCurrent = document.createElement('div'); let imgCurrent = document.createElement("div");
imgCurrent.style.margin = '5px'; imgCurrent.style.margin = "5px";
imgCurrent.style.width = '18px'; imgCurrent.style.width = "18px";
imgCurrent.style.height = '18px'; imgCurrent.style.height = "18px";
imgCurrent.style.backgroundImage = 'url(https://maps.gstatic.com/tactile/mylocation/mylocation-sprite-2x.png)'; imgCurrent.style.backgroundImage =
imgCurrent.style.backgroundSize = '180px 18px'; "url(https://maps.gstatic.com/tactile/mylocation/mylocation-sprite-2x.png)";
imgCurrent.style.backgroundPosition = '0 0'; imgCurrent.style.backgroundSize = "180px 18px";
imgCurrent.style.backgroundRepeat = 'no-repeat'; imgCurrent.style.backgroundPosition = "0 0";
imgCurrent.style.backgroundRepeat = "no-repeat";
btnCurrent.appendChild(imgCurrent); btnCurrent.appendChild(imgCurrent);
let txtCurrent = document.createElement('i'); let txtCurrent = document.createElement("i");
txtCurrent.className = "fa"; txtCurrent.className = "fa";
txtCurrent.ariaHidden = "true"; //<i class="fa fa-trash" aria-hidden="true"></i> txtCurrent.ariaHidden = "true"; //<i class="fa fa-trash" aria-hidden="true"></i>
imgCurrent.appendChild(txtCurrent); imgCurrent.appendChild(txtCurrent);
google.maps.event.addListener(map, 'center_changed', function () { google.maps.event.addListener(map, "center_changed", function () {
imgCurrent.style['background-position'] = '0 0'; imgCurrent.style["background-position"] = "0 0";
}); });
btnCurrent.addEventListener('click', function () { btnCurrent.addEventListener("click", function () {
let imgX = 0, let imgX = 0,
animationInterval = setInterval(function () { animationInterval = setInterval(function () {
imgX = -imgX - 18; imgX = -imgX - 18;
imgCurrent.style['background-position'] = imgX + 'px 0'; imgCurrent.style["background-position"] = imgX + "px 0";
}, 500); }, 500);
if (navigator.geolocation) { if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) { navigator.geolocation.getCurrentPosition(function (position) {
let latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); let latlng = new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude
);
map.setCenter(latlng); map.setCenter(latlng);
map.setZoom(18); map.setZoom(18);
clearInterval(animationInterval); clearInterval(animationInterval);
btnCurrent.style['background-position'] = '-144px 0'; btnCurrent.style["background-position"] = "-144px 0";
}); });
} else { } else {
clearInterval(animationInterval); clearInterval(animationInterval);
btnCurrent.style['background-position'] = '0 0'; btnCurrent.style["background-position"] = "0 0";
} }
}); });
// let btnRemove = document.getElementById('btnRemove'); // let btnRemove = document.getElementById('btnRemove');
btnRemove = document.createElement('button'); btnRemove = document.createElement("button");
btnRemove.type = "button"; btnRemove.type = "button";
btnRemove.style.backgroundColor = '#fff'; btnRemove.style.backgroundColor = "#fff";
btnRemove.style.border = 'none'; btnRemove.style.border = "none";
btnRemove.style.outline = 'none'; btnRemove.style.outline = "none";
btnRemove.style.width = '28px'; btnRemove.style.width = "28px";
btnRemove.style.height = '28px'; btnRemove.style.height = "28px";
btnRemove.style.borderRadius = '2px'; btnRemove.style.borderRadius = "2px";
btnRemove.style.boxShadow = '0 1px 4px rgba(0,0,0,0.3)'; btnRemove.style.boxShadow = "0 1px 4px rgba(0,0,0,0.3)";
btnRemove.style.cursor = 'pointer'; btnRemove.style.cursor = "pointer";
// btnRemove.style.marginRight = '10px'; // btnRemove.style.marginRight = '10px';
btnRemove.style.padding = '0'; btnRemove.style.padding = "0";
btnRemove.title = 'Delete Selected Feature'; btnRemove.title = "Delete Selected Feature";
controlDiv.appendChild(btnRemove); controlDiv.appendChild(btnRemove);
let imgRemove = document.createElement('div'); let imgRemove = document.createElement("div");
imgRemove.style.margin = '5px'; imgRemove.style.margin = "5px";
imgRemove.style.width = '18px'; imgRemove.style.width = "18px";
imgRemove.style.height = '18px'; imgRemove.style.height = "18px";
btnRemove.appendChild(imgRemove); btnRemove.appendChild(imgRemove);
let txtRemove = document.createElement('i'); let txtRemove = document.createElement("i");
txtRemove.className = "fa fa-trash"; txtRemove.className = "fa fa-trash";
txtRemove.ariaHidden = "true"; //<i class="fa fa-trash" aria-hidden="true"></i> txtRemove.ariaHidden = "true"; //<i class="fa fa-trash" aria-hidden="true"></i>
imgRemove.appendChild(txtRemove); imgRemove.appendChild(txtRemove);
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!