mirror of
https://github.com/Esri/offline-editor-js.git
synced 2025-12-15 15:20:05 +00:00
320 lines
12 KiB
HTML
320 lines
12 KiB
HTML
<!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>Basic Attachments</title>
|
|
|
|
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" >
|
|
<link rel="stylesheet" href="//js.arcgis.com/3.14/esri/css/esri.css">
|
|
<style>
|
|
html, body { height: 100%; width: 100%; margin: 0; overflow: hidden; font-family: Arial; }
|
|
#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;}
|
|
|
|
#connectivity-indicator,#storage-info
|
|
{
|
|
text-align: center;
|
|
border: 1px solid black;
|
|
padding: 4px;
|
|
}
|
|
|
|
#connectivity-indicator { color: white; background-color: #aaa; font-size: 16px; }
|
|
#connectivity-indicator.online { background-color: #0C0; }
|
|
#connectivity-indicator.offline { background-color: #E00; }
|
|
#connectivity-indicator.reconnecting { background-color: orange; }
|
|
|
|
#local-attachments-list {
|
|
border: 1px solid black;
|
|
overflow: scroll;
|
|
height: 400px;
|
|
margin: 0px;
|
|
list-style: none;
|
|
padding: 4px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
#local-attachments-list li {
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
</style>
|
|
|
|
<script src="//js.arcgis.com/3.14/"></script>
|
|
<script src="//github.hubspot.com/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",
|
|
|
|
"dojo/on",
|
|
|
|
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
|
|
|
|
"../dist/offline-edit-advanced-src.js",
|
|
|
|
"dojo/domReady!"
|
|
], function(
|
|
Map,FeatureLayer,AttachmentEditor,esriConfig,
|
|
parser,dom,domClass,domConstruct,on
|
|
)
|
|
{
|
|
parser.parse();
|
|
|
|
var featureLayer,
|
|
attachmentsInited = false;
|
|
|
|
// window.proxyPath = null; //can be set to null when using a CORS-enabled server
|
|
// esriConfig.defaults.io.proxyUrl = null; //can be set to null when using a CORS-enabled server
|
|
|
|
var offlineEdit = new O.esri.Edit.OfflineEditAdvanced();
|
|
|
|
// IMPORTANT!!!
|
|
// A proxy page may be required to upload attachments.
|
|
// If you are using a CORS enabled server you may be ablew to set the proxyPath to null.
|
|
// Refer to "Using the Proxy Page" for more information: https://developers.arcgis.com/en/javascript/jshelp/ags_proxy.html
|
|
offlineEdit.proxyPath = null;
|
|
|
|
offlineEdit.initAttachments(function(success)
|
|
{
|
|
attachmentsInited = success;
|
|
updateStatus();
|
|
});
|
|
|
|
configUI();
|
|
|
|
map = new Map("map", {
|
|
basemap: "streets",
|
|
center: [-88.1,41.7],
|
|
zoom: 4
|
|
});
|
|
|
|
map.on("load", mapLoaded);
|
|
map.on("add-attachment-complete", updateStatus);
|
|
map.on("delete-attachments-complete", updateStatus);
|
|
map.on("query-attachment-infos-complete", updateStatus);
|
|
|
|
offlineEdit.on(offlineEdit.events.ATTACHMENT_ENQUEUED, updateStatus);
|
|
offlineEdit.on(offlineEdit.events.ATTACHMENTS_SENT, updateStatus);
|
|
|
|
function mapLoaded()
|
|
{
|
|
featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/ServiceRequest/FeatureServer/0",{
|
|
mode: FeatureLayer.MODE_SNAPSHOT
|
|
});
|
|
|
|
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);
|
|
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('storage-info'), 'click', updateStorageInfo);
|
|
on(dom.byId('clear-local-attachments-btn'),'click', clearLocalAttachments);
|
|
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();
|
|
updateStatus();
|
|
|
|
Offline.check();
|
|
Offline.on('up', goOnline );
|
|
Offline.on('down', goOffline );
|
|
}
|
|
|
|
function initEditor(evt)
|
|
{
|
|
if(evt.layer.hasOwnProperty("type") && evt.layer.type == "Feature Layer")
|
|
{
|
|
try
|
|
{
|
|
var layer = evt.layer;
|
|
|
|
offlineEdit.extend(featureLayer,function(success, error){
|
|
if(success == false) alert("There was a problem initiating the database. " + error);
|
|
});
|
|
}
|
|
catch(err)
|
|
{
|
|
console.log("initEditor: " + err.toString());
|
|
}
|
|
}
|
|
}
|
|
|
|
function goOnline()
|
|
{
|
|
offlineEdit.goOnline(function()
|
|
{
|
|
updateConnectivityIndicator();
|
|
updateStatus();
|
|
});
|
|
updateConnectivityIndicator();
|
|
}
|
|
|
|
function goOffline()
|
|
{
|
|
offlineEdit.goOffline();
|
|
updateConnectivityIndicator();
|
|
}
|
|
|
|
function clearLocalAttachments()
|
|
{
|
|
offlineEdit.attachmentsStore.deleteAll(function(success)
|
|
{
|
|
updateStatus();
|
|
});
|
|
}
|
|
|
|
function refreshFeatureLayer()
|
|
{
|
|
featureLayer.refresh();
|
|
}
|
|
|
|
function updateStatus()
|
|
{
|
|
updateLocalAttachmentsList();
|
|
updateStorageInfo();
|
|
}
|
|
|
|
function updateLocalAttachmentsList()
|
|
{
|
|
if(!attachmentsInited)
|
|
return;
|
|
|
|
domConstruct.empty('local-attachments-list');
|
|
offlineEdit.attachmentsStore.getAllAttachments(function(attachments)
|
|
{
|
|
var li;
|
|
if( attachments.length )
|
|
{
|
|
attachments.forEach(function(attachment)
|
|
{
|
|
var readableAttachment =
|
|
"<a target='_blank' href='" + attachment.url + "'>" + attachment.name + "</a>, " +
|
|
"feature: <a target='_blank' href='" + attachment.featureId + "'>" + attachment.objectId + "</a>";
|
|
|
|
li = "<li>" + readableAttachment + "</li>";
|
|
domConstruct.place(li, 'local-attachments-list','last');
|
|
},this);
|
|
}
|
|
else
|
|
{
|
|
li = "<li>No local attachments</li>";
|
|
domConstruct.place(li, 'local-attachments-list','last');
|
|
}
|
|
});
|
|
}
|
|
|
|
function updateConnectivityIndicator()
|
|
{
|
|
var node = dom.byId('connectivity-indicator');
|
|
domClass.remove(node, "online offline reconnecting");
|
|
switch( offlineEdit.getOnlineStatus() )
|
|
{
|
|
case offlineEdit.OFFLINE:
|
|
node.innerHTML = "<i class='fa fa-chain-broken'></i> offline";
|
|
domClass.add(node, "offline");
|
|
break;
|
|
case offlineEdit.ONLINE:
|
|
node.innerHTML = "<i class='fa fa-link'></i> online";
|
|
domClass.add(node, "online");
|
|
break;
|
|
case offlineEdit.RECONNECTING:
|
|
node.innerHTML = "<i class='fa fa-cog fa-spin'></i> reconnecting";
|
|
domClass.add(node, "reconnecting");
|
|
break;
|
|
}
|
|
}
|
|
|
|
function formatSize(sizeInBytes)
|
|
{
|
|
if( sizeInBytes < 1024 )
|
|
{
|
|
return sizeInBytes + " bytes";
|
|
}
|
|
else if( sizeInBytes < 1024 * 1024 )
|
|
{
|
|
return (Math.floor(sizeInBytes / 1024 * 10) / 10) + " Kb";
|
|
}
|
|
|
|
return (Math.floor(sizeInBytes / 1024 / 1024 * 10) / 10) + " Mb";
|
|
}
|
|
|
|
function updateStorageInfo()
|
|
{
|
|
if(!attachmentsInited)
|
|
return;
|
|
|
|
offlineEdit.attachmentsStore.getUsage(function(usage)
|
|
{
|
|
var str = "attachment" + ((usage.attachmentCount === 1)? "" : "s");
|
|
var info = usage.attachmentCount + " " + str + " (" + formatSize( usage.sizeBytes) + ")";
|
|
dom.byId('storage-info').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='connectivity-pane' data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
|
|
<div id='connectivity-indicator' >unknown</div>
|
|
</div>
|
|
<div id='storage-info-pane' data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
|
|
<div id='storage-info'>Storage used: 0 MBs</div>
|
|
</div>
|
|
<div id='local-attachments-list-pane' data-dojo-type="dijit/layout/ContentPane" data-dojo-propos="region:'top'">
|
|
<button style="width:100%" id="clear-local-attachments-btn" class="btn1">Clear Attachments</button>
|
|
<button style="width:100%" id="go-offline-btn" class="btn1">Go Offline</button>
|
|
<button style="width:100%" id="refresh-feature-layers-btn" class="btn1">Refresh Layers</button>
|
|
<button style="width:100%" id="go-online-btn" class="btn1">Go Online</button>
|
|
<ul id='local-attachments-list'></ul>
|
|
</div>
|
|
</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>
|