Gani Georgiev
106 lines
4.5 KiB
JavaScript
106 lines
4.5 KiB
JavaScript
// {
|
|
// get collection: undefined,
|
|
// get originalRecord: undefined,
|
|
// get record: undefined,
|
|
// get field: undefined,
|
|
// }
|
|
export function input(data) {
|
|
const uniqueId = "geo_" + app.utils.randomString();
|
|
|
|
const local = store({
|
|
showMap: false,
|
|
});
|
|
|
|
return t.div(
|
|
{ className: "record-field-input field-type-geoPoint" },
|
|
t.div(
|
|
{ className: () => `field-list ${data.field.required ? "required" : ""}` },
|
|
t.label(
|
|
{ htmlFor: uniqueId },
|
|
t.i({ className: app.fieldTypes.geoPoint.icon, ariaHidden: true }),
|
|
t.span({ className: "txt" }, () => data.field.name),
|
|
),
|
|
t.div(
|
|
{ className: "field-list-content" },
|
|
t.div(
|
|
{ className: "field-list-item p-0" },
|
|
t.div(
|
|
{ className: "fields" },
|
|
t.div({ className: "field addon" }, t.label({ htmlFor: uniqueId + ".lon" }, "Longitude:")),
|
|
t.div(
|
|
{ className: "field" },
|
|
t.input({
|
|
id: uniqueId + ".lon",
|
|
type: "number",
|
|
step: "any",
|
|
min: "-180",
|
|
max: "180",
|
|
placeholder: 0,
|
|
name: () => data.field.name,
|
|
required: () => data.field.required,
|
|
value: () => data.record[data.field.name]?.lon || "",
|
|
onchange: (e) => {
|
|
data.record[data.field.name] = data.record[data.field.name] || {};
|
|
data.record[data.field.name].lon = Number(e.target.value);
|
|
},
|
|
}),
|
|
),
|
|
t.span({ className: "delimiter" }),
|
|
t.div({ className: "field addon" }, t.label({ htmlFor: uniqueId + ".lat" }, "Latitude:")),
|
|
t.div(
|
|
{ className: "field" },
|
|
t.input({
|
|
id: uniqueId + ".lat",
|
|
type: "number",
|
|
step: "any",
|
|
min: "-90",
|
|
max: "90",
|
|
placeholder: 0,
|
|
name: () => data.field.name,
|
|
required: () => data.field.required,
|
|
value: () => data.record[data.field.name]?.lat || "",
|
|
onchange: (e) => {
|
|
data.record[data.field.name] = data.record[data.field.name] || {};
|
|
data.record[data.field.name].lat = Number(e.target.value);
|
|
},
|
|
}),
|
|
),
|
|
t.span({ className: "delimiter" }),
|
|
t.div(
|
|
{ className: "field addon p-5" },
|
|
t.button(
|
|
{
|
|
type: "button",
|
|
className: () => `btn sm circle secondary ${local.showMap ? "" : "transparent"}`,
|
|
onclick: () => (local.showMap = !local.showMap),
|
|
},
|
|
t.i({ className: "ri-map-2-line" }),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
() => {
|
|
if (!local.showMap) {
|
|
return;
|
|
}
|
|
|
|
return t.div(
|
|
{ className: "field-list-item p-0", style: "height: 250px" },
|
|
app.components.leaflet({
|
|
point: () => data.record[data.field.name] || { lat: 0, lon: 0 },
|
|
onchange: (newPoint) => {
|
|
data.record[data.field.name] = structuredClone(newPoint);
|
|
},
|
|
}),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
() => {
|
|
if (data.field.help) {
|
|
return t.div({ className: "field-help" }, data.field.help);
|
|
}
|
|
},
|
|
);
|
|
}
|