Permalink
Browse files

upload ui work - initial cut at reworking

  • Loading branch information...
1 parent 79ce428 commit 9cc4169be614a3f8b7167982f75972cb6f989ced @ischneider ischneider committed Aug 3, 2012
Showing with 162 additions and 86 deletions.
  1. +67 −67 media/script/layer_upload.js
  2. +95 −19 templates/upload/layer_upload.html
@@ -35,7 +35,7 @@ function init(options) {
cmp.setValue(value.split(/[/\\]/).pop());
}
};
- var form_fields = [layer_title,{
+ var form_fields = [{
xtype: "hidden",
name: "csrfmiddlewaretoken",
value: options.csrf_token
@@ -117,26 +117,48 @@ function init(options) {
var permissionsField = new Ext.form.Hidden({
name: "permissions"
});
+
+ function containerFromDom(id) {
+ return new Ext.Container({
+ contentEl : id
+ });
+ }
+
+ var zipMsg = containerFromDom('zip-msg').hide();
form_fields.push(base_file);
-
+ form_fields.push(zipMsg);
+ form_fields.push(sld_file);
+
if (options.is_featuretype) {
form_fields = form_fields.concat(dbf_file, shx_file, prj_file);
}
-
+
+ form_fields.push(containerFromDom('notes'));
+ form_fields.push(containerFromDom('about-data'));
+
+ form_fields.push(layer_title);
if (!options.layer_name) {
- form_fields = form_fields.concat(sld_file,abstractField,permissionsField);
+ form_fields = form_fields.concat(abstractField,permissionsField);
+ }
+
+ function errorHandler(fp, o) {
+ var html = '', msgs = Ext.get('form-messages');
+ for (var i = 0; i < o.result.errors.length; i++) {
+ html += '<li>' + o.result.errors[i] + '</li>'
+ }
+ msgs.query('ul')[0].innerHTML = html;
+ msgs.slideIn('t');
}
var fp = new Ext.FormPanel({
renderTo: 'upload_form',
fileUpload: true,
- width: 500,
+ width: 600,
frame: true,
autoHeight: true,
unstyled: true,
labelWidth: 50,
- bodyStyle: 'padding: 10px 10px 0 10px;',
defaults: {
anchor: '95%',
msgTarget: 'side'
@@ -152,22 +174,7 @@ function init(options) {
success: function(fp, o) {
document.location = o.result.redirect_to;
},
- failure: function(fp, o) {
- error_message = '<ul>';
- for (var i = 0; i < o.result.errors.length; i++) {
- error_message += '<li>' + o.result.errors[i] + '</li>'
- }
- error_message += '</ul>'
-
- Ext.Msg.show({
- title: gettext("Error"),
- msg: error_message,
- minWidth: 200,
- modal: true,
- icon: Ext.Msg.ERROR,
- buttons: Ext.Msg.OK
- });
- }
+ failure: errorHandler
});
}
}
@@ -186,16 +193,21 @@ function init(options) {
prj_file.show();
};
- var check_shapefile = function() {
+ var checkFileType = function() {
if ((/\.shp$/i).test(base_file.getValue())) {
enable_shapefile_inputs();
} else {
disable_shapefile_inputs();
}
+ if ((/\.zip$/i).test(base_file.getValue())) {
+ zipMsg.show();
+ } else {
+ zipMsg.hide();
+ }
};
base_file.addListener('fileselected', function(cmp, value) {
- check_shapefile();
+ checkFileType();
});
if (options.layer_name) {
@@ -238,7 +250,7 @@ function init(options) {
// this is the single file drop - it may be a tiff or a shp file or a zip
if (files.length == 1 && !dbf_file.isVisible()) {
base_file.setValue(files[i].name);
- check_shapefile();
+ checkFileType();
dropped_files.base_file = files[i];
} else {
// multiple file drop
@@ -261,30 +273,17 @@ function init(options) {
}
};
- // drop target w/ drag over/exit effects
- var dropPanel = new Ext.Container({
- html: "Drop Files Here",
- cls: 'x-panel-body',
- style: { borderWidth: '1px', borderStyle: 'solid', textAlign: 'center'},
- listeners: {
- render: function(p) {
- var el = p.getEl().dom;
- function t() {p.getEl().toggleClass('x-grid3-cell-selected');}
- el.addEventListener("dragover", function(ev) {
- ev.stopPropagation();
- ev.preventDefault();
- }, true);
- el.addEventListener("drop", function(ev) {
- p.getEl().removeClass('x-grid3-cell-selected');
- drop(ev);
- },false);
- el.addEventListener("dragexit",t);
- el.addEventListener("dragenter",t);
- }
- }
- });
- fp.add(dropPanel);
- fp.doLayout();
+ var dropTarget = Ext.get("drop-target");
+ function t() {
+ dropTarget.toggleClass('drop-hover');
+ }
+ Ext.get("drop-target").addListener("dragover", function(ev) {
+ ev.stopPropagation();
+ ev.preventDefault();
+ }).addListener("drop", function(ev) {
+ dropTarget.removeClass('drop-hover');
+ drop(ev.browserEvent);
+ }).addListener("dragexit",t).addListener("dragenter",t).setStyle('display','block');
function createDragFormData() {
var data = new FormData(), id, value, fields = fp.getForm().getFieldValues(), size = 0;
@@ -320,24 +319,11 @@ function init(options) {
function error(ev,result) {
var error_message;
- if (typeof result != 'undefined') {
- error_message = '<ul>';
- for (var i = 0; i < result.errors.length; i++) {
- error_message += '<li>' + result.errors[i] + '</li>'
- }
- error_message += '</ul>'
- } else {
- error_message = "Unexpected Error:<p>" + xhr.responseText;
+ if (typeof result == 'undefined') {
+ result = ["Unexpected Error: " + xhr.responseText];
}
-
- Ext.Msg.show({
- title: gettext("Error"),
- msg: error_message,
- minWidth: 200,
- modal: true,
- icon: Ext.Msg.ERROR,
- buttons: Ext.Msg.OK
- });
+ progress.hide();
+ errorHandler(ev, {result:result});
}
xhr.addEventListener('load', function(ev) {
try {
@@ -368,4 +354,18 @@ function init(options) {
}
}
}
-}
+
+ Ext.select('.uip .icon-trash').on('click',function(ev) {
+ ev.preventDefault();
+ var a = new Ext.Element(this);
+ Ext.Ajax.request({
+ url : a.getAttribute('href'),
+ success : function() {
+ a.parent('.uip').slideOut('t',{useDisplay:true})
+ },
+ failure : function() {
+ alert('Uh oh. An error occurred.')
+ }
+ })
+ });
+}
@@ -1,4 +1,5 @@
{% extends "no_bottom_layout.html" %}
+{% load mapstory_tags %}
{% load i18n %}
{% block title %} {% trans "Upload Layer" %} - {{ block.super }} {% endblock %}
@@ -8,31 +9,69 @@
{% include "geonode/geo_header.html" %}
<link rel="stylesheet" type="text/css" href="{{ GEONODE_CLIENT_LOCATION }}theme/ux/fileuploadfield/fileuploadfield.css"/>
{{ block.super }}
+<style type="text/css">
+ .threecol p {
+ margin: 1em 0;
+ }
+ .threecol .uip {
+ border-bottom: 1px solid #F3F2F2;
+ padding: .5em 0;
+ margin: .5em 0;
+ }
+ #permissions_form {
+ display: none;
+ }
+ .filetypes li {
+ list-style: disc outside;
+ font-size: 13px;
+ }
+ .filetypes {
+ margin-left: 3em;
+ }
+ .mrg {
+ margin: 1em 0;
+ }
+ #drop-target {
+ border: 1px solid #F5C09A; background: #FCFCFC; color: #888;
+ display: none;
+ padding: 2em;
+ text-align: center;
+ font-size: larger;
+ }
+ #drop-target.drop-hover {
+ border: 1px solid #F56600; background: #FCF7F7; color: #333;
+ }
+</style>
{% endblock %}
{% block main %}
<div class="twocol">
<h2>{% trans "Add data" %}</h2>
- {% if incomplete %}
- <h3>Incomplete Uploads</h3>
- <p>You have the following incomplete uploads:</p>
- {% for u in incomplete %}
- <div class="clearfix" style="border: 1px solid gray; padding: .5em; margin: .5em">
- <div style="float:left">{{ u.name }}, last updated on {{ u.date }}</div>
- <div class="upload_actions" style="float:right">
- <a class="btn btn-mini" href="{{ u.get_resume_url }}">Resume</a>
- <a class="btn btn-mini" href="{{ u.get_delete_url }}">Delete</a>
- </div>
- </div>
- {% endfor %}
- {% endif %}
-
- <p class="alert alert-error">Note that time support in MapStory is currently limited to everything from 1AD
- until the reasonable future (5,874,897 AD).</p>
- <p class="alert alert-error">Uploading of zip files is also supported. The zip file must contain the
- appropriate shapefiles (.shp,.dbf,.prj) in the top-level directory.
+ <p style="margin-bottom:1em;">To get started, upload some data.
+ {% if incomplete %}
+ Note: you also have some uploads in progress. For a full list, look under
+ "Uploads in Progress" at right.
+ {% endif %}
+ </p>
+ <p>MapStory currently supports the data formats listed below
+ ({% manual_link "upload-support" "tell me more about these formats" %}):
</p>
+ <ul class="filetypes">
+ <li>ESRI Shapefile (.shp)</li>
+ <li>CSV (.csv) with latitude and longitude columns.</li>
+ <li>Zip (.zip) file containing all files in the top-level directory</li>
+ </ul>
+ <p>
+ Optional: You may provide an SLD file.
+ </p>
+
+ <div id="form-messages" class="mrg alert alert-error hide">
+ <p>We weren't able to process your upload :</p>
+ <ul>
+ </ul>
+ </div>
+ <div id="drop-target" class="mrg">Drag and Drop Files Here</div>
{% if enough_storage %}
{% if display_storage_stats %}
<p class="alert alert-error">There are currently {{ storage_remaining }} of space left on this server.
@@ -53,6 +92,19 @@
{% if enough_storage %}
<div id="upload_form">
+ <p id="zip-msg" class="alert alert-warn">Just a reminder: for MapStory to process a ZIP file,
+ all required files must be in the top-level directory of the ZIP file. Feedback cannot be
+ given until the file is uploaded.
+ {% manual_link "upload-zip" "Learn More &#187;" %}
+ </p>
+ <p id="notes">
+ <strong>Note:</strong> time support in MapStory is currently limited to everything from 1AD
+ until the reasonable future (5,874,897 AD).
+ </p>
+ <div id="about-data">
+ <hr>
+ <h3>About the Data</h3>
+ </div>
</div>
</div>
<script type="text/javascript" src="{{ STATIC_URL }}script/layer_upload.js"></script>
@@ -74,9 +126,33 @@
{% block sidebar %}
<div class="threecol">
+{% if incomplete %}
+<h3>Uploads In Progress</h3>
+{% for u in incomplete %}
+<div class="clearfix uip">
+ <div style="float:left">
+ <a href="{{ u.get_resume_url }}">{{ u.name }}</a><br/>
+ {{ u.date|date:"N j,Y"}}
+ </div>
+ <div class="upload_actions" style="float:right">
+ <a class="icon-trash" href="{{ u.get_delete_url }}" title="Delete"></a>
+ </div>
+</div>
+{% endfor %}
+{% endif %}
+
+<h3>Tips</h3>
+<p>To upload a StoryLayer, the following files are required: *.shp, *.dbf, and
+*.shx. A *.prj is strongly suggested and an optional *.sld file may be provided.
+</p>
+<p>You can also upload all the required files as a ZIP file.
+</p>
+<p>For more help, see the {% manual_link "uploads" "manual" %}</p>
+
{% if enough_storage %}
-<h3>{%trans "Permissions" %}</h3>
+<!--<h3>{%trans "Permissions" %}</h3>-->
<div id="permissions_form"></div>
{% endif %}
+
{% endblock %}

0 comments on commit 9cc4169

Please sign in to comment.