Trying to integrate vis-timeline
This commit is contained in:
parent
819032fb13
commit
ed4f9bd204
|
@ -42,6 +42,7 @@ import org.gcube.portlets.user.geoportaldataviewer.client.gis.ExtentWrapped;
|
||||||
import org.gcube.portlets.user.geoportaldataviewer.client.gis.MapUtils;
|
import org.gcube.portlets.user.geoportaldataviewer.client.gis.MapUtils;
|
||||||
import org.gcube.portlets.user.geoportaldataviewer.client.gis.OpenLayerMap;
|
import org.gcube.portlets.user.geoportaldataviewer.client.gis.OpenLayerMap;
|
||||||
import org.gcube.portlets.user.geoportaldataviewer.client.ui.GeonaDataViewMainPanel;
|
import org.gcube.portlets.user.geoportaldataviewer.client.ui.GeonaDataViewMainPanel;
|
||||||
|
import org.gcube.portlets.user.geoportaldataviewer.client.ui.cms.project.relation.TimelineRelationPanel;
|
||||||
import org.gcube.portlets.user.geoportaldataviewer.client.util.ControlledCallBack;
|
import org.gcube.portlets.user.geoportaldataviewer.client.util.ControlledCallBack;
|
||||||
import org.gcube.portlets.user.geoportaldataviewer.client.util.LoaderIcon;
|
import org.gcube.portlets.user.geoportaldataviewer.client.util.LoaderIcon;
|
||||||
import org.gcube.portlets.user.geoportaldataviewer.shared.GCubeCollection;
|
import org.gcube.portlets.user.geoportaldataviewer.shared.GCubeCollection;
|
||||||
|
@ -153,7 +154,6 @@ public class GeoportalDataViewer implements EntryPoint {
|
||||||
RootPanel.get(APP_DIV).add(mainPanel);
|
RootPanel.get(APP_DIV).add(mainPanel);
|
||||||
|
|
||||||
initApplication();
|
initApplication();
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -203,7 +203,7 @@ public class GeoportalDataViewer implements EntryPoint {
|
||||||
ScriptInjector.fromUrl(
|
ScriptInjector.fromUrl(
|
||||||
"//cdnjs.cloudflare.com/ajax/libs/nanogallery2/3.0.5/jquery.nanogallery2.min.js")
|
"//cdnjs.cloudflare.com/ajax/libs/nanogallery2/3.0.5/jquery.nanogallery2.min.js")
|
||||||
.setWindow(ScriptInjector.TOP_WINDOW).inject();
|
.setWindow(ScriptInjector.TOP_WINDOW).inject();
|
||||||
|
|
||||||
GWT.log("Loading collections, count " + result.getAvailableCollections().size());
|
GWT.log("Loading collections, count " + result.getAvailableCollections().size());
|
||||||
|
|
||||||
mainPanel.setAvailableCollections(result.getAvailableCollections().values());
|
mainPanel.setAvailableCollections(result.getAvailableCollections().values());
|
||||||
|
@ -224,6 +224,7 @@ public class GeoportalDataViewer implements EntryPoint {
|
||||||
// TODO LOAD INITIAL LAYERS
|
// TODO LOAD INITIAL LAYERS
|
||||||
|
|
||||||
GWT.log("DONE INIT LOAD");
|
GWT.log("DONE INIT LOAD");
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
@ -240,6 +241,25 @@ public class GeoportalDataViewer implements EntryPoint {
|
||||||
bindEvents();
|
bindEvents();
|
||||||
|
|
||||||
RootPanel.get(APP_DIV).add(attributionDiv);
|
RootPanel.get(APP_DIV).add(attributionDiv);
|
||||||
|
|
||||||
|
new Timer() {
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public void run() {
|
||||||
|
GWT.log("Instancing timeline");
|
||||||
|
TimelineRelationPanel timeline = new TimelineRelationPanel("concessione", "projectid");
|
||||||
|
RootPanel.get("timeline-data").add(timeline);
|
||||||
|
|
||||||
|
}
|
||||||
|
}.schedule(5000);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Modal modal = new Modal(true, true);
|
||||||
|
// modal.setWidth(400);
|
||||||
|
//
|
||||||
|
// modal.add(timeline);
|
||||||
|
// modal.show();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -203,4 +203,6 @@ public interface GeoportalDataViewerService extends RemoteService {
|
||||||
*/
|
*/
|
||||||
LinkedHashMap<String, Object> getEntrySetsDocumentForProjectID(String profileID, String projectID, int limit);
|
LinkedHashMap<String, Object> getEntrySetsDocumentForProjectID(String profileID, String projectID, int limit);
|
||||||
|
|
||||||
|
List<String> getRelationshipsForTimeline(String profileID, String projectID) throws Exception;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -81,4 +81,6 @@ public interface GeoportalDataViewerServiceAsync {
|
||||||
void getEntrySetsDocumentForProjectID(String profileID, String projectID, int limit,
|
void getEntrySetsDocumentForProjectID(String profileID, String projectID, int limit,
|
||||||
AsyncCallback<LinkedHashMap<String, Object>> callback);
|
AsyncCallback<LinkedHashMap<String, Object>> callback);
|
||||||
|
|
||||||
|
void getRelationshipsForTimeline(String profileID, String projectID, AsyncCallback<List<String>> callback);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,90 @@
|
||||||
|
package org.gcube.portlets.user.geoportaldataviewer.client.ui.cms.project.relation;
|
||||||
|
|
||||||
|
import java.util.List;
|
||||||
|
|
||||||
|
import org.gcube.portlets.user.geoportaldataviewer.client.GeoportalDataViewerServiceAsync;
|
||||||
|
|
||||||
|
import com.google.gwt.core.client.GWT;
|
||||||
|
import com.google.gwt.core.client.Scheduler;
|
||||||
|
import com.google.gwt.core.client.Scheduler.ScheduledCommand;
|
||||||
|
import com.google.gwt.json.client.JSONArray;
|
||||||
|
import com.google.gwt.json.client.JSONParser;
|
||||||
|
import com.google.gwt.uibinder.client.UiBinder;
|
||||||
|
import com.google.gwt.uibinder.client.UiField;
|
||||||
|
import com.google.gwt.user.client.rpc.AsyncCallback;
|
||||||
|
import com.google.gwt.user.client.ui.Composite;
|
||||||
|
import com.google.gwt.user.client.ui.ScrollPanel;
|
||||||
|
import com.google.gwt.user.client.ui.Widget;
|
||||||
|
|
||||||
|
public class TimelineRelationPanel extends Composite {
|
||||||
|
|
||||||
|
@UiField
|
||||||
|
ScrollPanel timelineContainer;
|
||||||
|
|
||||||
|
private static TimelineRelationPanelUiBinder uiBinder = GWT.create(TimelineRelationPanelUiBinder.class);
|
||||||
|
|
||||||
|
interface TimelineRelationPanelUiBinder extends UiBinder<Widget, TimelineRelationPanel> {
|
||||||
|
}
|
||||||
|
|
||||||
|
public TimelineRelationPanel(String profileID, String projectID) {
|
||||||
|
initWidget(uiBinder.createAndBindUi(this));
|
||||||
|
|
||||||
|
timelineContainer.getElement().setId("visualization");
|
||||||
|
|
||||||
|
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
|
||||||
|
|
||||||
|
public void execute() {
|
||||||
|
|
||||||
|
GeoportalDataViewerServiceAsync.Util.getInstance().getRelationshipsForTimeline(profileID, projectID,
|
||||||
|
new AsyncCallback<List<String>>() {
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public void onSuccess(List<String> result) {
|
||||||
|
|
||||||
|
JSONArray toJsonArr = new JSONArray();
|
||||||
|
for (int i = 0; i < result.size(); i++) {
|
||||||
|
toJsonArr.set(i, JSONParser.parseStrict(result.get(i)));
|
||||||
|
}
|
||||||
|
|
||||||
|
instanceTimeline(timelineContainer.getElement().getId(), toJsonArr);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public void onFailure(Throwable caught) {
|
||||||
|
// TODO Auto-generated method stub
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
public static native String instanceTimeline(String idDivContainer, JSONArray jsonItems) /*-{
|
||||||
|
console.log('showTimeline_instanceTimeline for json items: '
|
||||||
|
+ jsonItems);
|
||||||
|
|
||||||
|
console.log("showTimeline_template: " + $wnd.templateHandlebars);
|
||||||
|
|
||||||
|
// DOM element where the Timeline will be attached
|
||||||
|
var container = $doc.getElementById(idDivContainer);
|
||||||
|
|
||||||
|
console.log("showTimeline_container: " + container);
|
||||||
|
|
||||||
|
var myArray = $wnd.JSON.parse(jsonItems);
|
||||||
|
|
||||||
|
console.log("showTimeline_jsonItems: " + myArray);
|
||||||
|
|
||||||
|
var container = $doc.getElementById(idDivContainer);
|
||||||
|
|
||||||
|
// Create a DataSet (allows two way data-binding)
|
||||||
|
var items = new $wnd.vis.DataSet(myArray);
|
||||||
|
|
||||||
|
|
||||||
|
// Create a Timeline
|
||||||
|
var timeline = new $wnd.vis.Timeline(container, items,
|
||||||
|
$wnd.optionsTimeline);
|
||||||
|
|
||||||
|
}-*/;
|
||||||
|
}
|
|
@ -0,0 +1,18 @@
|
||||||
|
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
|
||||||
|
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
|
||||||
|
xmlns:g="urn:import:com.google.gwt.user.client.ui">
|
||||||
|
<ui:style>
|
||||||
|
.important {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline {
|
||||||
|
border: 1px solid lightgray;
|
||||||
|
max-height: 400px;
|
||||||
|
}
|
||||||
|
</ui:style>
|
||||||
|
<g:HTMLPanel>
|
||||||
|
<g:ScrollPanel ui:field="timelineContainer"
|
||||||
|
addStyleNames="{style.timeline}"></g:ScrollPanel>
|
||||||
|
</g:HTMLPanel>
|
||||||
|
</ui:UiBinder>
|
|
@ -76,6 +76,7 @@ import org.gcube.spatial.data.geoutility.bean.LayerStyles;
|
||||||
import org.gcube.spatial.data.geoutility.bean.LayerZAxis;
|
import org.gcube.spatial.data.geoutility.bean.LayerZAxis;
|
||||||
import org.gcube.spatial.data.geoutility.bean.WmsParameters;
|
import org.gcube.spatial.data.geoutility.bean.WmsParameters;
|
||||||
import org.gcube.vomanagement.usermanagement.model.GCubeUser;
|
import org.gcube.vomanagement.usermanagement.model.GCubeUser;
|
||||||
|
import org.json.JSONObject;
|
||||||
import org.slf4j.Logger;
|
import org.slf4j.Logger;
|
||||||
import org.slf4j.LoggerFactory;
|
import org.slf4j.LoggerFactory;
|
||||||
|
|
||||||
|
@ -246,7 +247,7 @@ public class GeoportalDataViewerServiceImpl extends RemoteServiceServlet impleme
|
||||||
throws Exception {
|
throws Exception {
|
||||||
LOG.info("getUploadedImagesForId [itemId: " + itemId + ", itemType: " + itemType + "] called");
|
LOG.info("getUploadedImagesForId [itemId: " + itemId + ", itemType: " + itemType + "] called");
|
||||||
|
|
||||||
return getUploadedImagesForId(this.getThreadLocalRequest(), itemType, itemId, maxImages);
|
throw new Exception("getUploadedImagesForId must be removed!");
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -1249,4 +1250,36 @@ public class GeoportalDataViewerServiceImpl extends RemoteServiceServlet impleme
|
||||||
return documentAsMap;
|
return documentAsMap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public List<String> getRelationshipsForTimeline(String profileID, String projectID) throws Exception {
|
||||||
|
if (profileID == null || projectID == null)
|
||||||
|
throw new Exception("Invalid parameter. Either profileID or projectID is null");
|
||||||
|
|
||||||
|
try {
|
||||||
|
|
||||||
|
LOG.info("Trying to getRelationshipChain for id " + profileID);
|
||||||
|
|
||||||
|
List<String> listJSON = new ArrayList<String>();
|
||||||
|
for (int i = 0; i < 5; i++) {
|
||||||
|
|
||||||
|
JSONObject jsonObject = new JSONObject();
|
||||||
|
jsonObject.put("id", i);
|
||||||
|
jsonObject.put("title", "title " + i);
|
||||||
|
jsonObject.put("start", "201" + i + "-04-1");
|
||||||
|
jsonObject.put("end", "201" + i + "-09-1");
|
||||||
|
if (i < 3)
|
||||||
|
jsonObject.put("image_url",
|
||||||
|
"https://data-pre.d4science.org/shub/E_ck5hN0hBcGljR3oySm5KOWJxOUMyRkRaWkZ4WnhmWXJjWVlLeWxGcW9FMWQraitOWStmQXREQklNUlMydzNFTw==");
|
||||||
|
|
||||||
|
listJSON.add(jsonObject.toString());
|
||||||
|
}
|
||||||
|
|
||||||
|
return listJSON;
|
||||||
|
} catch (Exception e) {
|
||||||
|
String erroMsg = "Error occurred on reading relatioships for id: " + projectID;
|
||||||
|
LOG.error(erroMsg, e);
|
||||||
|
throw new Exception(erroMsg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -534,4 +534,51 @@ body {
|
||||||
.my-html-table td:last-child {
|
.my-html-table td:last-child {
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
VIS TIMELINE CSS
|
||||||
|
**/
|
||||||
|
|
||||||
|
.vis.timeline .item {
|
||||||
|
border-color: #acacac;
|
||||||
|
background-color: #efefef;
|
||||||
|
box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vis-item-content table {
|
||||||
|
font-size: 12px;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vis-item-content table code {
|
||||||
|
color: gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vis-item-content table span {
|
||||||
|
color: blue;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 10px;
|
||||||
|
background: white;
|
||||||
|
padding: 3px;
|
||||||
|
text-align: left !important;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vis-item-content table img {
|
||||||
|
max-width: 100px;
|
||||||
|
max-height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#timeline-data {
|
||||||
|
width: 800px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 2px;
|
||||||
|
z-index: 10000;
|
||||||
|
background: white;
|
||||||
|
opacity: 0.9;
|
||||||
|
margin: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%);
|
||||||
|
}
|
|
@ -21,9 +21,87 @@
|
||||||
rel="stylesheet" type="text/css">
|
rel="stylesheet" type="text/css">
|
||||||
|
|
||||||
<script
|
<script
|
||||||
src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"
|
src="//cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"
|
||||||
type="text/javascript"></script>
|
type="text/javascript"></script>
|
||||||
|
|
||||||
|
<script
|
||||||
|
src="//unpkg.com/vis-timeline@7.7.0/standalone/umd/vis-timeline-graph2d.min.js"
|
||||||
|
type="text/javascript"></script>
|
||||||
|
|
||||||
|
<link
|
||||||
|
href="https://unpkg.com/vis-timeline@7.7.0/styles/vis-timeline-graph2d.min.css"
|
||||||
|
rel="stylesheet" type="text/css">
|
||||||
|
|
||||||
|
<script
|
||||||
|
src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"
|
||||||
|
type="text/javascript"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script id="item-template" type="text/x-handlebars-template">
|
||||||
|
<table>
|
||||||
|
{{#if relation}}
|
||||||
|
<tr><td>
|
||||||
|
<span id="relation-style">{{relation}}</span>
|
||||||
|
</tr></td>
|
||||||
|
{{/if}}
|
||||||
|
{{#if image_url}}
|
||||||
|
<tr><td>
|
||||||
|
<img src="{{image_url}}"></img>
|
||||||
|
</tr></td>
|
||||||
|
{{/if}}
|
||||||
|
<tr>
|
||||||
|
<th colspan="3" class="description" title="{{content}}">{{truncate title}}</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>{{dateformat start}} / {{dateformat end}}</code></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
Handlebars
|
||||||
|
.registerHelper('dateformat',
|
||||||
|
function(date) {
|
||||||
|
try {
|
||||||
|
if (date) {
|
||||||
|
var d = new Date(date), month = ''
|
||||||
|
+ (d.getMonth() + 1), day = ''
|
||||||
|
+ d.getDate(), year = d.getFullYear();
|
||||||
|
|
||||||
|
if (month.length < 2)
|
||||||
|
month = '0' + month;
|
||||||
|
if (day.length < 2)
|
||||||
|
day = '0' + day;
|
||||||
|
|
||||||
|
return [ year, month, day ].join('-');
|
||||||
|
}
|
||||||
|
return "";
|
||||||
|
} catch (err) {
|
||||||
|
return date + "";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
Handlebars.registerHelper("truncate", function(input, max_lenght) {
|
||||||
|
|
||||||
|
if (!max_lenght)
|
||||||
|
max_lenght = 10;
|
||||||
|
|
||||||
|
if (input.length > max_lenght) {
|
||||||
|
return input.substring(0, max_lenght) + '...';
|
||||||
|
}
|
||||||
|
return input;
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
var templateHandlebars = Handlebars.compile(document
|
||||||
|
.getElementById('item-template').innerHTML);
|
||||||
|
|
||||||
|
var optionsTimeline = {
|
||||||
|
// specify a template for the items
|
||||||
|
template : templateHandlebars,
|
||||||
|
type : 'box'
|
||||||
|
};
|
||||||
|
</script>
|
||||||
<!-- -->
|
<!-- -->
|
||||||
<!-- Consider inlining CSS to reduce the number of requested files -->
|
<!-- Consider inlining CSS to reduce the number of requested files -->
|
||||||
<!-- -->
|
<!-- -->
|
||||||
|
@ -61,5 +139,8 @@
|
||||||
application to display correctly.</div>
|
application to display correctly.</div>
|
||||||
</noscript>
|
</noscript>
|
||||||
<div id="geoportal-data-viewer"></div>
|
<div id="geoportal-data-viewer"></div>
|
||||||
|
<div class="timeline-container">
|
||||||
|
<div id="timeline-data"></div>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -0,0 +1,191 @@
|
||||||
|
<!doctype html>
|
||||||
|
<!-- The DOCTYPE declaration above will set the -->
|
||||||
|
<!-- browser's rendering engine into -->
|
||||||
|
<!-- "Standards Mode". Replacing this declaration -->
|
||||||
|
<!-- with a "Quirks Mode" doctype may lead to some -->
|
||||||
|
<!-- differences in layout. -->
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||||
|
|
||||||
|
<link
|
||||||
|
href="//cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v6.4.3/css/ol.css"
|
||||||
|
rel="stylesheet" type="text/css">
|
||||||
|
<script
|
||||||
|
src="//cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v6.4.3/build/ol.js"
|
||||||
|
type="text/javascript"></script>
|
||||||
|
|
||||||
|
<link
|
||||||
|
href="//cdnjs.cloudflare.com/ajax/libs/nanogallery2/3.0.5/css/nanogallery2.min.css"
|
||||||
|
rel="stylesheet" type="text/css">
|
||||||
|
|
||||||
|
<script
|
||||||
|
src="//cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"
|
||||||
|
type="text/javascript"></script>
|
||||||
|
|
||||||
|
<script
|
||||||
|
src="//unpkg.com/vis-timeline@7.7.0/standalone/umd/vis-timeline-graph2d.min.js"
|
||||||
|
type="text/javascript"></script>
|
||||||
|
|
||||||
|
<link
|
||||||
|
href="https://unpkg.com/vis-timeline@7.7.0/styles/vis-timeline-graph2d.min.css"
|
||||||
|
rel="stylesheet" type="text/css">
|
||||||
|
|
||||||
|
<script
|
||||||
|
src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"
|
||||||
|
type="text/javascript"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script id="item-template" type="text/x-handlebars-template">
|
||||||
|
<table>
|
||||||
|
{{#if relation}}
|
||||||
|
<tr><td>
|
||||||
|
<span id="relation-style">{{relation}}</span>
|
||||||
|
</tr></td>
|
||||||
|
{{/if}}
|
||||||
|
{{#if image_url}}
|
||||||
|
<tr><td>
|
||||||
|
<img src="{{image_url}}"></img>
|
||||||
|
</tr></td>
|
||||||
|
{{/if}}
|
||||||
|
<tr>
|
||||||
|
<th colspan="3" class="description" title="{{content}}">{{truncate title}}</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>{{dateformat start}} / {{dateformat end}}</code></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
Handlebars.registerHelper('dateformat', function(date) {
|
||||||
|
try {
|
||||||
|
if (date) {
|
||||||
|
var d = new Date(date),
|
||||||
|
month = '' + (d.getMonth() + 1),
|
||||||
|
day = '' + d.getDate(),
|
||||||
|
year = d.getFullYear();
|
||||||
|
|
||||||
|
if (month.length < 2)
|
||||||
|
month = '0' + month;
|
||||||
|
if (day.length < 2)
|
||||||
|
day = '0' + day;
|
||||||
|
|
||||||
|
return [year, month, day].join('-');
|
||||||
|
}
|
||||||
|
return "";
|
||||||
|
} catch (err) {
|
||||||
|
return date + "";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
Handlebars.registerHelper("truncate", function(input, max_lenght) {
|
||||||
|
|
||||||
|
if (!max_lenght)
|
||||||
|
max_lenght = 10;
|
||||||
|
|
||||||
|
if (input.length > max_lenght) {
|
||||||
|
return input.substring(0, max_lenght) + '...';
|
||||||
|
}
|
||||||
|
return input;
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
var templateHandlebars = Handlebars.compile(document.getElementById('item-template').innerHTML);
|
||||||
|
</script>
|
||||||
|
<!-- -->
|
||||||
|
<!-- Consider inlining CSS to reduce the number of requested files -->
|
||||||
|
<!-- -->
|
||||||
|
<link type="text/css" rel="stylesheet" href="GeoportalDataViewer.css">
|
||||||
|
<!-- -->
|
||||||
|
<!-- Any title is fine -->
|
||||||
|
<!-- -->
|
||||||
|
<title>GNA Data Viewer Application</title>
|
||||||
|
|
||||||
|
<!-- -->
|
||||||
|
<!-- This script loads your compiled module. -->
|
||||||
|
<!-- If you add any GWT meta tags, they must -->
|
||||||
|
<!-- be added before this line. -->
|
||||||
|
<!-- -->
|
||||||
|
<script type="text/javascript" language="javascript"
|
||||||
|
src="GeoportalDataViewer/GeoportalDataViewer.nocache.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<!-- -->
|
||||||
|
<!-- The body can have arbitrary html, or -->
|
||||||
|
<!-- you can leave the body empty if you want -->
|
||||||
|
<!-- to create a completely dynamic UI. -->
|
||||||
|
<!-- -->
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- OPTIONAL: include this if you want history support -->
|
||||||
|
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1'
|
||||||
|
style="position: absolute; width: 0; height: 0; border: 0"></iframe>
|
||||||
|
|
||||||
|
<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
|
||||||
|
<noscript>
|
||||||
|
<div
|
||||||
|
style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
|
||||||
|
Your web browser must have JavaScript enabled in order for this
|
||||||
|
application to display correctly.</div>
|
||||||
|
</noscript>
|
||||||
|
<div id="timeline-data" style="width: 600px; height: 400px;"></div>
|
||||||
|
<div id="geoportal-data-viewer"></div>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
// DOM element where the Timeline will be attached
|
||||||
|
var container = document.getElementById('timeline-data');
|
||||||
|
|
||||||
|
// Create a DataSet (allows two way data-binding)
|
||||||
|
var items = new vis.DataSet([{
|
||||||
|
id: 1,
|
||||||
|
title: 'item 1',
|
||||||
|
relation: 'follows',
|
||||||
|
start: '2014-04-1',
|
||||||
|
end: '2014-05-30',
|
||||||
|
image_url: 'https://data-pre.d4science.org/shub/E_ck5hN0hBcGljR3oySm5KOWJxOUMyRkRaWkZ4WnhmWXJjWVlLeWxGcW9FMWQraitOWStmQXREQklNUlMydzNFTw=='
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: 'item 2',
|
||||||
|
start: '2015-04-1',
|
||||||
|
end: '2015-05-30',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: 'item 3',
|
||||||
|
description: 'this is the description',
|
||||||
|
start: '2016-03-1',
|
||||||
|
end: '2016-06-30'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
title: 'item 4',
|
||||||
|
start: '2017-04-16',
|
||||||
|
end: '2017-05-30'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
title: 'item 6',
|
||||||
|
start: '2018-04-27',
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Configuration for the Timeline
|
||||||
|
// var options = {};
|
||||||
|
|
||||||
|
// Configuration for the Timeline
|
||||||
|
var options = {
|
||||||
|
// specify a template for the items
|
||||||
|
template: templateHandlebars,
|
||||||
|
type: 'box'
|
||||||
|
};
|
||||||
|
|
||||||
|
// Create a Timeline
|
||||||
|
var timeline = new vis.Timeline(container, items, options);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -26,6 +26,18 @@
|
||||||
href="//cdnjs.cloudflare.com/ajax/libs/nanogallery2/3.0.5/css/nanogallery2.min.css"
|
href="//cdnjs.cloudflare.com/ajax/libs/nanogallery2/3.0.5/css/nanogallery2.min.css"
|
||||||
rel="stylesheet" type="text/css">
|
rel="stylesheet" type="text/css">
|
||||||
|
|
||||||
|
<script
|
||||||
|
src="//unpkg.com/vis-timeline@7.7.0/standalone/umd/vis-timeline-graph2d.min.js"
|
||||||
|
type="text/javascript"></script>
|
||||||
|
|
||||||
|
<script
|
||||||
|
src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"
|
||||||
|
type="text/javascript"></script>
|
||||||
|
|
||||||
|
<link
|
||||||
|
href="//unpkg.com/vis-timeline@7.7.0/styles/vis-timeline-graph2d.min.css"
|
||||||
|
rel="stylesheet" type="text/css">
|
||||||
|
|
||||||
<link rel="stylesheet"
|
<link rel="stylesheet"
|
||||||
href="<%=request.getContextPath()%>/GeoportalDataViewer.css"
|
href="<%=request.getContextPath()%>/GeoportalDataViewer.css"
|
||||||
type="text/css">
|
type="text/css">
|
||||||
|
@ -33,5 +45,74 @@
|
||||||
<script type="text/javascript"
|
<script type="text/javascript"
|
||||||
src="<%=request.getContextPath()%>/GeoportalDataViewer/GeoportalDataViewer.nocache.js"></script>
|
src="<%=request.getContextPath()%>/GeoportalDataViewer/GeoportalDataViewer.nocache.js"></script>
|
||||||
|
|
||||||
|
<script id="item-template" type="text/x-handlebars-template">
|
||||||
|
<table>
|
||||||
|
{{#if relation}}
|
||||||
|
<tr><td>
|
||||||
|
<span id="relation-style">{{relation}}</span>
|
||||||
|
</tr></td>
|
||||||
|
{{/if}}
|
||||||
|
{{#if image_url}}
|
||||||
|
<tr><td>
|
||||||
|
<img src="{{image_url}}"></img>
|
||||||
|
</tr></td>
|
||||||
|
{{/if}}
|
||||||
|
<tr>
|
||||||
|
<th colspan="3" class="description" title="{{content}}">{{truncate title}}</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>{{dateformat start}} / {{dateformat end}}</code></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</script>
|
||||||
|
|
||||||
<div id="geoportal-data-viewer"></div>
|
<script type="text/javascript">
|
||||||
|
Handlebars
|
||||||
|
.registerHelper('dateformat',
|
||||||
|
function(date) {
|
||||||
|
try {
|
||||||
|
if (date) {
|
||||||
|
var d = new Date(date), month = ''
|
||||||
|
+ (d.getMonth() + 1), day = ''
|
||||||
|
+ d.getDate(), year = d.getFullYear();
|
||||||
|
|
||||||
|
if (month.length < 2)
|
||||||
|
month = '0' + month;
|
||||||
|
if (day.length < 2)
|
||||||
|
day = '0' + day;
|
||||||
|
|
||||||
|
return [ year, month, day ].join('-');
|
||||||
|
}
|
||||||
|
return "";
|
||||||
|
} catch (err) {
|
||||||
|
return date + "";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
Handlebars.registerHelper("truncate", function(input, max_lenght) {
|
||||||
|
|
||||||
|
if (!max_lenght)
|
||||||
|
max_lenght = 10;
|
||||||
|
|
||||||
|
if (input.length > max_lenght) {
|
||||||
|
return input.substring(0, max_lenght) + '...';
|
||||||
|
}
|
||||||
|
return input;
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
var templateHandlebars = Handlebars.compile(document
|
||||||
|
.getElementById('item-template').innerHTML);
|
||||||
|
|
||||||
|
var optionsTimeline = {
|
||||||
|
// specify a template for the items
|
||||||
|
template : templateHandlebars,
|
||||||
|
type : 'box'
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="geoportal-data-viewer"></div>
|
||||||
|
<div class="timeline-container">
|
||||||
|
<div id="timeline-data"></div>
|
||||||
|
</div>
|
Loading…
Reference in New Issue