429: Workspace: uploading big files
Task-Url: https://support.d4science.org/issues/429 Updated css Added ProgressBar Added UploaderProgressBarView git-svn-id: https://svn.d4science.research-infrastructures.eu/gcube/trunk/portlets/widgets/workspace-uploader@119634 82a268e6-3cf1-43bd-a215-b396298e98cf
This commit is contained in:
parent
0ad8b4a54f
commit
0d02c0b4d2
|
|
@ -1,9 +1,9 @@
|
|||
package org.gcube.portlets.widgets.workspaceuploader.client.events;
|
||||
|
||||
import org.gcube.portlets.widgets.workspaceuploader.client.uploader.UploaderProgressView;
|
||||
import org.gcube.portlets.widgets.workspaceuploader.shared.WorkspaceUploaderItem;
|
||||
|
||||
import com.google.gwt.event.shared.GwtEvent;
|
||||
import com.google.gwt.user.client.ui.HorizontalPanel;
|
||||
|
||||
|
||||
/**
|
||||
|
|
@ -14,7 +14,7 @@ import com.google.gwt.user.client.ui.HorizontalPanel;
|
|||
*/
|
||||
public class CancelUploadEvent extends GwtEvent<CancelUploadEventHandler> {
|
||||
public static Type<CancelUploadEventHandler> TYPE = new Type<CancelUploadEventHandler>();
|
||||
private HorizontalPanel hp;
|
||||
private UploaderProgressView uploaderProgressView;
|
||||
private String fileName;
|
||||
private WorkspaceUploaderItem uploader;
|
||||
|
||||
|
|
@ -22,16 +22,16 @@ public class CancelUploadEvent extends GwtEvent<CancelUploadEventHandler> {
|
|||
/**
|
||||
* @return the hp
|
||||
*/
|
||||
public HorizontalPanel getHp() {
|
||||
return hp;
|
||||
public UploaderProgressView getProgessView() {
|
||||
return uploaderProgressView;
|
||||
}
|
||||
|
||||
/**
|
||||
* Instantiates a new cancel upload event.
|
||||
*/
|
||||
public CancelUploadEvent(WorkspaceUploaderItem uploader, HorizontalPanel hp, String fileName) {
|
||||
public CancelUploadEvent(WorkspaceUploaderItem uploader, UploaderProgressView uploaderProgressView, String fileName) {
|
||||
this.uploader = uploader;
|
||||
this.hp = hp;
|
||||
this.uploaderProgressView = uploaderProgressView;
|
||||
this.fileName = fileName;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,78 @@
|
|||
@external progressContainer, progressBarContainer, FileSubmit, bar-container, progress, blue, myBackground;
|
||||
|
||||
.progressContainer {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.progressBarContainer {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin: 10px 0 0 -3px;
|
||||
|
||||
}
|
||||
|
||||
/* Progress Bar Styles */
|
||||
|
||||
.bar-container {
|
||||
font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
|
||||
color: #404040;
|
||||
margin: 0px auto;
|
||||
width: 382px;
|
||||
}
|
||||
|
||||
.bar-container > div {
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 25px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.progress > span {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin: 0 -1px;
|
||||
min-width: 30px;
|
||||
height: 18px;
|
||||
line-height: 16px;
|
||||
text-align: right;
|
||||
background-color: #DDD;
|
||||
border: 1px solid;
|
||||
border-color: #FFF;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.progress>span>span {
|
||||
padding: 0 8px;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
color: #404040;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
text-shadow: 0 1px rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
@sprite .myBackground>span:before {
|
||||
gwt-image: "progressTexture";
|
||||
other: repeat-x;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
height: 18px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.progress .blue {
|
||||
background: #5aaadb;
|
||||
border-color: #7bbbe2;
|
||||
background-image: -webkit-linear-gradient(top, #aed5ed, #7bbbe2 70%, #5aaadb);
|
||||
background-image: -moz-linear-gradient(top, #aed5ed, #7bbbe2 70%, #5aaadb);
|
||||
background-image: -o-linear-gradient(top, #aed5ed, #7bbbe2 70%, #5aaadb);
|
||||
background-image: linear-gradient(to bottom, #aed5ed, #7bbbe2 70%, #5aaadb);
|
||||
}
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
@external progressContainer, progressBarContainer, FileSubmit, bar-container, progress, blue, myBackground;
|
||||
|
||||
.progressContainer {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.progressBarContainer {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin: 10px 0 0 -3px;
|
||||
|
||||
}
|
||||
|
||||
/* Progress Bar Styles */
|
||||
|
||||
.bar-container {
|
||||
font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
|
||||
color: #404040;
|
||||
margin: 1px;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.bar-container > div {
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 25px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.progress > span {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin: 0 -1px;
|
||||
min-width: 30px;
|
||||
height: 18px;
|
||||
line-height: 16px;
|
||||
text-align: right;
|
||||
background-color: #DDD;
|
||||
border: 1px solid;
|
||||
border-color: #FFF;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.progress>span>span {
|
||||
padding: 0 8px;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
color: #404040;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
text-shadow: 0 1px rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
@sprite .myBackground>span:before {
|
||||
gwt-image: "progressTexture";
|
||||
other: repeat-x;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
height: 18px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.progress .blue {
|
||||
background: #5aaadb;
|
||||
border-color: #7bbbe2;
|
||||
background-image: -webkit-linear-gradient(top, #aed5ed, #7bbbe2 70%, #5aaadb);
|
||||
background-image: -moz-linear-gradient(top, #aed5ed, #7bbbe2 70%, #5aaadb);
|
||||
background-image: -o-linear-gradient(top, #aed5ed, #7bbbe2 70%, #5aaadb);
|
||||
background-image: linear-gradient(to bottom, #aed5ed, #7bbbe2 70%, #5aaadb);
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
package org.gcube.portlets.widgets.workspaceuploader.client.resource;
|
||||
|
||||
import com.google.gwt.core.client.GWT;
|
||||
import com.google.gwt.resources.client.ClientBundle;
|
||||
import com.google.gwt.resources.client.CssResource;
|
||||
import com.google.gwt.resources.client.ImageResource;
|
||||
import com.google.gwt.resources.client.ImageResource.ImageOptions;
|
||||
import com.google.gwt.resources.client.ImageResource.RepeatStyle;
|
||||
|
||||
public interface ProgressBarCssAndImages extends ClientBundle {
|
||||
|
||||
public static final ProgressBarCssAndImages INSTANCE = GWT
|
||||
.create(ProgressBarCssAndImages.class);
|
||||
|
||||
@Source("FileUpload.css")
|
||||
public CssResource css();
|
||||
|
||||
@Source("PanelFileUpload.css")
|
||||
public CssResource panelCss();
|
||||
|
||||
@Source("ok.png")
|
||||
ImageResource ok();
|
||||
|
||||
@ImageOptions(repeatStyle = RepeatStyle.Horizontal)
|
||||
@Source("progress.png")
|
||||
ImageResource progressTexture();
|
||||
|
||||
interface MyCssResource extends CssResource {
|
||||
String myBackground();
|
||||
}
|
||||
}
|
||||
|
|
@ -35,7 +35,7 @@ public interface WorkspaceUploaderIcons extends ClientBundle {
|
|||
*
|
||||
* @return the image resource
|
||||
*/
|
||||
@Source("completed.gif")
|
||||
@Source("ok.png")
|
||||
ImageResource completed();
|
||||
|
||||
/**
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 130 B |
|
|
@ -34,7 +34,6 @@ import com.google.gwt.user.client.ui.HasHorizontalAlignment;
|
|||
import com.google.gwt.user.client.ui.HasVerticalAlignment;
|
||||
import com.google.gwt.user.client.ui.Hidden;
|
||||
import com.google.gwt.user.client.ui.HorizontalPanel;
|
||||
import com.google.gwt.user.client.ui.Label;
|
||||
import com.google.gwt.user.client.ui.VerticalPanel;
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -6,16 +6,12 @@ package org.gcube.portlets.widgets.workspaceuploader.client.uploader;
|
|||
import java.util.HashMap;
|
||||
import java.util.Map;
|
||||
|
||||
import org.gcube.portlets.widgets.workspaceuploader.client.StringUtil;
|
||||
import org.gcube.portlets.widgets.workspaceuploader.client.events.CancelUploadEvent;
|
||||
import org.gcube.portlets.widgets.workspaceuploader.client.resource.WorkspaceUploaderResources;
|
||||
import org.gcube.portlets.widgets.workspaceuploader.client.resource.ProgressBarCssAndImages;
|
||||
import org.gcube.portlets.widgets.workspaceuploader.shared.WorkspaceUploaderItem;
|
||||
import org.gcube.portlets.widgets.workspaceuploader.shared.WorkspaceUploaderItem.UPLOAD_STATUS;
|
||||
|
||||
import com.google.gwt.core.shared.GWT;
|
||||
import com.google.gwt.dom.client.Style.Unit;
|
||||
import com.google.gwt.event.dom.client.ClickEvent;
|
||||
import com.google.gwt.event.dom.client.ClickHandler;
|
||||
import com.google.gwt.event.logical.shared.CloseEvent;
|
||||
import com.google.gwt.event.logical.shared.CloseHandler;
|
||||
import com.google.gwt.event.shared.HandlerManager;
|
||||
|
|
@ -23,7 +19,6 @@ import com.google.gwt.user.client.Window;
|
|||
import com.google.gwt.user.client.Window.ClosingEvent;
|
||||
import com.google.gwt.user.client.ui.HTML;
|
||||
import com.google.gwt.user.client.ui.HorizontalPanel;
|
||||
import com.google.gwt.user.client.ui.Image;
|
||||
import com.google.gwt.user.client.ui.ScrollPanel;
|
||||
import com.google.gwt.user.client.ui.VerticalPanel;
|
||||
|
||||
|
|
@ -41,9 +36,13 @@ public class MonitorPanel extends ScrollPanel{
|
|||
private Map<String, WorkspaceUploaderItem> mapUploading = new HashMap<String, WorkspaceUploaderItem>();
|
||||
// private Map<String, Timer> mapTimer = new HashMap<String, Timer>();
|
||||
// private Map<String, DialogBox> mapDialog= new HashMap<String, DialogBox>();
|
||||
private Map<String, HorizontalPanel> mapPanels = new HashMap<String, HorizontalPanel>();
|
||||
private Map<String, UploaderProgressView> mapPanels = new HashMap<String, UploaderProgressView>();
|
||||
private HandlerManager eventBus;
|
||||
private HorizontalPanel hpNoUploads = new HorizontalPanel();
|
||||
|
||||
static {
|
||||
ProgressBarCssAndImages.INSTANCE.css().ensureInjected();
|
||||
}
|
||||
/**
|
||||
* Instantiates a new monitor panel.
|
||||
*
|
||||
|
|
@ -85,13 +84,10 @@ public class MonitorPanel extends ScrollPanel{
|
|||
mapUploading.put(uploader.getClientUploadKey(), uploader);
|
||||
|
||||
if(mapPanels.get(uploader.getClientUploadKey())!=null){
|
||||
HorizontalPanel hp = mapPanels.get(uploader.getClientUploadKey());
|
||||
updateInfo(hp, uploader);
|
||||
UploaderProgressView upv = mapPanels.get(uploader.getClientUploadKey());
|
||||
upv.update(uploader);
|
||||
}else{
|
||||
HorizontalPanel hp = new HorizontalPanel();
|
||||
updateInfo(hp, uploader);
|
||||
mapPanels.put(uploader.getClientUploadKey(), hp);
|
||||
verticalPanel.add(hp);
|
||||
GWT.log("Skip update, uploader: "+uploader.getClientUploadKey() +" "+uploader.getFile().toString()+", not found!");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -104,23 +100,11 @@ public class MonitorPanel extends ScrollPanel{
|
|||
public void newWorkspaceUploder(WorkspaceUploaderItem uploader, final String fileName){
|
||||
removeNoUploads();
|
||||
mapUploading.put(uploader.getClientUploadKey(), uploader);
|
||||
|
||||
HorizontalPanel hp = new HorizontalPanel();
|
||||
HTML html = new HTML();
|
||||
String text = "<div><img src='"+WorkspaceUploaderResources.getImageLoading().getUrl()+"'>";
|
||||
String msg = StringUtil.ellipsize("Uploading "+fileName, MAX_CHARS, 0);
|
||||
text+="<span style='margin-left:5px; vertical-align: top;'>"+msg+"</span>";
|
||||
text+="</div>";
|
||||
|
||||
html.setHTML(text);
|
||||
html.setTitle("Uploading "+fileName);
|
||||
hp.add(html);
|
||||
|
||||
//TODO *************************************************REMOVE THIS
|
||||
// hp.add(handleCancelUplad(uploader, hp));
|
||||
|
||||
mapPanels.put(uploader.getClientUploadKey(), hp);
|
||||
verticalPanel.add(hp);
|
||||
UploaderProgressView upv = new UploaderProgressView(uploader, fileName, eventBus);
|
||||
mapPanels.put(uploader.getClientUploadKey(), upv);
|
||||
VerticalPanel upvPanel = upv.getPanel();
|
||||
upvPanel.addStyleName("upladerMargin");
|
||||
verticalPanel.add(upvPanel);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -128,10 +112,10 @@ public class MonitorPanel extends ScrollPanel{
|
|||
* Handle cancel upload.
|
||||
*
|
||||
* @param uploader the uploader
|
||||
* @param hp the hp
|
||||
* @param vp the hp
|
||||
* @return the image
|
||||
*/
|
||||
private Image handleCancelUpload(final WorkspaceUploaderItem uploader, final HorizontalPanel hp){
|
||||
/*private Image handleCancelUpload(final WorkspaceUploaderItem uploader, final VerticalPanel vp){
|
||||
|
||||
Image cancel = WorkspaceUploaderResources.getImageCancel();
|
||||
cancel.setTitle("Cancel upload");
|
||||
|
|
@ -143,74 +127,74 @@ public class MonitorPanel extends ScrollPanel{
|
|||
GWT.log("Click cancel");
|
||||
String fileName = uploader.getFile()!=null? uploader.getFile().getFileName(): "";
|
||||
if(Window.confirm("Confirm cancel uploading "+fileName+"?")){
|
||||
hp.clear();
|
||||
vp.clear();
|
||||
HTML html = new HTML();
|
||||
hp.add(html);
|
||||
vp.add(html);
|
||||
String text = "<div><img src='"+WorkspaceUploaderResources.getImageCancel().getUrl()+"'>";
|
||||
String msg = StringUtil.ellipsize("Aborting upload: "+fileName, MAX_CHARS, 0);
|
||||
text+="<span style='margin-left:5px; vertical-align: top;'>"+msg+"</span></div>";
|
||||
html.setHTML(text);
|
||||
eventBus.fireEvent(new CancelUploadEvent(uploader, hp, fileName));
|
||||
eventBus.fireEvent(new CancelUploadEvent(uploader, vp, fileName));
|
||||
}
|
||||
}
|
||||
});
|
||||
return cancel;
|
||||
}
|
||||
}*/
|
||||
|
||||
/**
|
||||
* Update info.
|
||||
*
|
||||
* @param hp the hp
|
||||
* @param uploader the uploader
|
||||
*/
|
||||
private void updateInfo(HorizontalPanel hp, WorkspaceUploaderItem uploader){
|
||||
hp.clear();
|
||||
HTML html = new HTML();
|
||||
hp.add(html);
|
||||
String text;
|
||||
switch(uploader.getUploadStatus()){
|
||||
case COMPLETED:
|
||||
text = "<div><img src='"+WorkspaceUploaderResources.getImageCompleted().getUrl()+"'>";
|
||||
text+="<span style='margin-left:5px; vertical-align: top;'>"+StringUtil.ellipsize(uploader.getFile().getFileName()+" uploaded successfully!", MAX_CHARS, 0)+"</span></div>";
|
||||
// GWT.log(text);
|
||||
html.setHTML(text);
|
||||
html.setTitle(uploader.getStatusDescription());
|
||||
break;
|
||||
case FAILED:
|
||||
text = "<div><img src='"+WorkspaceUploaderResources.getImageFailed().getUrl()+"'>";
|
||||
text+="<span style='margin-left:5px; vertical-align: top;'>"+StringUtil.ellipsize(uploader.getStatusDescription(), MAX_CHARS, 0)+"</span></div>";
|
||||
// GWT.log(text);
|
||||
html.setHTML(text);
|
||||
html.setTitle(uploader.getStatusDescription());
|
||||
break;
|
||||
case IN_PROGRESS:
|
||||
text = "<div><img src='"+WorkspaceUploaderResources.getImageUpload().getUrl()+"'>";
|
||||
String msg = StringUtil.ellipsize(uploader.getUploadProgress().getLastEvent().getReadPercentage()+"% "+uploader.getFile().getFileName(), MAX_CHARS, 0);
|
||||
text+="<span style='margin-left:5px; vertical-align: top;'>"+msg+"</span>";
|
||||
text+="</div>";
|
||||
// GWT.log(text);
|
||||
html.setHTML(text);
|
||||
html.setTitle(uploader.getStatusDescription());
|
||||
if(uploader.getUploadProgress().getLastEvent().getReadPercentage()!=100)
|
||||
hp.add(handleCancelUpload(uploader, hp));
|
||||
break;
|
||||
case WAIT:
|
||||
text = "<div><img src='"+WorkspaceUploaderResources.getImageLoading().getUrl()+"'>";
|
||||
|
||||
String descr = "";
|
||||
if(uploader.getFile()!=null && uploader.getFile().getFileName()!=null)
|
||||
descr = uploader.getFile().getFileName();
|
||||
else
|
||||
descr = uploader.getStatusDescription();
|
||||
|
||||
text+="<span style='margin-left:5px; vertical-align: top;'>"+descr+"</span>";
|
||||
text+="</div>";
|
||||
// GWT.log(text);
|
||||
html.setHTML(text);
|
||||
// hp.add(handleCancelUplad(uploader, hp));
|
||||
break;
|
||||
}
|
||||
}
|
||||
// /**
|
||||
// * Update info.
|
||||
// *
|
||||
// * @param vp the hp
|
||||
// * @param uploader the uploader
|
||||
// */
|
||||
// private void updateInfo(VerticalPanel vp, WorkspaceUploaderItem uploader){
|
||||
// vp.clear();
|
||||
// HTML html = new HTML();
|
||||
// vp.add(html);
|
||||
// String text;
|
||||
// switch(uploader.getUploadStatus()){
|
||||
// case COMPLETED:
|
||||
// text = "<div><img src='"+WorkspaceUploaderResources.getImageCompleted().getUrl()+"'>";
|
||||
// text+="<span style='margin-left:5px; vertical-align: top;'>"+StringUtil.ellipsize(uploader.getFile().getFileName()+" uploaded successfully!", MAX_CHARS, 0)+"</span></div>";
|
||||
//// GWT.log(text);
|
||||
// html.setHTML(text);
|
||||
// html.setTitle(uploader.getStatusDescription());
|
||||
// break;
|
||||
// case FAILED:
|
||||
// text = "<div><img src='"+WorkspaceUploaderResources.getImageFailed().getUrl()+"'>";
|
||||
// text+="<span style='margin-left:5px; vertical-align: top;'>"+StringUtil.ellipsize(uploader.getStatusDescription(), MAX_CHARS, 0)+"</span></div>";
|
||||
//// GWT.log(text);
|
||||
// html.setHTML(text);
|
||||
// html.setTitle(uploader.getStatusDescription());
|
||||
// break;
|
||||
// case IN_PROGRESS:
|
||||
// text = "<div><img src='"+WorkspaceUploaderResources.getImageUpload().getUrl()+"'>";
|
||||
// String msg = StringUtil.ellipsize(uploader.getUploadProgress().getLastEvent().getReadPercentage()+"% "+uploader.getFile().getFileName(), MAX_CHARS, 0);
|
||||
// text+="<span style='margin-left:5px; vertical-align: top;'>"+msg+"</span>";
|
||||
// text+="</div>";
|
||||
//// GWT.log(text);
|
||||
// html.setHTML(text);
|
||||
// html.setTitle(uploader.getStatusDescription());
|
||||
// if(uploader.getUploadProgress().getLastEvent().getReadPercentage()!=100)
|
||||
// vp.add(handleCancelUpload(uploader, vp));
|
||||
// break;
|
||||
// case WAIT:
|
||||
// text = "<div><img src='"+WorkspaceUploaderResources.getImageLoading().getUrl()+"'>";
|
||||
//
|
||||
// String descr = "";
|
||||
// if(uploader.getFile()!=null && uploader.getFile().getFileName()!=null)
|
||||
// descr = uploader.getFile().getFileName();
|
||||
// else
|
||||
// descr = uploader.getStatusDescription();
|
||||
//
|
||||
// text+="<span style='margin-left:5px; vertical-align: top;'>"+descr+"</span>";
|
||||
// text+="</div>";
|
||||
//// GWT.log(text);
|
||||
// html.setHTML(text);
|
||||
//// hp.add(handleCancelUplad(uploader, hp));
|
||||
// break;
|
||||
// }
|
||||
// }
|
||||
|
||||
/**
|
||||
* Adds the close handler.
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ import com.google.gwt.user.client.Timer;
|
|||
import com.google.gwt.user.client.Window;
|
||||
import com.google.gwt.user.client.rpc.AsyncCallback;
|
||||
import com.google.gwt.user.client.ui.HTML;
|
||||
import com.google.gwt.user.client.ui.HorizontalPanel;
|
||||
import com.google.gwt.user.client.ui.VerticalPanel;
|
||||
|
||||
/**
|
||||
* The Class UploaderMonitor.
|
||||
|
|
@ -101,11 +101,12 @@ public class UploaderMonitor {
|
|||
return;
|
||||
}
|
||||
case OK: {
|
||||
HorizontalPanel hp = deleteTimerEvent.getHp();
|
||||
if(hp!=null){
|
||||
hp.clear();
|
||||
UploaderProgressView upv = deleteTimerEvent.getProgessView();
|
||||
VerticalPanel vp = upv.getPanel();
|
||||
if(vp!=null){
|
||||
vp.clear();
|
||||
HTML html = new HTML();
|
||||
hp.add(html);
|
||||
vp.add(html);
|
||||
String text = "<div><img src='"+WorkspaceUploaderResources.getImageCancelRed().getUrl()+"'>";
|
||||
text+="<span style='margin-left:5px; vertical-align: top;'>Upload "+deleteTimerEvent.getFileName()+ " aborted</span></div>";
|
||||
html.setHTML(text);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,172 @@
|
|||
/**
|
||||
*
|
||||
*/
|
||||
package org.gcube.portlets.widgets.workspaceuploader.client.uploader;
|
||||
|
||||
import org.gcube.portlets.widgets.workspaceuploader.client.StringUtil;
|
||||
import org.gcube.portlets.widgets.workspaceuploader.client.events.CancelUploadEvent;
|
||||
import org.gcube.portlets.widgets.workspaceuploader.client.resource.WorkspaceUploaderResources;
|
||||
import org.gcube.portlets.widgets.workspaceuploader.client.uploader.bar.ProgressBar;
|
||||
import org.gcube.portlets.widgets.workspaceuploader.shared.WorkspaceUploaderItem;
|
||||
|
||||
import com.google.gwt.core.shared.GWT;
|
||||
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.user.client.Window;
|
||||
import com.google.gwt.user.client.ui.HTML;
|
||||
import com.google.gwt.user.client.ui.HorizontalPanel;
|
||||
import com.google.gwt.user.client.ui.Image;
|
||||
import com.google.gwt.user.client.ui.VerticalPanel;
|
||||
|
||||
|
||||
/**
|
||||
* The Class UploaderProgressView.
|
||||
*
|
||||
* @author Francesco Mangiacrapa francesco.mangiacrapa@isti.cnr.it
|
||||
* Oct 12, 2015
|
||||
*/
|
||||
public class UploaderProgressView {
|
||||
|
||||
private VerticalPanel vp = new VerticalPanel();
|
||||
private static final int MAX_CHARS = 50;
|
||||
private HorizontalPanel hp = new HorizontalPanel();
|
||||
private HTML html = new HTML();
|
||||
private ProgressBar bar = new ProgressBar();
|
||||
private HandlerManager eventBus;
|
||||
|
||||
/**
|
||||
* Instantiates a new uploader progress view.
|
||||
*
|
||||
* @param uploader the uploader
|
||||
* @param fileName the file name
|
||||
* @param eventBus the event bus
|
||||
*/
|
||||
public UploaderProgressView(WorkspaceUploaderItem uploader, final String fileName, HandlerManager eventBus) {
|
||||
this.eventBus = eventBus;
|
||||
|
||||
String text = "<div><img src='"+WorkspaceUploaderResources.getImageLoading().getUrl()+"'>";
|
||||
String msg = StringUtil.ellipsize("Uploading "+fileName, MAX_CHARS, 0);
|
||||
text+="<span style='margin-left:5px; vertical-align: top;'>"+msg+"</span>";
|
||||
text+="</div>";
|
||||
|
||||
html.setHTML(text);
|
||||
html.setTitle("Uploading "+fileName);
|
||||
hp.add(html);
|
||||
|
||||
bar.update(0);
|
||||
|
||||
vp.add(hp);
|
||||
vp.add(bar);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update.
|
||||
*
|
||||
* @param uploader the uploader
|
||||
*/
|
||||
public void update(WorkspaceUploaderItem uploader){
|
||||
|
||||
String text;
|
||||
switch(uploader.getUploadStatus()){
|
||||
case COMPLETED:
|
||||
text = "<div><img src='"+WorkspaceUploaderResources.getImageCompleted().getUrl()+"'>";
|
||||
text+="<span style='margin-left:5px; vertical-align: top;'>"+StringUtil.ellipsize(uploader.getFile().getFileName()+" uploaded successfully!", MAX_CHARS, 0)+"</span></div>";
|
||||
// GWT.log(text);
|
||||
html.setHTML(text);
|
||||
html.setTitle(uploader.getStatusDescription());
|
||||
bar.update(uploader.getUploadProgress().getLastEvent().getReadPercentage());
|
||||
try{
|
||||
vp.remove(bar);
|
||||
}catch (Exception e) {
|
||||
// TODO: handle exception
|
||||
}
|
||||
break;
|
||||
case FAILED:
|
||||
text = "<div><img src='"+WorkspaceUploaderResources.getImageFailed().getUrl()+"'>";
|
||||
text+="<span style='margin-left:5px; vertical-align: top;'>"+StringUtil.ellipsize(uploader.getStatusDescription(), MAX_CHARS, 0)+"</span></div>";
|
||||
// GWT.log(text);
|
||||
html.setHTML(text);
|
||||
html.setTitle(uploader.getStatusDescription());
|
||||
bar.update(uploader.getUploadProgress().getLastEvent().getReadPercentage());
|
||||
break;
|
||||
case IN_PROGRESS:
|
||||
text = "<div><img src='"+WorkspaceUploaderResources.getImageUpload().getUrl()+"'>";
|
||||
String msg = StringUtil.ellipsize(uploader.getUploadProgress().getLastEvent().getReadPercentage()+"% "+uploader.getFile().getFileName(), MAX_CHARS, 0);
|
||||
text+="<span style='margin-left:5px; vertical-align: top;'>"+msg+"</span>";
|
||||
text+="</div>";
|
||||
// GWT.log(text);
|
||||
html.setHTML(text);
|
||||
html.setTitle(uploader.getStatusDescription());
|
||||
if(uploader.getUploadProgress().getLastEvent().getReadPercentage()!=100)
|
||||
hp.add(handleCancelUpload(uploader));
|
||||
bar.update(uploader.getUploadProgress().getLastEvent().getReadPercentage());
|
||||
break;
|
||||
case WAIT:
|
||||
text = "<div><img src='"+WorkspaceUploaderResources.getImageLoading().getUrl()+"'>";
|
||||
|
||||
String descr = "";
|
||||
if(uploader.getFile()!=null && uploader.getFile().getFileName()!=null)
|
||||
descr = uploader.getFile().getFileName();
|
||||
else
|
||||
descr = uploader.getStatusDescription();
|
||||
|
||||
text+="<span style='margin-left:5px; vertical-align: top;'>"+descr+"</span>";
|
||||
text+="</div>";
|
||||
// GWT.log(text);
|
||||
html.setHTML(text);
|
||||
|
||||
if(uploader.getUploadProgress().getLastEvent()!=null)
|
||||
bar.update(uploader.getUploadProgress().getLastEvent().getReadPercentage());
|
||||
else
|
||||
bar.update(0);
|
||||
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle cancel upload.
|
||||
*
|
||||
* @param uploader the uploader
|
||||
* @return the image
|
||||
*/
|
||||
private Image handleCancelUpload(final WorkspaceUploaderItem uploader){
|
||||
|
||||
Image cancel = WorkspaceUploaderResources.getImageCancel();
|
||||
cancel.setTitle("Cancel upload");
|
||||
cancel.addStyleName("cancel-upload");
|
||||
cancel.addClickHandler(new ClickHandler() {
|
||||
|
||||
@Override
|
||||
public void onClick(ClickEvent event) {
|
||||
GWT.log("Click cancel");
|
||||
String fileName = uploader.getFile()!=null? uploader.getFile().getFileName(): "";
|
||||
if(Window.confirm("Confirm cancel uploading "+fileName+"?")){
|
||||
hp.clear();
|
||||
HTML html = new HTML();
|
||||
hp.add(html);
|
||||
String text = "<div><img src='"+WorkspaceUploaderResources.getImageCancel().getUrl()+"'>";
|
||||
String msg = StringUtil.ellipsize("Aborting upload: "+fileName, MAX_CHARS, 0);
|
||||
text+="<span style='margin-left:5px; vertical-align: top;'>"+msg+"</span></div>";
|
||||
html.setHTML(text);
|
||||
eventBus.fireEvent(new CancelUploadEvent(uploader, UploaderProgressView.this, fileName));
|
||||
}
|
||||
}
|
||||
});
|
||||
return cancel;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Gets the panel.
|
||||
*
|
||||
* @return the panel
|
||||
*/
|
||||
public VerticalPanel getPanel() {
|
||||
return vp;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
package org.gcube.portlets.widgets.workspaceuploader.client.uploader.bar;
|
||||
|
||||
import com.google.gwt.core.client.GWT;
|
||||
import com.google.gwt.uibinder.client.UiBinder;
|
||||
import com.google.gwt.uibinder.client.UiField;
|
||||
import com.google.gwt.user.client.ui.Composite;
|
||||
import com.google.gwt.user.client.ui.HTML;
|
||||
import com.google.gwt.user.client.ui.Widget;
|
||||
|
||||
public class ProgressBar extends Composite {
|
||||
|
||||
private static final double COMPLETE_PERECENTAGE = 100d;
|
||||
private static final double START_PERECENTAGE = 0d;
|
||||
|
||||
private static ProgressBarUiBinder uiBinder = GWT
|
||||
.create(ProgressBarUiBinder.class);
|
||||
|
||||
interface ProgressBarUiBinder extends UiBinder<Widget, ProgressBar> { }
|
||||
|
||||
@UiField HTML progressBarContainer;
|
||||
|
||||
public ProgressBar() {
|
||||
initWidget(uiBinder.createAndBindUi(this));
|
||||
}
|
||||
|
||||
public void update(int percentage) {
|
||||
if (percentage > 100)
|
||||
percentage = 100;
|
||||
if (percentage < START_PERECENTAGE || percentage > COMPLETE_PERECENTAGE) {
|
||||
throw new IllegalArgumentException("invalid value for percentage " + percentage);
|
||||
} else { //cannot use DOM getElemById cus the second time you open the popup it fails
|
||||
progressBarContainer.getElement().setAttribute("style", "width: "+percentage+"%");
|
||||
progressBarContainer.getElement().getFirstChildElement().getFirstChildElement().setInnerText(percentage+"%");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!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">
|
||||
<g:HTMLPanel>
|
||||
<div class="bar-container">
|
||||
<g:HTML styleName="progress myBackground" ui:field='progressBarContainer' >
|
||||
<span class="blue" style="width: 100%;">
|
||||
<span id="upload-percent-number">0%</span>
|
||||
</span>
|
||||
</g:HTML>
|
||||
</div>
|
||||
</g:HTMLPanel>
|
||||
</ui:UiBinder>
|
||||
|
|
@ -104,6 +104,10 @@ h1 {
|
|||
sans-serif;
|
||||
}
|
||||
|
||||
.upladerMargin{
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
/* .baloonGoTop :HOVER { */
|
||||
/* cursor: pointer; */
|
||||
/* color: #FFF; */
|
||||
|
|
|
|||
Loading…
Reference in New Issue