mirror of
https://github.com/Esri/offline-editor-js.git
synced 2025-12-15 15:20:05 +00:00
temporarily deprecating attachments editor sample
This commit is contained in:
andygup
parent
0dcc18a942
commit
5fab90f43f
@ -1,347 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
|
||||
on iOS devices-->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
|
||||
<title>SanFrancisco311 - Incidents</title>
|
||||
|
||||
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
|
||||
<style>
|
||||
html, body { height: 100%; width: 100%; margin: 0; overflow: hidden; }
|
||||
#map { height: 100%; padding: 0;}
|
||||
#footer { height: 2em; text-align: center; font-size: 1.1em; padding: 0.5em; }
|
||||
.dj_ie .infowindow .window .top .right .user .content { position: relative; }
|
||||
.dj_ie .simpleInfoWindow .content {position: relative;}
|
||||
|
||||
#connectivityIndicator,#storageInfo
|
||||
{
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#connectivityIndicator { color: white; background-color: #aaa; font-size: 16px; }
|
||||
#connectivityIndicator.online { background-color: #0C0; }
|
||||
#connectivityIndicator.offline { background-color: #E00; }
|
||||
#connectivityIndicator.reconnecting { background-color: orange; }
|
||||
|
||||
#pendingEdits {
|
||||
border: 1px solid black;
|
||||
overflow: scroll;
|
||||
height: 400px;
|
||||
margin: 0px;
|
||||
list-style: none;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#pendingEdits li {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
var locationPath = location.pathname.replace(/\/[^/]+$/, "");
|
||||
var dojoConfig = {
|
||||
paths: {
|
||||
edit: locationPath + "/../lib/edit",
|
||||
vendor: locationPath + "/../vendor"
|
||||
}
|
||||
}
|
||||
window.proxyPath = "../lib/resource-proxy/proxy.php";
|
||||
</script>
|
||||
|
||||
<script src="http://js.arcgis.com/3.8/"></script>
|
||||
<script src="../vendor/offline/offline.min.js"></script>
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
var map;
|
||||
|
||||
require([
|
||||
"esri/map",
|
||||
"esri/layers/FeatureLayer",
|
||||
"esri/dijit/editing/AttachmentEditor",
|
||||
"esri/config",
|
||||
|
||||
"dojo/parser", "dojo/dom", "dojo/dom-class",
|
||||
"dojo/dom-construct",
|
||||
|
||||
"edit/offlineFeaturesManager",
|
||||
"edit/editsStore",
|
||||
"dojo/on",
|
||||
|
||||
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
|
||||
], function(
|
||||
Map, FeatureLayer, AttachmentEditor, esriConfig,
|
||||
parser, dom, domClass, domConstruct, OfflineFeaturesManager, editsStore, on
|
||||
) {
|
||||
parser.parse();
|
||||
|
||||
var featureLayers = [], featureLayer;
|
||||
|
||||
// a proxy page is required to upload attachments
|
||||
// refer to "Using the Proxy Page" for more information: https://developers.arcgis.com/en/javascript/jshelp/ags_proxy.html
|
||||
//esriConfig.defaults.io.proxyUrl = "../lib/proxy.php";
|
||||
esriConfig.defaults.io.proxyUrl = "../lib/resource-proxy/proxy.php";
|
||||
|
||||
var offlineFeaturesManager = new OfflineFeaturesManager();
|
||||
offlineFeaturesManager.on(offlineFeaturesManager.events.EDITS_ENQUEUED, updateStatus);
|
||||
offlineFeaturesManager.on(offlineFeaturesManager.events.EDITS_SENT, updateStatus);
|
||||
offlineFeaturesManager.on(offlineFeaturesManager.events.ALL_EDITS_SENT, updateStatus);
|
||||
offlineFeaturesManager.on(offlineFeaturesManager.events.ATTACHMENTS_ADD, updateStatusAttachments);
|
||||
offlineFeaturesManager.on(offlineFeaturesManager.events.ATTACHMENTS_INFO, updateStatusAttachments);
|
||||
offlineFeaturesManager.on(offlineFeaturesManager.events.ATTACHMENTS_SENT, updateStatusAttachments);
|
||||
offlineFeaturesManager.on(offlineFeaturesManager.events.ATTACHMENTS_DELETED, updateStatusAttachments);
|
||||
|
||||
configUI();
|
||||
|
||||
map = new Map("map", {
|
||||
basemap: "streets",
|
||||
center: [-122.427, 37.769],
|
||||
zoom: 17
|
||||
});
|
||||
map.on("load", mapLoaded);
|
||||
map.on("add-attachment-complete",function(evt){
|
||||
console.log("add attachment complete")
|
||||
})
|
||||
|
||||
function mapLoaded() {
|
||||
featureLayer = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/SanFrancisco/311Incidents/FeatureServer/0",{
|
||||
mode: FeatureLayer.MODE_ONDEMAND
|
||||
});
|
||||
|
||||
map.infoWindow.setContent("<div id='content' style='width:100%'></div>");
|
||||
map.infoWindow.resize(350,200);
|
||||
var attachmentEditor = new AttachmentEditor({}, dom.byId("content"));
|
||||
attachmentEditor.startup();
|
||||
|
||||
featureLayer.on("click", function(evt) {
|
||||
var event = evt;
|
||||
var objectId = evt.graphic.attributes[featureLayer.objectIdField];
|
||||
map.infoWindow.setTitle(objectId);
|
||||
// featureLayer.queryAttachmentInfos(objectId,function(evt){
|
||||
// console.log("TEST TEST")
|
||||
// },function(err){
|
||||
// console.log("Problem querying attachments: " + err.toString())
|
||||
// })
|
||||
|
||||
// featureLayer.addAttachment(objectId,dom.byId("upload-test"),function(evt){
|
||||
// console.log("TEST ADD callback: " + evt);
|
||||
// attachmentEditor.showAttachments(event.graphic,featureLayer);
|
||||
// map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
|
||||
// },function(err){
|
||||
// console.log("TEST ADD error: " + err)
|
||||
// })
|
||||
|
||||
attachmentEditor.showAttachments(event.graphic,featureLayer);
|
||||
map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
|
||||
|
||||
});
|
||||
|
||||
map.on('layer-add-result', initEditor);
|
||||
|
||||
map.addLayer(featureLayer);
|
||||
}
|
||||
|
||||
function configUI(){
|
||||
on(dom.byId('storageInfo'), 'click', updateStorageInfo);
|
||||
on(dom.byId('clear-pending-edits-btn'),'click', clearPendingEdits);
|
||||
on(dom.byId('go-offline-btn'),'click', goOffline);
|
||||
on(dom.byId('go-online-btn'),'click', goOnline);
|
||||
on(dom.byId('refresh-feature-layers-btn'),'click', refreshFeatureLayer);
|
||||
|
||||
updateConnectivityIndicator();
|
||||
updateStorageInfo();
|
||||
Offline.options = {
|
||||
checks: {
|
||||
image: {
|
||||
url: function() {
|
||||
return 'http://web.local/offline-editor-js/tiny-image.png?_=' + (Math.floor(Math.random() * 1000000000));
|
||||
}
|
||||
},
|
||||
active: 'image'
|
||||
}
|
||||
}
|
||||
|
||||
Offline.on('up', goOnline );
|
||||
Offline.on('down', goOffline );
|
||||
}
|
||||
|
||||
function initEditor(evt){
|
||||
|
||||
if(evt.layer.hasOwnProperty("type") && evt.layer.type == "Feature Layer"){
|
||||
|
||||
try{
|
||||
|
||||
var test = featureLayer.allowGeometryUpdates; console.log("type " + test)
|
||||
offlineFeaturesManager.extend(featureLayer,function(success){
|
||||
console.log("extend ");
|
||||
if(success){
|
||||
|
||||
}
|
||||
});
|
||||
layer.on('update-end', logCurrentObjectIds);
|
||||
|
||||
//handle errors that happen while storing offline edits
|
||||
offlineFeaturesManager.on(offlineFeaturesManager.events.EDITS_ENQUEUED, function(results)
|
||||
{
|
||||
var errors = Array.prototype.concat(
|
||||
results.addResults.filter(function(r){ return !r.success }),
|
||||
results.updateResults.filter(function(r){ return !r.success }),
|
||||
results.deleteResults.filter(function(r){ return !r.success })
|
||||
);
|
||||
|
||||
if( errors.length )
|
||||
{
|
||||
var messages = errors.map(function(e){ return e.error.message });
|
||||
alert("Error editing features: " + messages.join('\n'));
|
||||
}
|
||||
});
|
||||
|
||||
updatePendingEditsList();
|
||||
|
||||
}
|
||||
catch(err){
|
||||
console.log("initEditor: " + err.toString());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function logCurrentObjectIds(evt)
|
||||
{
|
||||
var layers = ( evt && evt.target )? [evt.target] : featureLayers;
|
||||
layers.forEach(function(layer)
|
||||
{
|
||||
var objectIds = layer.graphics.map( function(g) { return g.attributes[ layer.objectIdField ];});
|
||||
console.log(layer.name, objectIds);
|
||||
});
|
||||
}
|
||||
|
||||
function updatePendingEditsList()
|
||||
{
|
||||
var li;
|
||||
domConstruct.empty('pendingEdits');
|
||||
if( editsStore.hasPendingEdits())
|
||||
{
|
||||
var edits = editsStore._retrieveEditsQueue();
|
||||
edits.forEach(function(edit)
|
||||
{
|
||||
var readableEdit = offlineFeaturesManager.getReadableEdit(edit);
|
||||
li = "<li>" + readableEdit + "</li>";
|
||||
domConstruct.place(li, 'pendingEdits','last');
|
||||
},this);
|
||||
}
|
||||
else
|
||||
{
|
||||
li = "<li>No edits pending</li>";
|
||||
domConstruct.place(li, 'pendingEdits','last');
|
||||
}
|
||||
}
|
||||
|
||||
function updateStatus(){
|
||||
//TODO
|
||||
}
|
||||
|
||||
function updateStatusAttachments(evt){
|
||||
console.log("updateStatusAttachmentsRcvd")
|
||||
}
|
||||
|
||||
function goOnline(){
|
||||
offlineFeaturesManager.goOnline(function()
|
||||
{
|
||||
updateConnectivityIndicator();
|
||||
});
|
||||
}
|
||||
|
||||
function goOffline(){
|
||||
offlineFeaturesManager.goOffline();
|
||||
updateConnectivityIndicator();
|
||||
}
|
||||
|
||||
function clearPendingEdits()
|
||||
{
|
||||
editsStore.resetEditsQueue();
|
||||
updateStatus();
|
||||
}
|
||||
|
||||
function refreshFeatureLayer()
|
||||
{
|
||||
featureLayer.refresh();
|
||||
}
|
||||
|
||||
function updateConnectivityIndicator()
|
||||
{
|
||||
var node = dom.byId('connectivityIndicator');
|
||||
domClass.remove(node, "online offline reconnecting");
|
||||
switch( offlineFeaturesManager.getOnlineStatus() )
|
||||
{
|
||||
case offlineFeaturesManager.OFFLINE:
|
||||
node.innerHTML = "<i class='fa fa-chain-broken'></i> offline";
|
||||
domClass.add(node, "offline");
|
||||
break;
|
||||
case offlineFeaturesManager.ONLINE:
|
||||
node.innerHTML = "<i class='fa fa-link'></i> online";
|
||||
domClass.add(node, "online");
|
||||
break;
|
||||
case offlineFeaturesManager.RECONNECTING:
|
||||
node.innerHTML = "<i class='fa fa-cog fa-spin'></i> reconnecting";
|
||||
domClass.add(node, "reconnecting");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function updateStorageInfo()
|
||||
{
|
||||
var formatMb = function(bytes)
|
||||
{
|
||||
return Math.floor(bytes / 1024 / 1024 * 100)/100 + " MBs";
|
||||
}
|
||||
var localStorageSizeBytes = editsStore.getLocalStorageSizeBytes();
|
||||
var editsStoreSizeBytes = editsStore.getEditsStoreSizeBytes();
|
||||
|
||||
var info = "Used " + formatMb(localStorageSizeBytes) + " (" + formatMb(editsStoreSizeBytes) + ")";
|
||||
dom.byId('storageInfo').innerHTML = info;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div data-dojo-type="dijit/layout/BorderContainer"
|
||||
data-dojo-props="design:'headline'"
|
||||
style="width:100%;height:100%;">
|
||||
|
||||
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width: 200px;overflow:hidden;">
|
||||
<div id="connectivityPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
|
||||
<div id="connectivityIndicator" >unknown</div>
|
||||
</div>
|
||||
<div id="storageInfoPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
|
||||
<div id="storageInfo">Storage used: 0 MBs</div>
|
||||
</div>
|
||||
<div id="pendingEditsPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-propos="region:'top'">
|
||||
<button style="width:60%" id="clear-pending-edits-btn" class="btn1">Clear Local Edits</button>
|
||||
<button style="width:38%" id="go-offline-btn" class="btn1">Go Offline</button>
|
||||
<button style="width:60%" id="refresh-feature-layers-btn" class="btn1">Refresh Layers</button>
|
||||
<button style="width:38%" id="go-online-btn" class="btn1">Go Online</button>
|
||||
<ul id="pendingEdits"></ul>
|
||||
</div>
|
||||
<form id="upload-test" action="/" method="post" name="upload">
|
||||
<input type="file" name="attachment" />
|
||||
<button type="submit" name="submit">Upload</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="map"
|
||||
data-dojo-type="dijit/layout/ContentPane"
|
||||
data-dojo-props="region:'center'"></div>
|
||||
|
||||
<div id="footer"
|
||||
data-dojo-type="dijit/layout/ContentPane"
|
||||
data-dojo-props="region:'bottom'">
|
||||
Click point to view/create/delete attachments.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user