#23955 timeline facility first release
This commit is contained in:
parent
b9f73817f8
commit
744aebcf2c
|
@ -9,7 +9,6 @@ import org.gcube.application.geoportalcommon.shared.GeoportalItemReferences;
|
||||||
import org.gcube.application.geoportalcommon.shared.geoportal.DocumentDV;
|
import org.gcube.application.geoportalcommon.shared.geoportal.DocumentDV;
|
||||||
import org.gcube.application.geoportalcommon.shared.geoportal.geojson.GeoJSON;
|
import org.gcube.application.geoportalcommon.shared.geoportal.geojson.GeoJSON;
|
||||||
import org.gcube.application.geoportalcommon.shared.geoportal.materialization.IndexLayerDV;
|
import org.gcube.application.geoportalcommon.shared.geoportal.materialization.IndexLayerDV;
|
||||||
import org.gcube.application.geoportalcommon.shared.geoportal.project.ProjectDV;
|
|
||||||
import org.gcube.application.geoportalcommon.shared.geoportal.project.RelationshipDV;
|
import org.gcube.application.geoportalcommon.shared.geoportal.project.RelationshipDV;
|
||||||
import org.gcube.application.geoportalcommon.shared.geoportal.view.ProjectView;
|
import org.gcube.application.geoportalcommon.shared.geoportal.view.ProjectView;
|
||||||
import org.gcube.portlets.user.geoportaldataviewer.client.GeoportalDataViewerConstants.MAP_PROJECTION;
|
import org.gcube.portlets.user.geoportaldataviewer.client.GeoportalDataViewerConstants.MAP_PROJECTION;
|
||||||
|
@ -48,7 +47,7 @@ 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.resources.GNAImages;
|
import org.gcube.portlets.user.geoportaldataviewer.client.resources.GNAImages;
|
||||||
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.ui.cms.project.relation.TimelineManagerStatus;
|
||||||
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;
|
||||||
|
@ -126,6 +125,8 @@ public class GeoportalDataViewer implements EntryPoint {
|
||||||
private static List<BaseMapLayer> listBaseMapLayers = null;
|
private static List<BaseMapLayer> listBaseMapLayers = null;
|
||||||
|
|
||||||
private static ViewerStatus viewerStatus = new ViewerStatus();
|
private static ViewerStatus viewerStatus = new ViewerStatus();
|
||||||
|
|
||||||
|
private TimelineManagerStatus timelineMS = new TimelineManagerStatus(applicationBus);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* This is the entry point method.
|
* This is the entry point method.
|
||||||
|
@ -146,7 +147,7 @@ public class GeoportalDataViewer implements EntryPoint {
|
||||||
|
|
||||||
// RootPanel.get(APP_DIV).add(loaderApp);
|
// RootPanel.get(APP_DIV).add(loaderApp);
|
||||||
|
|
||||||
hideTimelineProjectRelations();
|
timelineMS.hideTimelineProjectRelations();
|
||||||
|
|
||||||
GeoportalDataViewerServiceAsync.Util.getInstance()
|
GeoportalDataViewerServiceAsync.Util.getInstance()
|
||||||
.getConfigListOfFieldsForSearching(new AsyncCallback<List<ItemFieldsResponse>>() {
|
.getConfigListOfFieldsForSearching(new AsyncCallback<List<ItemFieldsResponse>>() {
|
||||||
|
@ -395,12 +396,8 @@ public class GeoportalDataViewer implements EntryPoint {
|
||||||
if (showDetailsEvent.isLoadTimelineRelationships()
|
if (showDetailsEvent.isLoadTimelineRelationships()
|
||||||
&& relationships!= null && relationships.size() > 0) {
|
&& relationships!= null && relationships.size() > 0) {
|
||||||
GWT.log("LoadTimelineRelationships is true and the project has Relationships");
|
GWT.log("LoadTimelineRelationships is true and the project has Relationships");
|
||||||
showTimelineProjectRelations(result.getTheProjectDV());
|
timelineMS.showTimelineProjectRelations(result.getTheProjectDV());
|
||||||
}
|
}
|
||||||
// else {
|
|
||||||
// hideTimelineProjectRelations();
|
|
||||||
// }
|
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -532,12 +529,12 @@ public class GeoportalDataViewer implements EntryPoint {
|
||||||
|
|
||||||
switch (timelineProjectRelationsEvent.getEventType()) {
|
switch (timelineProjectRelationsEvent.getEventType()) {
|
||||||
case SHOW: {
|
case SHOW: {
|
||||||
showTimelineProjectRelations(timelineProjectRelationsEvent.getTheProjectDV());
|
timelineMS.showTimelineProjectRelations(timelineProjectRelationsEvent.getTheProjectDV());
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case HIDE:
|
case HIDE:
|
||||||
default: {
|
default: {
|
||||||
hideTimelineProjectRelations();
|
timelineMS.hideTimelineProjectRelations();
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -669,19 +666,7 @@ public class GeoportalDataViewer implements EntryPoint {
|
||||||
//
|
//
|
||||||
// }-*/;
|
// }-*/;
|
||||||
|
|
||||||
private void showTimelineProjectRelations(ProjectDV theProject) {
|
|
||||||
GWT.log("Showing project relations for: " + theProject);
|
|
||||||
RootPanel.get(DIV_TIMELINE_DATA).clear();
|
|
||||||
RootPanel.get(DIV_TIMELINE_DATA).setVisible(true);
|
|
||||||
TimelineRelationPanel timeline = new TimelineRelationPanel(applicationBus, theProject);
|
|
||||||
RootPanel.get(DIV_TIMELINE_DATA).add(timeline);
|
|
||||||
}
|
|
||||||
|
|
||||||
private void hideTimelineProjectRelations() {
|
|
||||||
GWT.log("hideTimelineProjectRelations");
|
|
||||||
RootPanel.get(DIV_TIMELINE_DATA).setVisible(false);
|
|
||||||
RootPanel.get(DIV_TIMELINE_DATA).clear();
|
|
||||||
}
|
|
||||||
|
|
||||||
private void performWFSQueryOnCentroid(String projectID, Double centroidLong, Double centroidLat) {
|
private void performWFSQueryOnCentroid(String projectID, Double centroidLong, Double centroidLat) {
|
||||||
GWT.log("Perform performWFSQueryOnCentroid: " + projectID + " long: " + centroidLong + ", lat: " + centroidLat);
|
GWT.log("Perform performWFSQueryOnCentroid: " + projectID + " long: " + centroidLong + ", lat: " + centroidLat);
|
||||||
|
|
|
@ -0,0 +1,60 @@
|
||||||
|
package org.gcube.portlets.user.geoportaldataviewer.client.ui.cms.project.relation;
|
||||||
|
|
||||||
|
import org.gcube.application.geoportalcommon.shared.geoportal.project.ProjectDV;
|
||||||
|
import org.gcube.portlets.user.geoportaldataviewer.client.GeoportalDataViewer;
|
||||||
|
|
||||||
|
import com.google.gwt.core.client.GWT;
|
||||||
|
import com.google.gwt.event.shared.HandlerManager;
|
||||||
|
import com.google.gwt.user.client.ui.RootPanel;
|
||||||
|
|
||||||
|
public class TimelineManagerStatus {
|
||||||
|
|
||||||
|
private ProjectDV showingProject;
|
||||||
|
private HandlerManager applicationBus;
|
||||||
|
|
||||||
|
public TimelineManagerStatus(HandlerManager applicationBus) {
|
||||||
|
this.applicationBus = applicationBus;
|
||||||
|
}
|
||||||
|
|
||||||
|
protected TimelineRelationPanel getTimelineOf(ProjectDV theProject) {
|
||||||
|
|
||||||
|
if (showingProject == null) {
|
||||||
|
GWT.log("Displaying new Timeline of " + theProject);
|
||||||
|
this.showingProject = theProject;
|
||||||
|
return new TimelineRelationPanel(applicationBus, theProject);
|
||||||
|
} else {
|
||||||
|
|
||||||
|
boolean c1 = showingProject.getId().compareTo(theProject.getId()) == 0;
|
||||||
|
boolean c2 = showingProject.getProfileID().compareTo(theProject.getProfileID()) == 0;
|
||||||
|
|
||||||
|
if (!c1 || !c2) {
|
||||||
|
GWT.log("Displaying Timeline of " + theProject);
|
||||||
|
this.showingProject = theProject;
|
||||||
|
return new TimelineRelationPanel(applicationBus, theProject);
|
||||||
|
}
|
||||||
|
|
||||||
|
GWT.log("Skipping already displayed Timeline of " + theProject);
|
||||||
|
return null;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
public void showTimelineProjectRelations(ProjectDV theProject) {
|
||||||
|
GWT.log("Showing project relations for: " + theProject);
|
||||||
|
|
||||||
|
TimelineRelationPanel timeline = getTimelineOf(theProject);
|
||||||
|
if (timeline != null) {
|
||||||
|
RootPanel.get(GeoportalDataViewer.DIV_TIMELINE_DATA).clear();
|
||||||
|
RootPanel.get(GeoportalDataViewer.DIV_TIMELINE_DATA).setVisible(true);
|
||||||
|
RootPanel.get(GeoportalDataViewer.DIV_TIMELINE_DATA).add(timeline);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public void hideTimelineProjectRelations() {
|
||||||
|
GWT.log("hideTimelineProjectRelations");
|
||||||
|
RootPanel.get(GeoportalDataViewer.DIV_TIMELINE_DATA).setVisible(false);
|
||||||
|
RootPanel.get(GeoportalDataViewer.DIV_TIMELINE_DATA).clear();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -16,12 +16,15 @@ import com.google.gwt.core.client.GWT;
|
||||||
import com.google.gwt.core.client.Scheduler;
|
import com.google.gwt.core.client.Scheduler;
|
||||||
import com.google.gwt.core.client.Scheduler.ScheduledCommand;
|
import com.google.gwt.core.client.Scheduler.ScheduledCommand;
|
||||||
import com.google.gwt.dom.client.Style.TextAlign;
|
import com.google.gwt.dom.client.Style.TextAlign;
|
||||||
|
import com.google.gwt.event.dom.client.ClickEvent;
|
||||||
|
import com.google.gwt.event.dom.client.ClickHandler;
|
||||||
import com.google.gwt.event.shared.HandlerManager;
|
import com.google.gwt.event.shared.HandlerManager;
|
||||||
import com.google.gwt.json.client.JSONArray;
|
import com.google.gwt.json.client.JSONArray;
|
||||||
import com.google.gwt.json.client.JSONParser;
|
import com.google.gwt.json.client.JSONParser;
|
||||||
import com.google.gwt.uibinder.client.UiBinder;
|
import com.google.gwt.uibinder.client.UiBinder;
|
||||||
import com.google.gwt.uibinder.client.UiField;
|
import com.google.gwt.uibinder.client.UiField;
|
||||||
import com.google.gwt.user.client.rpc.AsyncCallback;
|
import com.google.gwt.user.client.rpc.AsyncCallback;
|
||||||
|
import com.google.gwt.user.client.ui.Anchor;
|
||||||
import com.google.gwt.user.client.ui.Composite;
|
import com.google.gwt.user.client.ui.Composite;
|
||||||
import com.google.gwt.user.client.ui.HTML;
|
import com.google.gwt.user.client.ui.HTML;
|
||||||
import com.google.gwt.user.client.ui.HTMLPanel;
|
import com.google.gwt.user.client.ui.HTMLPanel;
|
||||||
|
@ -35,7 +38,10 @@ public class TimelineRelationPanel extends Composite {
|
||||||
ScrollPanel timelineContainer;
|
ScrollPanel timelineContainer;
|
||||||
|
|
||||||
@UiField
|
@UiField
|
||||||
HTMLPanel timelineTitle;
|
HTMLPanel timelineHeader;
|
||||||
|
|
||||||
|
@UiField
|
||||||
|
Anchor timelinePopupCloser;
|
||||||
|
|
||||||
private LoaderIcon loaderData = new LoaderIcon("Loading data... please wait",
|
private LoaderIcon loaderData = new LoaderIcon("Loading data... please wait",
|
||||||
new Image(GNAImages.ICONS.spinnerClock()));
|
new Image(GNAImages.ICONS.spinnerClock()));
|
||||||
|
@ -60,13 +66,29 @@ public class TimelineRelationPanel extends Composite {
|
||||||
|
|
||||||
String html = ProjectUtil.toHMLCode(theProjectDV.getTheDocument());
|
String html = ProjectUtil.toHMLCode(theProjectDV.getTheDocument());
|
||||||
HTML title = new HTML("Relationships of the Project" + " <br>" + html);
|
HTML title = new HTML("Relationships of the Project" + " <br>" + html);
|
||||||
timelineTitle.add(title);
|
timelineHeader.add(title);
|
||||||
|
timelineContainer.getElement().setId("timeline-content");
|
||||||
|
timelineHeader.getElement().setId("timeline-header");
|
||||||
|
|
||||||
loaderData.getElement().getStyle().setTextAlign(TextAlign.CENTER);
|
loaderData.getElement().getStyle().setTextAlign(TextAlign.CENTER);
|
||||||
|
|
||||||
timelineContainer.getElement().setId("visualization");
|
timelineContainer.getElement().setId("visualization");
|
||||||
|
|
||||||
timelineContainer.add(loaderData);
|
timelineContainer.add(loaderData);
|
||||||
|
|
||||||
|
|
||||||
|
timelinePopupCloser.addClickHandler(new ClickHandler() {
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public void onClick(ClickEvent event) {
|
||||||
|
|
||||||
|
if(timelineContainer.isVisible())
|
||||||
|
timelineContainer.setVisible(false);
|
||||||
|
else
|
||||||
|
timelineContainer.setVisible(true);
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
|
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
|
||||||
|
|
||||||
|
@ -94,7 +116,7 @@ public class TimelineRelationPanel extends Composite {
|
||||||
Alert alert = new Alert(caught.getMessage());
|
Alert alert = new Alert(caught.getMessage());
|
||||||
alert.setType(AlertType.ERROR);
|
alert.setType(AlertType.ERROR);
|
||||||
alert.setClose(false);
|
alert.setClose(false);
|
||||||
timelineTitle.add(alert);
|
timelineHeader.add(alert);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -5,22 +5,13 @@
|
||||||
.important {
|
.important {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline_title {
|
|
||||||
padding: 5px;
|
|
||||||
background-color: rgba(0, 60, 136, 0.7);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline {
|
|
||||||
/*border: 1px solid lightgray;*/
|
|
||||||
max-height: 400px;
|
|
||||||
}
|
|
||||||
</ui:style>
|
</ui:style>
|
||||||
<g:HTMLPanel>
|
<g:HTMLPanel addStyleNames="timeline-popup">
|
||||||
<g:HTMLPanel ui:field="timelineTitle"
|
<g:HTMLPanel ui:field="timelineHeader"
|
||||||
addStyleNames="{style.timeline_title}"></g:HTMLPanel>
|
addStyleNames="timeline-popup-header">
|
||||||
|
<g:Anchor href="#" ui:field="timelinePopupCloser" addStyleNames="timeline-popup-closer"></g:Anchor>
|
||||||
|
</g:HTMLPanel>
|
||||||
<g:ScrollPanel ui:field="timelineContainer"
|
<g:ScrollPanel ui:field="timelineContainer"
|
||||||
addStyleNames="{style.timeline}"></g:ScrollPanel>
|
addStyleNames="timeline-popup-content"></g:ScrollPanel>
|
||||||
</g:HTMLPanel>
|
</g:HTMLPanel>
|
||||||
</ui:UiBinder>
|
</ui:UiBinder>
|
|
@ -598,4 +598,40 @@ body {
|
||||||
left: 125px;
|
left: 125px;
|
||||||
bottom: 50px
|
bottom: 50px
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.timeline-popup {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-popup-header {
|
||||||
|
padding-top: 5px;
|
||||||
|
padding-left: 5px;
|
||||||
|
background-color: rgba(0, 60, 136, 0.7);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-popup-closer {
|
||||||
|
text-decoration: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 2px;
|
||||||
|
right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-popup-closer:after {
|
||||||
|
content: "⚊";
|
||||||
|
font-size: 16px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-popup-closer a:active {
|
||||||
|
content: "⚊";
|
||||||
|
font-size: 16px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.timeline-popup-content {
|
||||||
|
padding: 5px;
|
||||||
|
max-height: 400px;
|
||||||
|
}
|
||||||
|
|
|
@ -98,8 +98,7 @@
|
||||||
var optionsTimeline = {
|
var optionsTimeline = {
|
||||||
// specify a template for the items
|
// specify a template for the items
|
||||||
template : templateHandlebars,
|
template : templateHandlebars,
|
||||||
type : 'box',
|
type : 'box'
|
||||||
dataAttributes : 'all'
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<!-- -->
|
<!-- -->
|
||||||
|
|
|
@ -1,191 +0,0 @@
|
||||||
<!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>
|
|
|
@ -47,9 +47,9 @@
|
||||||
|
|
||||||
<script id="item-template" type="text/x-handlebars-template">
|
<script id="item-template" type="text/x-handlebars-template">
|
||||||
<table>
|
<table>
|
||||||
{{#if relationship_name}}
|
{{#if selected}}
|
||||||
<tr><td>
|
<tr><td>
|
||||||
<span id="relation-style">{{relationship_name}}</span>
|
<span id="relation-style">{{selected}}</span>
|
||||||
</tr></td>
|
</tr></td>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{#if image_url}}
|
{{#if image_url}}
|
||||||
|
@ -89,10 +89,9 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
Handlebars.registerHelper("truncate", function(input, max_lenght) {
|
Handlebars.registerHelper("truncate_msg", function(input) {
|
||||||
|
|
||||||
if (!max_lenght)
|
max_lenght = 20;
|
||||||
max_lenght = 10;
|
|
||||||
|
|
||||||
if (input.length > max_lenght) {
|
if (input.length > max_lenght) {
|
||||||
return input.substring(0, max_lenght) + '...';
|
return input.substring(0, max_lenght) + '...';
|
||||||
|
|
Loading…
Reference in New Issue