From bd09a39f12c4471bdc342e5a16fbabdffdc645d1 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Sun, 10 May 2015 18:11:40 +1200 Subject: Refactor web app architecture --- web/app/view/device/Device.js | 64 +++++++++++++++++++++++ web/app/view/device/DeviceController.js | 90 ++++++++++++++++++++++++++++++++ web/app/view/device/DeviceDialog.js | 51 ++++++++++++++++++ web/app/view/login/Login.js | 66 +++++++++++++++++++++++ web/app/view/login/LoginController.js | 61 ++++++++++++++++++++++ web/app/view/login/Register.js | 64 +++++++++++++++++++++++ web/app/view/login/RegisterController.js | 40 ++++++++++++++ web/app/view/main/Main.js | 48 +++++++++++++++++ web/app/view/map/Map.js | 88 +++++++++++++++++++++++++++++++ web/app/view/report/Report.js | 32 ++++++++++++ 10 files changed, 604 insertions(+) create mode 100644 web/app/view/device/Device.js create mode 100644 web/app/view/device/DeviceController.js create mode 100644 web/app/view/device/DeviceDialog.js create mode 100644 web/app/view/login/Login.js create mode 100644 web/app/view/login/LoginController.js create mode 100644 web/app/view/login/Register.js create mode 100644 web/app/view/login/RegisterController.js create mode 100644 web/app/view/main/Main.js create mode 100644 web/app/view/map/Map.js create mode 100644 web/app/view/report/Report.js (limited to 'web/app/view') diff --git a/web/app/view/device/Device.js b/web/app/view/device/Device.js new file mode 100644 index 000000000..4dfa13c44 --- /dev/null +++ b/web/app/view/device/Device.js @@ -0,0 +1,64 @@ +/* + * Copyright 2015 Anton Tananaev (anton.tananaev@gmail.com) + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +Ext.define('Traccar.view.device.Device', { + extend: 'Ext.grid.Panel', + xtype: 'device-view', + + requires: [ + 'Traccar.view.device.DeviceController' + ], + + controller: 'device', + + title: strings.device_title, + selType: 'rowmodel', + + tbar: [{ + text:'Add', + handler: 'onAddClick', + reference: 'deviceAddButton' + }, { + text:'Edit', + disabled: true, + handler: 'onEditClick', + reference: 'deviceEditButton' + }, { + text:'Remove', + disabled: true, + handler: 'onRemoveClick', + reference: 'deviceRemoveButton' + }, { + xtype: 'tbfill' + }, { + text:'Settings' + }, { + text:'Logout', + handler: 'onLogoutClick' + }], + + store: 'Devices', + + listeners: { + selectionchange: 'onSelectionChange' + }, + + columns: [ + { text: strings.device_name, dataIndex: 'name', flex: 1 }, + { text: strings.device_identifier, dataIndex: 'uniqueId', flex: 1 } + ] + +}); diff --git a/web/app/view/device/DeviceController.js b/web/app/view/device/DeviceController.js new file mode 100644 index 000000000..460ba3f9a --- /dev/null +++ b/web/app/view/device/DeviceController.js @@ -0,0 +1,90 @@ +/* + * Copyright 2015 Anton Tananaev (anton.tananaev@gmail.com) + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +Ext.define('Traccar.view.device.DeviceController', { + extend: 'Ext.app.ViewController', + alias: 'controller.device', + + requires: [ + 'Traccar.view.device.DeviceDialog' + ], + + onLogoutClick: function() { + Traccar.LoginManager.logout(); + }, + + onAddClick: function() { + var device = Ext.create('Traccar.model.Device'); + var dialog = Ext.create('Traccar.view.device.DeviceDialog'); + dialog.down('form').loadRecord(device); + dialog.show(); + }, + + onEditClick: function() { + var device = this.getView().getSelectionModel().getSelection()[0]; + var dialog = Ext.create('Traccar.view.device.DeviceDialog'); + dialog.down('form').loadRecord(device); + dialog.show(); + }, + + onRemoveClick: function() { + var device = this.getView().getSelectionModel().getSelection()[0]; + Ext.Msg.show({ + title: strings.device_dialog, + message: strings.device_remove, + buttons: Ext.Msg.YESNO, + buttonText: { + yes: strings.dialog_delete, + no: strings.dialog_cancel + }, + fn: function(btn) { + if (btn === 'yes') { + var store = Ext.getStore('Devices'); + store.remove(device); + store.sync(); + } + } + }); + }, + + onSelectionChange: function(selected) { + var disabled = selected.length > 0; + this.lookupReference('deviceEditButton').setDisabled(disabled); + this.lookupReference('deviceRemoveButton').setDisabled(disabled); + }, + + onSaveClick: function(button) { + var dialog = button.up('window').down('form'); + dialog.updateRecord(); + var store = Ext.getStore('Devices'); + var device = dialog.getRecord(); + if (device.phantom) { + store.add(device); + } + store.sync({ + failure: function(batch) { + store.rejectChanges(); // TODO + Traccar.ErrorManager.check(true, batch.exceptions[0].getResponse()); + } + }); + button.up('window').close(); + }, + + onCancelClick: function(button) { + button.up('window').close(); + } + +}); diff --git a/web/app/view/device/DeviceDialog.js b/web/app/view/device/DeviceDialog.js new file mode 100644 index 000000000..5e41d1ff4 --- /dev/null +++ b/web/app/view/device/DeviceDialog.js @@ -0,0 +1,51 @@ +/* + * Copyright 2015 Anton Tananaev (anton.tananaev@gmail.com) + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +Ext.define('Traccar.view.device.DeviceDialog', { + extend: 'Ext.window.Window', + xtype: 'device-dialog', + + controller: 'device', + + bodyPadding: styles.panel_padding, + title: strings.device_dialog, + resizable: false, + modal: true, + + items: { + xtype: 'form', + items: [{ + xtype: 'textfield', + name: 'name', + fieldLabel: strings.device_name, + allowBlank: false + }, { + xtype: 'textfield', + name: 'uniqueId', + fieldLabel: strings.device_identifier, + allowBlank: false + }] + }, + + buttons: [{ + text: strings.dialog_save, + handler: 'onSaveClick' + }, { + text: strings.dialog_cancel, + handler: 'onCancelClick' + }] + +}); diff --git a/web/app/view/login/Login.js b/web/app/view/login/Login.js new file mode 100644 index 000000000..3e23c4838 --- /dev/null +++ b/web/app/view/login/Login.js @@ -0,0 +1,66 @@ +/* + * Copyright 2015 Anton Tananaev (anton.tananaev@gmail.com) + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +Ext.define('Traccar.view.login.Login', { + extend: 'Ext.window.Window', + + requires: [ + 'Traccar.view.login.LoginController' + ], + + controller: 'login', + + bodyPadding: styles.panel_padding, + title: strings.login_title, + closable: false, + resizable: false, + modal: true, + + items: { + xtype: 'form', + reference: 'form', + + items: [{ + xtype: 'textfield', + name: 'email', + fieldLabel: strings.login_email, + allowBlank: false, + enableKeyEvents: true, + listeners: { + specialKey: 'onSpecialKey' + } + }, { + xtype: 'textfield', + name: 'password', + fieldLabel: strings.login_password, + inputType: 'password', + allowBlank: false, + enableKeyEvents: true, + listeners: { + specialKey: 'onSpecialKey' + } + }] + }, + + buttons: [{ + text: strings.login_register, + handler: 'onRegisterClick' + }, { + text: strings.login_login, + handler: 'onLoginClick' + }] + +}); diff --git a/web/app/view/login/LoginController.js b/web/app/view/login/LoginController.js new file mode 100644 index 000000000..a88fffc09 --- /dev/null +++ b/web/app/view/login/LoginController.js @@ -0,0 +1,61 @@ +/* + * Copyright 2015 Anton Tananaev (anton.tananaev@gmail.com) + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +Ext.define('Traccar.view.login.LoginController', { + extend: 'Ext.app.ViewController', + alias: 'controller.login', + + requires: [ + 'Traccar.view.login.Register' + ], + + onSpecialKey: function(field, e) { + if (e.getKey() === e.ENTER) { + this.doLogin(); + } + }, + + onLoginClick: function() { + this.doLogin(); + }, + + doLogin: function() { + var form = this.lookupReference('form'); + if (form.isValid()) { + Ext.getBody().mask(strings.shared_loading); + + Traccar.LoginManager.login({ + data: form.getValues(), + scope: this, + callback: 'onLoginReturn' + }); + } + }, + + onLoginReturn: function(success) { + Ext.getBody().unmask(); + if (success) { + this.fireViewEvent('login'); + } else { + Traccar.ErrorManager.error(strings.login_failed); + } + }, + + onRegisterClick: function() { + Ext.create('Traccar.view.login.Register').show(); + } + +}); diff --git a/web/app/view/login/Register.js b/web/app/view/login/Register.js new file mode 100644 index 000000000..b6b570efe --- /dev/null +++ b/web/app/view/login/Register.js @@ -0,0 +1,64 @@ +/* + * Copyright 2015 Anton Tananaev (anton.tananaev@gmail.com) + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +Ext.define('Traccar.view.login.Register', { + extend: 'Ext.window.Window', + + requires: [ + 'Traccar.view.login.RegisterController' + ], + + controller: 'register', + + bodyPadding: styles.panel_padding, + title: strings.login_register, + resizable: false, + modal: true, + + items: { + xtype: 'form', + reference: 'form', + jsonSubmit: true, + + items: [{ + xtype: 'textfield', + name: 'name', + fieldLabel: strings.login_name, + allowBlank: false + }, { + xtype: 'textfield', + name: 'email', + fieldLabel: strings.login_email, + vtype: 'email', + allowBlank: false + }, { + xtype: 'textfield', + name: 'password', + fieldLabel: strings.login_password, + inputType: 'password', + allowBlank: false + }] + }, + + buttons: [{ + text: strings.dialog_save, + handler: 'onCreateClick' + }, { + text: strings.dialog_cancel, + handler: 'closeView' + }] + +}); diff --git a/web/app/view/login/RegisterController.js b/web/app/view/login/RegisterController.js new file mode 100644 index 000000000..e690b56e8 --- /dev/null +++ b/web/app/view/login/RegisterController.js @@ -0,0 +1,40 @@ +/* + * Copyright 2015 Anton Tananaev (anton.tananaev@gmail.com) + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +Ext.define('Traccar.view.login.RegisterController', { + extend: 'Ext.app.ViewController', + alias: 'controller.register', + + onCreateClick: function() { + var form = this.lookupReference('form'); + if (form.isValid()) { + Ext.Ajax.request({ + scope: this, + url: '/api/register', + jsonData: form.getValues(), + callback: this.onCreateReturn + }); + } + }, + + onCreateReturn: function(options, success, response) { + if (Traccar.ErrorManager.check(success, response)) { + this.closeView(); + Ext.toast(strings.login_created); + } + } + +}); diff --git a/web/app/view/main/Main.js b/web/app/view/main/Main.js new file mode 100644 index 000000000..d6a350785 --- /dev/null +++ b/web/app/view/main/Main.js @@ -0,0 +1,48 @@ +/* + * Copyright 2015 Anton Tananaev (anton.tananaev@gmail.com) + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +Ext.define('Traccar.view.main.Main', { + extend: 'Ext.container.Viewport', + + requires: [ + 'Traccar.view.device.Device', + 'Traccar.view.report.Report', + 'Traccar.view.map.Map' + ], + + layout: 'border', + + defaults: { + collapsible: true, + split: true + }, + + items: [{ + region:'west', + xtype: 'device-view', + width: styles.device_width + }, { + region: 'south', + xtype: 'report-view', + header: false, + height: styles.report_height + }, { + region: 'center', + xtype: 'map-view', + collapsible: false + }] + +}); diff --git a/web/app/view/map/Map.js b/web/app/view/map/Map.js new file mode 100644 index 000000000..b63d87c9f --- /dev/null +++ b/web/app/view/map/Map.js @@ -0,0 +1,88 @@ +/* + * Copyright 2015 Anton Tananaev (anton.tananaev@gmail.com) + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +Ext.define('Traccar.view.map.Map', { + extend: 'Ext.form.Panel', + xtype: 'map-view', + + title: strings.map_title, + layout: 'fit', + + /*update: function() { + Ext.Ajax.request({ + scope: this, + url: '/api/async', + success: function(response) { + var data = Ext.decode(response.responseText).data; + + var i; + for (i = 0; i < data.length; i++) { + var iconFeature = new ol.Feature({ + geometry: new ol.geom.Point([30, 30]) + }); + this.vectorSource.addFeature(iconFeature); + } + + this.update(); + }, + failure: function() { + // error + } + }); + },*/ + + listeners: { + afterrender: function() { + + /*var bindKey = 'AseEs0DLJhLlTNoxbNXu7DGsnnH4UoWuGue7-irwKkE3fffaClwc9q_Mr6AyHY8F'; + + var layer = new ol.layer.Tile({ source: new ol.source.BingMaps({ + key: bindKey, + imagerySet: 'Road' + })}); + + var layer = new ol.layer.Tile({ source: new ol.source.BingMaps({ + key: bindKey, + imagerySet: 'Aerial' + })});*/ + + var layer = new ol.layer.Tile({ source: new ol.source.OSM({ + })}); + + this.vectorSource = new ol.source.Vector({}); + var vectorLayer = new ol.layer.Vector({ source: this.vectorSource }); + + var view = new ol.View({ + center: ol.proj.transform(styles.map_center, 'EPSG:4326', 'EPSG:3857'), + zoom: styles.map_zoom, + maxZoom: styles.map_max_zoom + }); + + this.map = new ol.Map({ + target: this.body.dom.id, + layers: [ layer, vectorLayer ], + view: view + }); + + //this.update(); + }, + + resize: function() { + this.map.updateSize(); + } + } + +}); diff --git a/web/app/view/report/Report.js b/web/app/view/report/Report.js new file mode 100644 index 000000000..29fa6248a --- /dev/null +++ b/web/app/view/report/Report.js @@ -0,0 +1,32 @@ +/* + * Copyright 2015 Anton Tananaev (anton.tananaev@gmail.com) + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +Ext.define('Traccar.view.report.Report', { + extend: 'Ext.grid.Panel', + xtype: 'report-view', + + title: strings.report_title, + + tbar: [{ + text:'Do Something' + }], + + columns: [ + { text: "Column1", dataIndex: 'c1', flex: 1 }, + { text: "Column2", dataIndex: 'c2', flex: 1 } + ] + +}); -- cgit v1.2.3