#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.geojson.GeoJSON;
|
||||
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.view.ProjectView;
|
||||
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.resources.GNAImages;
|
||||
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.LoaderIcon;
|
||||
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 ViewerStatus viewerStatus = new ViewerStatus();
|
||||
|
||||
private TimelineManagerStatus timelineMS = new TimelineManagerStatus(applicationBus);
|
||||
|
||||
/**
|
||||
* This is the entry point method.
|
||||
|
|
@ -146,7 +147,7 @@ public class GeoportalDataViewer implements EntryPoint {
|
|||
|
||||
// RootPanel.get(APP_DIV).add(loaderApp);
|
||||
|
||||
hideTimelineProjectRelations();
|
||||
timelineMS.hideTimelineProjectRelations();
|
||||
|
||||
GeoportalDataViewerServiceAsync.Util.getInstance()
|
||||
.getConfigListOfFieldsForSearching(new AsyncCallback<List<ItemFieldsResponse>>() {
|
||||
|
|
@ -395,12 +396,8 @@ public class GeoportalDataViewer implements EntryPoint {
|
|||
if (showDetailsEvent.isLoadTimelineRelationships()
|
||||
&& relationships!= null && relationships.size() > 0) {
|
||||
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()) {
|
||||
case SHOW: {
|
||||
showTimelineProjectRelations(timelineProjectRelationsEvent.getTheProjectDV());
|
||||
timelineMS.showTimelineProjectRelations(timelineProjectRelationsEvent.getTheProjectDV());
|
||||
break;
|
||||
}
|
||||
case HIDE:
|
||||
default: {
|
||||
hideTimelineProjectRelations();
|
||||
timelineMS.hideTimelineProjectRelations();
|
||||
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) {
|
||||
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.ScheduledCommand;
|
||||
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.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.Anchor;
|
||||
import com.google.gwt.user.client.ui.Composite;
|
||||
import com.google.gwt.user.client.ui.HTML;
|
||||
import com.google.gwt.user.client.ui.HTMLPanel;
|
||||
|
|
@ -35,7 +38,10 @@ public class TimelineRelationPanel extends Composite {
|
|||
ScrollPanel timelineContainer;
|
||||
|
||||
@UiField
|
||||
HTMLPanel timelineTitle;
|
||||
HTMLPanel timelineHeader;
|
||||
|
||||
@UiField
|
||||
Anchor timelinePopupCloser;
|
||||
|
||||
private LoaderIcon loaderData = new LoaderIcon("Loading data... please wait",
|
||||
new Image(GNAImages.ICONS.spinnerClock()));
|
||||
|
|
@ -60,13 +66,29 @@ public class TimelineRelationPanel extends Composite {
|
|||
|
||||
String html = ProjectUtil.toHMLCode(theProjectDV.getTheDocument());
|
||||
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);
|
||||
|
||||
timelineContainer.getElement().setId("visualization");
|
||||
|
||||
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() {
|
||||
|
||||
|
|
@ -94,7 +116,7 @@ public class TimelineRelationPanel extends Composite {
|
|||
Alert alert = new Alert(caught.getMessage());
|
||||
alert.setType(AlertType.ERROR);
|
||||
alert.setClose(false);
|
||||
timelineTitle.add(alert);
|
||||
timelineHeader.add(alert);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -5,22 +5,13 @@
|
|||
.important {
|
||||
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>
|
||||
<g:HTMLPanel>
|
||||
<g:HTMLPanel ui:field="timelineTitle"
|
||||
addStyleNames="{style.timeline_title}"></g:HTMLPanel>
|
||||
<g:HTMLPanel addStyleNames="timeline-popup">
|
||||
<g:HTMLPanel ui:field="timelineHeader"
|
||||
addStyleNames="timeline-popup-header">
|
||||
<g:Anchor href="#" ui:field="timelinePopupCloser" addStyleNames="timeline-popup-closer"></g:Anchor>
|
||||
</g:HTMLPanel>
|
||||
<g:ScrollPanel ui:field="timelineContainer"
|
||||
addStyleNames="{style.timeline}"></g:ScrollPanel>
|
||||
addStyleNames="timeline-popup-content"></g:ScrollPanel>
|
||||
</g:HTMLPanel>
|
||||
</ui:UiBinder>
|
||||
|
|
@ -598,4 +598,40 @@ body {
|
|||
left: 125px;
|
||||
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 = {
|
||||
// specify a template for the items
|
||||
template : templateHandlebars,
|
||||
type : 'box',
|
||||
dataAttributes : 'all'
|
||||
type : 'box'
|
||||
};
|
||||
</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">
|
||||
<table>
|
||||
{{#if relationship_name}}
|
||||
{{#if selected}}
|
||||
<tr><td>
|
||||
<span id="relation-style">{{relationship_name}}</span>
|
||||
<span id="relation-style">{{selected}}</span>
|
||||
</tr></td>
|
||||
{{/if}}
|
||||
{{#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 = 10;
|
||||
max_lenght = 20;
|
||||
|
||||
if (input.length > max_lenght) {
|
||||
return input.substring(0, max_lenght) + '...';
|
||||
|
|
|
|||
Loading…
Reference in New Issue