aboutsummaryrefslogtreecommitdiff
path: root/src/index.html
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2012-04-29 07:26:44 +0000
committerAnton Tananaev <anton.tananaev@gmail.com>2012-04-29 07:26:44 +0000
commit933639c9ae85204011b40540584bc2c2058e4a52 (patch)
tree3f6eaeff9e245888fc26349d95d4b572e2aefd7f /src/index.html
parent3291206a50732601dedec5aa4982a8d6db87e16e (diff)
downloadtrackermap-server-933639c9ae85204011b40540584bc2c2058e4a52.tar.gz
trackermap-server-933639c9ae85204011b40540584bc2c2058e4a52.tar.bz2
trackermap-server-933639c9ae85204011b40540584bc2c2058e4a52.zip
Diffstat (limited to 'src/index.html')
-rw-r--r--src/index.html213
1 files changed, 213 insertions, 0 deletions
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 000000000..1b782db82
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,213 @@
+<!doctype html>
+<html>
+<head>
+<title>Traccar Manager</title>
+<link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all.css" />
+<script type="text/javascript" src="http://cdn.sencha.io/ext-4.1.0-gpl/ext-all.js"></script>
+
+<!-- WARNING: integrate to page -->
+<!-- <script type="text/javascript" src="https://raw.github.com/VinylFox/ExtJS.ux.GMapPanel/master/src/GMapPanel3.js"></script> -->
+
+<script type="text/javascript">
+Ext.onReady(function() {
+
+ Ext.define('Device', {
+ extend: 'Ext.data.Model',
+ fields: [
+ {name: 'id', type: 'int'},
+ {name: 'imei',type: 'string'}
+ ]
+ });
+
+ Ext.define('Position', {
+ extend: 'Ext.data.Model',
+ fields: [
+ {name: 'device_id', type: 'int'},
+ {name: 'time', type: 'date'},
+ {name: 'valid', type: 'boolean'},
+ {name: 'latitude', type: 'float'},
+ {name: 'longitude', type: 'float'},
+ {name: 'speed', type: 'float'},
+ {name: 'course', type: 'float'},
+ {name: 'power', type: 'float'}
+ ]
+ });
+
+ var devicesUrl = 'devices.json';
+ var positionsUrl = 'positions.json';
+
+ var devices = Ext.create('Ext.data.Store', {
+ id: 'devices',
+ model: 'Device',
+ fields: ['id', 'imei'],
+ proxy: {
+ type: 'ajax',
+ url: devicesUrl,
+ reader: {
+ type: 'json',
+ root: 'results'
+ }
+ }
+ });
+
+ var positions = Ext.create('Ext.data.Store', {
+ id: 'positions',
+ model: 'Position',
+ fields: [
+ 'device_id',
+ 'time',
+ 'valid',
+ 'latitude',
+ 'longitude',
+ 'speed',
+ 'course',
+ 'power'
+ ],
+ proxy: {
+ type: 'ajax',
+ url: positionsUrl,
+ reader: {
+ type: 'json',
+ root: 'results'
+ }
+ }
+ });
+
+ console.log(positions);
+
+ var devicesPanel = Ext.create('Ext.grid.Panel', {
+ title: 'Devices',
+ region: 'west',
+ split: true,
+ width: 300,
+ margins: {top: 5, bottom: 0, right: 0, left: 5},
+
+ sortableColumns: false,
+ enableColumnHide: false,
+
+ store: devices,
+ tbar: [
+ {
+ id: 'device_update',
+ text: 'Update',
+ handler : function() {
+ devices.load();
+ }
+ },
+ {
+ id: 'device_add',
+ text: 'Add',
+ handler : function() {
+ Ext.Msg.prompt('Add', 'Device IMEI:', function() {
+ });
+ }
+ },
+ {
+ id: 'device_remove',
+ text: 'Remove',
+ disabled: true,
+ handler : function() {
+ Ext.Msg.confirm('Remove', 'Are you sure to remove item?', function() {
+ });
+ }
+ },
+ {
+ id: 'device_edit',
+ text: 'Edit',
+ disabled: true,
+ handler : function() {
+ Ext.Msg.prompt('Edit', 'Device IMEI:', function() {
+ }, this, false, devicesPanel.getSelectionModel().getLastSelected().get('imei'));
+ }
+ }
+ ],
+ columns: [
+ {header: 'Id', dataIndex: 'id'},
+ {header: 'IMEI', dataIndex: 'imei', flex: 1}
+ ],
+ listeners: {
+ selectionchange: function(sender, selected, eOpts) {
+ if (selected.length != 0) {
+ Ext.getCmp('device_remove').enable();
+ Ext.getCmp('device_edit').enable();
+
+ positions.getProxy().url = positionsUrl + '?deviceId=' +
+ devicesPanel.getSelectionModel().getLastSelected().get('id');
+ positions.load();
+ Ext.getCmp('position_update').enable();
+ } else {
+ Ext.getCmp('position_update').disable();
+ positions.getProxy().url = positionsUrl;
+ positions.load();
+
+ Ext.getCmp('device_edit').disable();
+ Ext.getCmp('device_remove').disable();
+ }
+ }
+ }
+ });
+
+ var positionsPanel = Ext.create('Ext.grid.Panel', {
+ title: 'Positions',
+ region: 'south',
+ split: true,
+ height: 300,
+ margins: {top: 0, bottom: 5, right: 5, left: 5},
+
+ sortableColumns: false,
+ enableColumnHide: false,
+
+ store: positions,
+ tbar: [
+ {
+ id: 'position_update',
+ text: 'Update',
+ disabled: true,
+ handler : function() {
+ positions.load();
+ }
+ }
+ ],
+ columns: [
+ {header: 'Device Id', dataIndex: 'device_id'},
+ {
+ header: 'Time',
+ dataIndex: 'time',
+ flex: 1,
+ renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s')
+ },
+ {header: 'Valid', dataIndex: 'valid'},
+ {header: 'Latitude', dataIndex: 'latitude'},
+ {header: 'Longitude', dataIndex: 'longitude'},
+ {header: 'Speed', dataIndex: 'speed'},
+ {header: 'Course', dataIndex: 'course'},
+ {header: 'Power', dataIndex: 'power'}
+ ]
+ });
+
+ /*var map = Ext.create('Ext.ux.GMapPanel', {
+ id: 'gmap',
+ setCenter: {lat: 0, lng: 0}
+ });*/
+
+ var mapPanel = Ext.create('Ext.panel.Panel', {
+ title: 'Map',
+ region: 'center',
+ margins: {top: 5, bottom: 0, right: 5, left: 0}/*,
+
+ layout: 'fit',
+ items: [map]*/
+ });
+
+ Ext.create('Ext.container.Viewport', {
+ renderTo: Ext.getBody(),
+ layout: 'border',
+ items: [devicesPanel, positionsPanel, mapPanel]
+ });
+
+ devices.load();
+});
+</script>
+</head>
+<body></body>
+</html>