Skip to content

Commit

Permalink
Vector tables can now be placed to the right and at the bottom. Table…
Browse files Browse the repository at this point in the history 
… are removed when layer is switched off. Only one table at a time. Some bugs regarding table and dynamic load.
  • Loading branch information
@mapcentia
mapcentia committed Mar 14, 2022
1 parent 1abbbfd commit bcebcb6
Show file tree
Hide file tree
Showing 2 changed files with 125 additions and 90 deletions.
47 changes: 33 additions & 14 deletions browser/modules/layerTree/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1082,7 +1082,9 @@ module.exports = {

if (layersThatAreNotInMeta.length > 0) {
let fetchMetaRequests = [];
fetchMetaRequests.push(meta.init(layersThatAreNotInMeta.join(','), true, true).catch(error => { return false }))
fetchMetaRequests.push(meta.init(layersThatAreNotInMeta.join(','), true, true).catch(error => {
return false
}))
Promise.all(fetchMetaRequests).then(() => {
proceedWithBuilding();
});
Expand Down Expand Up @@ -1436,16 +1438,31 @@ module.exports = {
let tableElement = meta.parseLayerMeta(layerKey)?.show_table_on_side;
// Create side table once
if (tableElement && !$('#' + VECTOR_SIDE_TABLE_EL).length && window.vidiConfig.template === "embed.tmpl") {
$("#pane").css("left", "0");
$("#pane").css("width", "70%");
$("#pane").before(`<div id="${VECTOR_SIDE_TABLE_EL}" style="width: 30%; float: right; background-color: white" data-vidi-vector-table-id="${trackingLayerKey}"></div>`)
let styles;
let height = null;
let tableBodyHeight;
const m = 400;
const p = 30;
if (1 === 1) {
styles = `width: ${p}%; float: right;`;
$("#pane").css("width", `calc(100vw - ${p}%)`);
$("#pane").css("left", "0");
tableBodyHeight = "calc(100vh - 34px)";
height= $(window).height();
} else {
styles = `width: 100%; height: ${m}; bottom: 0; position: fixed;`;
$("#pane").css("height", `calc(100vh - ${m}px)`);
tableBodyHeight = (m - 34) + "px"
height = m;
}
$("#pane").before(`<div id="${VECTOR_SIDE_TABLE_EL}" style="${styles}; background-color: white; " data-vidi-vector-table-id="${trackingLayerKey}"></div>`)
_self.createTable(layerKey, true, "#" + VECTOR_SIDE_TABLE_EL, {
showToggle: false,
showExport: false,
showColumns: false,
cardView: false,
height: null,
tableBodyHeight: "100vh"
height: height,
tableBodyHeight: tableBodyHeight
});
}
if (reloadInterval && reloadInterval !== "") {
Expand Down Expand Up @@ -1542,11 +1559,11 @@ module.exports = {
// Cross Multi select disabled
if (!window.vidiConfig.crossMultiSelect) {
_self.displayAttributesPopup([{
feature: feature,
layer: layer,
layerKey: layerKey
}],
e,'', false);
feature: feature,
layer: layer,
layerKey: layerKey
}],
e, '', false);
return
}

Expand Down Expand Up @@ -1882,7 +1899,8 @@ module.exports = {
}

// Set select call when opening a panel
let selectCallBack = () => {};
let selectCallBack = () => {
};
if (typeof parsedMeta.select_function !== "undefined" && parsedMeta.select_function !== "") {
try {
selectCallBack = Function('"use strict";return (' + parsedMeta.select_function + ')')();
Expand All @@ -1907,7 +1925,8 @@ module.exports = {
$(parsedMeta.info_element_selector).html(renderedText)
} else {
// Set select call when opening a panel
let selectCallBack = () => {};
let selectCallBack = () => {
};
if (typeof parsedMeta.select_function !== "undefined" && parsedMeta.select_function !== "") {
try {
selectCallBack = Function('"use strict";return (' + parsedMeta.select_function + ')')();
Expand Down Expand Up @@ -1941,7 +1960,7 @@ module.exports = {
}
})
if (count === 1) {
setTimeout(()=> {
setTimeout(() => {
$(".js-toggle-feature-panel:first").trigger('click');
}, 200);
}
Expand Down
168 changes: 92 additions & 76 deletions browser/modules/sqlQuery.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -664,34 +664,34 @@ module.exports = {

let cm = [];
let out = [];
$.each(features, function (i, feature) {
let fields = [];
if (fieldConf === null) {
$.each(feature.properties, function (name, property) {
if (name.indexOf(SYSTEM_FIELD_PREFIX) !== 0 && name !== `_id` && name !== `_vidi_content`) {
fields.push({
title: name,
value: feature.properties[name]
});

out.push([name, 0, name, false]);
}
});
} else {
$.each(sortObject(fieldConf), (name, property) => {
if (property.value.querable) {
let value = feature.properties[property.key];
if (property.value.link) {
value = "<a target='_blank' rel='noopener' href='" + (property.value.linkprefix ? property.value.linkprefix : "") + feature.properties[property.key] + (property.value.linksuffix ? property.value.linksuffix : "") + "'>Link</a>";
} else if (property.value.content && property.value.content === "image") {
if (!feature.properties[property.key]) {
value = `<i class="fa fa-ban"></i>`;
} else {
let layerKeyWithoutPrefix = layerKey.replace(LAYER.VECTOR + ':', '');
if (metaDataKeys[layerKeyWithoutPrefix]["fields"][property.key].type.startsWith("json")) {
// We use a Handlebars template to create a image carousel
let carouselId = Base64.encode(layerKey).replace(/=/g, "");
let tmpl = `<div id="${carouselId}" class="carousel slide" data-ride="carousel">
if (features.length > 0) {
features.forEach(feature => {
let fields = [];
if (fieldConf === null) {
feature.forEach(name => {
if (name.indexOf(SYSTEM_FIELD_PREFIX) !== 0 && name !== `_id` && name !== `_vidi_content`) {
fields.push({
title: name,
value: feature.properties[name]
});
out.push([name, 0, name, false]);
}
});
} else {
$.each(sortObject(fieldConf), (name, property) => {
if (property.value.querable) {
let value = feature.properties[property.key];
if (property.value.link) {
value = "<a target='_blank' rel='noopener' href='" + (property.value.linkprefix ? property.value.linkprefix : "") + feature.properties[property.key] + (property.value.linksuffix ? property.value.linksuffix : "") + "'>Link</a>";
} else if (property.value.content && property.value.content === "image") {
if (!feature.properties[property.key]) {
value = `<i class="fa fa-ban"></i>`;
} else {
let layerKeyWithoutPrefix = layerKey.replace(LAYER.VECTOR + ':', '');
if (metaDataKeys[layerKeyWithoutPrefix]["fields"][property.key].type.startsWith("json")) {
// We use a Handlebars template to create a image carousel
let carouselId = Base64.encode(layerKey).replace(/=/g, "");
let tmpl = `<div id="${carouselId}" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
{{#@root}}
<li data-target="#${carouselId}" data-slide-to="{{@index}}" class="{{#if @first}}active{{/if}}"></li>
Expand All @@ -716,65 +716,81 @@ module.exports = {
<span class="sr-only">Next</span>
</a>
</div>`;
Handlebars.registerHelper('breaklines', function (text) {
text = Handlebars.Utils.escapeExpression(text);
text = text.replace(/(\r\n|\n|\r)/gm, '<br>');
return new Handlebars.SafeString(text);
});
value = Handlebars.compile(tmpl)(feature.properties[property.key]);
} else {
let subValue = feature.properties[property.key];
value =
`<div style="cursor: pointer" onclick="window.open().document.body.innerHTML = '<img src=\\'${subValue}\\' />';">
Handlebars.registerHelper('breaklines', function (text) {
text = Handlebars.Utils.escapeExpression(text);
text = text.replace(/(\r\n|\n|\r)/gm, '<br>');
return new Handlebars.SafeString(text);
});
value = Handlebars.compile(tmpl)(feature.properties[property.key]);
} else {
let subValue = feature.properties[property.key];
value =
`<div style="cursor: pointer" onclick="window.open().document.body.innerHTML = '<img src=\\'${subValue}\\' />';">
<img style='width:250px' src='${subValue}'/>
</div>`;
}
}
}
} else if (property.value.content && property.value.content === "video") {
if (!feature.properties[property.key]) {
value = `<i class="fa fa-ban"></i>`;
} else {
let subValue = feature.properties[property.key];
value =
`<video width="250" controls>
} else if (property.value.content && property.value.content === "video") {
if (!feature.properties[property.key]) {
value = `<i class="fa fa-ban"></i>`;
} else {
let subValue = feature.properties[property.key];
value =
`<video width="250" controls>
<source src="${subValue}" type="video/mp4">
<source src="${subValue}" type="video/ogg">
<source src="${subValue}" type="video/webm">
</video>`;
}
}
fields.push({title: property.value.alias || property.key, value});
fieldLabel = (property.value.alias !== null && property.value.alias !== "") ? property.value.alias : property.key;
if (feature.properties[property.key] !== undefined) {
out.push([property.key, property.value.sort_id, fieldLabel, property.value.link]);
}
}
fields.push({title: property.value.alias || property.key, value});
fieldLabel = (property.value.alias !== null && property.value.alias !== "") ? property.value.alias : property.key;
if (feature.properties[property.key] !== undefined) {
out.push([property.key, property.value.sort_id, fieldLabel, property.value.link]);
}
}
});

});
out.sort(function (a, b) {
return a[1] - b[1];
});
}

out.sort(function (a, b) {
return a[1] - b[1];
});
}

feature.properties._vidi_content = {};
feature.properties._vidi_content.title = layerTitle;
feature.properties._vidi_content.fields = fields; // Used in a "loop" template
if (first) {
$.each(out, function (name, property) {
cm.push({
header: property[2],
dataIndex: property[0],
sortable: true,
link: property[3]
})
});
first = false;
}

out = [];
});
feature.properties._vidi_content = {};
feature.properties._vidi_content.title = layerTitle;
feature.properties._vidi_content.fields = fields; // Used in a "loop" template
if (first) {
out.forEach(property => {
cm.push({
header: property[2],
dataIndex: property[0],
sortable: true,
link: property[3]
})
});
first = false;
}

out = [];
});
} else { // If no features are present e.g. when use dynamic load
sortObject(fieldConf).forEach((property) => {
fieldLabel = (property.value.alias !== null && property.value.alias !== "") ? property.value.alias : property.key;
out.push([property.key, property.value.sort_id, fieldLabel, property.value.link]);
});
out.sort(function (a, b) {
return a[1] - b[1];
});
out.forEach(property => {
cm.push({
header: property[2],
dataIndex: property[0],
sortable: true,
link: property[3]
})
});
}
console.log("cm", cm)
return cm;
},

Expand Down Expand Up @@ -806,7 +822,7 @@ module.exports = {
getVectorTemplate: function (layerKey, multi = true) {
let metaDataKeys = meta.getMetaDataKeys();
let parsedMeta = layerTree.parseLayerMeta(metaDataKeys[layerKey]);
let template = metaDataKeys[layerKey]?.infowindow?.template || multi ? defaultTemplateForCrossMultiSelect: defaultTemplate;
let template = metaDataKeys[layerKey]?.infowindow?.template || multi ? defaultTemplateForCrossMultiSelect : defaultTemplate;
template = (parsedMeta.info_template && parsedMeta.info_template !== "") ? parsedMeta.info_template : template;
return template;
},
Expand Down

0 comments on commit bcebcb6

Please sign in to comment.